利用node.js來mock假數據
1:首先要先安裝node.js.這個就不說了。可以參考我的這篇文章(ode.js利用gulp 啓動webServer服務)http://blog.csdn.net/seven0404/article/details/51880162
2:先說一下思路
1:我們在js中發送ajax請求。
2:啓動node.js的webserver服務。進行攔截本地服務下的網絡數據請求
3:使用if或者是switch從所有攔截到的地址中找到自己發送請的那個地址,然後攔截下這和請求。其他的請求使用next()方法放過
4: 攔截到我們想要的請求後,將我們mock的假數據的json文件返回給我們js裏面的ajax
5:成功就展示出我們請求的數據
3:步驟
1:安裝node.js
2: 局部安裝gulp和gulp-webserver
3: js發送ajax請求(這裏使用的是jQ的發送請求的方法)
4:新建一個gulpfile.js
5:在gulpfile.js中處理攔截邏輯。攔截到後將mock假數據返回
6:在js中解析返回的數據
代碼:
js代碼:
$.ajax({
type:"get",
url:"mocktest/index.html",
datatype:'json',
success:function(data){
console.log(data)
},
error:function(){
$('.one').html('請求失敗')
}
});
gulpfile.js代碼
//引入gulp
var gulp = require('gulp');
//引入webserver插件
var webserver = require('gulp-webserver');
//引入node.js的內置模塊
var url = require('url'); //可以對url進行操作
var fs = require('fs'); //文件操作對象
//創建啓動webserver的任務
gulp.task('webserver', function() {
gulp.src('./')
.pipe(webserver({
port: 8080, //端口
host: 'localhost', //域名
liveload: true,
directoryListing: {
path: './',
enable: true
},
//攔截這個本地服務下的網絡請求
middleware: function(req, res, next) {
var urlObj = url.parse(req.url, true);
var path = urlObj.pathname;
console.log(path)
if(path=='/mocktest/index.html'){
//攔截$http發送出來的請求
//封裝響應返回
//設置響應頭
res.setHeader('Content-Type', 'application/json');
//讀取文件作爲響應的內容
fs.readFile('storyList_3.json', 'utf-8', function(err, data) {
res.end(data);
})
return;
}
next();
}
}));
})
注意:
1:每次改了gulpfile.js代碼後都需要重啓一次服務纔會生效
已上傳了demo。已經將gulp刪除了。gulp刪除後可通過npm install安裝回來
百度網盤
http://pan.baidu.com/s/1boLHBzT