admin-template 项目登录模块功能实现(1)

登陆页,发请求到获得服务器响应的整个过程。

1.表单验证(login/index.vue)

    1.1 utils/validate.js  ---> validMobile

2.调用 api/user.js中封装好的api

  2.1 找到axios实例:utils/request.js中获取axios实例

   2.2设置基地址,从环境变量中拼接

3.收集用户的参数,传给上一步中的api。(页面上收集页面的数据项名与接口中一致)

4.经过请求拦截器,添加请求头(添加token, utils/request.js)

5.代理转发(vue.config.js)

6.线上接口/本地接口:后端服务器要启动,mongoDB也要启动;后端收到请求,返回数据

7.经过响应拦截器的处理(utils/request.js)

 7.1判断当前操作是否成功,决定是否axios报错

 7.2简化获取有效数据的写法(脱壳)

8.得到api调用之后结果(login.vue)

9.保存token到vuex(store/modules/user.js)

10.token做持久化(utils/auth.js)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容