使用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>相关文章：
使用JavaScrip和HTML搭建一个简单的博客网站系统
搭建一个简单的博客网站系统，我们需要创建几个基本的页面和功能：登录、注册、文章发布等。这里我们先实现一个基础版本，包括用户登录、注册以及文章发布的功能。由于这是一个简化版的示例，我们将所有逻辑集成在一个HTML文件中&…...
算法-字符串-76.最小覆盖子串
一、题目 二、思路解析 1.思路： 滑动窗口！！！ 2.常用方法： 无 3.核心逻辑： 1.特殊情况：s或t是否为空字符串 if(snull||tnull)return ""; 2.声明一个字符数组——用于记录对应字符出现…...
Python爬虫之Selenium的应用
【1】Selenium基础介绍 1.什么是selenium？ （1）Selenium是一个用于Web应用程序测试的工具。 （2）Selenium 测试直接运行在浏览器中，就像真正的用户在操作一样。 （3）支持通过各种driv…...
粉丝生产力与开源 AI 智能名片 2+1 链动模式商城小程序的融合创新与价值拓展
摘要：本文聚焦于粉丝生产力在当代文化与商业语境中的独特作用，并深入探讨其与开源 AI 智能名片 21 链动模式商城小程序的有机结合。通过剖析粉丝生产力的多元表现形式、内在驱动机制以及开源 AI 智能名片 21 链动模式商城小程序的功能特性与商业潜力&…...
红黑树（Red-Black Tree）
一、概念 红黑树（Red Black Tree）是一种自平衡的二叉搜索树，通过添加颜色信息来确保在进行插入和删除操作时，树的高度保持在对数级别，从而保证了查找、插入和删除操作的时间复杂度为 O(log n)。这种树可以很好地解决普…...
Cocos 资源加载（以Json为例）
resources 通常我们会把项目中需要动态加载的资源放在 resources 目录下，配合 resources.load 等接口动态加载。你只要传入相对 resources 的路径即可，并且路径的结尾处 不能 包含文件扩展名。 resources.load("Inf", JsonAsset, (error, ass…...
解决 IntelliJ IDEA 启动错误：插件冲突处理
引言 在使用 IntelliJ IDEA 进行开发时，我们可能会遇到各种启动错误。本文将详细介绍一种常见的错误：插件冲突，并提供解决方案。 错误背景 最近，有用户在启动 IntelliJ IDEA 时遇到了一个错误，提示信息为：…...
SQL——DQL分组聚合
分组聚合： 格式： select 聚合函数1(聚合的列),聚合函数2(聚合的列) from 表名 group by 标识列; ###若想方便分辨聚合后数据可在聚合函数前加上标识列（以标识列进行分组） 常见的聚合函数: sum(列名):求和函数 avg(列名)…...
Ripro V5日主题 v8.3 开心授权版 wordpress主题虚拟资源下载站首选主题模板
RiPro主题全新V5版本，是一个优秀且功能强大、易于管理、现代化的WordPress虚拟资源商城主题。支持首页模块化布局和WP原生小工具模块化首页可拖拽设置，让您的网站设计体验更加舒适。同时支持了高级筛选、自带会员生态系统、超全支付接口等众多功能&#…...
分布式搜索引擎之elasticsearch基本使用2
分布式搜索引擎之elasticsearch基本使用2 在分布式搜索引擎之elasticsearch基本使用1中，我们已经导入了大量数据到elasticsearch中，实现了elasticsearch的数据存储功能。但elasticsearch最擅长的还是搜索和数据分析。 所以j接下来，我们研究下…...
java学习-第十五章-IO流（java.io包中）
一、理解 1. 简单而言：流就是内存与存储设备之间传输数据的通道、管道。 2. 分类： (1) 按方向(以JVM虚拟机为参照物)【重点】 输入流：将中的内容读入到中。 输出流：将中的内容写入到中。 (2) 按单位： 字节流…...
企业如何实现数据从源端到消费端的全链路加工逻辑可视化？
要想实现数据加工链路的可视化，血缘图谱无疑是一个有效的工具。血缘图谱能够清晰地展示数据从产生、流转、加工到最终消费的每一个环节，帮助企业直观地理解数据之间的关联和依赖关系，轻松追溯数据来源和去向，并在数据出现问题时快…...
Toxicity of the Commons: Curating Open-Source Pre-Training Data
基本信息 📝 原文链接: https://arxiv.org/abs/2410.22587👥 作者: Catherine Arnett, Eliot Jones, Ivan P. Yamshchikov, Pierre-Carl Langlais🏷️ 关键词: toxicity filtering, language models, data curation📚 分类: 机器…...
Python 单例模式工厂模式和classmethod装饰器
前言： Python作为面向对象的语言，显然支持基本的设计模式。也具备面向对象的语言的基本封装方法：属性、方法、继承、多态等。但是，做为强大的和逐渐发展的语言，python也有很多高级的变种方法，以适应更多的…...
计算机键盘简史 | 键盘按键功能和指法
注：本篇为 “计算机键盘简史 | 键盘按键功能和指法” 相关文章合辑。 英文部分机翻未校。 The Evolution of Keyboards: From Typewriters to Tech Marvels 键盘的演变：从打字机到技术奇迹 Introduction 介绍 The keyboard has journeyed from a humb…...
【数字信号处理】期末综合实验，离散时间信号与系统的时域分析，离散信号 Z 变换，IIR 滤波器的设计与信号滤波，用窗函数法设计 FIR 数字滤波器
关注作者了解更多 我的其他CSDN专栏 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 数字信号处理 光电融合集成电路…...
面试技术点之安卓篇
一、基础 二、高级 三、组件 Android中SurfaceView和TextureView有什么区别？ 参考 Android中SurfaceView和TextureView有什么区别？ 四、三方框架 五、系统源码 六、性能优化...
Windows Terminal ssh到linux
1. windows store安装 Windows Terminal 2. 打开json文件配置 {"$help": "https://aka.ms/terminal-documentation","$schema": "https://aka.ms/terminal-profiles-schema","actions": [{"command": {"ac…...
自适应卡尔曼滤波（包括EKF、UKF、CKF等）的创新思路——该调什么、不该调什么
在调节自适应卡尔曼滤波时，需要注意的参数和矩阵都对滤波器的性能有直接影响。本文给出详细的说明，包括相关公式和 MATLAB 代码示例 文章目录 需要调节的参数1. **过程噪声协方差矩阵 Q Q Q**：2. **测量噪声协方差矩阵 R R R**：…...
SpringBoot项目监听端口接受数据(NIO版)
文章目录 前言服务端相关配置核心代码 客户端 前言 环境： JDK：64位 Jdk1.8 SpringBoot：2.1.7.RELEASE 功能： 使用Java中原生的NIO监听端口接受客户端的数据，并发送数据给客户端。 服务端 相关配置 application.ym…...
QT实战--带行号的支持高亮的编辑器实现(2)
本文主要介绍了第二种实现带行号的支持高亮的编辑器的方式，基于QTextEdit实现的，支持自定义边框，背景，颜色，以及滚动条样式，支持输入变色，复制文本到里面变色，支持替换，是一个纯专业项目使用的编辑器 先上效果图： 1.头文件ContentTextEdit.h #ifndef CONTENT_TEXT_…...
（翻译）网络安全书籍推荐列表
注：对于所有的书籍链接，我都会寻找中文版重新链接，如无中文版，则按原文链接英文版。并且所有书籍名称保留英文名称 这是一个我建立的一个有关计算机安全的书籍列表，它们都是很有用的“计算机安全”这个主题的相关数据。…...
TcpServer 服务器优化之后，加了多线程，对心跳包进行优化
TcpServer 服务器优化之后，加了多线程，对心跳包进行优化 TcpServer.h #ifndef TCPSERVER_H #define TCPSERVER_H#include <iostream> #include <winsock2.h> #include <ws2tcpip.h> #include <vector> #include <map> #…...
黑马程序员Java项目实战《苍穹外卖》Day12
苍穹外卖-day12 课程内容 工作台Apache POI导出运营数据Excel报表 功能实现：工作台、数据导出 工作台效果图： 数据导出效果图： 在数据统计页面点击数据导出：生成Excel报表 1. 工作台 1.1 需求分析和设计 1.1.1 产品原…...
经纬度解析到省市区【开源】
现在业务中有需要解析经纬度到省市区。 按理说可以直接使用高德，百度之类的。 但是老板太抠。于是去找开源项目。找了一圈，数据都太老了，而且有时候编码还不匹配。 所以诞生了这个项目，提供完整的一套省市区编码和定位反解析。…...
bug：uniapp运行到微信开发者工具 白屏 页面空白
1、没有报错信息 2、预览和真机调试都能正常显示，说明代码没错 3、微信开发者工具版本已经是win7能装的最高版本了，1.05版 链接 不打算回滚旧版本 4、解决：最后改调试基础库为2.25.4解决了，使用更高版本的都会报错，所…...
旧版本 MySQL 处理字符表情写入问题
报错信息 新增数据 java.sql.SQLException: Incorrect string value: \xF0\x9F\x91\x8D\xE5\x8F... for column解决方案 老项目，而且是旧版本，且表情不影响业务，直接简单粗暴的过滤掉即可，有还原的需求也可以 toUnicode 转为字…...
vue使用v-if和:class完成条件渲染
1.使用v-if 和v-else 完成主body和暂无数据两个<tbody>标签的条件渲染(注意与v-show效果的区别) 2.v-for完成列表渲染 3.:class完成分数标红的条件控制 删哪个就传哪个的id，基于这个id去过滤掉相同id的项，把剩下的项返回 <td><a click.p…...
Docker：WARNING: Published ports are discarded when using host network mode 解决方法
在Docker中，使用主机网络模式（host network mode）时，容器将共享主机的网络命名空间，这意味着容器将直接使用主机的网络接口和端口。因此，当你尝试通过Docker的发布端口功能（publish a port&…...
音视频入门基础：MPEG2-TS专题（12）—— FFmpeg源码中，把各个transport packet组合成一个Section的实现
一、引言 从《音视频入门基础：MPEG2-TS专题（9）——FFmpeg源码中，解码TS Header的实现》可以知道：FFmpeg源码中使用handle_packet函数来处理一个transport packet（TS包），该函数的前半…...
网站开发技术员/企业邮箱登录
12月23-24日，2021年第十一届DTC数据技术嘉年华将盛大开启，大会采取线上形式，届时，华为云数据库四位技术专家将现身分享GaussDB数据库技术创新、探索实践经验以及未来在技术、生态方向的发展规划。精彩议程抢先知晓，让我…...
网统管公司的网站托管服务怎么样/长尾关键词挖掘精灵官网
Moved to http://blog.tangcs.com/2008/05/26/dell-latitude-d610/转载于:https://www.cnblogs.com/WarrenTang/archive/2008/05/26/1207972.html...
郑州小程序开发多少钱/宁波seo营销
C中的::的作用 2018-06-08 13:47:46 一米阳光-ing 阅读数 8036更多 分类专栏： C/C (1)作用域限定符，当在类体中直接定义函数时，不需要在函数名字的前面加上类名，但是在类体外实现函数定义的时候，必须加上类名并且加…...
b2c外贸网站/怎么制作个人网页
conn.setRequestProperty("Content-Length", String.valueOf(info.getBytes().length));出现错误的代码为：conn.setRequestProperty("Content-Length", String.valueOf(info.length())); 这个应该先将内容转换成bytes再计算它的长度length。改…...
建设论坛网站需要做什么的/推广工具有哪些
本来对Javascript是一点都不懂的，不过看到Jquery有那么多诱人的功能，特别是Jquery UI提供的功能是十分的强大，加上各种各样的插件，Jquery基本上是无所不能。本来一直想做一个类似与iGoogle的拖动，原来不知道如何下手。…...
两峡一峰旅游开发公司官方网站/网络营销是什么工作主要干啥
目录 1、队列的定义 2、队列常见的基本操作 1、队列的定义 队列（Queue）简称队，也是一种操作受限的线性表，只允许在表的一端进行插入，而在表的另一端进行删除。向队列中插入元素称为入队或进队；删除元素称…...