• vue初级学习--使用 vue-resource 请求数据


    一、导语

      我发现好像我最近几次写文,都是在7号,很恰巧啊~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    二、正文

      最近用vue做一个订单管理混合开发APP,但是遇到个问题,使用了vueResource的post请求,后端做了跨域解决方案,可是前端还是请求不出去,最后才发现,其实还是有问题,其实踩到这个坑,根本原因,是没把form data和request payload的区别搞懂,所以建议大家还是找找资料,搞搞清楚

      1、浅谈 form data和request payload的区别

    • form date  

      get请求,是将请求参数以&方法,拼接在url后面,如:http://www.baidu.com?name=23&password=8888;   

      真正可以明显看出区分的是在post请求上,

      post请求时,头文件 中Content-Type 是默认值  application/x-www-form-urlencoded,参数是放在 form date中的,如下情况

      

    • request payload

        post请求时,头文件 中Content-Type 是默认值  application/json;charset=UTF-8,参数是放在 request payload 中的。

        顺便说下 Content-Type 的参数,大家可以参考:http://tool.oschina.net/commons

      2、解决vue-resource post请求跨域问题

        

    vue提供了一个简单的解决方法,就是  Vue.http.options.emulateJSON = true; 其实等同于在headers中添加  'Content-Type': 'application/x-www-form-urlencoded'

    不过,更稳妥的方法是如此写:

    // 在路由的请求中如此设置
    Vue.http.options.emulateJSON = true
    Vue.http.options.xhr = { withCredentials: true }
    Vue.http.options.crossOrigin = true
    Vue.http.options.emulateHTTP = true
    Vue.http.options.root = URL.Purl // URL.Purl指的是服务器路径

    为何要如此写呢?感谢 我在寻找这问题时,看到的文章:https://segmentfault.com/a/1190000007087934 

     效果如下:

    所以大家可以愉快的这么运行vue-resource了

    getShopCartList() {
            this.$http.post(URL.ShopCartList, {
              openId: this.openId,
              userName: this.userName,
              accessToken: this.accessToken,
              sign: this.sign,
              shopId: this.shopId
            }).then(
              function (response) {
                this.$store.dispatch('update_loading', false)
                let status = response.body.status;
                if (status == 1) {
                  let result = response.body.result;
                  if (result !== null) {
                    this.cartGoodLis = [];
                    result.shopCarts.forEach((shopCartsItem) => {
                      if (shopCartsItem.cartItems.length == 1) {
                        this.cartGoodLis.push(shopCartsItem.cartItems[0])
                      } else {
                        shopCartsItem.cartItems.forEach((shopCartsItems) => {
                          this.cartGoodLis.push(shopCartsItems)
                        })
                      }
                    });
                  } else {
                    this.cartGoodLis = [];
                  }
                } else {
                  // Router.verificationToUser(status, response.body.msg);
                }
              }
            )
          }
    

     三、 结尾

    订单管理APP已经通过测试部的测试了,开心开心~~~~~~~~~~~~~~

  • 相关阅读:
    pat乙级1018
    下拉框多选,出现这种情况,求大神帮我看看
    Filter 过滤器
    拦截器和过滤器区别
    Servlet 生命周期
    cannot simultaneously fetch multiple bags 问题的解决办法
    JPA规范及其它持久层框架
    数据库设计的三大范式
    装饰者模式
    Java 流
  • 原文地址:https://www.cnblogs.com/atjinna/p/7999803.html
Copyright © 2020-2023  润新知