使用mock.js提供模拟数据

原创 2017年01月03日 15:52:14

Mock.js

官网:链接地址

官方说明:

*前后端分离,让前端工程师独立于后端开发。
*增加单元测试的真实性,通过随机数据,模拟各种场景。
*开发无侵入,不需要修改既有代码,就可以拦截ajax请求,返回模拟的响应数据。
*用法简单,符合直觉的接口。
*数据类型丰富,支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
*方便扩展,支持扩展更多数据类型,支持自定义函数和正则。
— 以上为官网提供的说明。

最重要的是:
1.基于Html模版生成数据。
2.基于数据模版生成数据。
3.拦截ajax请求。

解决的问题:
1.数据太长了,将数据写在js文件里,完成后挨个改url。
2.某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。
3.想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。
4.特殊的格式,例如IP,随机数,图片,地址,需要去收集。
5.后端开发慢,调试麻烦。
等等这些,不优雅的前端都是不科学的开发方式


简单上手指南

1.去官网安装代码 链接地址
2.开始动手写模拟数据。

Mock.mock(‘http://g.cn‘, {
‘name’ : ‘@name()’,
‘age|1-100’: 100,
‘color’ : ‘@color
});

3.发送请求。

ajax.post(“url”,data).then(function(){
do something….
});

4.查看返回结果。

以上就是简单的上手指南,接下来就是更加合理的使用这个js工具来打到我们想要的效果。

使用gulp

使用gulp可以自动完成这些数据和后端接口的替换。
1.添加gulp的配置,使我们可以手动启动开发环境或者测试环境。

gulp.task(“test”, function(cb) {
setConfig();
if (config.globel.env !== “dev”) {
config.globel.dev = false;
}
gulp.run(“clean”);
setTimeout(function() {
gulp.run(“run”);
}, 1000);
});

上面的代码就是判断一下当前是否在使用某个环境,这个东西可以是不同的任务,也可以是不同的配置,这样就可以做到只需一行命令完美切换两个不同的环境。
*开发阶段使用mockjs提供假数据。
*测试调试阶段使用接口提供的数据。
*所有代码逻辑都不需要有任何改动,只要定义好接口,一切就跟预想的没有差别。


偷偷的说一个以上版本的简化版
在模块化开发情况很合适!
1.在同等路径的文件夹下建立一个interface.js。
2.把所有接口都写在这个文件里。
3.使用requirejs或者commonjs等插件来加载这个文件。
4.其余逻辑不变,在没有接口的情况下可以直接将假数据或者数据制造逻辑写在这个文件里。
5.只需单独写个debug开关,或者干脆注释掉这些就可以在接口和自定义数据之间切换。

这样是不是也很简单!

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Mock,前端mock数据的神器

相信有很多小伙伴在开发的时候遇到过这样的问题:静态页面写好了,就等后端给数据了!WTF?我刚写好代码你告诉我后端的接口又变了!什么破网啊根本访问不到服务器啊…这个时候就需要前端神器Mock.js了(妈...

如何使用mock.js生成假数据

在公司项目中,由于前端与后台通常一起开工,可作为jser的我,很多工作,是需要建立在后台返回数据的基础上去进行的,因此,大部分时间,代码都是在看不到效果,看不到数据的情况下编写出来,这就会导致在后台结...

前端mock数据

作为前端经常需要模拟后台数据,我们称之为mock。通常的方式为自己搭建一个服务器,返回我们想要的数据。 项目中遇到的请求链接是类似这样子的:www.abc.com/user/login,而不是请求某个...

App开发:模拟服务器数据接口 - MockApi

 为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块。本篇文章就尝试为使用gradle的android项目设计实...
  • hj7jay
  • hj7jay
  • 2017-02-04 09:36
  • 1036

vue2.0构建单页应用最佳实战案例 vue.js

转自:http://www.tuicool.com/articles/me6RJfF 前言 我们将会选择使用一些vue周边的库 vue-cli , vue-router , vue...

前端数据模拟---mock.js 使用教程

数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 ...

mock.js实例,构建相应的模拟假数据

在做微信小程序的时候,后台接口一直出不出来,导致没有数据进行下一步操作,所以去学了Mock.js来实现模拟假数据,一开始也是觉得不会,但是参照着http://mockjs.com/examples.h...

Mock.js 安装 及 使用demo

Mock.js 安装 及 使用demoMock.js官方网址: 首页:http://mockjs.com/1、Mock.js下载安装 下载mock.js文件 npm安装mock模块 项目路径...

【前端开发】 5分钟创建 Mock Server

今天,我们打算花几分钟时间创建一个自己用来测试的 MockUp 服务器。因为我是前端开发,所以这里使用 Node.js 创建一个简单的迷你工程来完成!目标用 curl 访问 mockserver 可以...
  • wxqee
  • wxqee
  • 2015-12-03 20:07
  • 16587

数据模拟-mock.js

mock.js 数据模拟工作中,前端免不了需要和各种后台数据打交道。如果后端接口迟迟没提供,而又需要数据做展示或测试。而这时候,前端往往需要自己手动去模拟数据
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)