发现在学习vue的时候,不论你用的是哪种编程工具,是否使用打包和脚手架,都需要手工的多练习,只能说步步是坑.
在使用的过程中一定要多按F12，多写console.log来看输出的值是什么，非常有助于排错和知道返回的是啥东西
1、在vue的data中定义一个数组pingxuanren，用于存放从服务器端请求来的数据
data:{
pingxuanren:[], //需要评分的人员信息
userinfo:[], //用户自己的身份信息
userxx:‘‘
},
2、然后简单的封装一下axios的post请求，我也是从网上看了很多，抄了一下，自己并不会写。
//封装一下axios的POST请求 axiosPost:function(url,params){ return new Promise((resolve, reject) => { axios({ url: url, method: ‘post‘, data: params, transformRequest: [function(data) { let ret = ‘‘ for(let it in data) { ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘ } return ret }], headers: { ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ } }) .then(res=>{ resolve(res.data); }) }); },
上面的直接复制就能用,返回的数据存储在Promise对像中,只要知道数据返回了就行了.
3、具体的使用中需要注意params的参数,一定要写.then,返回的数据就是res,直接用就可以了.
1 //返回被评分人的信息列表 2 getyunangong:function(){ 3 var yhm=localStorage.getItem(‘yhm‘); 4 5 var url=‘test.ashx?method=yuangong‘; 6 var params={yhm_:yhm}; 7 this.axiosPost(url,params) 8 .then(res=>{ 9 this.pingxuanren=res; 10 }) 11 },
4、pingxueren数组中就已经有数组了，可以读取绑定到页面上了。
再看看原来的写法，乱的一批，每有不同的请求都得重写一次。
axios({ url: ‘test.ashx?method=savedata‘, method: ‘post‘, data: { title_: _title, fen_: mes, yhm:localStorage.getItem(‘yhm‘), tofen:localStorage.getItem(‘tofen‘), }, transformRequest: [function(data) { let ret = ‘‘ for(let it in data) { ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘ } return ret }], headers: { ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ } }) .then(function (response) { var info=response.data; //console.log(info); if (info===401){ alert("保存数据时出错了!"); }else{ alert("保存成功,点击‘确定‘将跳转至主评分页面!"); localStorage.removeItem(‘tofen‘); window.location.href="home.htm"; }