前面两节内容我们介绍了如何构建基于ASP.NET Web API的REST风格的服务，虽然demo比较简单，，而且仅仅建了一张数据表，没有涉及较多多的数据表映射关系，但是对于初学者来说这样给入门提供了一个整体思路，先易后难，慢慢上手，毕竟知易行难。
今天这篇文章主要是在前面已经构建好Web API 服务的基础上，介绍下如何使用当下较火的Vue.js来解析Web API，编写一个小界面，完成从后端API到前端展示数据的一个整体demo。
什么是Vue.js
Vue.js 是用于构建交互式的 Web 界面的库。
Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，让编写动态的UI界面变得轻松简单。
Vue.js 特点简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
数据驱动： 自动追踪依赖的模板表达式和计算属性。
组件化： 用解耦、可复用的组件来构造界面。
轻量： ~24kb min+gzip，无依赖。
快速： 精确有效的异步批量 DOM 更新。
模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。
Vue.js 安装
这里我们只介绍使用标签引入，NPM安装和Bower安装小伙伴们可以参考网上的教程。
1.引用方法一：
直接下载并用 标签引入，Vue 会被注册为一个全局变量。
Vue.js 官网下载地址：http://vuejs.org/guide/installation.html
在我们的demo中引用如下：
1
2.引用方法二：
使用其静态资源 CDN 库，在我们的demo中引用如下：
1
什么是vue-resource
vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。
vue-resource特点
vue-resource插件具有以下特点：
体积小：vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
支持主流的浏览器：和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
支持拦截器：拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。
引入vue-resource
同Vue.js的引用一样，有两种引入方法：
1.引用方法一：
在我们的demo中引用如下：
1
2.引用方法二：
使用其静态资源 CDN 库，在我们的demo中引用如下：
1
基本语法
引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。
1
2
3
4
5
6
7// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
上述的then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
// 响应成功回调
}, function(response){
// 响应错误回调
});
// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
// 响应成功回调
}, (response) => {
// 响应错误回调
});
在本demo中使用第二种Lambda写法总是报语法错误，所以仍然采用的是传统写法
下面开始我们本demo前端界面构建的具体介绍。最终完成的效果如下图所示：
Views结构
在WebAPIDemo项目的Views文件夹中，我们可以看到有Home文件夹、Shared文件夹、_ViewStart.cshtml文件，其中，Home文件夹放置网站主页文件，Shared文件夹放置模板文件，_ViewStart.cshtml进行初始化。
在demo中使用的前端框架是BootStrap，这里我们将使用Shared文件夹下的模板文件，因此我们在Home文件夹下的html代码只需要写body部分；当然了，如果你不想使用模板文件，需要引入如下代码：
1
2
3@{
Layout = null;
}
引入js文件
我们本次demo做一个单页界面作为主页，因此需要在Home文件下的Index.cshtml进行代码的编写，现在我们把Index.cshtml下的代码清空。
首先引入js文件，这里我用CDN库的方式引入。需要注意的是引用版本问题，我发现这是一个大坑啊，引用版本不一样导致编译直接出错，所以大家可以采用下面的应用方法：
1
2
编写html代码
在demo中我们实现的是取回Web API返回的值以表格的方式进行展示，同时能够进行添加和删除操作，具体实现的是StudentController.cs中的get、post、delete方法。代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Vue.js demo
姓名学号班级电话操作
{{student.Name}}{{student.StuID}}{{student.Class}}{{student.Phone}}删除
添加学生信息：{{ stu.Name }}
ID
姓名
学号
班级
电话
添加
编写js代码
vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])
除了jsonp以外，另外6种的API名称是标准的HTTP方法。当服务端使用REST API时，客户端的编码风格和服务端的编码风格近乎一致，这可以减少前端和后端开发人员的沟通成本。
本demojs代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
Vue.http.options.emulateJSON = true;
var demo = new Vue({
el: '#app',
data: {
student: [{
name: 'ID',
isKey: true
}, {
name: 'Name'
}, {
name: 'StuID'
}, {
name: 'Class'
}, {
name: 'Phone'
}],
students: [],
apiUrl: 'http://localhost:7874/api/students',
stu: {}
},
ready: function(){
this.getStudents()
},
methods: {
getStudents: function (){
this.$http.get(this.apiUrl, function (data){
this.$set('students', data);
})
},
createStudent: function(){
var vm = this
vm.$http.post(vm.apiUrl, vm.stu)
.then(function(response){
vm.$set('stu', {})
vm.getStudents()
})
},
deleteStudent: function(student){
var vm = this
vm.$http.delete(this.apiUrl + '/' + student.ID)
.then(function(response){
vm.getStudents()
})
}
}
})
ok,至此代码已经写完了，运行查看一下效果，可以实现我们所需的功能。
双向数据绑定
最后我们简单说一下数据绑定，在上面的代码中，有如下代码：
1
2
3
4
5
6
7
8
9添加学生信息：{{ stu.Name }}
ID
姓名
使用v-model这个指令完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变。
以上实例中 会根据输入框 input(标签为“姓名”) 的改变而改变(v-model=”stu.Name”)。
ok,本入门系列暂且告一段落，大家多多参考网上大牛的博客，只有自己趟过的坑才会牢牢记住，知道自己如何避免踩到同样的坑。
2694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
