8.9 KiB
8.9 KiB
会员管理模块 - 快速开始指南
5分钟快速上手
本指南帮助你快速了解和使用会员管理模块。
前置条件
环境要求
- ✅ JDK 17+
- ✅ Maven 3.6+
- ✅ MySQL 8.0+
- ✅ Node.js 16+
- ✅ npm 8+
已完成的准备工作
- ✅ 后端代码已完成
- ✅ 前端代码已完成
- ✅ 数据库脚本已准备好
- ✅ Mock数据已配置
快速启动
步骤1: 数据库初始化 (2分钟)
# 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分钟)
# 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分钟)
# 1. 进入前端目录
cd /Users/felix/hbxhWorkSpace/pangu-user-platform/frontend
# 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分钟)
-
打开浏览器
http://localhost:5173 -
登录系统
- 用户名：admin
- 密码：admin123
-
进入会员管理
- 点击左侧菜单"用户管理"
- 点击"会员管理"
界面预览
主界面布局
┌─────────────────────────────────────────────────────────┐
│ 会员管理 │
├─────────────────────────────────────────────────────────┤
│ 搜索区域 │
│ [手机号] [昵称] [身份类型] [状态] [注册时间] [搜索] [重置]│
├─────────────────────────────────────────────────────────┤
│ [新增] │
├─────────────────────────────────────────────────────────┤
│ 数据表格 │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 编号 │ 手机号 │ 昵称 │ 性别 │ 身份 │ 状态 │ 操作 │ │
│ ├──────────────────────────────────────────────────┤ │
│ │ JS... │ 130****6213 │ 张三 │ 男 │ 家长 │ ⚪ │ ... │ │
│ └──────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────┤
│ 分页 │
│ [< 1 2 3 4 5 ... >]│
└─────────────────────────────────────────────────────────┘
基本操作
操作1: 新增家长会员
- 点击"新增"按钮
- 填写表单：
- 手机号：13800138000
- 昵称：张三家长（可不填，自动生成）
- 性别：男
- 出生日期：1980-01-01
- 身份类型：家长
- 状态：正常
- 点击"确定"
- 提示"新增成功"
操作2: 新增教师会员
- 点击"新增"按钮
- 填写表单：
- 手机号：13900139000
- 昵称：李老师
- 性别：女
- 身份类型：教师
- 所属区域：湖北省 > 武汉市 > 武昌区
- 所属学校：选择学校
- 所属年级：选择年级
- 所属班级：选择班级
- 状态：正常
- 点击"确定"
- 提示"新增成功"
操作3: 编辑会员
- 找到要编辑的会员
- 点击"编辑"按钮
- 修改信息（如：昵称）
- 点击"确定"
- 提示"修改成功"
操作4: 重置密码
- 找到要重置密码的会员
- 点击"重置密码"按钮
- 确认操作
- 弹窗显示新密码
- 点击"复制"按钮复制密码
操作5: 绑定学生
- 点击会员的"编辑"按钮
- 在"绑定学生"区域点击"绑定学生"按钮
- 在弹窗中搜索学生
- 勾选要绑定的学生（可多选）
- 点击"确定"
- 提示"绑定成功"
操作6: 解绑学生
- 点击会员的"编辑"按钮
- 在"绑定学生"列表中找到要解绑的学生
- 点击"解绑"按钮
- 确认操作
- 提示"解绑成功"
操作7: 启用/停用会员
- 找到要操作的会员
- 点击状态开关
- 确认操作
- 提示"启用成功"或"停用成功"
操作8: 删除会员
- 找到要删除的会员
- 点击"删除"按钮
- 确认删除
- 提示"删除成功"
注意： 有绑定学生的会员无法删除！
常见问题
Q1: 后端启动失败？
可能原因：
- 数据库连接失败
- 端口被占用
- JDK版本不对
解决方法：
# 1. 检查数据库连接
mysql -u root -p
# 2. 检查端口占用
lsof -i:8080
# 3. 检查JDK版本
java -version # 应该是17+
Q2: 前端启动失败？
可能原因：
- 依赖未安装
- Node版本不对
- 端口被占用
解决方法：
# 1. 重新安装依赖
rm -rf node_modules
npm install
# 2. 检查Node版本
node -v # 应该是16+
# 3. 检查端口占用
lsof -i:5173
Q3: 页面显示空白？
可能原因：
- 后端服务未启动
- API地址配置错误
- Mock数据未加载
解决方法：
# 1. 检查后端服务
curl http://localhost:8080/api/member/list
# 2. 检查浏览器控制台
# 打开浏览器开发者工具，查看Console和Network
# 3. 检查Mock配置
# 确认 src/mock/index.js 已导入 member.js
Q4: 教师信息不显示？
可能原因：
- 身份类型未选择教师
- 表单验证规则问题
解决方法：
- 确认身份类型选择为"教师"
- 检查浏览器控制台是否有错误
Q5: 学生绑定失败？
可能原因：
- 学生模块未完成
- 接口未实现
解决方法：
- 当前版本学生绑定功能使用Mock数据
- 等学生模块完成后集成真实接口
进阶使用
使用真实API（而非Mock）
-
修改配置
// frontend/src/main.js // 注释掉Mock导入 // import './mock' -
配置API地址
// frontend/src/utils/request.js const service = axios.create({ baseURL: 'http://localhost:8080', // 后端地址 timeout: 5000 }) -
重启前端
npm run dev
运行单元测试
# 1. 进入项目目录
cd /Users/felix/hbxhWorkSpace/pangu-user-platform
# 2. 运行测试
mvn test -Dtest=MemberServiceTest
# 3. 查看测试报告
# target/surefire-reports/
下一步
学习更多
- 技术方案 - 查看 会员管理模块技术方案_v1.0.md
- 开发计划 - 查看 会员管理开发计划_v1.0.md
- 开发总结 - 查看 开发总结报告.md
- 验收清单 - 查看 验收清单.md
参与开发
- 阅读代码 - 从Controller开始，逐层深入
- 运行测试 - 确保所有测试通过
- 添加功能 - 参考现有代码风格
- 提交代码 - 遵循团队规范
获取帮助
文档索引
联系方式
**开发团队 | pangu
恭喜！
你已经成功了解了会员管理模块！
接下来可以：
- ✅ 探索更多功能
- ✅ 查看技术文档
- ✅ 参与功能开发
- ✅ 提出改进建议
祝使用愉快！
快速开始指南生成时间：2026-01-31 23:30
开发团队 | pangu