一.強(qiáng)烈推薦這個(gè)靜態(tài)服務(wù)器browser-sync
1.browser-sync的使用
browser-sync的文檔真的是超級強(qiáng)大一定要看
現(xiàn)在來講具體的使用方法，下面的代碼是寫在gulpfile.js中的
ps：這里也要注意middleWare這個(gè)參數(shù)能夠在請求中轉(zhuǎn)到你想去的地方
//開啟靜態(tài)服務(wù)器
var gulp = require('gulp');
var browserSync = require('browser-sync');//靜態(tài)服務(wù)器的插件
var mock = require('./mock.js');//自己將攔截，生成隨機(jī)數(shù)據(jù)這一模塊提取出去了
gulp.task('browser-sync', function () {
var files = [
'**/*.html',
'./img/*',
'./css/*.css',
'./js/*.js'
];
//files是一個(gè)數(shù)組，在開啟靜態(tài)服務(wù)器的時(shí)候講數(shù)據(jù)傳進(jìn)去能夠監(jiān)控文件的變化，就不用在寫gulp.watch任務(wù)了,如果文件改動了，瀏覽器將自動刷新
browserSync.init(files //這里將數(shù)組傳入，復(fù)制的時(shí)候應(yīng)去掉,{
server: {
baseDir: './release',
port: 3000,
middleware:mock.data()
},
startPath:'page/'
});
});
二.mock.js的使用
1.這里是mock.js的模塊，不做mock.js的使用，因?yàn)槲臋n寫的是真好,我用的比較淺，沒有用到請求頭的驗(yàn)證，這個(gè)插件能夠模擬到與后臺一樣的環(huán)境，只要你愿意嘗試
PS:這里幾點(diǎn)是對代碼中需要注意的點(diǎn)的講解
1.在模塊中return的是一個(gè)對象這是為了滿足middleWare的寫法要求
2.這里要注意數(shù)據(jù)中間的 處理，數(shù)的res 的參數(shù)這是代表返回?cái)?shù)據(jù)的的內(nèi)容創(chuàng)建的時(shí)候必須模擬后臺的數(shù)據(jù)返回才能被瀏覽器識別，即有返回頭，返回?cái)?shù)據(jù)，返回結(jié)束正如代碼中寫到的res.writeHead，res.write(JSON.stringfy(data))，res.end() 的寫法，其中少一個(gè)都出不來數(shù)據(jù)。
3.return回的對象中的路由是攔截頁面中js的請求，他是根據(jù)字符串進(jìn)行匹配的，必須是以路徑的形式（必須有一個(gè) '/'）,攔截到會將你寫的數(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ù)返回告訴瀏覽器返回?cái)?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ù)路由進(jìn)行匹配攔截返回相應(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生成隨機(jī)數(shù)據(jù)的，路由攔截的特點(diǎn)，結(jié)合 browser-sync中間件的處理函數(shù)將返回?cái)?shù)據(jù)返回給ajax，可以做到完全的前后端分離開發(fā)，只要前期數(shù)據(jù)格式定好，最后在對接的時(shí)候可以迅速完成。
