Mock.js前端开发cgi数据模拟工具

1. 什么是Mockjs

http://mockjs.com/

??Mockjs是个能够拦截页面ajax请求并模拟返回数据的小工具,借助Mockjs,前端开发中在后台测试接口还没有给的时候就可以自己拦截请求模拟数据进行愉快的开发了,所以只要制定好了协议,前后端分离开发的成本可以降到基本为0,也不需要联调工具了

2,Mockjs主要功能

  • 基于数据模板生成模拟数据
  • 基于html模板申城模拟数据
  • 拦截并模拟ajax请求

??当然mock模拟的数据不只是随便的输出字符串,它包含了各种格式的模拟数据,例如姓名,段落,时间,日期,图片地址,身份证号,电话,邮箱,ip等等,所以以后搞数据自动校验什么的再也不用手动输入测试了。也就是Mock自动了做了很多测试调试中的那部分体力活,我们只需要安静的写代码就好了。 ??数据模板则是根据一个模板自动根据某个规则产生数据,例如序号产生自增的数组等

数据模板定义 DTD

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

 'name|rule': value

例如:

属性名 和 生成规则 之间用 | 分隔。生成规则是可选的。生成规则 有 7 种格式:

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

??生成规则的含义需要依赖属性值才能确定。属性值中可以含有@占位符。属性值还指定了最终值的初始值和类型,其中属性值的生成是根据Mockjs里面的随机几个固定字符串生成的。

{
    'list|1-10': [{
        'id|+1': 1
    }]
}

生成结果为:

{
    "list":[
        {"id":1},
        {"id":2},
        {"id":3},
        {"id":4},{"id":5}
    ]
}

属性值的类型则可实用@来制定格式

{
    name: '@chineseName',
    ip: '@ip',
    email: '@email',
    avatar: '@image'
}

生成结果为:

{
    name: "朱信生", 
    ip: "248.149.5.158", 
    email: "u.wilson@lee.edu", 
    avatar: "http://dummyimage.com/180x150"
}

以中文名字生成为例子,看下Mockjs是怎么实现的:

chineseName: function(count) {
    var surnames = "赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐".split("");
    var forenames = "贵福生龙元全国胜学祥才发武新利清飞彬富顺信子杰涛昌成康星光天达安岩中茂进林有坚和彪博绍功松善厚庆磊民友裕河哲江超浩亮政谦亨奇固之轮翰朗伯宏言若鸣朋斌梁栋维启克伦翔旭鹏月莺媛艳瑞凡佳嘉琼勤珍贞莉桂娣叶璧璐娅琦晶妍茜秋珊莎锦黛青倩婷姣婉娴瑾颖露瑶怡婵雁蓓".split("");
    if (typeof count !== "number") {
        count = Math.random() > .66 ? 2 : 3;
    }
    var surname = this.pick(surnames);
    var forename = "";
    count = count - 1;
    for (var i = 0; i < count; i++) {
        forename += this.pick(forenames);
    }
    return surname + forename;
}

好吧,看完也是服了作者了~

3.使用实例

用起来也很简单

<script src="jquery-1.11.3.js"></script>
<script src="mock.js"></script>
<script>
Mock.mock('./data.json',{
    name: '@chineseName',
    ip: '@ip',
    email: '@email',
    phone: '@phone',
    avatar: '@image'
});

$.ajax({
    url: './data.json',
    type: 'get',
    data: {
        index:1
    },
    dataType: 'json',
    success: function(res){
        console.log(res);
    },
    error: function(msg){
        console.log(msg);
    }
});
</script>

当然,mock也支持require,sea,cmd方式引用,整体上是一个非常轻量实用的工具。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

MVC视图展现模式之移动布局解析-续集

网站就必须用响应式布局吗?MVC视图展现模式之移动布局:http://www.cnblogs.com/dunitian/p/5213787.html 有人会疑问...

2478
来自专栏互联网杂技

如何学习用Typescript写Reactjs?

首先扫盲一下,先从搭建环境开始: 1.安装node,因为ts的编译器是js/ts写的; 安装node后同时获得npm命令,这是nodejs世界里的包管理器...

42712
来自专栏逆向技术

PE格式第九讲,资源表解析

        PE格式第九讲,资源表解析 一丶熟悉Windows管理文件的方法 首先,为什么标题是这个,主要是为了下边讲解资源方便,因为资源结构体很乱.如果直...

1855
来自专栏Hadoop实操

如何通过Livy的RESTful API接口向非Kerberos环境的CDH集群提交作业

在前面的文章Fayson介绍了《Livy,基于Apache Spark的开源REST服务,加入Cloudera Labs》和《如何编译Livy并在非Kerber...

4747
来自专栏小狼的世界

使用Python读取Mp3的标签信息

MP3是音频文件最流行的格式,它的全称是 MPEG layer III。但是这种格式不支持对于音频内容的描述信息,包括歌曲名称、演唱者、专辑等等。

1013
来自专栏用户2442861的专栏

使用JAVA如何对图片进行格式检查以及安全检查处理

本文出自冯立彬的博客,原地址:http://www.fenglibin.com/use_java_to_check_images_type_and_secur...

441
来自专栏生信宝典

分子对接简明教程 (二)

用PyMOL展示配体和受体相互作用的原子和氢键 为了简化展示过程,我们设计了一个pml脚本 (脚本内有很详细的解释),只需要修改脚本里面受体和配体的名字,然后在...

2455
来自专栏Coding01

说一说 Laravel 邮件发送流程

我们使用阿里云提供的免费邮,和采用「smtp」驱动,作为测试,参考 .env 配置:

795
来自专栏ShaoYL

iOS 安全

3256
来自专栏潇涧技术专栏

ChromeADB Project Analysis

chromeadb项目源码:https://github.com/importre/chromeadb chromeadb工具的本质就是利用adb命令以可视化...

1051

扫码关注云+社区