guoyu/log/教师端登录和界面完善方案.md

教师端登录检查和界面完善方案

一、现状分析

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）

// 获取我的考试列表
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