mockjs
概念
什么是mockJs
生成随机数据,拦截 Ajax 请求
参考文档:http://mockjs.com/examples.html
为什么使用mockJs
如果后端接口还未开发完成,我们自己手动模拟后端接口返回随机数据完成交互功能
- 采用json数据模拟,生成数据比较繁琐,也比较有局限性,没办法达到增删改查
- 采用mockJs进行模拟数据,可以模拟各种场景(get、post)生成接口,并且随机生成所需数据,还可以对数据进行增删改查
使用mockJs
通过vue-cli创建基本项目
-
在项目中安装mock
npm install mockjs
-
在项目中新建mock文件夹,在mock文件夹中创建index.js
//引入mock模块 import Mock from 'mockjs';
-
将mock文件夹的index.js文件在main.js中导入
import Vue from 'vue' import App from './App.vue' import './mock/index.js' new Vue({ render: h => h(App), }).$mount('#app')
mock语法
生成字符串
-
生成指定次数字符串
const data = Mock.mock({ "string|4": "yx!" }) console.log(data)
-
生成指定范围长度字符串
const data = Mock.mock({ "string|1-8": "yx" }) console.log(data)
生成文本
-
生成一个随机字符串
const data = Mock.mock({ "string": "@cword" }) console.log(data)
-
生成指定长度和范围
const data = Mock.mock({ string: "@cword(1)", str: '@cword(10,15)' }) console.log(data)
生成标题和句子
-
生成标题和句子
const data = Mock.mock({ title: "@ctitle", sentence: '@csentence' }) console.log(data)
-
生成指定长度的标题和句子
const data = Mock.mock({ title: "@ctitle(8)", sentence: '@csentence(50)' })
-
生成指定范围的
const data = Mock.mock({ title: "@ctitle(5,8)", sentence: '@csentence(50,100)' }) console.log(data)
生成段落
-
随机生成段落
const data = Mock.mock({ content: '@cparagraph()' }) console.log(data)
生成数字
-
生成指定数字
const data = Mock.mock({ "number|80": 1 }) console.log(data)
-
生成范围数字
const data = Mock.mock({ "number|1-999": 1 }) console.log(data)
生成增量id
-
随机生成标识
const data = Mock.mock({ id: '@increment()' }) console.log(data)
生成姓名-地址-身份证号
-
随机生成姓名-地址-身份证号
const data = Mock.mock({ name: '@cname()', idCard: '@id()', address: '@city(true)' // 如果@city(),只会生成市,如果@city(true)会生成省和市 }) console.log(data)
随机生成图片
-
生成图片:
-
参数1:图片可选大小
-
参数2:图片背景色
-
参数3:图片前景色
-
参数4:图片格式
-
参数5:图片文字
const data = Mock.mock({ image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')" }) console.log(data)
生成时间
-
@Date
-
生成指定格式时间:@date(yyyy-MM-dd hh:mm:ss)
const time = Mock.mock({ time1: '@date()', // 只有年月日 time2: '@date(yyyy-MM-dd hh:mm:ss)' }) console.log(time)
指定数组返回的条数
-
指定长度:'data|5'
-
指定范围:'data|5-10'
const data = Mock.mock({ 'list|50-99':[ { name: '@cname()', address: '@city(true)', id: '@increment(1)' // 每次都增加1 } ] })
mock拦截请求
-
在项目中安装axios
npm install axios
-
在 main.js 文件引入
import axios from 'axios'
-
在mock文件夹的
index.js
文件中写mock语法
定义不携带参数的get请求
Mock.mock('/api/get/user','get',()=>{
return {
status: 200,
message: '获取新闻列表数据成功'
}
})
定义post请求
Mock.mock('/api/post/user','post',()=>{
return {
status: 200,
message: '添加新闻列表数据成功'
}
})
- 在 App.vue 文件发送请求
<template>
<div id="app">
</div>
</template>
<script>
export default {
created() {
axios.get('/api/get/user')
.then(function (response) {
console.log(response);
}),
axios.post('/api/post/user')
.then(res => console.log(res)),
}
}
</script>
<style lang="less" scoped>
</style>
Mock.mock()
- Mock.mock( requestUrl?, requestType?, template|function(options) )
- Mock.mock( template )
- Mock.mock( requestUrl, template )
- Mock.mock( requestUrl, requestType, template )
- Mock.mock( requestUrl, requestType, function(options) )
requestUrl: 要拦截的URL,字符串或正则表达式
equestType: 要拦截的请求类型,get/post/put/delete/options...
template: 数据模板
function(options):生成响应数据的函数,options -->
语法规范
数据模板定义
数据模板中每个属性由3部分组成: 属性名|生成规则:属性值
- '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.dcout': value
- 'name|+step': value
属性值中可以包含@占位符 属性值还指定了最终值的初始值和类型
1.属性值是字符串
- 'name|min-max': string
通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max
- 'name|count': string
通过重复 string 生成一个字符串,重复次数等于 count
2.属性值是数字
- 'name|+1': number
属性值自动加 1,初始值为 number
- 'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型
- 'name|min-max.dmin-dmax': number
生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位
3.属性值是布尔值
- 'name|1': boolean
随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2
- 'name|min-max': value
随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)
4.属性值是对象
- 'name|count': object
从属性值 object 中随机选取 count 个属性
- 'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性
5.属性值是数组
- 'name|1': array
从属性值 array 中随机选取 1 个元素,作为最终值
- 'name|+1': array
从属性值 array 中顺序选取 1 个元素,作为最终值
- 'name|min-max': array
通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max
- 'name|count': array
通过重复属性值 array 生成一个新数组,重复次数为 count
6.属性值是函数
- 'name': function
执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象
7.属性值是正则表达式
- 'name': regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串
数据占位符定义
- 用 @ 来标识其后的字符串是 占位符
- 占位符 引用的是 Mock.Random 中的方法
- 通过 Mock.Random.extend() 来扩展自定义占位符
- 占位符 也可以引用 数据模板 中的属性
- 占位符 会优先引用 数据模板 中的属性
- 占位符 支持 相对路径 和 绝对路径
Mock.setup()
配置Ajax请求的行为,暂时支持的配置项有timeout
Mock.setup({
timeout: 500
})
Mock.setup({
timeout: '100-600'
})
Mock.Random
const Random = Mock.Random
Random.email() // => sd.sdf@oksd.com
Mock.mock('@email') // => sd.sdf@oksd.com
Mock.mock({ email: 'sd.sdf@oksd.com' }) // => { email: "sd.sdf@oksd.com" }
Mock.Random提供的完整方法(占位符):
Type | Method |
---|---|
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, province, city(bool), county(bool), zip), region |
Helper | capitalize(首字母大写), upper(大写), lower(小写), pick(从数组任取一个), shuffle(打乱数组元素顺序) |
Miscellaneous | guid, id |
Basic
- Random.boolean(min?, max?, current? )
- Random.natural(min?, max? )
- Random.integer(min?, max? )
- Random.float( min?, max?, dmin?, dmax? )
- Random.character( pool? ) // pool => lower/upper/number/symbol
- Random.string( pool?, min?, max? ) // pool => lower/upper/number/symbol
- Random.range( start?, stop, step? )
Date
- Random.date( format? )
Format | Description | Example |
---|---|---|
yyyy | A full numeric representation of a year, 4 digits | 1999 or 2003 |
yy | A two digit representation of a year | 99 or 03 |
y | A two digit representation of a year | 99 or 03 |
MM | Numeric representation of a month, with leading zeros | 01 to 12 |
M | Numeric representation of a month, without leading zeros | 1 to 12 |
dd | Day of the month, 2 digits with leading zeros | 01 to 31 |
d | Day of the month without leading zeros | 1 to 31 |
HH | 24-hour format of an hour with leading zeros | 00 to 23 |
H | 24-hour format of an hour without leading zeros | 0 to 23 |
hh | 12-hour format of an hour without leading zeros | 01 to 12 |
h | 12-hour format of an hour with leading zeros | 1 to 12 |
mm | Minutes, with leading zeros | 00 to 59 |
m | Minutes, without leading zeros | 0 to 59 |
ss | Seconds, with leading zeros | 00 to 59 |
s | Seconds, without leading zeros | 0 to 59 |
SS | Milliseconds, with leading zeros | 000 to 999 |
S | Milliseconds, without leading zeros | 0 to 999 |
A | Uppercase Ante meridiem and Post meridiem | AM or PM |
a | Lowercase Ante meridiem and Post meridiem | am or pm |
T | Milliseconds, since 1970-1-1 00:00:00 UTC | 759883437303 |
- Random.time( format? )
- Random.datetime( format? )
- Random.now( unit?, format? ) // unit => year、month、week、day、hour、minute、second、week
Image
Random.image()
- Random.image()
- Random.image( size )
- Random.image( size, background )
- Random.image( size, background, text )
- Random.image( size, background, foreground, text )
- Random.image( size, background, foreground, format, text )
Random.dataImage()
- Random.dataImage()
- Random.dataImage( size )
- Random.dataImage( size, text )
Color
- Random.color() // => #3538B2
- Random.hex() // => #3538B2
- Random.rgb() // => rgb(242, 198, 121)
- Random.rgba() // => rgba(242, 198, 121, 0.13)
- Random.hsl() // => hsl(345, 82, 71)
Text
- Random.paragraph( min?, max? )
- Random.cparagraph( min?, max? )
- Random.sentence( min?, max? )
- Random.csentence( min?, max? )
- Random.word( min?, max? )
- Random.cword( pool?, min?, max? )
- Random.title( min?, max? )
- Random.ctitle( min?, max? )
Name
- Random.first()
- Random.last()
- Random.name( middle? )
- Random.cfirst()
- Random.clast()
- Random.cname()
Web
- Random.url( protocol?, host? )
- Random.protocol()
- Random.domain() // 域名
- Random.tld() // 顶级域名
- Random.email( domain? )
- Random.ip()
Address
- Random.region()
- Random.province()
- Random.city( prefix? )
- Random.county( prefix? )
- Random.zip()
Helper
- Random.capitalize( word )
- Random.upper( str )
- Random.lower( str )
- Random.pick( arr )
- Random.shuffle( arr )
Miscellaneous
- Random.guid()
- Random.id()
- Random.increment( step? )
扩展
Random.extend({
fruit () {
const fruit = ['apple', 'peach', 'lemon']
return this.pick(fruit)
}
})
Random.fruit() // => 'peach'
Mock.mock('@fruit') // => 'lemon'
Mock.mock({
fruit: '@fruit' // => 'peach'
})
Mock.valid()
Mock.valid( template, data )
Mock.toJSONSchema()
Mock.toJSONSchema( template )
行百里者半九十