vue-resourceJS发送POST跨域请求.net后台Json数据

最近vueJS比较火，就想尝试用Vue做个项目练练手，正好近期有两个小项目需要做，就上手研究了一下，而如题所说的场景应该是大家平时开发中会经常遇到的场景

奈何网上没有一个地方能够直接给出完整的解决方案，好在最终经过在大量搜索查阅，东平西凑，终于实现了

废话不多说，我直接贴出从前端到后台的一整套代码，避免大家再去踩坑

1.后台代码，这里我用的是.net的web api作为后台数据服务，代码如下

        [HttpPost]
        public HttpResponseMessage QueryRecord(HttpRequestMessage request)
        {
            string postStr = request.Content.ReadAsStringAsync().Result;
            if (postStr.Length==0)
            {
                return new HttpResponseMessage(HttpStatusCode.BadRequest)
                {
                    Content = new StringContent("参数为空")
                };
            }

            ViewResponse viewResponse = new ViewResponse();//自定义最终返回对象

-----业务逻辑代码省略-----
            
            viewResponse.data = recordList;

            HttpResponseMessage response = Request.CreateResponse<ViewResponse>(HttpStatusCode.OK, viewResponse);
            return response;
        }

另外，如果最终你们和我示例中一样，都是需要返回一个Json数据对象的话，则需要对该对象的实体类说明加上[DataContract]和[DataMember]属性，如下　 

    [DataContract]
    public class ViewResponse<T>
    {
        [DataMember]
        public string code { get; set; }
        [DataMember]
        public string msg { get; set; }
        [DataMember]
        public T data { get; set; }
    }

 

由于是跨域请求，则必须还要对后台进行设置，允许请求跨域访问

.net后台设置允许跨域很简单，只需要在web.config中加入下面配置即可

<system.webServer>
    <!--允许跨域请求-->
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
        <add name="Access-Control-Allow-Headers" value="x-requested-with"/>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
    <!--end 允许跨域请求-->
  </system.webServer>

 

2.前端页面，使用vue.min.js和vue-resource.min.js实现后台数据请求和页面数据绑定

首先，引入这两个JS文件

<script type="text/javascript" src="Content/js/vue.min.js"></script>
    <script type="text/javascript" src="Content/js/vue-resource.min.js"></script>

然后开始使用vue-resource的$http.post发送POST跨域请求

<script type="text/javascript">
        var vm = new Vue({
            el: '#vueapp',      //div的id
            data: {
                items: []    //自定数据接收变量
            },
            http: {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            },
            methods: {
                clickButton: function () {
                    //vue-resource发送跨域请求
                    var url = 'http://www.xxxx.com/api/oooo/xxxx';
                    var username = $("#userName").val();
                    var jobno = $("#jobNo").val();
                    var sdate = $("#startDate").val() + " 0:00:00";
                    var edate = $("#endDate").val() + " 23:59:59";

                    var sendData = {
                        "Name": username, "JobNo": jobno, "StartDate": sdate, "EndDate": edate
                    };
                    this.$http.post(url, JSON.stringify(sendData), { emulateJSON: true })
                     .then(function (res) {
                         //成功回调
                         //console.log(res.data);
                         //alert(JSON.stringify(res.data));
                         vm.items = res.data.data;
                     }, function () {
                         // 失败回调
                         alert("查询失败，请检查网络");
                     });
                }
            },
            created: function () { //created方法，页面初始调用
            }
        });
    </script>

　　这里有几个要注意的地方

（1）要提前在Vue对象下的data属性中定义请求后台成功后返回的数据存放对象，示例中我定义了一个items数组，用来放返回数据中的列表结果

（2）this.$http.post中启用{ emulateJSON: true }，则Vue对象下的http属性中headers的设置为'Content-Type': 'application/x-www-form-urlencoded'

（3）如果请求入参需要传Json数据的话，在创建完示例中的入参Json对象SendData后，还需要用JSON.stringify方法将其转为Json字符串才可以

（4）最终返回的后台数据，都在返回对象的data里面，示例中，我的后台返回数据都在res.data里

接下来就是最终的数据绑定了，这里数据绑定我采用当下比较流行的Vue，即列表数据绑定通过v-for语法糖轻松搞定

                    <div class="aui-coupon-two" v-for="item in items">
                        <div class="aui-coupon-three">
                            <div class="aui-coupon-four">
                                <div class="aui-flex">
                                    <div class="aui-flex-title">
                                        <h1><em>{{item.CheckDate}}</em></h1>
                                        <p>{{item.Week}}</p>
                                    </div>
                                    <div class="aui-flex-box">
                                        <h2  v-for="time in item.CheckTimeList">{{time}}</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

好了，这次分享就到此结束，希望能帮到大家