<!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. assert.fail()

    assert.fail(message) assert.fail(actual, expected[, message[, operator[, stackStartFunction]]]) oper ...

  2. Linux服务器监控工具--Nmon介绍

    一.Nmon介绍(详细请参考百度百科) 是一款分析 AIX 和 Linux 性能的免费工具,这个高效的工具可以工作于任何哑屏幕.telnet 会话.甚至拨号线路.另外,它并不会消耗大量的 CPU 周期 ...

  3. Sublime text3 创建html模板

    最近接手了公司官网跟新的任务,需要编写HTML页面.页面中存在大量重复内容(导航条.页脚.侧边栏等),每次复制粘贴也不是个事,网上搜了相关的HTML模板创建问题,还找到了.楼主使用的是Sublime ...

  4. C#中的new修饰符说明

    new修饰符主要是用来隐藏从基类继承的成员. 这句话怎么理解呢,就是说有一个类,它有一个继承类,继承类中存在和基类中一样名称的成员(属性,方法等). 对继承类中的该成员使用new修饰符时,调用时将会隐 ...

  5. 《鸟哥的Linux私房菜》读书笔记4

    1. grep查找 grep 'string' filename; last | grep 'root'; 以行为单位. 利用参数-i(忽略大小写),-v(反相)等进行正则表达式: ‘’中可以为正则表 ...

  6. 20169201 实验三 敏捷开发与XP实践报告

    敏捷开发与XP介绍 敏捷开发(Agile Development)是一种以人为核心.迭代.循序渐进的开发方法."敏捷流程"是一系列价值观和方法论的集合.从2001年开始,一些软件界 ...

  7. C# 写 LeetCode easy #21 Merge Two Sorted Lists

    21. Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new list s ...

  8. jq中打开新页面 并获取携带值

    打开新页面:window.location.href = "./index.html?id=1"获取携带值: function GetRequest() { var url = l ...

  9. C#中的运算符和表达式

    说起C#运算符和表达式,小伙伴们肯定以为很简单,其实要用好表达式,不是一件容易的事.一个好的表达式可以让你做事半功倍的效果,比如三元表达式,可以让你少写N多个if和case语句. 表达式 由 操作数( ...

  10. 审美赛_（java）实现

    问题描述 <审美的历程>课上有n位学生,帅老师展示了m幅画,其中有些是梵高的作品,另外的都出自五岁小朋友之手.老师请同学们分辨哪些画的作者是梵高,但是老师自己并没有答案,因为这些画看上去都 ...