koa3-demo/docs/profile-system.md

用户资料系统

概述

用户资料系统允许已登录用户查看和编辑个人信息，包括基本信息、个人简介、头像等，还可以修改密码。

功能特性

1. 基本信息管理

• 用户名（必填）
• 邮箱地址
• 昵称
• 个人简介
• 头像URL

2. 密码管理

• 修改密码（需要验证当前密码）
• 密码强度验证
• 密码确认匹配验证

3. 账户信息展示

• 用户ID
• 注册时间
• 最后更新时间
• 用户角色

技术实现

后端接口

获取用户资料

• 路由: GET /profile
• 权限: 需要登录
• 功能: 显示用户资料页面

更新用户资料

• 路由: POST /profile/update
• 权限: 需要登录
• 参数:

  {
    "username": "用户名",
    "email": "邮箱",
    "name": "昵称",
    "bio": "个人简介",
    "avatar": "头像URL"
  }
  

修改密码

• 路由: POST /profile/change-password
• 权限: 需要登录
• 参数:

  {
    "oldPassword": "当前密码",
    "newPassword": "新密码",
    "confirmPassword": "确认新密码"
  }
  

前端实现

页面模板

• 文件位置: src/views/page/profile/index.pug
• 布局: 使用 page.pug 布局，包含导航栏和页脚

样式文件

• 文件位置: public/css/page/profile.css
• 特性: 响应式设计，现代化UI，表单验证样式

JavaScript交互

• 文件位置: public/js/profile.js
• 功能: 表单提交、实时验证、消息提示、加载状态

数据库结构

用户表字段

CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE,
    password VARCHAR(100) NOT NULL,
    role VARCHAR(100) NOT NULL,
    name VARCHAR(100),           -- 新增：昵称
    bio TEXT,                    -- 新增：个人简介
    avatar VARCHAR(500),         -- 新增：头像URL
    status VARCHAR(20) DEFAULT 'active', -- 新增：用户状态
    phone VARCHAR(100),
    age INTEGER UNSIGNED,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

使用方法

1. 运行数据库迁移

# 添加新的用户资料字段
npm run migrate:latest

2. 访问用户资料页面

• 登录后访问 /profile 路径
• 页面会自动加载当前用户信息

3. 编辑用户资料

• 在基本信息表单中修改相应字段
• 点击"保存更改"提交修改
• 系统会验证必填字段并显示操作结果

4. 修改密码

• 在密码修改表单中输入当前密码和新密码
• 系统会验证密码强度和匹配性
• 修改成功后表单会自动清空

安全特性

1. 身份验证: 所有接口都需要用户登录
2. 密码加密: 使用bcrypt进行密码哈希
3. 输入验证: 前端和后端双重验证
4. SQL注入防护: 使用参数化查询
5. XSS防护: 输出转义和内容安全策略

错误处理

系统提供友好的错误提示：

• 表单验证错误
• 网络请求错误
• 服务器错误
• 权限不足错误

响应式设计

页面支持多种设备：

• 桌面端：双列布局
• 平板端：自适应布局
• 移动端：单列布局，触摸友好

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

开发说明

添加新字段

1. 创建数据库迁移文件
2. 更新UserModel和UserService
3. 修改前端表单和验证逻辑
4. 更新API接口

自定义样式

CSS文件使用模块化设计，可以轻松修改：

• 颜色主题
• 布局结构
• 动画效果
• 响应式断点

扩展功能

可以基于现有架构添加：

• 头像上传
• 社交媒体链接
• 隐私设置
• 通知偏好