vue-element-admin下载

这里下载的是基础模板，要下载完整版的可以去官网下载

# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev

运行项目的过程中可能会报错Error: error:0308010C:digital envelope routines::unsupported，如何解决可以这篇文章
https://blog.csdn.net/2301_76809965/article/details/130456851

如果我们安装的是基础模板，我们运行打开项目后应该是这个样子

vue-element-admin对接后端接口

mock接口信息

根据mock接口信息，我们可卡因发现需要三个关于user的接口，分别是登录，获取用户信息，退出

编写后端接口

我们需要更具mock接口，编写后端接口
后端接口我们用node写比较简单
这是我写好的后端，可以参考一下，或者拿来直接用
https://blog.csdn.net/2301_76809965/article/details/130473758

对接测试

移除mock

在vue.config.js中把这行注释掉

在main.js中把这个也去掉

替换接口

在src/api/user.js中
修改登录，退出，获取用户信息方法
如果你用和我写的那个接口就改成和我一样的即可

修改传参格式
在utils/request.js中
这里加不加都可以，我在后端接口中做了数据处理，可以接收x-www-form-urlencoded传输的数据

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' 
 //修改Content-Type默认数据格式

修改请求baseURL

直接把请求拦截器注释掉，因为获取用户方放它使用了params方式传递token，所有目前的功能暂时用不上

修改响应拦截器，request.js中
由于我们服务端的代码，登录成功后返回的code值为200，把中间那段直接注释掉
如果用的是我那个接口还要在把返回值改为response不要res,因为我后端只写了一层数据

此时我们运行项目测试，发现报错了

这个错误是由于没有遵守 ESLint 的语法，我们只需要在vue.config.js中把 lintOnSave 的值改为false即可

现在我们再次运行项目

没有什么问题
登录后台也没有什么问题

完结！