zoukankan      html  css  js  c++  java
  • 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.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("失败!!");
                        });
                    }
                }
            })
            }
  • 相关阅读:
    洛谷P2402 奶牛隐藏
    BZOJ2150: 部落战争
    HDU 6405 Make ZYB Happy(广义SAM)
    CodeForces
    2019CCPC秦皇岛 E题 Escape(网络流)
    2019CCPC秦皇岛D题 Decimal
    2019CCPC秦皇岛I题 Invoker(DP)
    2019CCPC秦皇岛 F Forest Program
    2019CCPC秦皇岛 J MUV LUV EXTRA(KMP)
    2019CCPC秦皇岛 K MUV LUV UNLIMITED(博弈)
  • 原文地址:https://www.cnblogs.com/dw3306/p/9862634.html
Copyright © 2011-2022 走看看