<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://requirejs.org/docs/release/2.1.16/comments/require.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.4.3/jquery.js"></script>
<title>mockjs -较全的用例</title>
</head>
<body>
<dvi class="data1"></dvi>
<div class="data2"></div>
<div class="data3"></div>
</body>
<script>
// 配置 Mock 路径
require.config({
paths: {
mock: 'http://mockjs.com/dist/mock'
}
});

// 加载 Mock
require(['mock'], function(Mock) {

/*第一部分与第二部分没有关系*/

/*第一部分*/
// Mock.mock( template )
//数据模板
var data = Mock.mock({
'list|4': [{
'id|+1': 1
}],
name: Mock.Random.cname(), //随机产生一个中文的姓名
addr: Mock.mock('@county(true)'), //随机生成一个地址
'age|18-60': 1, //随机生成一个数字 大小在18到60
birth: Mock.Random.date(), //随机生成一个日期
sex: Mock.Random.integer(0, 1),//随机生成一个整数，0/1 ，根据这个来给“男” “女”
email:Mock.mock('@EMAIL()'), //随机生成一个邮箱
'moblie|1':['13531544954','13632250649','15820292420','15999905612'], //在数组中随机找一个
'num1|1-100.2':1, //1-100 中随机生成一个保留两位小数点
'num2|100-300.2':1,
'classroom|1':['精品语文班','精品作业A班','英语班','语文班'],
'from|1':['到店咨询','微店','壹家教','学习服务平台'],
'status|1':['意识强烈','预报名','意向一般','暂无意向'],
time:Mock.Random.date('yyyy-MM-dd'),
mobile:/^1[0-9]{10}$/ //用正则匹配1开头的11位数字的手机号
});
//打印
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo($('.data1'));

/*第二部分*/
// Mock.mock(rurl, template)
Mock.mock(/\.json/, { //匹配.json文件
'list|1-10': [{ //数据模板，随机生成一个对象数组
'id|+1': 1, //1开始，递增
'email': '@EMAIL',
'regexp3': /\d{5,10}/
}]
});
$.ajax({
url: 'hello.json', //请求访问json文件，拦截hello.json的请求，返回mock数据模板中的数据
dataType: 'json',
success:function(data, status, jqXHR) {
//获得mock数据模板中的数据，打印
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo($('.data2'));
}
})
/*第三部分*/
var data3 =Mock.mock(/\.json/, { //匹配.json文件，可执行匹配成功的参数
'list|1-10': [{ //数据模板
'id|+1': 1,
'email': '@EMAIL',
'regexp4': /\d{5,10}/,
'name': Mock.Random.cname(), //随机产生一个中文的姓名
}]
});

function sendData(url) {
$.ajax({
url: url,
dataType: 'json',
function(data3, status, jqXHR) {
//获得mock数据模板中的数据，打印
$('<pre>').text(JSON.stringify(data3, null,5)).appendTo($('.data3'));
}
})
}
sendData("hello.json"); //调用方法渲染出数据
});
</script>
</html>

mockJs语法糖用例的更多相关文章

  1. C# 6.0新特性---语法糖

    转载:http://www.cnblogs.com/TianFang/p/3928172.html 所谓语法糖就是在编译器里写做文章,达到简化代码书写的目的,要慎重使用,省略过多不易理解. NULL检 ...

  2. Scala的apply unapply unapplySeq 语法糖

    apply 可以理解为注入 unapply unapplySeq 可以理解为提取 apply 与 unapply 虽然名字相近,但是使用起来区别挺大.apply有点像构造函数unapply主要是结合模 ...

  3. JVM总结-Java语法糖与Java编译器

    自动装箱与自动拆箱 首先要提到的便是 Java 的自动装箱(auto-boxing)和自动拆箱(auto-unboxing). 我们知道,Java 语言拥有 8 个基本类型,每个基本类型都有对应的包装 ...

  4. C# 类型实例化的语法糖--unity下诡异结果

    类型实例化语法糖就是如下的用法: public class Abc { public int ID { get; set; } public string Name { get; set; } pub ...

  5. Kotlin 特性 语法糖 优势 扩展 高阶 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  6. Java语法糖设计

    语法糖 Java语法糖系列,所以首先讲讲什么是语法糖.语法糖是一种几乎每种语言或多或少都提供过的一些方便程序员开发代码的语法,它只是编译器实现的一些小把戏罢了,编译期间以特定的字节码或者特定的方式对这 ...

  7. 深入理解java虚拟机（十二） Java 语法糖背后的真相

    语法糖(Syntactic Sugar),也叫糖衣语法,是英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语.指的是,在计算机语言中添加某种语法,这些语法糖虽然不会对语言 ...

  8. 迭代器Iterator与语法糖for-each

    一.为什么需要迭代器 设计模式迭代器 迭代器作用于集合,是用来遍历集合元素的对象.迭代器迭代器不是Java独有的,大部分高级语言都提供了迭代器来遍历集合.实际上,迭代器是一种设计模式: 迭代器模式提供 ...

  9. Java语法糖（二）

    语法糖之四:内部类 内部类:顾名思义,在类的内部在定义一个类.内部类仅仅是编译时的概念,编译成字节码后,内部类会生成单独的Class文件. 四种:成员内部类.局部内部类.匿名内部类.静态内部类. 1. ...

随机推荐

  1. JS设置cookie、读取cookie、删除cookie（转）

    JS设置cookie.读取cookie.删除cookie 转载  2015-04-17   投稿:hebedich    我要评论 Js操作Cookie总结(设置,读取,删除),工作中经常会用到的哦! ...

  2. mongodb切换到admin

    127.0.0.1:后面是端口,/admin是切换到管理员权限 cd C:\Program Files\MongoDB\Server\3.0\bin mongo.exe 127.0.0.1:27017 ...

  3. Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  4. Angular09 数据绑定、响应式编程、管道

    1 数据绑定的分类 1.1 单向数据绑定 1.1.1 属性绑定 -> 数据从组件控制类到组件模板 DOM属性绑定 HTML属性绑定 1.1.2 事件绑定 -> 数据从组件模板到组件控制类 ...

  5. AngularJS中的DI

    AngularJS中的DI一直以为Angular中的DI是很高大上的东西,也自己写过一个DI的demo,知道其中的难点就是最后动态代码的执行:我现在知道了参数的值,也知道了我要执行的方法/创建对象的类 ...

  6. 16、GATK使用简介 Part1/2

    转载:http://blog.sina.com.cn/s/blog_6721167201018fyw.html GATK (全称The Genome Analysis Toolkit)是Broad I ...

  7. Luogu 4556 雨天的尾巴

    主席树+线段树合并. 首先我们想一想如果只有一个结点的话,我们弄一个权值线段树就可以随便维护了. 那么我们可以运用差分的思想,把一个询问拆成四个操作,对于一个询问$(x, y, v)$,我们在$x$的 ...

  8. 21. CTF综合靶机渗透(十四)

    靶机说明: I created this machine to help others learn some basic CTF hacking strategies and some tools. ...

  9. 20. Linux提权：从入门到放弃

    几点前提 已经拿到低权shell 被入侵的机器上面有nc,python,perl等linux非常常见的工具 有权限上传文件和下载文件 内核漏洞提权 提到脏牛,运维流下两行眼泪,我们留下两行鼻血.内核漏 ...

  10. C# 中介者模式

    中介者模式 中介者模式,定义了一个中介对象来封装一系列对象之间的交互关系.中介者使各个对象之间不需要显式地相互引用,从而使耦合性降低,而且可以独立地改变它们之间的交互行为. 结构: 中介者模式设计两个 ...