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`）
```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