使用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>
原文地址：https://blog.csdn.net/weixin_41312759/article/details/144402545
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！