前言
在前面四篇文章中丹喻，我們搭建了一個(gè)純粹的客戶端應(yīng)用，數(shù)據(jù)保存在客戶端內(nèi)存中翁都。同時(shí)碍论，對(duì)于表格和表單的自動(dòng)化，進(jìn)行了一些嘗試柄慰。
正常的生產(chǎn)環(huán)境中鳍悠，數(shù)據(jù)通常存放在數(shù)據(jù)服務(wù)器上，前端需要完成的工作還包括坐搔，訪問后端API接口藏研，實(shí)現(xiàn)真正的CRUD。而實(shí)現(xiàn)此功能的一大利器則是AJAX概行。
這篇文章是從前端到后端的一個(gè)分界線遥倦，因此我們將盡量減少復(fù)雜度，希望讓前端和后端都能看懂占锯，你的同伴需要什么。
Axios 介紹
Axios 開源代碼在 Github缩筛。
Promise based HTTP client for the browser and node.js
運(yùn)行在瀏覽器及node.js上消略，基于Promise的HTTP 客戶端工具
項(xiàng)目改造
前端改造
- HTML
受益于Vue的組件化編程，我們無需對(duì)HTML文件進(jìn)行任何修改瞎抛，當(dāng)然如果你還沒有加入Axios的引用艺演，那么此時(shí)需要在HTML中添加Axios引用。
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
- Javascript
data: {
title: '聯(lián)系人',
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: '北京藍(lán)色醫(yī)生',
birthday: '1990-02-01',
phone: '1332345876'
}]
},
-------------------------------- 我是修改隔離線 ---------------------------------
data: {
title: '聯(lián)系人',
columns: [],
......
list: []
},
mounted: function(){
let vm=this
//ID=0時(shí)，返回TableSchema
axios.get('/api/contacts/0')
.then(function (response) {
vm.columns.push.apply(vm.columns,response.data)
})
.catch(function (error) {
console.log(error);
})
//取出所有聯(lián)系人
axios.get('/api/contacts')
.then(function(response) {
vm.list.push.apply(vm.list, response.data)
})
.catch(function(error) {
console.log(error)
})
},
2.1 控制表格和表單的所有數(shù)據(jù)胎撤，都存放在columns和list這兩個(gè)數(shù)組中晓殊。
2.2 mounted是Vue組件事件，詳細(xì)說明看 官網(wǎng) 伤提。
2.3 Axios 官網(wǎng)使用說明
后端實(shí)現(xiàn)
打開Visual Studio 2013巫俺，創(chuàng)建一個(gè)基本的WebAPI項(xiàng)目，具體過程可以參考 十分鐘快速實(shí)現(xiàn)WebAPI肿男。
- 業(yè)務(wù)實(shí)體 - 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
定義兩個(gè)類介汹，TableSchema用于保存數(shù)據(jù)結(jié)構(gòu)，ContactViewModel用于保存聯(lián)系人信息舶沛。
- 新建聯(lián)系人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, "北京深藍(lán)醫(yī)生", 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 控制器構(gòu)造器中，初始化一個(gè)聯(lián)系人列表如庭。
2.2 GetValues返回全部聯(lián)系人叹卷。
2.3 GetValue(Byval id as INteger)做了一點(diǎn)小小的處理，當(dāng)id=0時(shí)坪它，返回表結(jié)構(gòu)骤竹，當(dāng)id<>0時(shí)，返回單個(gè)聯(lián)系人信息哟楷。
2.4 PostValue瘤载，PutValue, DeleteValue暫時(shí)不做處理。
- 加入Index.html和相應(yīng)的javascript卖擅。
把我們之前完成的html頁面和Javascript代碼復(fù)制到WebAPI項(xiàng)目中鸣奔，html頁面命名為Index.html。
總結(jié)
現(xiàn)在是見證奇跡的時(shí)候了惩阶，按下F5挎狸，可以看到辛苦了幾十分鐘的工作。
在本文中断楷，我們做了幾件小小的事情锨匆。
- 修改javascript代碼，加入Axios調(diào)用API代碼冬筒。
- 創(chuàng)建WebAPI項(xiàng)目恐锣，加入ContactsController聯(lián)系人API
- 在定義聯(lián)系人實(shí)體類時(shí)，采用了javascript常用的CamelCase變量命名方式舞痰，以避免Json序列化時(shí)需要處理的復(fù)雜性土榴。
- 日期顯示還存在BUG，不過這個(gè)應(yīng)該交給后端程序員去處理响牛，包括上面的變量大小寫問題玷禽。
