vue-resource的使用,前后端数据交互
1:导入vue与vue-resource的js
js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUgFyQ
注意如果是springBoot项目需要在配置文件中排除静态文件的拦截:
post方法:
写法一:
new Vue({ el:"#app", data:{ tableMsg:"vue+html+bootstrap", userList:[] }, methods:{ }, created: function() { this.$http.post( //请求路由: 'http://localhost:8080/user/data', { //传递的参数: currentPage:1, pageSize:3 // userName:"wuji" }, { headers: { }, emulateJSON: true }).then((response) => { //响应成功回调 this.userList = response.data.list; }).catch(function(response) { //失败回调: console.log(response); }); } })
写法二:
window.onload=function () { var vm =new Vue({ el: "#app", data: { fullName:"张二8", currentPage:1, pageSize:3, // currentPage:1, // pageSize:6, paperlist: [] }, created: function () { //钩子函数 this.userList(); }, methods: { userList: function () { this.$http.post( //请求路由 'http://localhost:8084/crm/user/chooseQuery?access_token=43692aa6-64c6-4e94-9d2a-31642cd8faf6', { //请求参数 fullName:this.fullName, currentPage:this.currentPage, pageSize:this.pageSize }, { 'headers': { 'Content-Type': 'x-www-form-urlencoded' }, emulateJSON: true } ).then(function (ret) { // 成功回调 this.paperlist = ret.data.list; }, function (ret) { // 失败回调 console.log("失败!!"); }); } } }) }