vue+element+admin实现前后端连接

2022.10.19今天我学习了如何使用vue+element+admin实现前后端连接。

一、vue.config.js配置文件

首先在vue.config.js配置文件中的devServer添加proxy，如图：

 devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },   
      proxy:{
        
        [process.env.VUE_APP_BASE_API]:{
          
          // 不需要/api/test
          //换成自己的接口
          target:`http://xxxxxxx`,
          changeOrigin:true,
          pathRewrite:{
            ['^'+process.env.VUE_APP_BASE_API]:''
          }
        }
      },
    // 假数据
    before: require('./mock/mock-server.js')
     
   
  },

二、.env.development配置文件

然后在.env.development配置文件中把VUE_APP_BASE_API的值放空。如图：

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = ''取空
VUE_APP_BASE_API = ''

三、api中添加新的js文件

import request from '@/utils/request'
// 定义一个接口
// params传参
export function ceshi(xxx) {
    return request({
      url: '/api/test',
      method: 'get',
      params:{xxx}
    })
  }


 

四、在view中添加新的展示页面

最主要的一点就是res.data的数据赋值给loadData然后在:data中读取。