express + randomjson 模擬後端服務,前端伺服器(比如webpack, nigix等)將請求代理到該伺服器地址即可實現前後端分離 ...
realmock 前後端分離方案
express + randomjson 模擬後端服務,前端伺服器(比如webpack, nigix等)將請求代理到該伺服器地址即可
github地址:https://github.com/zhoushengmufc/realmock
realmock優勢
1,利用了express強大的伺服器功能,輕鬆模擬按條件返回json,延時返回json,返回不同http狀態等web開發中的常見情況
2,配合nodemon的監測文件變化並自啟動功能,文件變更時無需手動重啟伺服器
3,結合randomjson的隨機json生成功能,比如生成指定大小的圖片,生成超大json等,mock數據更輕鬆
randomjson地址:https://github.com/finance-sh/randomjson
使用 下載項目到本地,進入文件夾
預設將json存放在在mock文件夾中
配置 index.js
// 埠號 app.listen(3001); console.log('server start'); // api config // 常規mock get var detailJson = require('./mock/detail.json'); app.get('/api/detail', function (req, res) { res.send(detailJson); }); // 數據返回延遲 var addJson = require('./mock/add.json'); app.get('/api/add', function (req, res) { setTimeout(function () { res.send(addJson); }, 3000); }); // 根據條件返回不同json get方法 var json1 = require('./mock/json1.json'); var json2 = require('./mock/json2.json'); app.get('/api/get', function (req, res) { if (req.query.type === '1') { res.send(json1); } else { res.send(json2); } }); // 根據條件返回不同json post方法 app.post('/api/get', function (req, res) { if (req.body.type === '1') { res.send(json1); } else { res.send(json2); } }); // 使用randomjson返回隨機json 隨機mock var listJson = require('./mock/list.json'); app.get('/api/list', function (req, res) { var resJson = randomjson(listJson); res.send(resJson); });
開啟服務
在項目根目錄中,打開命令行工具,運行以下命令:
npm install
npm start
訪問url
可以訪問預設示例:
http://localhost:3001/api/get?type=1
http://localhost:3001/api/get
總結 解決了哪些問題
1,常見本地模擬都是即刻返回,不能指定返回時間,realmock可以加一個延遲時間,調試載入中效果
2,常見本地模擬都是一個介面返回一個數據,realmock可以根據條件返回不同的json,更真實
3,指定http狀態碼,模擬各種網路情況和伺服器情況
4,利用randomjson,可以返回指定大小的圖片,可以返回隨機數據,可以返回指定帶小的數組,可以返回唯一的數據,比起傳統手寫json,提升開發速度
realmock整合了express nodemon randomjson 讓模擬的後端功能更加豐富,更加真實