194 lines
6.8 KiB
Markdown
194 lines
6.8 KiB
Markdown
# 教师端登录检查和界面完善方案
|
||
|
||
## 一、现状分析
|
||
|
||
### 1.1 登录功能现状
|
||
- ✅ 登录页面已有角色切换功能（学员/教师）
|
||
- ✅ 登录时传递了`userType`参数
|
||
- ❌ **缺少**：登录后验证用户选择的角色是否与后端返回的角色匹配
|
||
- ❌ **缺少**：路由守卫，根据角色跳转到不同页面
|
||
|
||
### 1.2 角色判断机制
|
||
- 后端通过用户的`remark`字段判断角色（`注册类型:student`/`注册类型:teacher`）
|
||
- 或者通过角色`roleKey`判断（`student`/`teacher`）
|
||
- 前端从`userInfo.role`获取角色（已实现）
|
||
|
||
### 1.3 教师端功能现状
|
||
- ✅ 后端已有教师相关接口：
|
||
- `/study/exam/my-exams` - 获取当前教师的考试列表
|
||
- `/study/exam/teacher/{teacherId}` - 根据教师ID获取考试列表
|
||
- `/study/classUser/allTeachers` - 查询所有教师
|
||
- ❌ **缺少**：教师端专用页面和界面
|
||
- ❌ **缺少**：教师端首页（显示教师相关功能）
|
||
- ❌ **缺少**：教师端考试管理页面
|
||
- ❌ **缺少**：教师端学生管理页面
|
||
|
||
## 二、实现方案
|
||
|
||
### 2.1 登录检查区分老师和学生
|
||
|
||
#### 2.1.1 修改登录逻辑（`bzd/src/pages/login/login.vue`）
|
||
- 登录成功后，验证用户选择的角色（`userRole`）是否与后端返回的角色匹配
|
||
- 如果不匹配，提示错误并阻止登录
|
||
- 如果匹配，根据角色跳转到对应首页
|
||
|
||
#### 2.1.2 修改认证工具（`bzd/src/utils/auth.js`）
|
||
- 在`login`方法中，增加角色验证逻辑
|
||
- 从后端返回的`roles`中提取角色，与前端选择的`userType`进行匹配
|
||
|
||
#### 2.1.3 修改Vuex Store（`bzd/src/store/modules/auth.js`）
|
||
- 在`login` action中，增加角色验证
|
||
- 保存用户角色信息
|
||
|
||
#### 2.1.4 添加路由守卫（`bzd/src/App.vue`）
|
||
- 在`onLaunch`中检查登录状态和角色
|
||
- 根据角色跳转到对应首页
|
||
|
||
### 2.2 完善教师端界面和接口
|
||
|
||
#### 2.2.1 创建教师端首页（`bzd/src/pages/index/teacher-index.vue`）
|
||
**功能模块：**
|
||
- 我的考试管理（创建、编辑、查看考试）
|
||
- 学生管理（查看学生列表、学生成绩）
|
||
- 课程管理（查看我教授的课程）
|
||
- 数据统计（考试统计、学生统计）
|
||
|
||
**接口调用：**
|
||
- `/study/exam/my-exams` - 获取我的考试列表
|
||
- `/study/course/my-courses` - 获取我的课程（需要后端支持教师端）
|
||
- `/study/score/teacher/{teacherId}` - 获取学生成绩（需要后端支持）
|
||
|
||
#### 2.2.2 创建教师端考试管理页面（`bzd/src/pages/exam/teacher-list.vue`）
|
||
**功能：**
|
||
- 显示教师创建的考试列表
|
||
- 可以创建新考试（跳转到创建页面）
|
||
- 可以编辑、删除考试
|
||
- 查看考试详情和统计
|
||
|
||
**接口调用：**
|
||
- `/study/exam/my-exams` - 获取我的考试列表
|
||
- `/study/exam/{id}` - 获取考试详情
|
||
- `/study/exam` - POST创建考试
|
||
- `/study/exam` - PUT更新考试
|
||
- `/study/exam/{id}` - DELETE删除考试
|
||
|
||
#### 2.2.3 创建教师端学生管理页面（`bzd/src/pages/student/list.vue`）
|
||
**功能：**
|
||
- 显示学生列表（按班级分组）
|
||
- 查看学生详情
|
||
- 查看学生成绩
|
||
- 查看学生学习记录
|
||
|
||
**接口调用：**
|
||
- `/study/classUser/students/{classId}` - 获取班级学生列表
|
||
- `/study/score/student/{studentId}` - 获取学生成绩
|
||
- `/study/learningRecord/student/{studentId}` - 获取学生学习记录
|
||
|
||
#### 2.2.4 修改首页（`bzd/src/pages/index/index.vue`）
|
||
- 根据用户角色（`userInfo.role`）显示不同内容
|
||
- 如果是教师，显示教师端首页内容
|
||
- 如果是学生，显示学生端首页内容（现有逻辑）
|
||
|
||
#### 2.2.5 修改个人中心（`bzd/src/pages/profile/profile.vue`）
|
||
- 根据用户角色显示不同的功能菜单
|
||
- 教师端显示：考试管理、学生管理、数据统计等
|
||
- 学生端显示：学习记录、我的考试、我的成绩等（现有逻辑）
|
||
|
||
#### 2.2.6 修改底部导航栏（`bzd/src/components/custom-tabbar/custom-tabbar.vue`）
|
||
- 根据用户角色显示不同的导航项
|
||
- 教师端：首页、考试管理、学生管理、我的
|
||
- 学生端：首页、课程、考核、我的（现有逻辑）
|
||
|
||
### 2.3 创建教师端API接口文件
|
||
|
||
#### 2.3.1 创建教师端API（`bzd/src/api/study/teacher.js`）
|
||
```javascript
|
||
// 获取我的考试列表
|
||
export function getMyExams() {
|
||
return request.get('/study/exam/my-exams')
|
||
}
|
||
|
||
// 获取我的课程列表
|
||
export function getMyCourses() {
|
||
return request.get('/study/course/my-courses')
|
||
}
|
||
|
||
// 获取学生列表（按班级）
|
||
export function getStudentsByClass(classId) {
|
||
return request.get(`/study/classUser/students/${classId}`)
|
||
}
|
||
|
||
// 获取所有学生
|
||
export function getAllStudents() {
|
||
return request.get('/study/classUser/allStudents')
|
||
}
|
||
```
|
||
|
||
## 三、文件清单
|
||
|
||
### 3.1 需要修改的文件
|
||
1. `bzd/src/pages/login/login.vue` - 增加角色验证
|
||
2. `bzd/src/utils/auth.js` - 增加角色验证逻辑
|
||
3. `bzd/src/store/modules/auth.js` - 增加角色验证
|
||
4. `bzd/src/App.vue` - 增加路由守卫
|
||
5. `bzd/src/pages/index/index.vue` - 根据角色显示不同内容
|
||
6. `bzd/src/pages/profile/profile.vue` - 根据角色显示不同菜单
|
||
7. `bzd/src/components/custom-tabbar/custom-tabbar.vue` - 根据角色显示不同导航
|
||
|
||
### 3.2 需要创建的文件
|
||
1. `bzd/src/pages/exam/teacher-list.vue` - 教师端考试管理页面
|
||
2. `bzd/src/pages/student/list.vue` - 教师端学生管理页面
|
||
3. `bzd/src/pages/student/detail.vue` - 学生详情页面
|
||
4. `bzd/src/api/study/teacher.js` - 教师端API接口文件
|
||
|
||
### 3.3 需要配置的文件
|
||
1. `bzd/src/pages.json` - 添加新页面路由配置
|
||
|
||
## 四、实现步骤
|
||
|
||
### 第一步：登录检查区分
|
||
1. 修改`auth.js`，增加角色验证逻辑
|
||
2. 修改`login.vue`，登录后验证角色匹配
|
||
3. 修改`App.vue`，增加路由守卫
|
||
|
||
### 第二步：教师端界面
|
||
1. 创建教师端API文件
|
||
2. 修改首页，根据角色显示不同内容
|
||
3. 创建教师端考试管理页面
|
||
4. 创建教师端学生管理页面
|
||
5. 修改个人中心，根据角色显示不同菜单
|
||
6. 修改底部导航栏，根据角色显示不同导航
|
||
|
||
### 第三步：测试验证
|
||
1. 测试教师登录流程
|
||
2. 测试学生登录流程
|
||
3. 测试角色验证功能
|
||
4. 测试教师端功能
|
||
5. 测试学生端功能
|
||
|
||
## 五、注意事项
|
||
|
||
1. **角色匹配规则**：
|
||
- 前端选择的角色（`userRole`）必须与后端返回的角色（`userInfo.role`）匹配
|
||
- 角色值：`student`（学员）、`teacher`（教师）
|
||
|
||
2. **接口权限**：
|
||
- 教师端接口需要后端支持
|
||
- 确保后端接口有正确的权限验证
|
||
|
||
3. **页面路由**：
|
||
- 教师端和学生端使用不同的页面路由
|
||
- 需要在`pages.json`中配置新页面
|
||
|
||
4. **兼容性**：
|
||
- 保持学生端现有功能不变
|
||
- 教师端功能作为新增功能
|
||
|
||
## 六、后续优化建议
|
||
|
||
1. 添加教师端数据统计功能
|
||
2. 添加教师端消息通知功能
|
||
3. 添加教师端课程管理功能
|
||
4. 优化教师端界面UI/UX
|
||
|