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

401 lines
8.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 学校管理模块 - 快速开始指南
---
## 🚀 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. 创建数据库(如果还没有)
CREATE DATABASE IF NOT EXISTS pangu DEFAULT CHARACTER SET utf8mb4;
# 3. 使用数据库
USE pangu;
# 4. 执行建表SQL
SOURCE /Users/felix/pgWorkSpace/pangu-user-platform/sql/pangu_school.sql;
# 5. 验证表是否创建成功
SHOW TABLES LIKE 'pg_school%';
```
**预期结果:**
```
+---------------------------+
| Tables_in_pangu (pg_school%) |
+---------------------------+
| pg_school |
| pg_school_class |
| pg_school_grade |
+---------------------------+
```
---
### 步骤2: 启动后端服务 (1分钟)
```bash
# 1. 进入项目目录
cd /Users/felix/pgWorkSpace/pangu-user-platform
# 2. 编译项目(如果还没编译)
mvn clean package -DskipTests
# 3. 启动服务
java -jar pangu-admin/target/pangu-admin.jar
# 或者使用IDE直接运行 PanguAdminApplication
```
**预期结果:**
```
____
| _ \ __ _ _ __ __ _ _ _
| |_) / _` | '_ \ / _` | | | |
| __/ (_| | | | | (_| | |_| |
|_| \__,_|_| |_|\__, |\__,_|
|___/
Application started successfully on port 8080
```
---
### 步骤3: 启动前端服务 (1分钟)
```bash
# 1. 进入前端目录
cd /Users/felix/pgWorkSpace/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/
➜ press h + enter to show help
```
---
### 步骤4: 访问系统 (1分钟)
1. **打开浏览器**
```
http://localhost:5173
```
2. **登录系统**
- 用户名admin
- 密码admin123
3. **进入学校管理**
- 点击左侧菜单"基础管理"
- 点击"学校管理"
---
## 🎨 界面预览
### 主界面布局
```
┌─────────────────────────────────────────────────────────┐
│ 学校管理 │
├──────────────┬──────────────────────────────────────────┤
│ │ [新增学校] [刷新] │
│ 区域筛选 │ │
│ ┌────────┐ │ ┌──────────────────────────────────────┐│
│ │ 湖北省 │ │ │ 名称 │ 编码 │ 类型 │ 状态 │ 操作 ││
│ │ ├武汉市 │ │ ├──────────────────────────────────────┤│
│ │ │├武昌区│ │ │ 学校A│ SCH20260001│ 初中│ 正常│ ... ││
│ │ │├汉口区│ │ │ ├七年级 ││
│ │ │└汉阳区│ │ │ │ ├1班 ││
│ │ └黄冈市 │ │ │ │ └2班 ││
│ └────────┘ │ │ └八年级 ││
│ │ └──────────────────────────────────────┘│
└──────────────┴──────────────────────────────────────────┘
```
---
## 📖 基本操作
### 操作1: 新增学校
1. 点击"新增学校"按钮
2. 填写表单:
- 学校名称:武汉市第一中学
- 学校类型:初中
- 所属区域:湖北省 > 武汉市 > 武昌区
- 详细地址武昌区中山路123号
- 联系人:张老师
- 联系电话13800138000
- 状态:正常
3. 点击"确定"
4. 提示"新增成功"
### 操作2: 挂载年级
1. 找到刚创建的学校
2. 点击"挂载年级"按钮
3. 选择年级:
- ☑ 七年级
- ☑ 八年级
- ☑ 九年级
4. 点击"确定"
5. 提示"挂载年级成功"
6. 学校树自动刷新,显示新挂载的年级
### 操作3: 挂载班级
1. 展开学校,找到"七年级"
2. 点击"挂载班级"按钮
3. 选择班级:
- ☑ 1班
- ☑ 2班
- ☑ 3班
4. 点击"确定"
5. 提示"挂载班级成功"
6. 学校树自动刷新,显示新挂载的班级
### 操作4: 编辑学校
1. 找到要编辑的学校
2. 点击"编辑"按钮
3. 修改信息(如:联系电话)
4. 点击"确定"
5. 提示"修改成功"
### 操作5: 删除学校
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/school/tree
# 2. 检查浏览器控制台
# 打开浏览器开发者工具查看Console和Network
# 3. 检查Mock配置
# 确认 src/mock/index.js 已导入 school.js
```
### Q4: 删除学校失败?
**可能原因:**
- 学校下有年级
- 学校下有学生
**解决方法:**
1. 先删除学校下的所有年级
2. 再删除学校
3. 或者查看错误提示,按提示操作
### Q5: 学校树不显示?
**可能原因:**
- 未选择区域
- 该区域下没有学校
- API请求失败
**解决方法:**
1. 点击左侧区域树选择区域
2. 检查该区域是否有学校数据
3. 查看浏览器控制台是否有错误
---
## 📚 进阶使用
### 使用真实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
```
### 查看API文档
1. **启动后端服务**
2. **访问Swagger UI**
```
http://localhost:8080/swagger-ui.html
```
3. **查看学校管理接口**
- 找到"school-controller"
- 查看所有接口文档
### 运行单元测试
```bash
# 1. 进入项目目录
cd /Users/felix/pgWorkSpace/pangu-user-platform
# 2. 运行测试
mvn test -Dtest=SchoolServiceTest
# 3. 查看测试报告
# target/surefire-reports/
```
---
## 🎯 下一步
### 学习更多
1. **技术方案** - 查看 [学校管理模块技术方案_v1.0.md](./学校管理模块技术方案_v1.0.md)
2. **开发计划** - 查看 [完整开发计划_Day3-Day7.md](./完整开发计划_Day3-Day7.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:00*
*开发团队 | pangu*