利用node.js來mock假數據

利用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


發佈了32 篇原創文章 · 獲贊 22 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章