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){
})
}