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.οnlοad=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("失败!!");});}}})}