# 会员管理模块 - 快速开始指南 --- ## 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/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分钟) 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 // frontend/src/main.js // 注释掉Mock导入 // import './mock' ``` 2. **配置API地址** ```javascript // frontend/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*