mockjs介绍
官网
https://github.com/nuysoft/Mock/wiki/Getting-Started
一、为什么使用mockjs
在做开发时,当后端的接口还未完成,前端为了不影响工作效率,手动模拟后端接口,
1.我们可以使用json文件来模拟后台数据,但比较局限,无法模拟数据的增删改查
2.使用json-server模拟,但不能随机生成所需数据
3.使用mockjs模拟后端接口,可随机生成所需数据,可模拟对数据的增删改查
二、mock优点
1.前后端分离,
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。
三、mock使用
npm install mockjs --save-dev
// 引入 Mock
var Mock = require('mockjs')
// 定义数据类型
var data = Mock.mock({
// 20条数据
"data|20": [{
// 商品种类
"goodsClass": "女装",
// 商品Id
"goodsId|+1": 1,
//商品名称
"goodsName": "@ctitle(10)",
//商品地址
"goodsAddress": "@county(true)",
//商品等级评价★
"goodsStar|1-5": "★",
//商品图片
"goodsImg": "@Image('100x100','@color','小甜甜')",
//商品售价
"goodsSale|30-500": 30
}]
})
// 输出结果随机生成的数据(node index.js)
console.log(data);
四、mockjs的数据类型 及 语法规范
1、Mock.Random
Mock.Random是一个工具类,用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数])
2Mock.Random 提供的完整方法(占位符)如下
类型 | 方法 |
---|---|
Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
Image | image, dataImage |
Color | color |
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
Name | first, last, name, cfirst, clast, cname |
Web | url, domain, email, ip, tld |
Address | area, region |
Helper | capitalize, upper, lower, pick, shuffle |
Miscellaneous | guid, id |
3.定义数据类型,详情见官方文档
// 引入 Mock
var Mock = require('mockjs')
// 定义数据类型
var data = Mock.mock({
// 20条数据
"data|3": [{
// 商品种类
"goodsClass": "女装",
// 商品Id
"goodsId|+1": 1,
//商品名称
"goodsName": "@ctitle(10)",
//商品地址
"goodsAddress": "@county(true)",
//商品等级评价★
"goodsStar|1-5": "★",
//商品图片
"goodsImg": "@Image('100x100','@color','小甜甜')",
//商品售价
"goodsSale|30-500": 30,
// 邮箱:
"email": "@email",
// 颜色
"color": "@color",
// name
"name": "@name",
//img,参数1:背景色,参2:前景色,参3:图片的格式,默认png,参4:图片上的文字
"img": "@image('100*100','@color')",
//英文文本(句子)参1:句子的个数,参2:句子的最小个数 参3:句子的最大个数,没有参1时,参2参3才会生效
"Etext":"@paragraph(1,1,3)",
//中文文本(句子)参1:句子的个数,参2:句子的最小个数 参3:句子的最大个数,没有参1时,参2参3才会生效
"Ctext":"@cparagraph(1,1,3)",
//中国大区
"cregion":"@region",
// 省
"cprovince":"@province",
//市
"ccity":"@city",
//省 + 市
"ss":"@city(true)",
//县
"country":"@county",
//省市县
"countrysx":"@county(true)",
//邮政编码
"code":"@zip"
}]
})
// 输出结果
// console.log(data);
4.mockjs语法规范
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
注意:
属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的。
生成规则 有 7 种格式: 'name|min-max': value 'name|count': value 'name|min-max.dmin-dmax': value 'name|min-max.dcount': value 'name|count.dmin-dmax': value 'name|count.dcount': value
//属性值自动加 1,初始值为 `number` 'name|+step': value
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。
---------------------------------------------
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
位。
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'
所在的对象。
7. 属性值是正则表达式 RegExp
'name': regexp
根据正则表达式
regexp
反向生成可以匹配它的字符串。用于生成自定义格式的字符串。Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
// =>
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}
四、 Mock.setup()
Mock.setup( settings )
配置拦截 Ajax 请求时的行为。支持的配置项有:timeout
指定被拦截的 Ajax 请求的响应时间,单位是毫秒。
值可以是正整数,例如 400,表示 400 毫秒 后才会返回响应内容;
也可以是横杠 '-' 风格的字符串,例如 '200-600',表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})
目前,接口 Mock.setup( settings ) 仅用于配置 Ajax 请求,将来可能用于配置 Mock 的其他行为。
五、Mock.Random 扩展方法
// 引入 Mock
var Mock = require('mockjs')
var random = Mock.Random;
//扩展数据模板
random.extend({
type: function (index:number) {
const types = ['products', 'industryApp', 'solution', 'experts'];
return this.pick(types[index])
}
});
// 定义数据类型
const menuSource:Array<any> = [];
menuSource[0] = Mock.mock({
"type": "@type(0)",
'data|3-4':[{
'id|+1': 1,
name: "@ctitle( 4,6)",
"childs|5-10": [{
'id|+1': 1,
name: "@ctitle(4,6)",
}]
}]
});
// 输出结果
console.log(data);
六、mockjs获取前端传递的数据
axios({
method: "get",
url: "/getGoods",
data: {
id:2
}
}).then(data => {
//成功的回调函数,返回的是增加的数据
console.log(data.data.data);
this.url = data.data.data[0].goodsImg
});
}
Mock.mock("/getGoods", "get", (config) => {
console.log(config);
return data;
})
###mockjs可以通过option.body获取前端传递的数据
mockjs介绍的更多相关文章
- 前后端分离(手)-- 使用mock.js(好样的)
## 前言: 本篇博文昨天七夕写的,一天下来被虐得体无完肤,苦逼的单身狗只能学习,对!我爱学习,关掉朋友圈,并写了一篇博文发泄发泄.这次写mock.js的使用,能使前后端分离,分离,分离,重要的是说三 ...
- 前后端分离(手) -- mock.js
前言: 本篇博文昨天七夕写的,一天下来被虐得体无完肤,苦逼的单身狗只能学习,对!我爱学习,关掉朋友圈,并写了一篇博文发泄发泄.这次写mock.js的使用,能使前后端分离,分离,分离,重要的是说三遍. ...
- 《Vue.js 2.x实践指南》 已出版
<Vue.js 2.x实践指南>其实在一年前就已经完稿了,只是由于疫情的缘故耽搁了很久才下厂印刷.阅读本书需要具备HTML.CSS和JS基础,本书针对的用户群体主要是:想要快速学习vue技 ...
- 前后端分离之mockjs基本介绍
安装与使用 # 安装 npm install mockjs #使用 Mock var Mock = require('mockjs') var data = Mock.mock({ // 属性 lis ...
- 让我们来简单说说mockjs吧!
背景: 新接手了一个更新CRM的客户管理项目,负责添加三张活动财务表与操作的模块,接到任务时候,后台还没有做数据,所以用到了假数据,So就是这里所说的mockjs. 介绍: mockjs让前端独立于后 ...
- mockjs学习总结(方便前端模拟数据,加快开发效率)
基本介绍: 在我们前端开发中经常遇到这样的事情,接口没有写好,只能写静态页面,如何才能用很简单的方法模拟后端数据呢?mockjs就干了这件事,而且干的还挺好. 下面是我作为初学者的一些总结经验,期 ...
- 正确开启Mockjs的三种姿势:入门参考(一)
一.文章初衷 阅读本文章需要注意以下几点: 文章不主要介绍Mockjs的使用语法 文章暂不涉及Mockjs的第三方封装框架 文章会结合以往做过上线项目的方式总结 想主要介绍如何使用Mockjs,是因为 ...
- 【mock】后端不来过夜半,闲敲mock落灯花 (mockjs+Vuex+Vue实战)
mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单 ...
- json-server+mockjs 模拟REST接口
前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...
随机推荐
- MYSQL通过循环向数据库中插入数据
BEGINdeclare i int default 305;declare a char(255);REPEATset a=concat("测试机构00",cast(i as c ...
- How To Install OpenSSL on Windows
转自 https://tecadmin.net/install-openssl-on-windows/ OpenSSL is a full-featured toolkit for the Trans ...
- Spring+Ibatis开发
Spring+Ibatis开发:1.首先回忆Spring+Hibernate开发:那么时候我们是先加入的Spring,然后在加入Hibernate支持包的,而此时我们Spring+Ibatis开发,原 ...
- MVC自定义视图
编写自定义模板,以单选按钮为例 1.在Shared新建模板视图(文件夹名必须为EditorTemplates) 2.编写模板代码 @model bool <table&g ...
- iOS模型输出和打印
在调试时,我们经常用到输出model,查看数据是否正确,还会在控制台"po 模型"操作,一般输出都是这样的格式的: person is <Person: 0x60800003 ...
- 九大内置对象 and HTTP略微的个人见解
jsp 中九大内置对象: 请求对象:request 输出对象:out 响应对象:response 应用程序对象:application 会话对象:sess ...
- UML类图与时序图
UML统一建模语言 结构式图形: 静态图(类图,对象图,包图) 实现图(组件图,部署图) 剖面图 复合结构图 行为式图形: 活动图 状态图 用例图 交互式图形: 通信图 交互概念图(2.0) 时序图( ...
- Python 常用模块(1) -- collections模块,time模块,random模块,os模块,sys模块
主要内容: 一. 模块的简单认识 二. collections模块 三. time时间模块 四. random模块 五. os模块 六. sys模块 一. 模块的简单认识 模块: 模块就是把装有特定功 ...
- uni-app 使用本地打包配置安卓原生插件
在使用 uni-app 开发的时候,遇到了一个很棘手的问题.即获取设备参数的时候 uni-app 并没有相关方法,而安卓开发是可以做到的,因为接的是三方推广,所以功能必须实现,所以求助了安卓的大佬帮我 ...
- 访问Nginx显示目录
显示目录可以提供文件下载,方便文件共享时用到,mark一下. 1. 如何让nginx显示文件夹目录 vi /etc/nginx/conf.d/default.conf 添加如下内容: location ...