首页 > 其他 > 详细

VUE获取后台数据

时间:2019-11-15 11:05:11      阅读:125      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 

这是地址

现在打开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就可以得到数据了

 

VUE获取后台数据

原文:https://www.cnblogs.com/lk2017/p/11864807.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!