[开源考试系统前端]vben深入使用(二)

后端接口

API接口位置以及文件夹详解

将班级 考试 题目 知识点 个人基本信息 系统用户部分 上传部分 以及管理员部分分别归一类

班级部分:

1. 加入班级
2. 获取班级首页信息
3. 获取班级列表
4. 获取学生列表
5. 获取班级考试信息
6. 移除学生

考试部分:

1. 教师发布考试
2. 我的试卷（教师）
3. 获取已经批改的试卷详情
4. 获取试卷列表
5. 获取试题列表
6. 提交试卷
7. 获取试卷
8. 提交阅卷
9. 删除试卷
10. 获取待批改试卷
11. 老师阅卷 所有班级（课程）页面
12. 老师进入 某班级（课程）阅卷页面
13. 老师进入 某次考试阅卷页面

题目部分:

1. 获取试题列表
2. 获取试题详情列表
3. 删除试题
4. 修改试题
5. 添加试题第一步
6. 添加试题-判断题
7. 添加试题-单选择题
8. 添加试题-多选择题
9. 添加试题-填空题
10. 添加试题-论述题
11. 创建试卷第一步
12. 创建试卷第二步

知识点:

1. 知识点模糊查询
2. 知识点列表
3. 新增知识点
4. 删除知识点
5. 修改知识点
6. 根据ID查询知识点

个人基本信息:

1. 获取收藏列表
2. 删除收藏列表
3. 添加收藏列表
4. 获取错题列表
5. 删除错题列表
6. 添加错题列表

系统用户部分:

1. 获取所有课程
2. 修改密码 发邮箱
3. 修改密码 验证邮箱
4. 修改密码
5. 获取公告
6. 通过课程码加入班级
7. user avatar api
8. 获取信息列表
9. 删除信息
10. 已阅信息
11. 我的考试
12. user login api
13. 获取用户信息
14. 退登

管理员部分:

1. 管理员获取所有班级信息
2. 管理员获取所有教师信息
3. 创建班级
4. 导入学生

上传部分:

1. 上传用户头像
2. 上传班级图片

统一API写法

1. 使用enum枚举设置后半部分的接口路径
2. 封装了axios请求
3. 设置请求接口方法

get请求

post请求

put请求

delete请求

Axios封装

位置

详解

前端调用

示例

1. 以登录为例 async/await异步调用方法 try..catch处理异常,loading最后设置

状态码

常见的状态码:

1. 100 表示数据正在进行请求
2. 200 表示请求成功，301表示永久重定向，302表示临时重定向，304表示与协商缓存相关
3. 400 表示请求存在语法错误，401表示未鉴权未登录，403表示权限不足，404表示所请求的域名不存在或被删除
4. 500表示服务器错误，503表示服务器拒绝访问请求负载或者正在维护。

跨域

• 跨域是浏览器的同源策略引起的,只要协议/域名/端口三者一个不同就算跨域;
• 本项目采用cors解决跨域

解决方法：

• CORS现今最常用，服务器配置即可(客服端在请求头内会加上Origin在向服务器请求的时候，CORS接收到这个请求之后就会去检测服务器被允许的头部字段，如果该Origin在被允许的范围内就返回数据并在其response头部添加上如下图所示的字段，以上是简单请求，还有复杂请求对于PUT,DELETE这种需要多一次预检OPTIONS,提问:如何才算是复杂请求[请百度])
• 若本地使用代理，前端代理，在webpack里devServer配置;若上线后再nginx里配置代理即可
• JSONP借助浏览器请求JS不跨域的操作进行请求，利用回调函数进行处理，仅支持GET请求

异步请求

项目采用await/async

还有其他:

1. 回调函数
2. promise
3. generator/yield

总结

本文基本将前端部分从配置接口,配置请求方式(axios,还有其他的XMLHttpRequest,ajax,jquery局部请求方式),请求接口,处理响应数据的逻辑理清.若有错误请斧正.