使用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.js 使用教程

数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 ...
  • zgrkaka
  • zgrkaka
  • 2017年04月25日 17:50
  • 3577

前端mock数据

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

有效使用Mock编写java单元测试

Java单元测试对于开发人员质量保证至关重要,尤其当面对一团乱码的遗留代码时,没有高覆盖率的单元测试做保障,没人敢轻易对代码进行重构。然而单元测试的编写也不是一件容易的事情,除非使用TDD方式,否则编...
  • chjttony
  • chjttony
  • 2013年11月08日 16:04
  • 68618

Mock,前端mock数据的神器

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

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

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

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

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

不可不知的Mock数据方式

Mock 数据一直是一个离不开的话题, 开发者经常需要模拟数据来完成功能的开发,集成测试前,尽量减少开发任务的外部依赖。当然每个开发者都有自己的解决方案,但都大同小异,选择合适的Mock方式,可以极大...

对于mock的理解

对于mock的随机数又有了新的理解。开始一直认为mock产生的随机数无法控制。其实只要在信息后面加入随机数,产生id的部分,也可以用id自增,保证id的唯一性就可以了。mock有很多方便的地方,比如可...

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

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

【自制】javascript模拟数据库查询及格式化操作

为更好地理解数据库查询的底层操作,本人创建了一个js方法模拟数据库的查询操作,同时模拟对查询到的数据进行格式化的过程 1.模拟数据库查询语句  select * from tablename wher...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用mock.js提供模拟数据
举报原因:
原因补充:

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