realmock 先后端分离方案前端
express + randomjson 模拟后端服务,前端服务器(好比webpack, nigix等)将请求代理到该服务器地址便可node
github地址:https://github.com/zhoushengmufc/realmockwebpack
realmock优点git
1,利用了express强大的服务器功能,轻松模拟按条件返回json,延时返回json,返回不一样http状态等web开发中的常见状况github
2,配合nodemon的监测文件变化并自启动功能,文件变动时无需手动重启服务器web
3,结合randomjson的随机json生成功能,好比生成指定大小的图片,生成超大json等,mock数据更轻松express
randomjson地址:https://github.com/finance-sh/randomjsonnpm
使用 下载项目到本地,进入文件夹json
默认将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 让模拟的后端功能更加丰富,更加真实