前言：
大多數時候，前端會和后端同時進行開發，即在我們開發完頁面的時候，很可能還不能立馬進入聯調階段，這個時候，為了保證我們接口的有效性和代碼的功能完整，我們可能需要模擬數據。
模擬數據方法
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(); //實例化express4.配置接口路由，設置監聽端口
/** * 配置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
總結
以上是小編給大家介紹的express+mockjs實現模擬后臺數據發送功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
