前言
在前面四篇文章中，我们搭建了一个纯粹的客户端应用，数据保存在客户端内存中。同时，对于表格和表单的自动化，进行了一些尝试。
正常的生产环境中，数据通常存放在数据服务器上，前端需要完成的工作还包括，访问后端API接口，实现真正的CRUD。而实现此功能的一大利器则是AJAX。
这篇文章是从前端到后端的一个分界线，因此我们将尽量减少复杂度，希望让前端和后端都能看懂，你的同伴需要什么。
Axios 介绍
Axios 开源代码在 Github。
Promise based HTTP client for the browser and node.js
运行在浏览器及node.js上，基于Promise的HTTP 客户端工具
项目改造
前端改造
- HTML
受益于Vue的组件化编程，我们无需对HTML文件进行任何修改，当然如果你还没有加入Axios的引用，那么此时需要在HTML中添加Axios引用。
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
- Javascript
data: {
title: '联系人',
columns: [{
name: 'id',
iskey: true
}, {
name: 'name',
caption: '姓名',
}, {
name: 'birthday',
caption: "出生日期",
type: 'date'
}, {
name: 'phone',
caption: '电话'
}],
row: {
id: 0,
name: '',
birthday: '',
phone: ''
},
list: [{
id: 1,
name: '深圳有事Q我',
birthday: '2000-09-10',
phone: '2345678'
}, {
id: 2,
name: '上海没事别烦我',
birthday: '1980-01-22',
phone: '1293587023'
}, {
id: 3,
name: '北京蓝色医生',
birthday: '1990-02-01',
phone: '1332345876'
}]
},
-------------------------------- 我是修改隔离线 ---------------------------------
data: {
title: '联系人',
columns: [],
......
list: []
},
mounted: function(){
let vm=this
//ID=0时，返回TableSchema
axios.get('/api/contacts/0')
.then(function (response) {
vm.columns.push.apply(vm.columns,response.data)
})
.catch(function (error) {
console.log(error);
})
//取出所有联系人
axios.get('/api/contacts')
.then(function(response) {
vm.list.push.apply(vm.list, response.data)
})
.catch(function(error) {
console.log(error)
})
},
2.1 控制表格和表单的所有数据，都存放在columns和list这两个数组中。
2.2 mounted是Vue组件事件，详细说明看 官网 。
2.3 Axios 官网使用说明
后端实现
打开Visual Studio 2013，创建一个基本的WebAPI项目，具体过程可以参考 十分钟快速实现WebAPI。
- 业务实体 - ViewModel
Public Class ContactViewModel
Public Sub New(ByVal id As Integer,
ByVal name As String,
ByVal birthday As Nullable(Of DateTime),
ByVal phone As String)
Me.id = id
Me.name = name
Me.birthday = birthday
Me.phone = phone
End Sub
Public Property id As Integer
Public Property name As String
Public Property birthday As Nullable(Of DateTime)
Public Property phone As String
End Class
'---------------------------'
Public Class TableSchema
Public Property name As String
Public Property caption As String
Public Property type As String
Public Property iskey As Boolean
End Class
定义两个类，TableSchema用于保存数据结构，ContactViewModel用于保存联系人信息。
- 新建联系人API控制器ContactsController
Public Class ContactsController
Inherits ApiController
Private m_ContactList As New List(Of ContactViewModel)
Public Sub New()
With m_ContactList
.Add(New ContactViewModel(1, "深圳有事Q我", CDate("2000-09-10"), "2345678"))
.Add(New ContactViewModel(2, "上海没事别烦我", CDate("1980-01-22"), "1293587023"))
.Add(New ContactViewModel(3, "北京深蓝医生", CDate("1990-02-01"), "1332345876"))
End With
End Sub
' GET api/contact
Public Function GetValues() As IEnumerable(Of ContactViewModel)
Return m_ContactList
End Function
' GET api/contact/5
Public Function GetValue(ByVal id As Integer) As Object
If id = 0 Then
Return GetSchema()
Else
Return m_ContactList.Find(Function(c) c.ID = id)
End If
End Function
Private Function GetSchema() As IEnumerable(Of TableSchema)
Dim ls = New List(Of TableSchema)
With ls
.Add(New TableSchema With {.name = "id", .iskey = True})
.Add(New TableSchema With {.name = "name", .caption = "姓名"})
.Add(New TableSchema With {.name = "birthday", .caption = "出生日期", .type = "date"})
.Add(New TableSchema With {.name = "phone", .caption = "电话"})
End With
Return ls
End Function
' POST api/contact
Public Sub PostValue(<FromBody()> ByVal value As String)
End Sub
' PUT api/contact/5
Public Sub PutValue(ByVal id As Integer, <FromBody()> ByVal value As String)
End Sub
' DELETE api/contact/5
Public Sub DeleteValue(ByVal id As Integer)
End Sub
End Class
在这段代码中，做了以下几件事,
2.1 控制器构造器中，初始化一个联系人列表。
2.2 GetValues返回全部联系人。
2.3 GetValue(Byval id as INteger)做了一点小小的处理，当id=0时，返回表结构，当id<>0时，返回单个联系人信息。
2.4 PostValue，PutValue, DeleteValue暂时不做处理。
- 加入Index.html和相应的javascript。
把我们之前完成的html页面和Javascript代码复制到WebAPI项目中，html页面命名为Index.html。
总结
现在是见证奇迹的时候了，按下F5，可以看到辛苦了几十分钟的工作。
在本文中，我们做了几件小小的事情。
- 修改javascript代码，加入Axios调用API代码。
- 创建WebAPI项目，加入ContactsController联系人API
- 在定义联系人实体类时，采用了javascript常用的CamelCase变量命名方式，以避免Json序列化时需要处理的复杂性。
- 日期显示还存在BUG，不过这个应该交给后端程序员去处理，包括上面的变量大小写问题。
