简单介绍
简单来说mockm就是mock.js基础之上的工具，相似的还有YApi，fackjs等。
mockm的优势：
1、在后端接口还未完成之前时，模拟数据并进行返回，从而减少因接口问题拖延项目进度；
2、mockm可模拟大量随机的数据进行操作，数据类型丰富；
3、调试便捷，直接在浏览器就可对接口进行调整；
但同时也存在一些问题，如每个字段返回的格式都需要一一去配置，且需要后端接口文档完善字段名，否则联调的时候还得慢慢去改字段名称。
本文只是简单介绍mockm在项目中的基本使用。
安装使用
下载
npm i -g mockm
创建mm.config.js文件，并录入内容
module.exports = {
proxy: `https://example.com/`, // 替换为后端的接口地址, 如果没有可不填
api: { // 编写自己的接口
'/my/api': {
msg: `我的 api`
},
},
}
启动：在命令行中输入mm （后面可自定配置成npm run mockm）
启动成功就会出现下面内容
使用：浏览器访问http://127.0.0.1:9000/my/api就可以得到对应接口返回的数据了
浏览器访问http://127.0.0.1:9005/#/get/my/api查看接口请求详情
创建接口
可使用 npx mockm --template 官方初始化命令，直接根据官方说明进行配置就可
如果项目比较轻量级，可自定义配置
1，创建一个mockm文件夹，并导入到mm.config.js
2，在mockm.index文件中进行配置，引入模块（也可就在index里面直接写，对于多人开发，分模块比较好维护）
3，在mode1文件中就可以操作接口了 '请求方式 接口'：mock数据
4，使用接口就可以得到
配置接口
mockjs数据设置语法共有两种模式：DTD（数据模板定义规范）与 DPD（数据占位符定义规范）;
DTD
格式：
数据模板的每个属性由3部分构成：属性名、生成规则、属性值，例：
"string|1-10": "★" ====> "string": "★★★★"
生成规则：
mock生成数据模板的方式一共有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
‘name|+step’: value
其中每种规则的含义具体需要依赖属性值的类型才能最终确定
string类型
‘name|min-max’: string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max
‘name|count’: string
通过重复 string 生成一个字符串，重复次数等于 count
number类型
‘name|+1’: number
属性值自动加 1，初始值为 number
‘name|min-max’: number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型
‘name|min-max.dmin-dmax’: number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位
boolean类型
‘name|1’: boolean
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
‘name|min-max’: value
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)
object类型
‘name|count’: object
从属性值 object 中随机选取 count 个属性
‘name|min-max’: object
从属性值 object 中随机选取 min 到 max 个属性
Array类型
‘name|1’: array
从属性值 array 中随机选取 1 个元素，作为最终值
‘name|+1’: array
从属性值 array 中顺序选取 1 个元素，作为最终值
‘name|min-max’: array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max
‘name|count’: array
通过重复属性值 array 生成一个新数组，重复次数为 count
Function类型
‘name’: function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象
RegExp正则式类型
‘name’: regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串
例：'regexp': /[a-z][A-Z][0-9]/ ===>"regexp": "rM3"
Path类型
‘name’：“@/绝对路径”
‘name’：“@/相对路径”
根据路径获取值
例：'fooo':{
'a':'hello'
},
'xxx':{
'd':'@../fooo/a',
'a':{
'b':{
'c':'@/fooo/a'
}
}
}
=====>
"fooo": {
"a": "hello"
},
"xxx": {
"d": "hello",
"a": {
"b": {
"c": "hello"
}
}
}
DPD
占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
格式：
@占位符
@占位符(参数 [, 参数])
like：
name: {
first: '@first',
middle: '@cfirst',
last: '@last',
full: '@first @middle @last' //此处的占位符引用了模板中的属性值
}
=====>
"name": {
first: "Matthew"
full: "Matthew 杜 Robinson"
last: "Robinson"
middle: "杜"
}
生成规则：
引用的是`Mock.Random`中的方法
@符号标识了其后面的字符串是占位符
占位符可以引用并优先引用数据模板中的属性
通过 `Mock.Random.extend()` 来扩展自定义占位符
内置占位符：
| Type | Methord |
|---|---|
| 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 |
自定义占位符
let Random =mockjs.Random;
Random.extend({
constellation:function(){
let constellations=['1','3','6','7']
return this.pick(constellations)
}
})
'a':'@constellation' //大小写不会影响取值，如使用驼峰法等命名注意
更多接口定义到 mock.js 官网查询 mockjs.com/examples.ht…
