# 用户资料系统

## 概述

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

## 功能特性

### 1. 基本信息管理
- 用户名（必填）
- 邮箱地址
- 昵称
- 个人简介
- 头像URL

### 2. 密码管理
- 修改密码（需要验证当前密码）
- 密码强度验证
- 密码确认匹配验证

### 3. 账户信息展示
- 用户ID
- 注册时间
- 最后更新时间
- 用户角色

## 技术实现

### 后端接口

#### 获取用户资料
- **路由**: `GET /profile`
- **权限**: 需要登录
- **功能**: 显示用户资料页面

#### 更新用户资料
- **路由**: `POST /profile/update`
- **权限**: 需要登录
- **参数**: 
  ```json
  {
    "username": "用户名",
    "email": "邮箱",
    "name": "昵称",
    "bio": "个人简介",
    "avatar": "头像URL"
  }
  ```

#### 修改密码
- **路由**: `POST /profile/change-password`
- **权限**: 需要登录
- **参数**:
  ```json
  {
    "oldPassword": "当前密码",
    "newPassword": "新密码",
    "confirmPassword": "确认新密码"
  }
  ```

### 前端实现

#### 页面模板
- 文件位置: `src/views/page/profile/index.pug`
- 布局: 使用 `page.pug` 布局，包含导航栏和页脚

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

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

## 数据库结构

### 用户表字段
```sql
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. 运行数据库迁移
```bash
# 添加新的用户资料字段
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文件使用模块化设计，可以轻松修改：
- 颜色主题
- 布局结构
- 动画效果
- 响应式断点

### 扩展功能
可以基于现有架构添加：
- 头像上传
- 社交媒体链接
- 隐私设置
- 通知偏好