BS部分省略，頁面如下

馬賽克部分是引入的一條條資料

紅色標註部分會實現實時搜尋，新增聯絡人功能。點選新增聯絡人會撥出一個模態框，並且實現新增聯絡人並儲存的功能。

JQ部分掛監聽器處理寫函式部分省略，重點在於點選事件觸發時，我們在函式內部寫入一個AJAX請求，以新增聯絡人為例：

            $.ajax({
                type : 'get',
                url : 'http://127.0.0.1:3000/addContact',
                data : contact,
                success : function(e){
                    fillData(e)
                }
            })

　請求型別為GET

請求地址為http://127.0.0.1:3000/addContact（/addContact是等下我們要在後端寫好的介面號）

請求時傳送的資料是Contact物件的一個例項

請求成功時，執行fillData()函式（fillData函式的內部方法是將請求成功時傳回來的資料填充到頁面上）

下面是建立一個Contact物件例項的過程，我們可以知道，contact擁有name屬性和number屬性

 var addContact = function (name, number) {
            var Contact = function (name, number) {
                this.name = name
                this.number = number
            }
            var contact = new Contact(name, number)

接下來就是在node上處理資料

引入express和fs模組

var express = require('express');
var app = express();
var fs = require('fs');

app.get('/getContact',function(req,res){
    //解決跨域問題
    res.setHeader('Access-Control-Allow-Origin','*')//這行程式碼的意思是允許任何的域名頭訪問我們的埠
    res.send(data)
});

此時res.send(data)將data資料傳送了回去。

data是通訊錄內的聯絡人資料。

那麼data是怎麼建立的呢，首先我們寫一個建立聯絡人的程式碼

var fs = require('fs')
var data = []
//獲取隨機的電話號碼
var getNumber = function () {
    let str = '1'
    for (let i = 0; i < 10; i++) {
        str += parseInt(Math.random() * 10)
    }
    return str
}

//迴圈新增多少個聯絡人,隨即生成聯絡人資料
for (var i = 0; i < 100; i++) {
    data.push({
        id: i,
        name: 'node',
        number: getNumber()
    })
}

fs.writeFile('./Contact.json',JSON.stringify(data),{encoding:'utf-8'},function(err,res){
    
})

　建立好data，將其傳入到Contact.json檔案內，以檔案形式儲存我們建立好的這一百條資料，這樣能保證在對通訊錄做了一系列操作並且重啟node之後，資料不會重置。

var data = []
var fsRes = fs.readFileSync('./Contact.json',{encoding:'utf-8'},function(err,res){

})
// console.log(typeof fsRes)//string型別，要parse
data = JSON.parse(fsRes)

我們將data寫入就能使用了

最後我們需要建立一個儲存聯絡人的函式，作用是每次我們操作通訊錄之後，重新將操作後的data寫入檔案中，這樣就能保證在重啟node後也不會重置資料

var saveContact = function(){
    fs.writeFileSync('./Contact.json',JSON.stringify(data),{encoding:'utf-8'},function(err,res){

    })
}