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. [译]Selenium Python文档:五、Waits等待

    大多数现代web应用都使用了AJAX技术.当浏览器加载一个页面的时候,该页面内的元素可能在不用的时间间隔内进行加载.这使得元素定位变得比较困难:如果一个元素还没有出现在DOM中,定位函数将会抛出一个E ...

  2. Ubuntu部署Jupyter

    前言 Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言.在本文中,我们将介绍 Jupyter notebook 的主要特 ...

  3. Linux-ubuntu安装过程讲解

    前言也不准备介绍Linux是什么,为什么要安装ubuntu?相信你能够看到这篇文章也知道自己想要做什么. 一,准备工具 1.VMwareWorkstation虚拟机 下载地址:https://my.v ...

  4. NGINX下配置CACHE-CONTROL

    HTTP协议的Cache -Control指定请求和响应遵循的缓存机制.在请求消息或响应消息中设置 Cache-Control并不会影响另一个消息处理过程中的缓存处理过程.请求时的缓存指令包括no-c ...

  5. window7使用svn(svn系列 客户端 知识二总结)

     ♣eclipse插件subclipse  ♣TortoiseSVN  ♣svn操作  ♣注意事项 使用svn可以在eclipse直接装subclipse或者在windows使用TortoiseSVN ...

  6. iOS 关于js与OC相互调用的那些事

    最近项目上使用js调用OC,OC再次调用JS,再次在JS页面上面回显数据. 项目中使用的是WKWebview,加载网路的URL,其实就是使用WK加载出来的H5网页,在项目中用的是H5网页有个识别按钮, ...

  7. NTP时间服务器

    1. NTP简介 NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议.它的用途是把计算机的时钟同步到世界协调时UTC,其精度在局域网内可达0 ...

  8. RDCの自我介绍

    ........................................... 大家好,这里是RUSH_D_CAT.一只ACMer,19岁的少年,From SDU,大二. Q: 1950499 ...

  9. goagant:403. That’s an error.

    报错: . That’s an error. Your client does not have permission to get URL / from this server. That’s al ...

  10. 性能优化之AJAX

    明天就放假啦~哈哈.四月份好像还没有输出呢,吓得我赶紧写点东西... Ajax是高性能JavaScript的基础. Ajax,从最基本的层面来说,是一种与服务器通信而无需重载页面的方法.数据可以从服务 ...