vue+element+admin实现前后端连接_vue前端和后端怎么连接起来

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中添加新的展示页面

<template>
  <div>
    <h1 style="text-align: center">天气预报</h1>
 
   
 
    <!-- :data="loadData"存放新数据 -->
    <el-table :data="loadData" style="width: 100%;" >
 
      <el-table-column label="日期" width="180" >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
 
      <el-table-column label="风级" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.direct }}</span>
        </template>
      </el-table-column>
 
      <el-table-column label="气温" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.temperature}}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="天气" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.weather }}</span>
        </template>
      </el-table-column>
 
 
 
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table> 
    <button @click="ceshia()">测试接口</button>
  </div>
</template>
 
<script>
import { ceshi } from "@/api/ceshi";
 
export default {
  data() {
    return {
      loadData: "",
      city: "",
      tableData: [
        {
          city: "xx",
          date: "2022-10-19",
          temperature: "19/23℃",
          weather: "阴转多云",
        },
      ],
      tableData2: [
        {
          city: "xx",
          date: "2022-10-19",
          temperature: "19/23℃",
          weather: "阴转多云",
        },
      ],
    };
  },
  created: {},
  methods: {
    // 调用api的ceshi方法
    ceshia() {
      console.log(1);
      // ceshi()里面传参
      ceshi("xx").then((res) => {
        console.log(res);
        this.loadData = res.data;
        console.log("loadData", this.loadData);
 
        // for循环嵌套for循环
        // for (let i=0 ; i < this.loadData.length; i++) {
        //   console.log(this.loadData[i].class, this.loadData[i].grade);
        //   for(let a=0;a<this.loadData[i].student.length;a++){
        //     console.log(this.loadData[i].student[a].name,this.loadData[i].student[a].age);             
        //   }
          
        // }
      });
    },
  },
};
</script>
 
<style>
button {
  background-color: white;
}
</style>

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