realmock 前后端分离方案
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 让模拟的后端功能更加丰富,更加真实
realmock 前后端分离方案的更多相关文章
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- Vue-cli + express 构建的SPA Blog(采用前后端分离方案)
为什么学习并使用Vue 1.发展趋势 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场. backbone,AngularJS 已成昨日黄花,reactjs 如日中 ...
- 利用gulp解决前后端分离的header/footer引入问题
在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...
- (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...
- 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...
- 超简单工具puer——“低碳”的前后端分离开发
本文由作者郑海波授权网易云社区发布. 前几天,跟一同事(MIHTool作者)讨教了一下开发调试工具.其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器,基于长连的B/S架构的工具其 ...
- 基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们 ...
- [转帖]从壹开始前后端分离【重要】║最全的部署方案 & 最丰富的错误分析
从壹开始前后端分离[重要]║最全的部署方案 & 最丰富的错误分析 https://www.cnblogs.com/laozhang-is-phi/p/beautifulPublish-most ...
- springboot+vue的前后端分离与合并方案
pringboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue ...
随机推荐
- java初学代码,还不太熟练
奇数和 public class Homework01{ public static void main(String [] args){ long t=1,s=0; do{ s=s+t; t= ...
- CSS3的新特性
CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...
- Linux下快速搭建php开发环境
php开发环境快速搭建 一.Linux下快速搭建php开发环境 1.安装XAMPP for Linux XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包,使用XA ...
- [UWP]了解模板化控件(3):实现HeaderedContentControl
1. 概述 来看看这段XMAL: <StackPanel Width="300"> <TextBox Header="TextBox" /&g ...
- CentOS 7 安装Broadcom无线网卡驱动
重新坑了小伙伴一台电脑,用来装centOS练习和做服务器用,哈哈哈 装了了CentOS 7后发现无线网卡读不出来,没有装驱动,网卡是Broadcom ╮(╯_╰)╭ 1.首先确定网卡是否为坑爹类型Br ...
- 树莓派Raspberry中成功安装RobotFramework+Selenium
[原创链接]:http://www.cnblogs.com/atsats/p/6666848.html 一般RobotFramework都是安装在Windows/Linux的PC机上,这里将简单介绍在 ...
- 裴波那序列-JAVA实现
编程输出:裴波那序列,1000项,int会越界! BigInteger [] pArr=new BigInteger [10000]; pArr[0]=new BigIntege ...
- VC++6.0中不兼容问题
记得上次用VC++6.0已经是很长一段时间之前的事情了.这次由于需要学习计算机图形学,要开始学这写一些算法之类的,我又开始了VC++之旅. 重新安装一个vc++,我用的是Visual C++ 6.0( ...
- 为Jquery EasyUI 组件加上“清除”功能
1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或 ...
- 介绍三个Android支持库控件:TabLayout+ViewPager+RecyclerView
本文主要介绍如下三个Android支持库控件的配合使用: TabLayout:android.support.design.widget.TabLayout ViewPager:android.sup ...