后端接口
API接口位置以及文件夹详解
将班级 考试 题目 知识点 个人基本信息 系统用户部分 上传部分 以及管理员部分分别归一类
班级部分:
- 加入班级
- 获取班级首页信息
- 获取班级列表
- 获取学生列表
- 获取班级考试信息
- 移除学生
考试部分:
- 教师发布考试
- 我的试卷(教师)
- 获取已经批改的试卷详情
- 获取试卷列表
- 获取试题列表
- 提交试卷
- 获取试卷
- 提交阅卷
- 删除试卷
- 获取待批改试卷
- 老师阅卷 所有班级(课程)页面
- 老师进入 某班级(课程)阅卷页面
- 老师进入 某次考试阅卷页面
题目部分:
- 获取试题列表
- 获取试题详情列表
- 删除试题
- 修改试题
- 添加试题第一步
- 添加试题-判断题
- 添加试题-单选择题
- 添加试题-多选择题
- 添加试题-填空题
- 添加试题-论述题
- 创建试卷第一步
- 创建试卷第二步
知识点:
- 知识点模糊查询
- 知识点列表
- 新增知识点
- 删除知识点
- 修改知识点
- 根据ID查询知识点
个人基本信息:
- 获取收藏列表
- 删除收藏列表
- 添加收藏列表
- 获取错题列表
- 删除错题列表
- 添加错题列表
系统用户部分:
- 获取所有课程
- 修改密码 发邮箱
- 修改密码 验证邮箱
- 修改密码
- 获取公告
- 通过课程码加入班级
- user avatar api
- 获取信息列表
- 删除信息
- 已阅信息
- 我的考试
- user login api
- 获取用户信息
- 退登
管理员部分:
- 管理员获取所有班级信息
- 管理员获取所有教师信息
- 创建班级
- 导入学生
上传部分:
- 上传用户头像
- 上传班级图片
统一API写法
- 使用enum枚举设置后半部分的接口路径
- 封装了axios请求
- 设置请求接口方法
get请求
post请求
put请求
delete请求
Axios封装
位置
详解
前端调用
- 以登录为例 async/await异步调用方法 try..catch处理异常,loading最后设置
状态码
常见的状态码:
100表示数据正在进行请求200表示请求成功,301表示永久重定向,302表示临时重定向,304表示与协商缓存相关400表示请求存在语法错误,401表示未鉴权未登录,403表示权限不足,404表示所请求的域名不存在或被删除500表示服务器错误,503表示服务器拒绝访问请求负载或者正在维护。
跨域
- 跨域是浏览器的同源策略引起的,只要协议/域名/端口三者一个不同就算跨域;
- 本项目采用cors解决跨域
解决方法:
- CORS现今最常用,服务器配置即可(客服端在请求头内会加上Origin在向服务器请求的时候,CORS接收到这个请求之后就会去检测服务器被允许的头部字段,如果该Origin在被允许的范围内就返回数据并在其response头部添加上如下图所示的字段,以上是简单请求,还有复杂请求对于PUT,DELETE这种需要多一次预检OPTIONS,提问:如何才算是复杂请求[请百度])
- 若本地使用代理,前端代理,在webpack里devServer配置;若上线后再nginx里配置代理即可
- JSONP借助浏览器请求JS不跨域的操作进行请求,利用回调函数进行处理,仅支持GET请求
异步请求
项目采用await/async
还有其他:
- 回调函数
- promise
- generator/yield
总结
本文基本将前端部分从配置接口,配置请求方式(axios,还有其他的XMLHttpRequest,ajax,jquery局部请求方式),请求接口,处理响应数据的逻辑理清.若有错误请斧正.