<!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. Maven的pom实例

    该pom中包含了一些我认为会需要的东西,并且加了注释.可以根据需求适当删减. 包含了spring-mvc , junit,hibernate验证,json,apache-commons组件 还有 co ...

  2. R: vector 向量的创建、操作等。

    ################################################### 问题:创建.操作向量   18.4.27 怎么创建向量 vector,,及其相关操作 ??? 解 ...

  3. 【PHP】Composer使用简介，composer install 和 update 区别

    1.composer是php的依赖包管理工具 2.符合PSR-0/1/2/3/4 规范 3.composer安装推荐使用国内镜像 4.composer require/install/update 区 ...

  4. vim加亮和自动缩进

    修改/etc/vimrc 添加 set cindent syntax on

  5. PLSQL Developer 直接用ip访问指定数据库

  6. redis集群搭建踩坑笔记

    推荐参考教程:https://blog.csdn.net/pucao_cug/article/details/69250101 错误: from /usr/lib/ruby/2.3.0/rubygem ...

  7. JavaScript -- 常用的日期对象和数学对象

    创建一个时间对象 var time=new Date(); //当前时间,()内可写入字符串 ,如'2017-10-10',可转为响应的时间 常用方法 time.getFullYear(); //从 ...

  8. 796D(bfs)

    题目链接: http://codeforces.com/problemset/problem/796/D 题意: 给出一颗 n 个节点树, 树枝连接的两个定点距离为 1, 树中有 k 个特殊点, 问最 ...

  9. hdu 1847 Good Luck in CET-4 Everybody!（巴什博弈）

    Good Luck in CET-4 Everybody! HDU - 1847 大学英语四级考试就要来临了,你是不是在紧张的复习?也许紧张得连短学期的ACM都没工夫练习了,反正我知道的Kiki和Ci ...

  10. 008-数据类型(Dictionary)

    数据类型(Dictionary) 一.定义 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值 key=>value 对用冒号:分割,每个键值对之间用逗号,分割,整个字典包括在花括 ...