基于JavaScript构建一个动态博客应用

目录

• 一、博客应用概述
• 二、技术栈 
• 三、实现步骤
• 用户注册和登录功能
• 发表新文章功能
• 评论功能
• 发表新文章功能

<!-- 注册表单 -->  
<form id="register-form">  
  <input type="text" id="register-username" placeholder="用户名">  
  <input type="password" id="register-password" placeholder="密码">  
  <button type="submit">注册</button>  
</form>  
  
<!-- 登录表单 -->  
<form id="login-form">  
  <input type="text" id="login-username" placeholder="用户名">  
  <input type="password" id="login-password" placeholder="密码">  
  <button type="submit">登录</button>  
</form>

// 用户数据库（模拟）  
const users = {};  
  
// 注册功能  
document.getElementById('register-form').addEventListener('submit', function(e) {  
  e.preventDefault();  
  const username = document.getElementById('register-username').value;  
  const password = document.getElementById('register-password').value;  
  if (username && password) {  
    users[username] = { password };  
    alert('注册成功！');  
    // 清空表单  
    document.getElementById('register-username').value = '';  
    document.getElementById('register-password').value = '';  
  } else {  
    alert('请输入用户名和密码！');  
  }  
});  
  
// 登录功能  
document.getElementById('login-form').addEventListener('submit', function(e) {  
  e.preventDefault();  
  const username = document.getElementById('login-username').value;  
  const password = document.getElementById('login-password').value;  
  if (users[username] && users[username].password === password) {  
    alert('登录成功！');  
    // 这里可以添加登录成功后的操作，比如显示用户面板等  
  } else {  
    alert('用户名或密码错误！');  
  }  
});

<!-- 发表文章表单 -->  
<form id="new-post-form">  
  <input type="text" id="post-title" placeholder="文章标题">  
  <textarea id="post-content" placeholder="文章内容"></textarea>  
  <button type="submit">发布</button>  
</form>  
  
<!-- 文章列表 -->  
<ul id="post-list"></ul>

// 发表文章功能  
document.getElementById('new-post-form').addEventListener('submit', function(e) {  
  e.preventDefault();  
  const title = document.getElementById('post-title').value;  
  const content = document.getElementById('post-content').value;  
  if (title && content) {  
    const li = document.createElement('li');  
    li.innerHTML = `<h3>${title}</h3><p>${content}</p>`;  
    document.getElementById('post-list').appendChild(li);  
    // 清空表单  
    document.getElementById('post-title').value = '';  
    document.getElementById('post-content').value = '';  
  } else {  
    alert('请输入文章标题和内容！');  
  }  
});

<!-- 评论表单 -->  
<form class="comment-form">  
  <input type="text" class="comment-content" placeholder="评论内容">  
  <button type="submit">提交</button>  
</form>

// 评论功能  
document.addEventListener('DOMContentLoaded', function() {  
  const commentForms = document.getElementsByClassName('comment-form');  
  for (let i

<!-- 发表文章表单 -->  
<form id="new-post-form">  
  <input type="text" id="post-title" placeholder="文章标题">  
  <textarea id="post-content" placeholder="文章内容"></textarea>  
    
  <!-- 图片上传 -->  
  <label for="post-image">文章图片：</label>  
  <input type="file" id="post-image" accept="image/*">  
  <img id="image-preview" src="" alt="预览" style="max-width: 200px; display: none;">  
    
  <!-- 视频上传 -->  
  <label for="post-video">文章视频：</label>  
  <input type="file" id="post-video" accept="video/*">  
  <video id="video-preview" controls style="max-width: 600px; display: none;"></video>  
    
  <button type="submit">发布</button>  
</form>  
  
<!-- 文章列表 -->  
<ul id="post-list"></ul>

// 预览图片和视频  
document.getElementById('post-image').addEventListener('change', function(e) {  
  const file = e.target.files[0];  
  if (file) {  
    const reader = new FileReader();  
    reader.onload = function(event) {  
      document.getElementById('image-preview').src = event.target.result;  
      document.getElementById('image-preview').style.display = 'block';  
    };  
    reader.readAsDataURL(file);  
  }  
});  
  
document.getElementById('post-video').addEventListener('change', function(e) {  
  const file = e.target.files[0];  
  if (file) {  
    const reader = new FileReader();  
    reader.onload = function(event) {  
      document.getElementById('video-preview').src = event.target.result;  
      document.getElementById('video-preview').style.display = 'block';  
    };  
    reader.readAsDataURL(file);  
  }  
});  
  
// 发表文章功能  
document.getElementById('new-post-form').addEventListener('submit', function(e) {  
  e.preventDefault();  
    
  const title = document.getElementById('post-title').value;  
  const content = document.getElementById('post-content').value;  
  const imagePreview = document.getElementById('image-preview');  
  const videoPreview = document.getElementById('video-preview');  
    
  let postHTML = `<h3>${title}</h3><p>${content}</p>`;  
    
  if (imagePreview.style.display === 'block') {  
    postHTML += `<img src="${imagePreview.src}" alt="文章图片">`;  
  }  
    
  if (videoPreview.style.display === 'block') {  
    postHTML += `<video controls>${videoPreview.outerHTML}</video>`;  
  }  
    
  const li = document.createElement('li');  
  li.innerHTML = postHTML;  
  document.getElementById('post-list').appendChild(li);  
    
  // 清空表单和预览  
  document.getElementById('post-title').value = '';  
  document.getElementById('post-content').value = '';  
  imagePreview.style.display = 'none';  
  imagePreview.src = '';  
  videoPreview.style.display = 'none';  
  videoPreview.src = '';  
});