最近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>
好了,这次分享就到此结束,希望能帮到大家