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>

好了，這次分享就到此結束，希望能幫到大家