学习 | mockjs入门
最近工作有用到mockjs模拟数据,实现前后端分离,今天系统的把mockjs的API都过了一遍,算是入门吧。
什么是mockjs
mockjs就是一个模拟数据,生成随机数据,拦截ajax请求。
为什么使用mockjs
1、后端给不了数据
2、数据太长,将数据放在js文件里面,完成后挨个改url
3、还原真实数据
4、特殊格式 ip 随机数 图片 地址
5、分页显示
mockjs基本语法(require.js)
参考index.html
语法规则
1、数据模板定义规范
"name|rule":value
'name|min-max': value
通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。
'name|count': value
通过重复 string 生成一个字符串,重复次数等于 count。
'name|min-max.dmin-dmax': value
生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位。
'name|min-max.dcount': value
生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dcount 位。
'name|count.dmin-dmax': value
生成一个浮点数,整数部分等于count,小数部分保留 dmin 到 dmax 位。
'name|count.dcount': value
生成一个浮点数,整数部分等于count,小数部分保留 dcount 位。
'name|+1': value
属性值自动加 1,初始值为 value
'name|1': boolean
属性值自动加 1,初始值为 value
1、Mock.mock(template)
根据数据模板生成模拟数据
2、Mock.mock(rurl,template)
当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
3、Mock.mock( rurl, function( options ) )
当拦截到匹配 rurl 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
4、Mock.mock( rurl, rtype, template )
当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
5、Mock.mock( rurl, rtype, function( options ) )
当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
6、Mock.setup( settings )
配置拦截 Ajax 请求时的行为。支持的配置项有:timeout。
7、占位符 Mock.Random
Mock.Random 是一个工具类,用于生成各种随机数据
8、自定义占位符 Mock.Random.extend({func});
用于自定义占位符
9、Mock.valid()
校验真实数据 data 是否与数据模板 template 匹配。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./require.js"></script>
<script>
require.config({
paths:{
zepto:"./zepto",
mock:"http://mockjs.com/dist/mock"
}
});
require(["mock"],function(M){
var data = M.mock({
'list|1-10':[{
'id|+1':1
}]
})
console.log(data);
})
</script>
<body> </body> </html>
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./require.js"></script>
<script>
require.config({
paths:{
zepto:"./zepto",
mock:"http://mockjs.com/dist/mock"
}
});
require(["mock"],function(M){
var data = M.mock({
'list1|1':/[a-z][A-Z][0-9]/,
'list2|1':/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
'list3|1':/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/,
'list4|1':/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/,
})
console.log(data);
})
</script>
<body> </body> </html>
index3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./require.js"></script>
<script>
require.config({
paths:{
zepto:"./zepto",
mock:"http://mockjs.com/dist/mock"
}
});
require(["zepto","mock"],function($,M){
var temp = {
"title":"hejian", "star|1-5":"*",
"count|5-9.2":1,
"like1|1-2":false,
"like2|1":true,
"obj1|2-4":{
"1":"北京",
"2":"上海",
"3":"杭州",
"4":"西安",
},
"obj2|2":{
"1":"安康",
"2":"宝鸡",
"3":"咸阳",
"4":"户县"
},
"array|1":["1","2","3","5"],
'function':function(){
return this.title;
}
}
var data = M.mock(temp); var temp2 = {
"list|1-10":[{
"id|+1":1,
'email':'@EMAIL'
}]
}
M.mock(/\.json/,temp2);
$.ajax({
url:"hello.json",
dataType:"json",
success:function(data){
console.log(data);
}
}) var func = function(options){
return options;
}
M.mock(/\.json/,func);
$.ajax({
url:"hello.json",
dataType:"json",
success:function(data){
console.log(data);
}
})
$.ajax({
url:"hello.json",
dataType:"json",
data:{
id:1,
name:"2"
},
success:function(data){
console.log(data);
}
})
$.ajax({
url:"hello.json",
type:"post",
success:function(data){
console.log(data);
}
}) M.mock(/\.json/,'get',{
type:"get"
});
$.ajax({
url:"hello.json",
type:"post",
success:function(data){
console.log(data);
}
})
M.mock(/\.json/,'get',function(options){
return options.type;
})
$.ajax({
url:"hello.json",
type:"get",
success:function(data){
console.log(data);
}
})
// M.setup({
// timeout:400,
// })
// $.ajax({
// url:"hello.json",
// timeout:400,
// success:function(data){
// console.log(data);
// }
// })
var Random = M.Random;
console.log(Random.email());
var data3 = M.mock('@email');
console.log(data3);
var data4 = M.mock({"email":"@email"});
console.log(data4);
console.log(M.mock({boolean:'@boolean'}));
console.log(M.mock({natural:'@natural'}))
console.log(M.mock({integer:'@integer'}))
console.log(M.mock({float:'@float'}))
console.log(M.mock({character:'@character'}))
console.log(M.mock({string:'@string'}))
console.log(M.mock({range:'@range'}))
console.log(M.mock({date:'@date'}))
console.log(M.mock({time:'@time'}))
console.log(M.mock({datetime:'@datetime'}))
console.log(M.mock({now:'@now'}))
console.log(M.mock({image:'@image'}))
console.log(M.mock({dataImage:'@dataImage'}))
console.log(M.mock({color:'@color'}))
console.log(M.mock({paragraph:'@paragraph'}))
console.log(M.mock({word:'@word'}))
console.log(M.mock({title:'@title'}))
console.log(M.mock({cparagraph:'@cparagraph'}))
console.log(M.mock({cword:'@cword'}))
console.log(M.mock({ctitle:'@ctitle'}))
console.log(M.mock({first:'@first'}))
console.log(M.mock({last:'@last'}))
console.log(M.mock({name:'@name'}))
console.log(M.mock({cfirst:'@cfirst'}))
console.log(M.mock({domain:'@domain'}))
console.log(M.mock({area:'@area'}))
console.log(M.mock({guid:'@guid'}))
console.log(M.mock({capitalize:'@capitalize'}))
console.log(M.mock({upper:'@upper'}))
console.log(M.mock({shuffle:'@shuffle'})) M.Random.extend({
test:function(date){
var city = ["西安","杭州","北京","上海","深圳"];
return this.pick(city);
}
})
console.log(M.mock("@test")); var temp3 = {
name:"value1"
}
var data = {
name :"value2"
}
console.log(M.valid(temp3,data));
var temp4 = {
"key|1-4":"*"
}
console.log(M.toJSONSchema(temp4));
})
</script>
<body> </body> </html>
这三个文件就是自己自学mockjs学习的过程,希望能帮助到大家。
学习 | mockjs入门的更多相关文章
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- [IT学习]sql 入门及实例
sql 是一种数据库查询语言,可以让你很快的查询到数据.其实一般情况下,你也可以采用excel来查询数据库数据. 但是人们通常认为sql会更加灵活和方便一些. sql学习的入门网站: http://w ...
- PHP学习笔记 - 入门篇(5)
PHP学习笔记 - 入门篇(5) 语言结构语句 顺序结构 eg: <?php $shoesPrice = 49; //鞋子单价 $shoesNum = 1; //鞋子数量 $shoesMoney ...
- PHP学习笔记 - 入门篇(4)
PHP学习笔记 - 入门篇(4) 什么是运算符 PHP运算符一般分为算术运算符.赋值运算符.比较运算符.三元运算符.逻辑运算符.字符串连接运算符.错误控制运算符. PHP中的算术运算符 算术运算符主要 ...
- PHP学习笔记 - 入门篇(3)
PHP学习笔记 - 入门篇(3) 常量 什么是常量 什么是常量?常量可以理解为值不变的量(如圆周率):或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量 ...
- PHP学习笔记--入门篇
PHP学习笔记--入门篇 一.Echo语句 1.格式 echo是PHP中的输出语句,可以把字符串输出(字符串用双引号括起来) 如下代码 <?php echo "Hello world! ...
- netty深入学习之一: 入门篇
netty深入学习之一: 入门篇 本文代码下载: http://download.csdn.net/detail/cheungmine/8497549 1)Netty是什么 Netty是Java NI ...
- LESS学习笔记 —— 入门
今天在网上完成了LESS的基础学习,下面是我的学习笔记.总共有三个文件:index.html.main.less.mian.css,其中 mian.css 是 main.less 经过Koala编译之 ...
- Java工程师学习指南 入门篇
Java工程师学习指南 入门篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...
随机推荐
- 在UOS 上部署 django + uwsgi + nginx 流程
前言:这篇主要是流程,不喜勿喷,虽然我知道在部署过程中 参照博客写的越详细越好. 强大的百度会解决一切的 爬了诸多坑 ,心累,必须总结!! 最近 芯片封锁闹的很凶 支持国产!! UOS 统一操作系统 ...
- [noip2002] 产生数
题目描述 给出一个整数 n (n<1030)和 k 个变换规则 (k < 15) . 规则: 一位数可变换成另一个一位数: 规则的右部不能为零. 例如:n = 234 .有规则( k=2 ...
- Salesforce学习笔记之Actions and Recommendations
设置Actions and Recommendations(Salesforce提供的标准元素),Salesforce上的文档说有两种方法,即Deployment和Process Builder(通过 ...
- Linked server的一个问题
好久没有写新的博客,主要是很久没有什么动力和需求来写程序.虽然也不是一点没写,但都缺乏技术含量,没什么可说的. 前两天碰到一个关于linked server的问题.本地的sql server里,通过l ...
- python 在目标位置建立文件夹
import os path = r'D:\pywork\12' # 指定位置 if not os.path.exists(path + '/' + '任务集'): #如果目标位置 不存在该文件夹“任 ...
- 免费验证码接收网站&不停开小号方法
手机号注册:免费验证码接收网站 0.http://getfreesmsnumber.com/ 9个外国网站,访问后要快点点击链接,否则2秒会检测出adblocker 1.http://smsrecei ...
- linux命令--大小写转换命令
1.tr命令 tr命令转换小写为大写 cat aa.txt | tr a-z A-Z 或者 cat aa.txt | tr [:lower:] [:upper:] tr命令大写转换小写 ...
- Jmeter 常用函数(20)- 详解 __counter
如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.htm 作用 计数器,跟配置元件里面的计数器作用类似哦 ...
- centos7.8 安装部署 k8s 集群
centos7.8 安装部署 k8s 集群 目录 centos7.8 安装部署 k8s 集群 环境说明 Docker 安装 k8s 安装准备工作 Master 节点安装 k8s 版本查看 安装 kub ...
- javascript正则用法
一.元字符 . 匹配除了换行符以外的字符. \w 匹配字母或者数字或者下划线 \W 匹配不是字母.数字.下划线 \d 匹配数字,相当于[0-9] \D 匹配不是数字的字符 \s ...