使用JavaScrip和HTML搭建一个简单的博客网站系统

搭建一个简单的博客网站系统，我们需要创建几个基本的页面和功能：登录、注册、文章发布等。这里我们先实现一个基础版本，包括用户登录、注册以及文章发布的功能。由于这是一个简化版的示例，我们将所有逻辑集成在一个HTML文件中，并使用JavaScript来处理前端逻辑。

1.界面展示

在这里插入图片描述

2.功能说明

这个简易博客系统包含以下功能：

登录：用户可以输入邮箱和密码进行登录。
注册：用户可以注册新的账户，需要提供用户名、邮箱和密码。
发表文章：登录后，用户可以在“发表新文章”表单中输入标题和内容，点击“发表”按钮后，文章会显示在下方的文章列表中，同时附带发布时间和发布人信息。
展示文章：所有已发布的文章都会显示在页面底部，按照发布时间倒序排列。

为了增强博客系统的功能，我们将添加以下内容：
5. 登录界面：增加修改密码和根据邮箱找回密码的功能。
6. 博客文章：增加评论和删除功能。

主要新增功能说明：

登录界面：
- 忘记密码：用户可以通过输入邮箱来请求密码重置链接，并跳转到修改密码页面。
- 修改密码：用户可以在此页面输入新密码并保存。
博客文章：
- 评论：每篇文章下方都有一个评论区，用户可以添加评论，评论会显示评论者、时间和内容。
- 删除文章：只有发布人可以删除自己的文章（此处简化为任何人都能删除）。

3.完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>增强版简易博客系统</title><style>body {font-family: Arial, sans-serif;margin: 20px;}.container {max-width: 600px;margin: auto;}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;}input[type="text"],input[type="password"],textarea {width: 100%;padding: 8px;box-sizing: border-box;}button {padding: 10px 15px;background-color: #007BFF;color: white;border: none;cursor: pointer;}button:hover {background-color: #0056b3;}.post {border-bottom: 1px solid #ccc;padding: 10px 0;}.post-author,.post-date {color: #555;}.comment-section {margin-top: 10px;}.comment {margin-left: 20px;padding: 5px 0;}</style>
</head>
<body>
<div class="container"><h1>增强版简易博客系统</h1><div id="login-form" class="form-container"><h2>登录</h2><div class="form-group"><label for="login-email">邮箱:</label><input type="text" id="login-email"></div><div class="form-group"><label for="login-password">密码:</label><input type="password" id="login-password"></div><button onclick="handleLogin()">登录</button><p>还没有账号？<a href="#" onclick="showRegisterForm()">注册</a></p><p><a href="#" onclick="showForgotPasswordForm()">忘记密码？</a></p></div><div id="register-form" class="form-container" style="display:none;"><h2>注册</h2><div class="form-group"><label for="register-name">用户名:</label><input type="text" id="register-name"></div><div class="form-group"><label for="register-email">邮箱:</label><input type="text" id="register-email"></div><div class="form-group"><label for="register-password">密码:</label><input type="password" id="register-password"></div><button onclick="handleRegister()">注册</button><p>已经有账号？<a href="#" onclick="showLoginForm()">登录</a></p></div><div id="forgot-password-form" class="form-container" style="display:none;"><h2>找回密码</h2><div class="form-group"><label for="forgot-email">邮箱:</label><input type="text" id="forgot-email"></div><button onclick="handleForgotPassword()">发送重置链接</button><p><a href="#" onclick="showLoginForm()">返回登录</a></p></div><div id="change-password-form" class="form-container" style="display:none;"><h2>修改密码</h2><div class="form-group"><label for="new-password">新密码:</label><input type="password" id="new-password"></div><button onclick="handleChangePassword()">修改密码</button><p><a href="#" onclick="showLoginForm()">返回登录</a></p></div><div id="blog-form" class="form-container" style="display:none;"><h2>发表新文章</h2><div class="form-group"><label for="post-title">标题:</label><input type="text" id="post-title"></div><div class="form-group"><label for="post-content">内容:</label><textarea id="post-content"></textarea></div><button onclick="publishPost()">发表</button><p><a href="#" onclick="logout()">注销</a></p></div><div id="posts-list" style="margin-top: 20px;"></div>
</div><script>let users = [];let currentUser = null;let posts = [];function showLoginForm() {document.getElementById('login-form').style.display = 'block';document.getElementById('register-form').style.display = 'none';document.getElementById('forgot-password-form').style.display = 'none';document.getElementById('change-password-form').style.display = 'none';document.getElementById('blog-form').style.display = 'none';document.getElementById('posts-list').innerHTML = '';}function showRegisterForm() {document.getElementById('login-form').style.display = 'none';document.getElementById('register-form').style.display = 'block';document.getElementById('forgot-password-form').style.display = 'none';document.getElementById('change-password-form').style.display = 'none';document.getElementById('blog-form').style.display = 'none';document.getElementById('posts-list').innerHTML = '';}function showForgotPasswordForm() {document.getElementById('login-form').style.display = 'none';document.getElementById('register-form').style.display = 'none';document.getElementById('forgot-password-form').style.display = 'block';document.getElementById('change-password-form').style.display = 'none';document.getElementById('blog-form').style.display = 'none';document.getElementById('posts-list').innerHTML = '';}function handleChangePasswordForm() {document.getElementById('login-form').style.display = 'none';document.getElementById('register-form').style.display = 'none';document.getElementById('forgot-password-form').style.display = 'none';document.getElementById('change-password-form').style.display = 'block';document.getElementById('blog-form').style.display = 'none';document.getElementById('posts-list').innerHTML = '';}function handleRegister() {const name = document.getElementById('register-name').value;const email = document.getElementById('register-email').value;const password = document.getElementById('register-password').value;if (!name || !email || !password) {alert('请填写所有字段');return;}const userExists = users.some(user => user.email === email);if (userExists) {alert('该邮箱已被注册');return;}users.push({ name, email, password });alert('注册成功！');showLoginForm();}function handleLogin() {const email = document.getElementById('login-email').value;const password = document.getElementById('login-password').value;const user = users.find(u => u.email === email && u.password === password);if (!user) {alert('邮箱或密码错误');return;}currentUser = user;alert(`欢迎回来，${currentUser.name}！`);showBlogForm();}function handleForgotPassword() {const email = document.getElementById('forgot-email').value;const user = users.find(u => u.email === email);if (!user) {alert('未找到该邮箱的用户');return;}alert('已发送密码重置链接到您的邮箱，请检查邮件。');handleChangePasswordForm();}function handleChangePassword() {const newPassword = document.getElementById('new-password').value;if (!newPassword) {alert('请输入新密码');return;}currentUser.password = newPassword;alert('密码修改成功！');showLoginForm();}function publishPost() {const title = document.getElementById('post-title').value;const content = document.getElementById('post-content').value;if (!title || !content) {alert('请填写所有字段');return;}const post = {title,content,author: currentUser.name,date: new Date().toLocaleString(),comments: [],id: Date.now()};posts.unshift(post);document.getElementById('post-title').value = '';document.getElementById('post-content').value = '';renderPosts();}function addComment(postId) {const commentInput = document.getElementById(`comment-input-${postId}`);const commentText = commentInput.value.trim();if (!commentText) {alert('请输入评论内容');return;}const post = posts.find(p => p.id === postId);if (post) {post.comments.push({text: commentText,author: currentUser ? currentUser.name : '匿名',date: new Date().toLocaleString()});commentInput.value = '';renderPosts();}}function deletePost(postId) {posts = posts.filter(p => p.id !== postId);renderPosts();}function renderPosts() {const postsList = document.getElementById('posts-list');postsList.innerHTML = '';posts.forEach((post, index) => {const postElement = document.createElement('div');postElement.className = 'post';postElement.innerHTML = `<h3>${post.title}</h3><p>${post.content}</p><div class="post-info"><span class="post-author">作者: ${post.author}</span><span class="post-date">时间: ${post.date}</span></div><div class="comment-section"><h4>评论 (${post.comments.length})</h4>${post.comments.map(comment => ` <div class="comment"> <strong>${comment.author}</strong> - ${comment.date}<br> ${comment.text} </div> `).join('')}<div class="form-group"><label for="comment-input-${post.id}">添加评论:</label><input type="text" id="comment-input-${post.id}"><button οnclick="addComment(${post.id})">提交</button></div></div><button οnclick="deletePost(${post.id})" style="margin-top: 10px;">删除文章</button>`;postsList.appendChild(postElement);});}function logout() {currentUser = null;showLoginForm();}function showBlogForm() {document.getElementById('login-form').style.display = 'none';document.getElementById('register-form').style.display = 'none';document.getElementById('forgot-password-form').style.display = 'none';document.getElementById('change-password-form').style.display = 'none';document.getElementById('blog-form').style.display = 'block';renderPosts();}showLoginForm();
</script>
</body>
</html>