VUE(2) : vue-element-admin[2] : 配置接口

参考 : 

        vue-element-admin 配置接口请求_姽式、的博客-CSDN博客

        vue delete数组传参_康梓潼的博客-CSDN博客_delete 传数组 

        vue给后端传递json格式的_fengshaopu的博客-CSDN博客_vue给后端传json数据 

1.修改[src/vue.config.js]文件的devServer

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080', // 后端地址
        // target: 'localhost:8080/manage', // 原始地址
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
    //before: require('./mock/mock-server.js')
  }

2.修改[src/.env.development]文件的VUE_APP_BASE_API

VUE_APP_BASE_API = '/api'

注 : 这里的api和第一步的proxy的api保持一致

3.修改[src/utils/request.js]添加请求头

// utlis/request.js
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'

4.修改[src/api/user.js]的url

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

注 :  

1.  这里的user.js只是示例
2. url必须含有/api前缀
3. 正式后端接口为[http://127.0.0.1:8080/user/login]

post json示例

export function pages(data) {
  console.log(data)
  return request({
    url: '/api/vue/user/list',
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data
  })
}

get示例

export function del(data) {
  return request({
    url: '/api/user',
    method: 'get',
    params: data
  })
}