mockjs使用
/**
* 使用mockjs来mock数据, 提供mock数据API接口
*/
import Mock from 'mockjs'
import data from './data.json'
//注册接口
Mock.mock('/api2/goods', {
// code表示成功
code: 0,
data: data.goods
})
Mock.mock('/api2/ratings', {
code: 0,
data: data.ratings
})
Mock.mock('/api2/seller', {
code: 0,
data: data.seller
})
// 不用export
mock数据模板
1. 属性值是字符串 String
'name|min-max': string通过重复
string生成一个字符串，重复次数大于等于min，小于等于max。'name|count': string通过重复
string生成一个字符串，重复次数等于count。
2. 属性值是数字 Number
'name|+1': number属性值自动加 1，初始值为
number。'name|min-max': number生成一个大于等于
min、小于等于max的整数，属性值number只是用来确定类型。'name|min-max.dmin-dmax': number生成一个浮点数，整数部分大于等于
min、小于等于max，小数部分保留dmin到dmax位
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
// =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
3. 属性值是布尔型 Boolean
'name|1': boolean随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
'name|min-max': value随机生成一个布尔值，值为
value的概率是min / (min + max)，值为!value的概率是max / (min + max)。
4. 属性值是对象 Object
'name|count': object从属性值
object中随机选取count个属性。'name|min-max': object从属性值
object中随机选取min到max个属性。
5. 属性值是数组 Array
'name|1': array从属性值
array中随机选取 1 个元素，作为最终值。'name|+1': array从属性值
array中顺序选取 1 个元素，作为最终值。'name|min-max': array通过重复属性值
array生成一个新数组，重复次数大于等于min，小于等于max。'name|count': array通过重复属性值
array生成一个新数组，重复次数为count。
6. 属性值是函数 Function
'name': function执行函数
function，取其返回值作为最终的属性值，函数的上下文为属性'name'所在的对象。
数据占位符定义规范 DPD
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
注意：
- 用
@来标识其后的字符串是 占位符。 - 占位符 引用的是
Mock.Random中的方法。 - 通过
Mock.Random.extend()来扩展自定义占位符。 - 占位符 也可以引用 数据模板 中的属性。
- 占位符 会优先引用 数据模板 中的属性。
- 占位符 支持 相对路径 和 绝对路径。
Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
})
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}
Mock.mock()用法
mock参数
rurl
可选。
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
rtype
可选。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template
可选。
表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
function(options)
可选。
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。
1.Mock.mock( template )
根据数据模板生成模拟数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
// mock数据模板
// 属性名 name
// 生成规则 rule
// 属性值 value
// 'name|rule': value
var template = {
'title': 'Syntax Demo', //固定文本 //结果:Syntax Demo
'string1|1-10': '★', //随机生成重复1到10个★ ★★★★
'string1|1-10': 'abc', //随机生成重复1到10个abc abcabcabcabcabcabc
'string2|3': 'value', //重复3个value valuevaluevalue
'number1|+1': 100, //属性值自动加 1，初始值为100 100
'number2|1-100': 100, //随机1-100
'number3|1-100.1-10': 1, //随机1-100,并小数点后带1-10位数 24.23586
'number4|123.1-10': 1, //123,并小数点后带1-10位数 123.9722331,
'number5|123.3': 1, //123，并小数点后带3位数 123.346
'number6|123.10': 1.123, // 123.1232441918
'boolean1|1': true,
'boolean2|1-2': true,
'object1|2-4': { //从属性值 object 中随机选取2到4个属性。
'110000': '北京市',
'120000': '天津市',
'130000': '河北省',
'140000': '山西省'
},
'object2|2': { //从属性值 object 中随机选取2个属性。
'310000': '上海市',
'320000': '江苏省',
'330000': '浙江省',
'340000': '安徽省'
},
'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'], //从属性值 array 中随机选取1个元素为最终值 'CMD'
'array2|1-10': ['Mock.js'],
'array3|3': ['Mock.js'], //重复属性值mock.js三次 生成新数组 ['Mock.js','Mock.js','Mock.js']
'name': function() { //执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
return this.title
}
}
var data = Mock.mock(template)
console.log(data)
</script>
</body>
</html>
2.Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
3.Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
4.Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
在html中使用
get请求
在实践过程中，发现 Mockjs 本身对 GET 请求的支持并不是很友好。
举个例子，使用 Mock.mock("/user/getUserInfo", "get", mockData) 的时候，它只会拦截url等于 /user/getUserInfo 的请求，而对于带参数的请求，如/user/getUserInfo?id=12，因为不等于 /user/getUserInfo 就拦截不到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>
<div>
<h2 id="mock1">mock模拟带参数的get请求</h2>
</div>
<script type="text/javascript">
// Mock.mock("http://mockjs",'get',function(options) {
// return options
// });
// 上面直接请求http://mockjs?data=abc，无法请求，可通过下面正则来匹配
// 对于带参数的get请求，url为：http://mockjs?data=abc
Mock.mock(/http:\/\/mockjs/,'get',function(options) {
return options
});
$("#mock1").click(function(){
$.get("http://mockjs",{data:'abc'},
function (res) {
console.log(typeof(res)) //string res为JSON字符串
var res=JSON.parse(res) //通过JSON.parse JSON字符串转为JSON对象
console.log(res)
//{url: "http://mockjs?data=abc", type: "GET", body: null}
// body: null
// type: "GET"
// url: "http://mockjs?data=abc"
// __proto__: Object
}
);
});
</script>
</body>
</html>
mockjs使用的更多相关文章
- Mockjs，模拟数据生成器
(推荐使用)Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. 提供了以下模拟功能: 1. 根据数据模板生成模拟数据. 2. 模拟Ajax请求,生成并返回模拟 ...
- mockjs模拟前后端交互
mockjs是用于mock数据(造假数据)的组件. mockjs官网链接为:http://mockjs.com/:mockjs官网有mockjs的源代码.API以及示例. mockjs拦截ajax请求 ...
- 让我们来简单说说mockjs吧！
背景: 新接手了一个更新CRM的客户管理项目,负责添加三张活动财务表与操作的模块,接到任务时候,后台还没有做数据,所以用到了假数据,So就是这里所说的mockjs. 介绍: mockjs让前端独立于后 ...
- mockjs学习总结（方便前端模拟数据，加快开发效率）
基本介绍: 在我们前端开发中经常遇到这样的事情,接口没有写好,只能写静态页面,如何才能用很简单的方法模拟后端数据呢?mockjs就干了这件事,而且干的还挺好. 下面是我作为初学者的一些总结经验,期 ...
- vue+mockjs 模拟数据，实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- dva + antd + mockjs 实现基础用户管理
1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard [dvadashboard为项目名] 3.安装mockjs ...
- vue 利用mockJs 模拟数据
工作这几年一直用Java 开发,前端的技术自己也忘得差不多了(实际上自己也不怎么会),最近参与的项目是用VUE + Element-ui + springboot 写的,由于需求没有定,先画一个de ...
- mockjs，json-server一起搭建前端通用的数据模拟框架
无论是在工作,还是在业余时间做前端开发的时候,难免出现后端团队还没完成接口的开发,而前端团队却需要实现对应的功能,不要问为什么,这是肯定存在的.本篇文章就是基于此原因而产出的.希望对有这方面的需求的同 ...
- vue中如何使用mockjs摸拟接口的各种数据
mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...
- MockJS和Easy Mock使用
之前做mock数据一直用的json-server,今天同事给我推荐了很好用的工具:Easy Mock,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...
随机推荐
- spring4笔记----依赖注入的两种形式
设值注入:通过<property.../>元素驱动Spring执行setter的方法 构造注入:通过<constructor-arg.../>元素驱动Spring执行带有参数的 ...
- 洗礼灵魂，修炼python（84）-- 知识拾遗篇 —— 网络编程之socket
学习本篇文章的前提,你需要了解网络技术基础,请参阅我的另一个分类的博文:网络互联技术(4)——计算机网络常识.原理剖析 网络通信要素 1.IP地址: 用来标识网络上一台独立的终端(PC或者主机) ip ...
- ugui SetParent在安卓上一个诡异bug
问题描述 我的环境:Unity3D 5.3.7 出问题机型:安卓模拟器.部分低配安卓机型(比如:红米2A) 以下代码是设置某个节点的父节点,在PC.Editor.大部分手机上都是正常的,但问题机型上, ...
- 常用的几条sql语句
### 常用的几条sql语句 选择:select * from table1 where 范围 插入:insert into table1(field1,field2) values(value1,v ...
- Angular四大核心特性
Angular四大核心特性 Angular四大核心特性理论概述 MVC模式:它目的是为了分离视图.模型和控制器而设计出来的:其中数据模型用来储存数据,视图用来向用户展示应用程序,控制器充当模型和视图之 ...
- PHP语言在中国的发展前景怎么样？
PHP语言在中国的发展前景怎么样? “在互联网泛滥得今天,想要做好这一行业不是那么容易的,然而,互联网编程语言的发展PHP编程语言的出现也是赢了世界发展的潮流. PHP在我国发展也很快,越来越多的编程 ...
- 文本分类实战（一）—— word2vec预训练词向量
1 大纲概述 文本分类这个系列将会有十篇左右,包括基于word2vec预训练的文本分类,与及基于最新的预训练模型(ELMo,BERT等)的文本分类.总共有以下系列: word2vec预训练词向量 te ...
- 爬取伯乐在线文章（二）通过xpath提取源文件中需要的内容
爬取说明 以单个页面为例,如:http://blog.jobbole.com/110287/ 我们可以提取标题.日期.多少个评论.正文内容等 Xpath介绍 1. xpath简介 (1) xpath使 ...
- 关于box-shadow和drop-shadow的显著区别
一.box-shadow box-shadow是css3中新增的属性,用于增加边框阴影,让原有的元素变得更多样性,它名下有四位小弟,老大控制水平方向偏移,老二控制垂直方向偏移,老三控制模糊度,最小的老 ...
- 007_Python中的__init__，__call__，__new__
__init__函数 当一个类实例被创建时, __init__() 方法会自动执行,在类实例创建完毕后执行,类似构建函数.__init__() 可以被当成构建函数,不过不象其它语言中的构建函数,它并不 ...