大多數時候,前端會和後端同時進行開發,也就是在我們開發完頁面的時候,很可能還不能立刻進入聯調階段,這個時候,為了確保我們介面的有效性和程式碼的功能完整,我們可能需要模擬數據。本文主要介紹了express+mockjs實現模擬後台資料發送功能,需要的朋友可以參考下,希望能幫助到大家。
模擬資料方法
1.透過js變數模擬後台資料
優點:不需要伺服器
缺點:需要造很多變量,同時還要將變數在我們的有效程式碼中使用,最後還得刪除
2.透過ajax請求json檔案
優點:只需要配置路徑,就可以訪問,進入聯調階段不用修改大量的js代碼
缺點:ajax存在跨域問題,通常無法請求本地文件,即使火狐也存在不能訪問不同文件目錄下的json文件,通常需要透過ide或自己手動啟動服務
3.用nodejs自己寫一個專門用來發送請求的服務,不包含業務邏輯
優點:前端的程式碼進入聯調階段只需要修改一個basePath,所有的介面名字都可以和約定好的路徑保持一致,可以測試post請求,模擬網路環境
缺點:自己要寫一個後台
1、2兩種模擬資料的方式適合用來做demo,但是如果做得是上線項目,我們還是推薦使用自己搭建一個node後台
1.準備node環境、npm/cnpm
2.安裝express、mockjs
#3.建立服務端檔案server.js,引入相關模組
let express = require('express'); //引入express模块 let Mock = require('mockjs'); //引入mock模块 let app = express(); //实例化express
4.設定介面路由,設定監聽埠
/** * 配置test.action路由 * @param {[type]} req [客户端发过来的请求所带数据] * @param {[type]} res [服务端的相应对象,可使用res.send返回数据,res.json返回json数据,res.down返回下载文件] */ app.all('/test.action', function(req, res) { res.send('hello world'); }); /** * 监听8090端口 */ app.listen('8090');
此時我們直接存取http ://localhost:8090/test.action,就可以直接在介面看到'hello world'文字
5.使用mockjs返回格式化json資料
app.all('/test.action', function(req, res) { /** * mockjs中属性名‘|'符号后面的属性为随机属性,数组对象后面的随机属性为随机数组数量,正则表达式表示随机规则,+1代表自增 */ res.json(Mock.mock({ "status": 200, "data|1-9": [{ "name|5-8": /[a-zA-Z]/, "id|+1": 1, "value|0-500": 20 }] })); });
此時我們再訪問頁面數據,我們就可以得到一份隨機的json數據
6.創建模擬數據文件夾testData,創建模擬數據json文件(注意:json文件中不能使用正則,且對象屬性必須為雙引號字串)
7.遍歷模擬資料文件,產生對應路由
/*readdir读取目录下所有文件*/ fs.readdir('./testData', function(err, files) { if(err) { console.log(err); } else { /*成功读取文件,取得文件名,拼接生成对应action,监听对应接口并返回对应文件数据*/ files.forEach(function(v, i) { app.all(`/${v.replace(/json/, 'action')}`, function(req, res) { fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) { if(err) { console.log(err); } else { res.json(Mock.mock(JSON.parse(data))); } }) }) }) } })
至此,我們的node伺服器已經搭建成功,使用node server.js運行伺服器,我們就可以直接在前端存取接口,但是如果只是單純的生成後台,前端頁面不通過後台進行訪問的話,存在跨域問題,如果需要解決,可以在後台添加跨域請求
/*为app添加中间件处理跨域请求*/ app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); });
ps:如果mock需要使用正則,請單獨設定路由進行處理,express和mockjs更多指令,請查閱官網api
#相關推薦:
jquery ajax如何將後台資料傳回將前台表格實例程式碼詳解