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,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...
随机推荐
- Orchard详解--第八篇 拓展模块及引用的预处理
从上一篇可以看出Orchard在处理拓展模块时主要有两个组件,一个是Folder另一个是Loader,前者用于搜索后者用于加载. 其中Folder一共有三个:Module Folder.Core Fo ...
- 三、Tableau筛选器的使用
一.使用筛选器制作联动效果 注意,下面两幅图以‘是否盈利’来添加颜色标签 图一:地图 图二:月度销售客户细分 图三:月度销售产品类别 1.新增仪表盘:将图一.图二.图三拉进同一个仪表盘 2.在图一原图 ...
- Markdown语法大全
目录 前言: 1.Markdown基础用法 1.1 目录 1.2 标题 1.3 字体样式 1.4 引用 1.5 图片 1.6 超链接 1.7 列表 1.8 表格 1.9 代码 1.10 流程图 1.1 ...
- 1.tushare模块的应用
tushare模块的应用 今日概要 TuShare简介和环境安装 TuShare的应用 今日详情 一.TuShare简介和环境安装 TuShare是一个著名的免费.开源的python财经数据接口包.其 ...
- python 协程、I/O模型
一.引子 (超哥协程) 并发本质:保存状态+切换 cpu正在运行一个任务,转而执行另一个任务的情概况:1.是该任务发生了阻塞:2.该任务计算的时间过长或有一个优先级更高的程序替代了它. 协程本质上就是 ...
- C# SHA256加密算法记录
using System.Text; using System.Diagnostics; using System.Security; using System.Security.Cryptograp ...
- JZOJ 5602.【NOI2018模拟3.26】Cti
JZOJ 5602.[NOI2018模拟3.26]Cti Description 有一个 \(n×m\) 的地图,地图上的每一个位置可以是空地,炮塔或是敌人.你需要操纵炮塔消灭敌人. 对于每个炮塔都有 ...
- [找工作] 2019秋招｜从春招到秋招，Java岗经验总结（收获AT）
转自(有更多) https://blog.csdn.net/zj15527620802/article/month/2018/10 前言 找工作是一件辛酸而又难忘的历程.经历过焦虑.等待.希望,我们最 ...
- P2690 接苹果（暴力搜索+记忆化）
思路: 建树:就是在每一分钟进行分枝,是原地不动,还是移动.然后,走完整个过程. 但是,我其实还是走了弯路,因为,最开始想的是剪枝,没有用记忆化搜索.但是,肯定是能用dp来做,啊啊啊啊阿,能用dp肯定 ...
- How to get Docker
Docker 通俗的理解就是像VM一样的虚拟技术,但是不完全相同. Docker可以打包为镜像文件,在镜像中运行容器. 镜像和容器可以理解成类和对象的关系. 拿VM虚拟机和docker来举例,一个容器 ...