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

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

1.界面展示

2.功能说明

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

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

为了增强博客系统的功能，我们将添加以下内容：

登录界面 ：增加修改密码和根据邮箱找回密码的功能。
博客文章：增加评论和删除功能。

主要新增功能说明：

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

3.完整代码

html 复制代码

<!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>