一.強烈推薦這個靜態(tài)服務(wù)器browser-sync
1.browser-sync的使用
browser-sync的文檔真的是超級強大一定要看
現(xiàn)在來講具體的使用方法，下面的代碼是寫在gulpfile.js中的
ps：這里也要注意middleWare這個參數(shù)能夠在請求中轉(zhuǎn)到你想去的地方
//開啟靜態(tài)服務(wù)器
var gulp = require('gulp');
var browserSync = require('browser-sync');//靜態(tài)服務(wù)器的插件
var mock = require('./mock.js');//自己將攔截藻雌，生成隨機數(shù)據(jù)這一模塊提取出去了
gulp.task('browser-sync', function () {
var files = [
'**/*.html',
'./img/*',
'./css/*.css',
'./js/*.js'
];
//files是一個數(shù)組师幕，在開啟靜態(tài)服務(wù)器的時候講數(shù)據(jù)傳進去能夠監(jiān)控文件的變化，就不用在寫gulp.watch任務(wù)了,如果文件改動了，瀏覽器將自動刷新
browserSync.init(files //這里將數(shù)組傳入肠仪，復制的時候應(yīng)去掉,{
server: {
baseDir: './release',
port: 3000,
middleware:mock.data()
},
startPath:'page/'
});
});
二.mock.js的使用
1.這里是mock.js的模塊忧风，不做mock.js的使用，因為文檔寫的是真好,我用的比較淺融痛，沒有用到請求頭的驗證壶笼，這個插件能夠模擬到與后臺一樣的環(huán)境，只要你愿意嘗試
PS:這里幾點是對代碼中需要注意的點的講解
1.在模塊中return的是一個對象這是為了滿足middleWare的寫法要求
2.這里要注意數(shù)據(jù)中間的 處理雁刷，數(shù)的res 的參數(shù)這是代表返回數(shù)據(jù)的的內(nèi)容創(chuàng)建的時候必須模擬后臺的數(shù)據(jù)返回才能被瀏覽器識別覆劈，即有返回頭，返回數(shù)據(jù)沛励，返回結(jié)束正如代碼中寫到的res.writeHead责语，res.write(JSON.stringfy(data))，res.end() 的寫法目派，其中少一個都出不來數(shù)據(jù)坤候。
3.return回的對象中的路由是攔截頁面中js的請求，他是根據(jù)字符串進行匹配的企蹭，必須是以路徑的形式（必須有一個 '/'）,攔截到會將你寫的數(shù)據(jù)返回到j(luò)s中
/**
* Created by Administrator on 2017/3/13.
*/
var Mock = require('mockjs');
//node.js的寫法
exports.data = function(){
return [
{
route:'/sidemenu',
handle:function (req,res,next) {
//req 請求頭
//res 響應(yīng)的數(shù)據(jù)
// res請求頭是模擬的后臺數(shù)據(jù)返回告訴瀏覽器返回數(shù)據(jù)頭白筹，沒有頭的話數(shù)據(jù)出不來的
res.writeHead(200,{
"Content-type":"application/json;charset=UTF-8"
});
var Random = Mock.Random;
Random.integer();
Random.string('lower',4);
Random.date('yyyy-MM-dd');
var data = Mock.mock({
"menuList|6":[{
'menuNav':'@string()',
"menuNavContent|1-5":[{
'url':"index.html",
'name':"@string('lower',4)",
'id':"@integer(0,10)"
}]
}]
});
res.write(JSON.stringify(data));
res.end();//有開頭有結(jié)尾不然數(shù)據(jù)依然無返回
}
}
]
};
三.測試數(shù)據(jù)
在頁面中直接寫ajax，根據(jù)路由進行匹配攔截返回相應(yīng)數(shù)據(jù)
這里是上面代碼返回的數(shù)據(jù)
{
"menuList": [
{
"menuNav": "AxcG5k#",
"menuNavContent": [
{
"url": "index.html",
"name": "vdko",
"id": 1
},
{
"url": "index.html",
"name": "nutj",
"id": 0
},
{
"url": "index.html",
"name": "pfhx",
"id": 2
},
{
"url": "index.html",
"name": "wcfv",
"id": 8
},
{
"url": "index.html",
"name": "ubwf",
"id": 9
}
]
},
{
"menuNav": "7bGS)e",
"menuNavContent": [
{
"url": "index.html",
"name": "hufk",
"id": 8
}
]
},
{
"menuNav": "Jpg3e",
"menuNavContent": [
{
"url": "index.html",
"name": "agyd",
"id": 3
},
{
"url": "index.html",
"name": "rwok",
"id": 3
},
{
"url": "index.html",
"name": "vipk",
"id": 6
},
{
"url": "index.html",
"name": "nouv",
"id": 5
},
{
"url": "index.html",
"name": "bysh",
"id": 2
}
]
},
{
"menuNav": "Ic7j",
"menuNavContent": [
{
"url": "index.html",
"name": "qdwd",
"id": 0
},
{
"url": "index.html",
"name": "kgiu",
"id": 5
}
]
},
{
"menuNav": "[S6",
"menuNavContent": [
{
"url": "index.html",
"name": "wtzk",
"id": 9
},
{
"url": "index.html",
"name": "czmk",
"id": 4
}
]
},
{
"menuNav": "BKW3!5",
"menuNavContent": [
{
"url": "index.html",
"name": "jubd",
"id": 2
},
{
"url": "index.html",
"name": "lzpv",
"id": 8
}
]
}
]
}
四.小結(jié)
這里利用mockjs生成隨機數(shù)據(jù)的谅摄，路由攔截的特點徒河，結(jié)合 browser-sync中間件的處理函數(shù)將返回數(shù)據(jù)返回給ajax，可以做到完全的前后端分離開發(fā)送漠，只要前期數(shù)據(jù)格式定好顽照，最后在對接的時候可以迅速完成。
