<!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页面跳转常用的几种方式（转）

    js页面跳转常用的几种方式 转载  2010-11-25   作者:    我要评论 js实现页面跳转的几种方式,需要的朋友可以参考下. 第一种: 复制代码代码如下: <script langu ...

  2. Windows命令快捷打开

    Win+R或者在搜索中输入: control -- 控制面板 mstsc -- 远程连接 SnippingTool -- 截图工具

  3. HDU 5242 Game (贪心)

    题意:给定一棵树,要求从根结点1走k次,每次都是到叶子结点结束,把走过的所有的结点权值加起来,最大是多少. 析:先把每个结点到根结点的路径之和求出来,然后按权值从大到小排序,然后每次把路径中的权值求出 ...

  4. SQL 动态拼接SQL 语句

    USE [PMS_UnifiedDB_15] GO /****** Object: StoredProcedure [dbo].[SP_GetLogInfo] Script Date: 2/11/20 ...

  5. 数据访问层DAL

    我们已经根据设计好的pdm文件生成数据库,下面我们一起完成数据库访问层需要的工作 在dal类库上点击右键,添加,新建项 选择“ADO.NET实体数据模型”,会自动命名“Model1” 选择“来自数据库 ...

  6. 【解决】client does not support authentication

    cmd窗口登陆mysql: C:\Users\Administrator>  sqlplus  /nolog mysql>  conn / as sysdba; mysql> alt ...

  7. C++基础之多态性和动态联编

    (1)多态性是指相同的函数名对应不同的实现.多态性采用两种方式:重载方式和覆盖方式.重载方式表现在函数重载和运算符重载:覆盖方式表现在基类与派生类中相同说明的函数.(2)函数重载要求被重载的函数应该在 ...

  8. webpack@3.6.0（1） -- 快速开始

    本篇内容 前言 配置入口和输出 热更新 loader配置 js代码压缩 html的打包与发布 前言 //全局安装 npm install -g webpack(3.6.0) npm init //安装 ...

  9. 为RHEL6配置软件源 YUM安装

    为RHEL6配置软件源(一)更改yum由于 redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,重启安装,再配置其他源,以下为详细过程:1.删除 ...

  10. git 提交解决本地与远程冲突

    首先介绍一下背景. 如果有一个工程A,开始时test.txt 的内容如下 chenfool hello world 作者通过 git clone 的方式,将这个项目download 到本地. 此时,作 ...