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 条评论
登录 后参与评论

相关文章

来自专栏Java后端技术

解决Java程序连接mysql数据库出现CommunicationsException: Communications link failure错误的问题

  最近在家里捣鼓一个公司自己搭建的demo的时候,发现程序一启动就会出现CommunicationsException: Communications lin...

1071
来自专栏代码GG之家

SDL系列讲解(九) 异常退出分析

SDL系列讲解(一) 简介 SDL系列讲解(二) 环境搭建 SDL系列讲解(三) 工具安装 SDL是什么,能干什么,为什么我们要学习它? SDL系列讲解(四)...

1926
来自专栏北京马哥教育

27个Linux文档编辑命令

? 文 | 豌豆 来源 | 菜鸟教程 ? 豌豆贴心提醒,本文阅读时间5分钟,文末有秘密! Linux col命令 Linux col命令用于过滤控制字...

4616
来自专栏Python攻城狮

MongoDB与python交互1.Pymongo2.安装3.使用4.mongoDB其它操作5.Mongodb与python交互6.完成命令行项目:学生信息管理(基于Python2.7)

PyMongo是Mongodb的Python接口开发包,是使用python和Mongodb的推荐方式。

1123
来自专栏逆向技术

32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用

32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用 一丶32位(x86也称为80386)与8086(16位)汇编的区别 1.寄存器的改变  ...

2429
来自专栏SDNLAB

OpenDaylight Lithium-SR2 Cluster集群搭建

目的 希望大家能够通过本教程对OpenDaylight集群的基本概念如shard/基本配置有所了解,感受OpenDaylight的High Availabili...

3145
来自专栏Java架构师历程

IntelliJ IDEA 类代码模板注解自定义

本篇内容为大家提供的是IntelliJ IDEA 使用教程中的文件代码模板的使用,IntelliJ IDEA是java语言开发的集成环境,IntelliJ在业界...

3313
来自专栏程序员八阿哥

王老板Python面试(9):整理的最全 python常见面试题(基本必考)

1)迭代器是一个更抽象的概念,任何对象,如果它的类有next方法和iter方法返回自己本身。对于string、list、dict、tuple等这类容器对象,使用...

1131
来自专栏有趣的Python

最新Django2.0.1在线教育零基础到上线教程(三)-3&4&5

演示地址: http://mxonline.mtianyan.cn 教程仓库地址1: https://github.com/mtianyan/DjangoGe...

4335
来自专栏北京马哥教育

27个Linux文档编辑命令

在许多UNIX说明文件里,都有RLF控制字符。当我们运用shell特殊字符">"和">>",把说明文件的内容输出成纯文本文件时,控制字符会变成乱码,col指令则...

1135

扫码关注云+社区