vue前台调后台接口--笔记

下載axios
yarn add axios
在vue.config裏加入
module.exports = {
  devServer: { // 自定义服务配置
    open:false,
    port:9999,//修改端口號防止與後臺接口發生衝突
    proxy: {
      '/api': {
        target: 'http://localhost:9001',
        pathRewrite: { '^/api': '' },
        ws: true, // 用于支持websocket
        changeOrigin: true, // 用于控制请求值中的host字段
      },
    },
  },
  lintOnSave: false, // 关闭eslint检查
}
在調用接口頁面添加
import axios from "axios";
在export default中
創建一個空數組接受數據
data () {
    return {
      arr:[]
    }
},
將後臺接收到的值傳入空數組
created () {
    axios({
      url:"/api/user/query",//後臺方法
    }).then((res)=>{
      this.arr = res.data.data;//接口定義名如obj,list等
      console.log(this.arr);