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 前后端分离方案的更多相关文章

  1. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

  2. Vue-cli + express 构建的SPA Blog(采用前后端分离方案)

    为什么学习并使用Vue 1.发展趋势 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场. backbone,AngularJS 已成昨日黄花,reactjs 如日中 ...

  3. 利用gulp解决前后端分离的header/footer引入问题

    在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...

  4. (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...

  5. 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...

  6. 超简单工具puer——“低碳”的前后端分离开发

    本文由作者郑海波授权网易云社区发布. 前几天,跟一同事(MIHTool作者)讨教了一下开发调试工具.其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器,基于长连的B/S架构的工具其 ...

  7. 基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们 ...

  8. [转帖]从壹开始前后端分离【重要】║最全的部署方案 & 最丰富的错误分析

    从壹开始前后端分离[重要]║最全的部署方案 & 最丰富的错误分析 https://www.cnblogs.com/laozhang-is-phi/p/beautifulPublish-most ...

  9. springboot+vue的前后端分离与合并方案

    pringboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue ...

随机推荐

  1. java初学代码,还不太熟练

    奇数和 public class Homework01{ public static void main(String [] args){  long t=1,s=0; do{  s=s+t;  t= ...

  2. CSS3的新特性

    CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...

  3. Linux下快速搭建php开发环境

    php开发环境快速搭建 一.Linux下快速搭建php开发环境 1.安装XAMPP for Linux XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包,使用XA ...

  4. [UWP]了解模板化控件(3):实现HeaderedContentControl

    1. 概述 来看看这段XMAL: <StackPanel Width="300"> <TextBox Header="TextBox" /&g ...

  5. CentOS 7 安装Broadcom无线网卡驱动

    重新坑了小伙伴一台电脑,用来装centOS练习和做服务器用,哈哈哈 装了了CentOS 7后发现无线网卡读不出来,没有装驱动,网卡是Broadcom ╮(╯_╰)╭ 1.首先确定网卡是否为坑爹类型Br ...

  6. 树莓派Raspberry中成功安装RobotFramework+Selenium

    [原创链接]:http://www.cnblogs.com/atsats/p/6666848.html 一般RobotFramework都是安装在Windows/Linux的PC机上,这里将简单介绍在 ...

  7. 裴波那序列-JAVA实现

    编程输出:裴波那序列,1000项,int会越界! BigInteger  [] pArr=new BigInteger [10000];           pArr[0]=new BigIntege ...

  8. VC++6.0中不兼容问题

    记得上次用VC++6.0已经是很长一段时间之前的事情了.这次由于需要学习计算机图形学,要开始学这写一些算法之类的,我又开始了VC++之旅. 重新安装一个vc++,我用的是Visual C++ 6.0( ...

  9. 为Jquery EasyUI 组件加上“清除”功能

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或 ...

  10. 介绍三个Android支持库控件:TabLayout+ViewPager+RecyclerView

    本文主要介绍如下三个Android支持库控件的配合使用: TabLayout:android.support.design.widget.TabLayout ViewPager:android.sup ...