Mock 基本使用

mock解决的问题

开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。特殊的格式，例如IP,随机数，图片，地址，需要去收集
痛痛痛 Mock横空出世来解决这个痛点，没有后端，咱前端也能活得很滋润

mock的优点

1、前后端分离 让前端工程师独立于后端进行开发。

2、增加测试的真实性 通过随机数据，模拟各种场景。

3、开发无侵入 不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

4、用法简单 符合直觉的接口。

5、数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

6、方便扩展 支持支持扩展更多数据类型，支持自定义函数和正则。

7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

8、不涉及跨域问题

简单基本使用

Mock官网

开始命令：
npm init -y
npm i mockjs -D

简单示例

mock返回的模拟数据都是一个对象类型
| 左右不要有空格
数据模板定义规范： ‘属性名|生成规则’：属性值

let data = Mock.mock({/!*随机生成一个长度为5的数组*!/'list|5-10': [/!*从1开始，每次+1*!/{'id|+1': 1}]
})
console.log(data.list)

生成字符串和数组

console.log('==============随机生成字符串=============')
let data = Mock.mock({'a': '#','b|3': '#','c|7-9': '#'
})
console.log(data)
console.log('==============随机生成数zi=============')
data = Mock.mock({'a': 1,'b|1-100': 0
})
console.log(data)==============随机生成字符串=============
{ a: '#', b: '###', c: '#########' }   
==============随机生成数组=============
{ a: 1, b: 91 }

boolean 、对象、数组

const Mock = require("mockjs");
console.log('==============随机生成boolean=============')
let data = Mock.mock({'a': true,'b|1-2': false
})
console.log(data)
==============随机生成boolean=============
{ a: true, b: true }console.log('==============随机生成对象=============')
const cities = {'zhengzhou': '郑州','hangzhou': '杭州','wuhan': '武汉','guangzhou': '广州','shanghai': '上海','beijing': '北京'
}
data = Mock.mock({'a|2': cities,'b|2-5': cities
})
console.log(data)
==============随机生成对象=============
{a: { guangzhou: '广州', hangzhou: '杭州' },b: { wuhan: '武汉', beijing: '北京', guangzhou: '广州' }
}console.log('==============随机生成数组=============')
const arr = ['北京', '郑州', '上海', '厦门']
data = Mock.mock({'a|1': ['北京', '郑州', '上海', '厦门'],'b|2-5': ['北京', '郑州', '上海', '厦门', '武汉', '南京', '杭州', '福州'],'c|2': arr
})
console.log(data)
==============随机生成数组=============
{a: '郑州',b: ['北京', '郑州', '上海','厦门', '武汉', '南京','杭州', '福州', '北京','郑州', '上海', '厦门','武汉', '南京', '杭州','福州', '北京', '郑州','上海', '厦门', '武汉','南京', '杭州', '福州'],c: ['北京', '郑州','上海', '厦门','北京', '郑州','上海', '厦门']
}

随机生成字符串、布尔、自然数、整数、浮点数、range、日期、文本

/*随机生成篇*/
const Mock = require('mockjs')
/*三种生成方式
* Mock.Random.xxxx()
* Mock.mock('@xxx')
* Mock.mock('@xxx()')
* */
console.log('=========随机生成字符串=========')
// console.log(Mock.Random.string('pool'?, min?, max?));
console.log(Mock.Random.string());
let data = Mock.mock({'a': Mock.Random.string('number', 4),'b': Mock.Random.string('upper', 4),'c': Mock.Random.string('lower', 4),'d': Mock.Random.string('simple', 4, 10),'e': Mock.Random.string('booasdfsadlean', 4, 10),'f': Mock.mock('@string'),'g': Mock.mock('@string()')
})
console.log(data)console.log('=========boolean==========')
/*Boolean就俩值，这一个操作足以*/
console.log(Mock.Random.boolean())console.log('==============natural============')
// natural(min?, max?)
data = Mock.mock({'a': Mock.Random.natural(),'b': Mock.mock('@natural'),'c': Mock.mock('@natural()'),'d': Mock.mock('@natural(10000)'),'e': Mock.mock('@natural(100, 200)'),
})
console.log(data)console.log('==========integer============')
// integer(min?, max?)console.log('===============float===================')
// float(min?, max?, dmin?, dmax?)
data = Mock.mock({'a': Mock.Random.float(),'b': Mock.mock('@float'),'c': Mock.mock('@float(900)'),'d': Mock.mock('@float(900, 1000)'),'e': Mock.mock('@float(900, 1000, 3)'),'f': Mock.mock('@float(900, 1000, 1, 3)'),
})
console.log(data)console.log('================获取数字类型数组 range===============')
// range(start?, stop, step?)
// 默认从0开始，start包括， stop不包括
data = Mock.mock({'a': Mock.Random.range(5),'c': Mock.mock('@range(0, 10)'),'d': Mock.mock('@range(1, 100, 2)'),
})
console.log(data)console.log('==============获取随机日期================')
// date( format? )
data = {'a': Mock.Random.date(),'b': Mock.mock('@date'),'c': Mock.mock('@date(yyyy-mm-dd)'),'d': Mock.mock('@date(yy-mm-dd)'),'e': Mock.mock('@date(y-m-d)'),// 单个 m / d : 小于10 没有0
}
console.log(data)console.log('===========获取随机文本============')
// paragraph, sentence, word, title, cparagraph, csentence, cword(pool?, min?, max?), ctitle
// 带有c的是随机生成中文入参除了cword 均为(min?, max?)
data = Mock.mock({'a': Mock.Random.paragraph(),'b': Mock.mock('@paragraph(3, 9)')
})
console.log(data)data = Mock.mock({'a': Mock.Random.sentence(),'b': Mock.mock('@sentence(3, 9)')
})
console.log(data)data = Mock.mock({'a': Mock.Random.word(),'b': Mock.mock('@word(3, 9)'),'c': Mock.mock('@cword("爱上了的看法no暗示法", 3, 5)')
})
console.log(data)data = Mock.mock({'a': Mock.Random.cparagraph(),'b': Mock.mock('@cparagraph(3, 9)')
})
console.log(data)

生成图片、颜色

/**/
const Mock = require('mockjs')/*获取随机图片*/
console.log('=============获取随机图片============')
// image( size?, background?, foreground?, format?, text?)
let data = Mock.mock({'a': Mock.Random.image(),'b': Mock.mock('@image'),'c': Mock.mock('@image()'),'d': Mock.Random.image('700x300', '#FF6600', '#ffffff', 'png', 'hello')
})
console.log(data)
=============获取随机图片============
{a: 'http://dummyimage.com/728x90',b: 'http://dummyimage.com/88x31',c: 'http://dummyimage.com/300x600',d: 'http://dummyimage.com/700x300/FF6600/ffffff.png&text=hello'
}console.log('=========获取随机颜色========')
data = Mock.mock({'a': Mock.Random.color(),'b': Mock.mock('@color'),'c': Mock.mock('@color()')
})
console.log(data)data = Mock.mock({'a': Mock.Random.rgb(),'b': Mock.mock('@rgb'),'c': Mock.mock('@rgb()')
})
console.log(data)data = Mock.mock({'a': Mock.Random.rgba(),'b': Mock.mock('@rgba'),'c': Mock.mock('@rgba()')
})
console.log(data)
=========获取随机颜色========
{ a: '#8079f2', b: '#95f279', c: '#f279b8' }
{a: 'rgb(121, 219, 242)',b: 'rgb(242, 229, 121)',c: 'rgb(193, 121, 242)'
}
{a: 'rgba(121, 242, 158, 0.66)',b: 'rgba(242, 123, 121, 0.18)',c: 'rgba(121, 154, 242, 0.09)'
}

随机生成名字、地址、web相关

/*生成名字*/
const Mock = require('mockjs')console.log('============随机生成名字============')
/*first: 生成英文姓
* last: 生成英文名
* cfirst: 生成中文姓
* clast: 生成中文名
* name(middle? ): 生成英文名字 middle: true、false (为true时，名字是3个字)
* cname(): 生成中文名字*/
let data = Mock.mock({'a': Mock.Random.first(),'b': Mock.mock('@last'),'c': Mock.mock('@name(true)')
})
console.log(data)data = Mock.mock({'a': Mock.Random.cfirst(),'b': Mock.mock('@clast'),'c': Mock.mock('@cname()')
})
console.log(data)
============随机生成名字============
{ a: 'Angela', b: 'Allen', c: 'Eric Mark Lopez' }
{ a: '袁', b: '芳', c: '丁静' }console.log('=============随机生成地址============')
/*区域：region
* 省份：province
* 城市：city(prefix?) 是否固定前缀，也就是是否带有 省市
* 区县：county(prefix?)*/
data = Mock.mock({'a': Mock.Random.region(),'b': Mock.mock('@province'),'c': Mock.mock('@city(true)'),'d': Mock.mock('@county(true)')
})
console.log(data)
=============随机生成地址============
{ a: '西南', b: '广西壮族自治区', c: '台湾 苗栗县', d: '西藏自治区 山南地区 琼结县' }/*web相关 生成 url(protocol?, domain?)(网址)protocol(协议)domain(域名)tld(顶级域名) email(domain?) ip zip(邮编)*/
console.log('===========随机生成web相关===============')
data = Mock.mock({'a': Mock.Random.url(),'b': Mock.mock('@url(https, www.baidu.com)'),'h': Mock.mock('@url(https)'),'c': Mock.mock('@protocol'),'d': Mock.mock('@domain'),'e': Mock.mock('@tld'),'f': Mock.mock('@email'),'i': Mock.mock('@email(qq.com)'),'g': Mock.mock('@ip'),'k': Mock.mock('@zip'),
})
console.log(data)
===========随机生成web相关===============
{a: 'mid://jmwxcdbcrz.st/mnhs',b: 'https://www.baidu.com/smkdeb',h: 'https://kfcd.cx/zlvvdohs',c: 'mid',d: 'fkxfnotusd.museum',e: 'bh',f: '[e-mail]',i: '[e-mail]',g: '192.229.68.65',k: '767870'
}

helper

helper   了解使用capitalize 首字母大写
* upper 转大写字母
* lower 转小写字母
* pick 从数组中随机选出一个
* shuttle 将数组打乱
* guid 获取一个gu id  "d34AdCff-Ad1e-ecAF-9929-41DA36dc4B76"
* id 随机生成一个18位身份证id "140000199305223398"

启动本地服务

数据有了，但要模拟访问和响应你模拟的数据，这个时候要用到@shymean/mock-server

为开发环境快速搭建koa服务器，只需要一个mock模板文件即可。
脚本启动本地服务器，然后匹配mock模板内的url返回对应的数据

# 全局安装
npm i @shymean/mock-server -g
# 快速启动mock服务器
mock -p 9999 -f ./_mock.js
port：1024-65535之间
参数说明port，服务器端口号，默认7654，简写 -p
file，mock模板文件路径，默认./_mock.js，简写 -f基础使用其使用方式与mockjs基本类似
Mock.mock(url, 返回的数据)
Mock.mock(url, method, 返回的数据)

简单示例

// _mock.js
// 对应的rurl会被中间件拦截，并返回mock数据
// ANY localhost:9999/
Mock.mock('/home', {data: [{'city': Mock.mock('@city(true)')}],msg: "hello mock","code": Mock.mock('@integer(200, 300)'),
})// 可以mock指定的请求方法
// POST localhost:9999/test
Mock.mock('/test', 'POST', {data: [],msg: "hello mock","code|1-4": 1,
})