vue-element-admin

基于vue-admin-template的二次开发(第一篇)

2020-09-02  本文已影响0人  公司首席前端

项目背景:

公司之前没有招前端人员,前端界面都是后端人员使用Bootstrap、jQuery等插件写的,维护或者改动都很麻烦,无意间看到vue-element-admin这个框架,学习了一段时间后准备将公司项目重构到vue上。

流程:

1.框架的下载及安装环境

https://panjiachen.github.io/vue-element-admin-site/zh/参考官网教程

2.修改接口

①找到根目录下的.env.development文件,修改VUE_APP_BASE_API,从默认的值修改为自己的接口即可

②找到src/api/user.js,修改登陆接口(此次项目只有登录接口,没有获取信息及退出登录接口,所以这两个接口默认不变)

③找到src/utils/request.js,先修改默认token名字,改为后端返回的token名字

修改response的内容

④找到src/views/login/index.vue,根据接口返回的登录账户密码来修改,我这里是phone是账号,password是密码,对着修改就行

⑤有个默认的校验账户和密码的规则,把el-table里的rules删掉了就行或者去src/utils/validate.js里改成自己想要的就行了

⑥找到src/store/modules/user.js,和之前修改登陆接口的账户密码一样

因为没有获取登陆信息和退出接口,就自己写了,有接口的调用对应接口就行

3.注意事项

①这部分修改是在vue-admin-template的master分支上改的,如果要在permission-control上改,这样操作会卡死,目前不清楚为啥。

②目前大部分后台管理系统都会根据不同的账户角色返回不同的路由列表,所以permission-control版本还是挺重要的,下一篇更新权限版本如何登陆。

上一篇 下一篇

猜你喜欢

热点阅读