成都企业网站优化服务,做网站必须先买域名吗,做网站宣传,做旅游网站都需要的调查搭建一个简单的博客网站系统#xff0c;我们需要创建几个基本的页面和功能#xff1a;登录、注册、文章发布等。这里我们先实现一个基础版本#xff0c;包括用户登录、注册以及文章发布的功能。由于这是一个简化版的示例#xff0c;我们将所有逻辑集成在一个HTML文件中我们需要创建几个基本的页面和功能登录、注册、文章发布等。这里我们先实现一个基础版本包括用户登录、注册以及文章发布的功能。由于这是一个简化版的示例我们将所有逻辑集成在一个HTML文件中并使用JavaScript来处理前端逻辑。
1.界面展示 2.功能说明
这个简易博客系统包含以下功能
登录用户可以输入邮箱和密码进行登录。注册用户可以注册新的账户需要提供用户名、邮箱和密码。发表文章登录后用户可以在“发表新文章”表单中输入标题和内容点击“发表”按钮后文章会显示在下方的文章列表中同时附带发布时间和发布人信息。展示文章所有已发布的文章都会显示在页面底部按照发布时间倒序排列。
为了增强博客系统的功能我们将添加以下内容 5. 登录界面增加修改密码和根据邮箱找回密码的功能。 6. 博客文章增加评论和删除功能。
主要新增功能说明 登录界面 忘记密码用户可以通过输入邮箱来请求密码重置链接并跳转到修改密码页面。修改密码用户可以在此页面输入新密码并保存。 博客文章 评论每篇文章下方都有一个评论区用户可以添加评论评论会显示评论者、时间和内容。删除文章只有发布人可以删除自己的文章此处简化为任何人都能删除。
3.完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title增强版简易博客系统/titlestylebody {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[typetext],input[typepassword],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 classcontainerh1增强版简易博客系统/h1div idlogin-form classform-containerh2登录/h2div classform-grouplabel forlogin-email邮箱:/labelinput typetext idlogin-email/divdiv classform-grouplabel forlogin-password密码:/labelinput typepassword idlogin-password/divbutton onclickhandleLogin()登录/buttonp还没有账号a href# onclickshowRegisterForm()注册/a/ppa href# onclickshowForgotPasswordForm()忘记密码/a/p/divdiv idregister-form classform-container styledisplay:none;h2注册/h2div classform-grouplabel forregister-name用户名:/labelinput typetext idregister-name/divdiv classform-grouplabel forregister-email邮箱:/labelinput typetext idregister-email/divdiv classform-grouplabel forregister-password密码:/labelinput typepassword idregister-password/divbutton onclickhandleRegister()注册/buttonp已经有账号a href# onclickshowLoginForm()登录/a/p/divdiv idforgot-password-form classform-container styledisplay:none;h2找回密码/h2div classform-grouplabel forforgot-email邮箱:/labelinput typetext idforgot-email/divbutton onclickhandleForgotPassword()发送重置链接/buttonpa href# onclickshowLoginForm()返回登录/a/p/divdiv idchange-password-form classform-container styledisplay:none;h2修改密码/h2div classform-grouplabel fornew-password新密码:/labelinput typepassword idnew-password/divbutton onclickhandleChangePassword()修改密码/buttonpa href# onclickshowLoginForm()返回登录/a/p/divdiv idblog-form classform-container styledisplay:none;h2发表新文章/h2div classform-grouplabel forpost-title标题:/labelinput typetext idpost-title/divdiv classform-grouplabel forpost-content内容:/labeltextarea idpost-content/textarea/divbutton onclickpublishPost()发表/buttonpa href# onclicklogout()注销/a/p/divdiv idposts-list stylemargin-top: 20px;/div
/divscriptlet 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}/h3p${post.content}/pdiv classpost-infospan classpost-author作者: ${post.author}/spanspan classpost-date时间: ${post.date}/span/divdiv classcomment-sectionh4评论 (${post.comments.length})/h4${post.comments.map(comment div classcomment strong${comment.author}/strong - ${comment.date}br ${comment.text} /div ).join()}div classform-grouplabel forcomment-input-${post.id}添加评论:/labelinput typetext idcomment-input-${post.id}button οnclickaddComment(${post.id})提交/button/div/divbutton οnclickdeletePost(${post.id}) stylemargin-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
