• 注册
当前位置:1313e > vue >正文

vue-resource的使用,前后端数据交互

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("失败!!");});}}})}

 

转载于:https://www.cnblogs.com/dw3306/p/9862634.html

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 162202241@qq.com 举报,一经查实,本站将立刻删除。

最新评论

欢迎您发表评论:

请登录之后再进行评论

登录
相关推荐