使用Axios与后端进行数据交互

一、安装

npm install axios

main.js中导入：

import axios from 'axios'

        并且可以在main.js中为axios设置一个baseURL，这样就不用在项目中到处输入网址了，在main.js中设置一遍，其他的地方

// 给axios对象配置一个baseUrl
axios.defaults.baseURL = "http://localhost:8088"

// 将axios作为全局的自定义数学，每个组件可以在内部直接调用$http进行调用axios
Vue.prototype.$http = axios  #vue2的写法

app.config.globalProperties.$http = axios  #vue3写法

二、前端获取后端数据

        下面的created是在组件新创建的时候调用(但是注意其内部的方法却是一个回调方法),注意这里的写法，和一般的函数不一样，他后面用到了=>，这样的写法可以使得this跟父方法属于一个作用域，不然 this.tableData和response不是同一个作用域，这样就拿不到数据。

正确写法
  this.$http.get("/user/findAll").then((response)=>{
        this.tableData = response.data
      })

//错误写法,会报错：Uncaught (in promise) TypeError: Cannot set properties of undefined ( setting 'tableData')

下面代码里的两个this不属于同一个作用域，因此拿不到数据
  this.$http.get("/user/findAll").then(function(response){
        this.tableData = response.data
      })

export default {
    created:function(){
        //注意这一条代码的两个this，必须这样风格的=>写，不然不是一个作用域。
      this.$http.get("/user/findAll").then((response)=>{
        this.tableData = response.data   //tableData是渲染一个表格组件所需的数据变量，见template里面的变量
      })
    },
    data() {
      return {
        tableData: []
      }
    }
}
</script>


//下面的代码是基于element-ui的一个表格的代码，渲染该表格需要给tableData数据变量赋值
<template>
    <div>
    <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="id"
      label="编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="生日">
    </el-table-column>
  </el-table>
    </div>
</template>

然后就将response的data放到了this.tableData变量中，前端就可以对tableData进行渲染。