pangu-user-platform/docs/05-模块技术方案/会员管理/快速开始.md

# 会员管理模块 - 快速开始指南

---

## 5分钟快速上手

本指南帮助你快速了解和使用会员管理模块。

---

## 前置条件

### 环境要求

- ✅ JDK 17+
- ✅ Maven 3.6+
- ✅ MySQL 8.0+
- ✅ Node.js 16+
- ✅ npm 8+

### 已完成的准备工作

- ✅ 后端代码已完成
- ✅ 前端代码已完成
- ✅ 数据库脚本已准备好
- ✅ Mock数据已配置

---

## 快速启动

### 步骤1: 数据库初始化 (2分钟)

```bash
# 1. 登录MySQL
mysql -u root -p

# 2. 使用数据库
USE pangu;

# 3. 执行建表SQL
SOURCE /Users/felix/hbxhWorkSpace/pangu-user-platform/sql/pangu_member.sql;

# 4. 验证表是否创建成功
SHOW TABLES LIKE 'pg_member';
```

**预期结果：**
```
+-------------------------+
| Tables_in_pangu (pg_member) |
+-------------------------+
| pg_member               |
+-------------------------+
```

---

### 步骤2: 启动后端服务 (1分钟)

```bash
# 1. 进入项目目录
cd /Users/felix/hbxhWorkSpace/pangu-user-platform

# 2. 编译项目（如果还没编译）
mvn clean package -DskipTests

# 3. 启动服务
java -jar pangu-admin/target/pangu-admin.jar

# 或者使用IDE直接运行 PanguApplication
```

---

### 步骤3: 启动前端服务 (1分钟)

```bash
# 1. 进入前端目录
cd /Users/felix/hbxhWorkSpace/pangu-user-platform/pangu-ui

# 2. 安装依赖（如果还没安装）
npm install

# 3. 启动开发服务器
npm run dev
```

**预期结果：**
```
  VITE v7.3.1  ready in 1234 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/
```

---

### 步骤4: 访问系统 (1分钟)

1. **打开浏览器**
   ```
   http://localhost:5173
   ```

2. **登录系统**
   - 用户名：admin
   - 密码：admin123

3. **进入会员管理**
   - 点击左侧菜单"用户管理"
   - 点击"会员管理"

---

## 界面预览

### 主界面布局

```
┌─────────────────────────────────────────────────────────┐
│  会员管理                                                │
├─────────────────────────────────────────────────────────┤
│  搜索区域                                                │
│  [手机号] [昵称] [身份类型] [状态] [注册时间] [搜索] [重置]│
├─────────────────────────────────────────────────────────┤
│  [新增]                                                  │
├─────────────────────────────────────────────────────────┤
│  数据表格                                                │
│  ┌──────────────────────────────────────────────────┐  │
│  │ 编号 │ 手机号 │ 昵称 │ 性别 │ 身份 │ 状态 │ 操作 │  │
│  ├──────────────────────────────────────────────────┤  │
│  │ JS... │ 130****6213 │ 张三 │ 男 │ 家长 │ ⚪ │ ... │  │
│  └──────────────────────────────────────────────────┘  │
├─────────────────────────────────────────────────────────┤
│  分页                                                    │
│                                      [< 1 2 3 4 5 ... >]│
└─────────────────────────────────────────────────────────┘
```

---

## 基本操作

### 操作1: 新增家长会员

1. 点击"新增"按钮
2. 填写表单：
   - 手机号：13800138000
   - 昵称：张三家长（可不填，自动生成）
   - 性别：男
   - 出生日期：1980-01-01
   - 身份类型：家长
   - 状态：正常
3. 点击"确定"
4. 提示"新增成功"

### 操作2: 新增教师会员

1. 点击"新增"按钮
2. 填写表单：
   - 手机号：13900139000
   - 昵称：李老师
   - 性别：女
   - 身份类型：教师
   - 所属区域：湖北省 > 武汉市 > 武昌区
   - 所属学校：选择学校
   - 所属年级：选择年级
   - 所属班级：选择班级
   - 状态：正常
3. 点击"确定"
4. 提示"新增成功"

### 操作3: 编辑会员

1. 找到要编辑的会员
2. 点击"编辑"按钮
3. 修改信息（如：昵称）
4. 点击"确定"
5. 提示"修改成功"

### 操作4: 重置密码

1. 找到要重置密码的会员
2. 点击"重置密码"按钮
3. 确认操作
4. 弹窗显示新密码
5. 点击"复制"按钮复制密码

### 操作5: 绑定学生

1. 点击会员的"编辑"按钮
2. 在"绑定学生"区域点击"绑定学生"按钮
3. 在弹窗中搜索学生
4. 勾选要绑定的学生（可多选）
5. 点击"确定"
6. 提示"绑定成功"

### 操作6: 解绑学生

1. 点击会员的"编辑"按钮
2. 在"绑定学生"列表中找到要解绑的学生
3. 点击"解绑"按钮
4. 确认操作
5. 提示"解绑成功"

### 操作7: 启用/停用会员

1. 找到要操作的会员
2. 点击状态开关
3. 确认操作
4. 提示"启用成功"或"停用成功"

### 操作8: 删除会员

1. 找到要删除的会员
2. 点击"删除"按钮
3. 确认删除
4. 提示"删除成功"

**注意：** 有绑定学生的会员无法删除！

---

## 常见问题

### Q1: 后端启动失败？

**可能原因：**
- 数据库连接失败
- 端口被占用
- JDK版本不对

**解决方法：**
```bash
# 1. 检查数据库连接
mysql -u root -p

# 2. 检查端口占用
lsof -i:8080

# 3. 检查JDK版本
java -version  # 应该是17+
```

### Q2: 前端启动失败？

**可能原因：**
- 依赖未安装
- Node版本不对
- 端口被占用

**解决方法：**
```bash
# 1. 重新安装依赖
rm -rf node_modules
npm install

# 2. 检查Node版本
node -v  # 应该是16+

# 3. 检查端口占用
lsof -i:5173
```

### Q3: 页面显示空白？

**可能原因：**
- 后端服务未启动
- API地址配置错误
- Mock数据未加载

**解决方法：**
```bash
# 1. 检查后端服务
curl http://localhost:8080/api/member/list

# 2. 检查浏览器控制台
# 打开浏览器开发者工具，查看Console和Network

# 3. 检查Mock配置
# 确认 src/mock/index.js 已导入 member.js
```

### Q4: 教师信息不显示？

**可能原因：**
- 身份类型未选择教师
- 表单验证规则问题

**解决方法：**
1. 确认身份类型选择为"教师"
2. 检查浏览器控制台是否有错误

### Q5: 学生绑定失败？

**可能原因：**
- 学生模块未完成
- 接口未实现

**解决方法：**
1. 当前版本学生绑定功能使用Mock数据
2. 等学生模块完成后集成真实接口

---

## 进阶使用

### 使用真实API（而非Mock）

1. **修改配置**
   ```javascript
   // pangu-ui/src/main.js
   // 注释掉Mock导入
   // import './mock'
   ```

2. **配置API地址**
   ```javascript
   // pangu-ui/src/utils/request.js
   const service = axios.create({
     baseURL: 'http://localhost:8080', // 后端地址
     timeout: 5000
   })
   ```

3. **重启前端**
   ```bash
   npm run dev
   ```

### 运行单元测试

```bash
# 1. 进入项目目录
cd /Users/felix/hbxhWorkSpace/pangu-user-platform

# 2. 运行测试
mvn test -Dtest=MemberServiceTest

# 3. 查看测试报告
# target/surefire-reports/
```

---

## 下一步

### 学习更多

1. **技术方案** - 查看 [会员管理模块技术方案_v1.0.md](./会员管理模块技术方案_v1.0.md)
2. **开发计划** - 查看 [会员管理开发计划_v1.0.md](./会员管理开发计划_v1.0.md)
3. **开发总结** - 查看 [开发总结报告.md](./开发总结报告.md)
4. **验收清单** - 查看 [验收清单.md](./验收清单.md)

### 参与开发

1. **阅读代码** - 从Controller开始，逐层深入
2. **运行测试** - 确保所有测试通过
3. **添加功能** - 参考现有代码风格
4. **提交代码** - 遵循团队规范

---

## 获取帮助

### 文档索引

- [README.md](./README.md) - 文档总览
- [开发总结报告.md](./开发总结报告.md) - 开发总结
- [快速开始.md](./快速开始.md) - 本文档

### 联系方式

**开发团队 | pangu

---

## 恭喜！

你已经成功了解了会员管理模块！

接下来可以：
- ✅ 探索更多功能
- ✅ 查看技术文档
- ✅ 参与功能开发
- ✅ 提出改进建议

**祝使用愉快！**

---

*快速开始指南生成时间：2026-01-31 23:30*  
*开发团队 | pangu*