VUE获取后台数据

 

 

这是地址

现在打开vue 引入axios

安装指令：npm install axios --save

在script标签下引入过后

data() {
    return {
      pageData: []
    };
  },
created() {
   var that=this
    axios
      .get("http://localhost:4277/api/market/People/PagedList")
      .then(res => {
        console.log(res);
        this.pageData = res.data.Data;
      })
      .catch(err => {
        console.log(err);
      });
  }

api目录设置

 

 

import { request} from '@/utils/request'

export function PagedList(data) {
    return request('api/market/People/PagedList', 'GET', data);
}

utils目录下的request

import axios from 'axios'
export const request = async (url = '', type = 'GET', data = {}) => {
    console.log("===所请求数据===");
    console.log("请求地址："+url)
    console.log(JSON.stringify(data))
    let result
    type = type.toUpperCase()
    if (type === 'GET') {
        await instance.get(url, { params: data })
            .then(res => {
                result = res.data
            })
    } else if (type === 'POST') {
        await instance.post(url, qs.stringify(data))
            .then(res => {
                result = res.data
            })
            .catch(res => {

            })
    }
    return result
}

 

完成

 

 这里遇到一个坑，

  axios
      .get("http://localhost:4277/api/market/People/PagedList")
      .then(function() {
        console.log(res);
        this.pageData = res.data.Data;
      })
      .catch(err => {
        console.log(err);
      });
  }

 

这是之前的代码，这样根本不显示，原因是function是个内部封闭的函数，this就是function内部本身，无法为pageData赋值，如果要用function，记得先var that=this，然后that.peopleData就可以得到数据了