vue-element-admin v4.x入门 & 去除mock请求自己接口 & 跨域问题

最新推荐文章于 2024-09-13 21:30:03 发布

学长带你写毕设

最新推荐文章于 2024-09-13 21:30:03 发布

阅读量2.6w

点赞数 23

分类专栏： vue 文章标签： vue-element-admn 后台模板 vue element

本文链接：https://blog.csdn.net/weiiscomeon/article/details/96695526

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

编写时间： 2019年7月21日

作为一个新手使用本后台模板也是研究了很长时间，期间也是踩了很多坑。

对于新手来说的第一个难点就是对接自己的接口，取消项目本身的mock数据了，毕竟使用这个就是要使用自己的后台数据了

以下是自己使用过程中的一些信息点的记录，主要介绍请求跨域请求自己的接口

0. 首先不用说就是下载项目导入项目了

导入项目后执行安装命令 npm install

1. 准备接口

我们不用项目本身的虚拟数据，当然要准备自身的数据接口啦。

在此我将自己的测试接口放上来供大家测试使用（不保证此接口一直正常使用），下面都将以这个接口为例演示。

http://localhost/admin/test 测试接口，若有返回结果报名我的接口可正常使用，若无返回数据则接口以失效，请自己搭建自己的接口
http://localhost/admin/login 登录接口，参数username和password
http://localhost/admin/info 参数是token

至少需要上面的login和info接口，你才可以成功登录管理界面中

另：上面的接口参数和返回值有一定的格式规范才和vue-element-admin的解析相适应，你可以通过抓包查看数据格式，可以参考下图我提供的：

login接口:

info接口：

2. 修改代码的相关配置

1）打开`vue.config.js` 修改`devServer`下的`proxy` :

将：

proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }

修改为：

 proxy: {
      '/api': {
        target: `http://123.56.156.57`, // 这个链接是要代理到的api地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

这里应该是应该保留process.env.VUE_APP_BASE_API]:这样的写法的，但是我这里一直没调试通，所以我就没想太多，使用了'/api'：{}这样的写法，网友你若调试通了保留process.env.VUE_APP_BASE_API]这样的写法，请在评论区教教小弟我 ~ _ ~

2）将刚才修改的代码的下面的一行代码注释掉

注释掉： after: require('./mock/mock-server.js')，如下图

3）修改`src/main.js`文件

注释掉关于mock的代码，如下图

import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
  mockXHR()
}

[图片上传失败…(image-2ed6cc-1563672511132)]

4) 修改`.env.development`文件

修改:

# base api
VUE_APP_BASE_API = '/dev-api'

修改为：

# base api
VUE_APP_BASE_API = 'http://123.56.156.57/'

友情提醒，.env.production中的这个参数记得也要改（同上），这个文件中的参数是在项目打包后生产阶段下会起作用

5）修改`src/api/user.js`文件

修改login和getInfo如下：

export function login(data) {
  return request({
    url: '/api/admin/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/api/admin/info',
    method: 'get',
    params: { token }
  })
}