开发过程

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页面，主要流程如下：

1. 用户填写学号、姓名、班级、密码、确认密码等表单信息
2. 前端JavaScript验证所有字段是否已填写
3. 验证两次输入的密码是否一致
4. 调用registerUser函数，检查学号是否已被注册
5. 如果学号未注册，将用户信息添加到users数组中
6. 保存更新后的users数组到localStorage
7. 显示注册成功提示，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页面，主要流程如下：

1. 用户输入学号和密码
2. 前端JavaScript验证学号和密码是否已填写
3. 调用loginUser函数，在users数组中查找匹配的用户
4. 如果找到匹配的用户（学号和密码都正确），保存用户信息到current_user
5. 登录成功，跳转到文章列表页面
6. 如果登录失败，显示错误提示信息

核心逻辑代码：

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页面，主要流程如下：

1. 用户填写文章标题和文章内容
2. 前端JavaScript验证标题和内容是否已填写
3. 获取当前登录用户信息，作为文章的作者
4. 如果用户未登录，提示请先登录并跳转到登录页面
5. 调用addArticle函数，创建新的文章对象
6. 生成唯一的文章ID（使用Date.now()时间戳）
7. 将新文章添加到articles数组的开头位置
8. 保存更新后的articles数组到localStorage
9. 显示发布成功提示，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页面，主要流程如下：

1. 页面加载时，调用initMockData函数初始化测试数据
2. 调用renderArticles函数，从localStorage读取所有文章
3. 遍历文章数组，生成文章卡片HTML结构
4. 每张卡片显示文章标题和作者信息
5. 点击卡片时，调用goToDetail函数跳转到文章详情页面，并传递文章ID参数
6. 页面包含轮播图功能，自动轮播展示4张图片
7. 页面左侧包含统计信息侧边栏，显示文章总数

文章数量统计功能：在renderArticles函数中，获取文章列表后，同时更新页面左侧侧边栏的文章总数统计，使用document.getElementById获取统计元素并更新其内容。

侧边栏样式：采用与系统统一的暖橙色主题，包含统计标题和文章数量显示，文章数量使用较大字体突出显示。

5. 文章详情查看

文章详情功能位于articleDetail.html页面，主要流程如下：

1. 页面加载时，从URL参数中获取文章ID
2. 调用getArticleById函数，根据ID查找文章
3. 如果找到文章，显示文章标题、作者和内容
4. 如果未找到文章，显示"文章不存在"的提示信息
5. 提供"返回文章列表"链接

核心逻辑代码：

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页面，主要流程如下：

1. 页面加载时，调用loadUserInfo函数
2. 从localStorage获取当前登录用户信息
3. 显示用户的学号、姓名、班级等信息
4. 性别可以通过下拉框进行修改
5. 点击"刷新信息"按钮，调用updateUserInfo函数保存修改
6. 点击"退出登录"按钮，清除当前用户信息并跳转到登录页面

核心逻辑代码：

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     姓名: 111
                

2. 测试文章

标题: 月落乌啼
内容: 月落乌啼霜满天，江枫渔火对愁眠。姑苏城外寒山寺，夜半钟声到客船。
作者: 李四

标题: 长白山的愤怒
内容: 长白山，位于中国东北地区，是一座著名的火山。山上风景秀丽，冬季白雪皑皑，夏季绿树成荫。
作者: 李五
                

七、样式设计说明

1. 主题色彩

整个博客系统采用暖橙色作为主色调，营造温馨、舒适的阅读氛围：

• 页面背景色：#FAF0E6（淡米色）
• 导航栏背景色：#C47451（暖橙色）
• 表单盒子背景色：#F5DEB3（小麦色）
• 按钮颜色：#FFA500（橙色），悬停时变为#FF8C00（深橙色）
• 文章卡片颜色：#C47451（暖橙色）
• 链接文字颜色：#FFA500（橙色）

2. 布局设计

页面采用响应式布局设计，兼容不同屏幕尺寸的设备：

• 登录/注册/个人信息页面：采用Flexbox左右布局，左侧为装饰图片，右侧为表单内容
• 文章列表页面：上方为轮播图，下方为文章卡片网格布局
• 轮播图：固定高度400px，支持自动轮播和手动切换
• 文章卡片：网格布局，每行显示2个卡片，在小屏幕上自动堆叠为单列

3. 交互效果

• 按钮悬停效果：鼠标悬停时背景色加深，提升用户反馈感
• 表单输入框：适当的内边距和圆角设计，提高输入舒适度
• 错误提示：红色文字显示错误信息，绿色文字显示成功信息
• 轮播图切换：支持左右箭头、指示器和自动轮播三种切换方式