开发过程development process一、项目概述这是一个基于Web技术的个人博客系统采用纯前端开发模式无需后端服务器支持。所有数据均存储在浏览器的localStorage中实现了用户注册、登录、文章发布、文章列表展示、文章详情查看和个人信息管理等功能。整个系统包含6个HTML页面1个CSS样式文件和1个JavaScript脚本文件。二、系统架构1. 技术选型HTML5负责页面结构构建使用语义化标签提升可读性CSS3负责页面样式设计采用Flexbox布局实现响应式效果JavaScript负责页面交互逻辑和数据处理localStorage浏览器本地存储实现数据持久化2. 目录结构d:\bolg/ ├── index.html # 登录页面 ├── register.html # 注册页面 ├── articleList.html # 文章列表页面含轮播图 ├── addArticle.html # 创作文章页面 ├── personalInfo.html # 个人信息页面 ├── articleDetail.html # 文章详情页面 ├── development.html # 开发过程文档页面 ├── css/ │ └── style.css # 共享样式文件 ├── js/ │ └── script.js # JavaScript核心逻辑 └── img/ ├── main.jpg # 登录/注册/个人信息页面的装饰图片 ├── lbt1.jpg # 轮播图第1张 ├── lbt2.jpg # 轮播图第2张 ├── lbt3.jpg # 轮播图第3张 └── lbt4.jpg # 轮播图第4张三、数据库设计1. localStorage存储结构本系统使用浏览器的localStorage API进行数据持久化共定义了三个存储键blog_users存储所有注册用户的信息类型为JSON数组blog_articles存储所有发布的文章类型为JSON数组blog_current_user存储当前登录用户的信息类型为JSON对象2. 用户数据结构{ studentId: String, // 学号唯一标识 name: String, // 姓名 className: String, // 班级 password: String, // 密码 gender: String, // 性别默认为男 createdAt: String // 注册时间 }3. 文章数据结构{ id: Number, // 文章ID使用时间戳生成 title: String, // 文章标题 content: String, // 文章内容 author: String, // 作者姓名 authorId: String, // 作者学号 createdAt: String // 创建时间 }四、核心功能实现1. 用户注册功能注册功能位于register.html页面主要流程如下用户填写学号、姓名、班级、密码、确认密码等表单信息前端JavaScript验证所有字段是否已填写验证两次输入的密码是否一致调用registerUser函数检查学号是否已被注册如果学号未注册将用户信息添加到users数组中保存更新后的users数组到localStorage显示注册成功提示1.5秒后自动跳转到登录页面核心逻辑代码function registerUser(userData) { const users getUsers(); const existingUser users.find(u u.studentId userData.studentId); if (existingUser) { return { success: false, message: 该学号已被注册 }; } users.push(userData); saveUsers(users); return { success: true, message: 注册成功 }; }2. 用户登录功能登录功能位于index.html页面主要流程如下用户输入学号和密码前端JavaScript验证学号和密码是否已填写调用loginUser函数在users数组中查找匹配的用户如果找到匹配的用户学号和密码都正确保存用户信息到current_user登录成功跳转到文章列表页面如果登录失败显示错误提示信息核心逻辑代码function loginUser(studentId, password) { const users getUsers(); const user users.find(u u.studentId studentId u.password password); if (user) { setCurrentUser(user); return { success: true, message: 登录成功 }; } return { success: false, message: 学号或密码错误 }; }3. 文章发布功能写文章功能位于addArticle.html页面主要流程如下用户填写文章标题和文章内容前端JavaScript验证标题和内容是否已填写获取当前登录用户信息作为文章的作者如果用户未登录提示请先登录并跳转到登录页面调用addArticle函数创建新的文章对象生成唯一的文章ID使用Date.now()时间戳将新文章添加到articles数组的开头位置保存更新后的articles数组到localStorage显示发布成功提示1.5秒后自动跳转到文章列表页面核心逻辑代码function addArticle(articleData) { const articles getArticles(); const newArticle { id: Date.now(), ...articleData, createdAt: new Date().toLocaleString(zh-CN) }; articles.push(newArticle); saveArticles(articles); return newArticle; }4. 文章列表展示文章列表功能位于articleList.html页面主要流程如下页面加载时调用initMockData函数初始化测试数据调用renderArticles函数从localStorage读取所有文章遍历文章数组生成文章卡片HTML结构每张卡片显示文章标题和作者信息点击卡片时调用goToDetail函数跳转到文章详情页面并传递文章ID参数页面包含轮播图功能自动轮播展示4张图片页面左侧包含统计信息侧边栏显示文章总数文章数量统计功能在renderArticles函数中获取文章列表后同时更新页面左侧侧边栏的文章总数统计使用document.getElementById获取统计元素并更新其内容。侧边栏样式采用与系统统一的暖橙色主题包含统计标题和文章数量显示文章数量使用较大字体突出显示。5. 文章详情查看文章详情功能位于articleDetail.html页面主要流程如下页面加载时从URL参数中获取文章ID调用getArticleById函数根据ID查找文章如果找到文章显示文章标题、作者和内容如果未找到文章显示文章不存在的提示信息提供返回文章列表链接核心逻辑代码function getArticleById(id) { const articles getArticles(); return articles.find(a a.id parseInt(id)); } // 页面加载时执行 const urlParams new URLSearchParams(window.location.search); const id urlParams.get(id); if (id) { const article getArticleById(id); if (article) { document.getElementById(articleTitle).textContent article.title; document.getElementById(articleAuthor).textContent 作者: article.author; document.getElementById(articleContent).textContent article.content; } }6. 个人信息管理个人信息功能位于personalInfo.html页面主要流程如下页面加载时调用loadUserInfo函数从localStorage获取当前登录用户信息显示用户的学号、姓名、班级等信息性别可以通过下拉框进行修改点击刷新信息按钮调用updateUserInfo函数保存修改点击退出登录按钮清除当前用户信息并跳转到登录页面核心逻辑代码function updateUserInfo(userData) { const users getUsers(); const index users.findIndex(u u.studentId userData.studentId); if (index ! -1) { users[index] { ...users[index], ...userData }; saveUsers(users); setCurrentUser(users[index]); return { success: true, message: 信息更新成功 }; } return { success: false, message: 用户不存在 }; } function logout() { localStorage.removeItem(STORAGE_KEY_CURRENT_USER); }五、页面跳转关系系统的页面跳转关系如下登录页面→ 注册页面用户点击去注册链接登录页面→ 文章列表页面登录成功后自动跳转注册页面→ 登录页面注册成功后自动跳转文章列表页面→ 写文章页面用户点击导航栏去写文章链接文章列表页面→ 文章详情页面用户点击文章卡片写文章页面→ 文章列表页面发布文章成功后自动跳转文章详情页面→ 文章列表页面用户点击返回文章列表链接个人信息页面→ 登录页面用户点击退出登录按钮六、测试数据说明为了方便测试和演示系统初始化时会自动创建测试数据1. 测试用户学号: 25软件技术2班 密码: 123456 姓名: 李四 学号: 111 密码: 111 姓名: 111 学号: 3333333 密码: 333 姓名: 3333333 学号: 1111 密码: 111 姓名: 1112. 测试文章标题: 月落乌啼 内容: 月落乌啼霜满天江枫渔火对愁眠。姑苏城外寒山寺夜半钟声到客船。 作者: 李四 标题: 长白山的愤怒 内容: 长白山位于中国东北地区是一座著名的火山。山上风景秀丽冬季白雪皑皑夏季绿树成荫。 作者: 李五七、样式设计说明1. 主题色彩整个博客系统采用暖橙色作为主色调营造温馨、舒适的阅读氛围页面背景色#FAF0E6淡米色导航栏背景色#C47451暖橙色表单盒子背景色#F5DEB3小麦色按钮颜色#FFA500橙色悬停时变为#FF8C00深橙色文章卡片颜色#C47451暖橙色链接文字颜色#FFA500橙色2. 布局设计页面采用响应式布局设计兼容不同屏幕尺寸的设备登录/注册/个人信息页面采用Flexbox左右布局左侧为装饰图片右侧为表单内容文章列表页面上方为轮播图下方为文章卡片网格布局轮播图固定高度400px支持自动轮播和手动切换文章卡片网格布局每行显示2个卡片在小屏幕上自动堆叠为单列3. 交互效果按钮悬停效果鼠标悬停时背景色加深提升用户反馈感表单输入框适当的内边距和圆角设计提高输入舒适度错误提示红色文字显示错误信息绿色文字显示成功信息轮播图切换支持左右箭头、指示器和自动轮播三种切换方式
