前言

在前面四篇文章中，我們搭建了一個純粹的客戶端應用，數據保存在客戶端內存中。同時，對于表格和表單的自動化，進行了一些嘗試。
正常的生產環境中，數據通常存放在數據服務器上，前端需要完成的工作還包括，訪問后端API接口，實現真正的CRUD。而實現此功能的一大利器則是AJAX。
這篇文章是從前端到后端的一個分界線，因此我們將盡量減少復雜度，希望讓前端和后端都能看懂，你的同伴需要什么。

Axios 介紹

Axios 開源代碼在 Github。

Promise based HTTP client for the browser and node.js
運行在瀏覽器及node.js上，基于Promise的HTTP 客戶端工具

項目改造

前端改造

1. HTML
   受益于Vue的組件化編程，我們無需對HTML文件進行任何修改，當然如果你還沒有加入Axios的引用，那么此時需要在HTML中添加Axios引用。

<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 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。

1. 業務實體 - 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用于保存聯系人信息。

2. 新建聯系人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暫時不做處理。

3. 加入Index.html和相應的javascript。
   把我們之前完成的html頁面和Javascript代碼復制到WebAPI項目中，html頁面命名為Index.html。

總結

現在是見證奇跡的時候了，按下F5，可以看到辛苦了幾十分鐘的工作。
在本文中，我們做了幾件小小的事情。

• 修改javascript代碼，加入Axios調用API代碼。
• 創建WebAPI項目，加入ContactsController聯系人API
• 在定義聯系人實體類時，采用了javascript常用的CamelCase變量命名方式，以避免Json序列化時需要處理的復雜性。
• 日期顯示還存在BUG，不過這個應該交給后端程序員去處理，包括上面的變量大小寫問題。

系列文章目錄

1. 列表顯示
2. 表單顯示
3. 表單CRUD
4. Vue組件化
5. 從前端到后端