'考试有我'项目预览
vben官网及预览
开始
获取'考试有我'项目
git clone github.com/h-sina/Onli…
yarn dev
以登录为例分析
- 登录表单完成之后,点击触发login方法,首先验证输入的格式合法性,然后调用写在store里的登录方法
- 在store的登录方法中调用登录的api,传入表单数据
- 对返回的数据进行一个处理,调用store里的登录之后的动作,判断store里储存的token存在与否,若不存在则直接返回空,若存在则继续调用获取用户信息的方法,获取到返回
- 返回用户的信息给登录页面
- 如果要退出则调用logout方法,首先判断token是否存在的,存在就调用登出接口,然后设置token,userinfo为空
过程
- 改logo,改首页信息,登录表单以及换上自己的api登录接口,处理请求逻辑
- 处理工具类里的axios请求逻辑,处理登录之后的权限管理部分
- 处理菜单的路由,更改信息,添加子页面
- 最后写项目页面的业务代码
总结
- 主要是处理登录逻辑,比如整个登录的流程是怎样的,我们需要把个人信息储存在公共区域,[vuex的定义获取修改],那么登录的api请求在此处发起,登录成功调用登录之后的动作方法,判断token是否有效个人信息的获取,是否覆盖,然后返回.
- 以及不同角色呈现不同的菜单,这是登录完成之后的逻辑处理
- 然后是业务代码,核心的是试卷的呈现,学生答题部分,需要自己封装组件,比如判断题,单选题,多选题的组件,然后到考试页面进行引入注册调用,组件的通讯在此使用,通过props.emit进行.其他方式请看组件的通讯方式[vue3]
- 总体的难点如上,其他比如批卷,加入班级,注册(填写邀请码->验证邀请码->验证邮箱->注册成功),组卷, -excel批量导入学生(姓名/学号/个人信息等)返回邀请码.excel,对题目/知识点的一个CRUD
- 涉及跨域(cors后端配置),axios请求,HTTP字段含义,状态码解读,如何封装组件来达到代码的最高复用(组件通信),处理清空数据(封装函数减少代码量,比如清空答题情况,针对默认值不同,给定参数进行覆盖),如何使用vben封装的组件(了解它的封装思想和组件使用方法),打包以及优化策略,服务器的购买,nginx配置缓存以及Gzip压缩,为了专注于开发使用CI/CD托管给github进行打包以及发布至云服务器.最重要的一点,前后端联调以及和成员之间的沟通.
