vue-element-admin 的使用记录

vue-element-admin与vue 的学习使用记录(一)
vue-element-admin与vue 的学习使用记录(二)
vue-element-admin与vue 的学习使用记录(三)
vue-element-admin与vue 的学习使用记录(四)

项目场景:

基于vue-element-admin 修改一个blog管理后台。
vue-element-admin 拉取代码后能够正常的运行,现在需要修改登录为自己的API接口

解决方案:

  1. 首先根据官方文档,关闭调mock模拟数据
    在这里插入图片描述

  2. 修改.env.development的api地址
    在这里插入图片描述

  3. 在浏览器中调试可以看出,api请求基础url已经修改,但是具体请求接口仍然没有变
    在这里插入图片描述

  4. 全局搜索找/user/login,结果如下
    在这里插入图片描述

  5. mock模块数据忽略,直接修改api的地址为我们本地地址即可
    在这里插入图片描述

  6. 改为本地系统中的用户名,报错如下,直接进行全局搜索

    在这里插入图片描述

  7. 发现系统默认对登录的用户名有校验,只能允许admin’, 'editor’进行登录,直接取消校验,直接调用callback()
    在这里插入图片描述

  8. 登录成功,返回也成功了,但是没有进行跳转,前端没有报错,我们只能从代码入手,通过request方法进入request.js方法中发现,作者自定义了一套返回响应码的机制,修改为我们自己api对应的响应码就ok了。
    在这里插入图片描述

  9. 再次进行登录,/vue-element-admin/user/info直接404了,看了一下我们的api是没有这个接口的,直接先干掉
    在这里插入图片描述

  10. 仍然报错,在看了一下,尴尬了还不能直接干掉,返回了一堆乱七八糟的数据,突然想到取mock中看看返回的数据长啥子样子 ,根据请求的url在mock中找到了相应的数据,把admin的返回数据copy到getinfo()中,等我们稍后再回过头来处理
    在这里插入图片描述

  11. 登录成功,可以看见内容了,但是404又出来了,/vue-element-admin/transaction/list的url获取失败,继续上一次方法,去mock中看看返回的数据格式。原来就是一个列表数据对象,我们的工程不需要这个模块,直接干掉。注释掉index.vue中TransactionTable的相关内容就好了。
    在这里插入图片描述

  12. 到此为止,我们的不报错的登录就OK了.

  13. 取消掉项目中eslint的代码检查,删除掉package.json中的这2个部分,和package.json所有包含eslint的条目即可
    在这里插入图片描述

  14. 不报错了,但是我们基于JWT的权限验证系统并没有生效,按照项目目前的写法,后台需要返回一个名称为token的令牌,所有我们提供后台返回一个对应token字段令牌,也可以在前端修改返回字段的名称
    在这里插入图片描述

  15. 基于JWT的令牌在请求时,需要带上Bearer 认证头,所以我们加一个在这里插入图片描述

  16. 这样token的存储解决了,那么token的获取呢?当向后台发送消息时,vue-element-admin在request.js中配置了从cookie获取token并发送到服务端的代码,我们需要将默认的X-token修改为自己对应后台需要的token名称。
    在这里插入图片描述

  17. 到此收工,其他接口请求时都会向服务器发送一个名称为Authorization的令牌了。
    在这里插入图片描述

GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐