MockJS简单应用

一、mock.js的用途

Mock js是一款模拟数据生成器，帮助前端独立开发。

1,根据数据模板生成模拟数据

2,模拟 Ajax 请求，生成并返回模拟数据

3,基于 HTML 模板生成模拟数据

二、基本使用

安装

yarn add mockjs axios --save

在vue/react中使用

import Mock from 'mockjs'
export default Mock.mock('/api/user/user', 'get', {
  status: 200,
  message: 'success',
  data: {
    'id|+1': 1, // 模拟自增+1
    id: '@increment(1)', // 自增的数字
    name: '@cname()', // 中文名称
  }
})

在vue中可以将该文件引入main.js中，在页面中直接调用接口使用。（react同理）

使用方式

    axios.get('/api/user/user').then((res) => {
      console.log(res)
    })

在umi中使用

在src下创建mock文件夹，该文件夹下的数据被umi内置为约定式配置。

import Mock from 'mockjs';
export default {
    'GET /api/user': Mock.mock({
     status: 200,
     message: 'success',
        data: {
            'id|+1': 1, // 模拟自增+1
             id: '@increment(1)', // 自增的数字
             name: '@cname()', // 中文名称
        }
    })
}

可以直接在任意组件下使用

 axios.get('/api/user').then((res) => {
      console.log(res)
    })

三、Mock.js的语法规范

Mock.js 的语法规范包括两部分：

1.数据模板定义规范（Data Template Definition，DTD）

2.数据占位符定义规范（Data Placeholder Definition，DPD）

1． 数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值

// 属性名 name

// 生成规则 rule

// 属性值 value

属性名 和 生成规则 之间用竖线 | 分隔。

1、‘name|count’: string** 通过重复 string 生成一个字符串，重复次数等于 count

2、‘name|min-max’: string 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max

3、‘name|+1’: number 属性值自动加 1，初始值为 number

4、‘name|min-max’: number 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类 型

5、‘name|min-max.dcount’: value 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分为 dcount位

6、‘name|min-max.dmin-dmax’: number 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分 保留 dmin 到

7、‘name|1’: Boolean 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2

8、‘name|min-max’: value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)

9、‘name|count’: object 从属性值 object 中随机选取 count 个属性。

10、‘name|min-max’: object 从属性值 object中随机选取 min到 max个属性

11、‘name|count’: array 通过重复属性值 array 生成一个新数组，重复次数为 count

12、‘name|min-max’: array 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

Mock.mock({
         //重复5次，生成一个具有5个对象的数组
        'list|5'或者('list|2-6'):  [{ // 12、这个数组重复次数大于2次，小于6次
              // 3、属性值自动加1,后面1是初始值
              'id|+1':  1,
              // 2、测试这个词语 重复随机次数：最大9次，最小重复2次
              'name|2-9': '测试',
              // 1、对应上面第一条
              'phone|11': '1',
              // 4、生成200到1000以内随机的整数
              'point|200-1000':0,
              // 5、生成整数部分大于等于3000，小于等于8000，max小数部分保留2位的数据
              'money|3000-8000.2':0,
              // 6、整数部分大于等于1000小于等于2000，max小数部分随机保留2到4位的小数
              'money2|1000-2000.2-4':0,
              // 7、随机生成布尔值，默认为ture,为true概率：1/2
              'status|1':true,
              // 8、对应第八条
              'default|1‐3':true,
              // 9、2的意思是从后面对象中随机选取2个属性进行展示
              'detail|2':{'id':1,'date':'2005‐01‐01','content':'记录'}
              //10、2-3的意思是从后面对象中随机选取2到3个属性进行展示
              'detail|2-3':{'id':1,'date':'2005‐01‐01','content':'记录'}
        }]

2． 数据占位符定义规范

Mock.Random 是一个工具类，用于生成各种随机数据。Mock.Random 的方法在数据模板中称为『占位符』.

1、内置方法列表：

 2、基本方法：

Mock.mock({
       'list|10': [{
        'id|+1': 1,
        //生成随机字符串作为名称，string是内置方法
        'name':'@string',
       //生成随机数字
        'point':'@integer',
        //随机日期
        'birthday':'@date'
        // 随机生成图片地址
         'img':'@image'
        //随机标题
        'title':'@title',
        //随机标题内容，字数为20
        'content':'@cword(20)'
    }]

3、图片设置的其他用法：

@image()

@image( size )

@image( size, background )

@image( size, background, text )

@image( size, background, foreground, text )

@image( size, background, foreground, format, text )

size：尺寸，格式为：‘宽x高’

background：背景色，格式为：#FFFFFF

text：图片上显示的文本

foreground：图片内文本的颜色

format：图片格式，可选值包括：png、gif、jpg。

4、其他的文本方法

1）英文名生成：

@first
名
@last
姓
@name
姓名
@name(middle)
middle：是否生成中间名字
@name()
​
// => “Larry Wilson”
​
@name(true) //true表示生成
​
// => “Helen Carol Martinez”

2）中文名

2）中文名
@cfirst
姓
@clast
名
@cname
@cname()
​
// => “袁军”

如果需要生成中文名称，需要在前面加上c字母做一标识。 @cname :中文名称 @cfirst:中文姓氏 @last:英文姓氏

5、随机生成网络地址，ip地址，邮箱地址：

//生成地址
‘url’:"@url"
//生成ip
‘ip’:"@ip",
//生成邮箱
‘email’:"@email"

6、 地址方法

1）生成中国大区：@region 区域 （华北……）
2）生成省份：@province
3）生成城市：@city @city(prefix)
//prefix：布尔值，是否生成所属的省
4）生成县：@county @county(prefix)
//prefix：布尔值，是否生成所属省、市
5）生成邮政编码: @zip
6）生成身份证号 @ID
7）生成GUID字符串 @guid
@city() // => “唐山市”
@city(true)  // => “福建省 漳州市”
@county()  // => “上杭县”
@county(true)  // => “甘肃省 白银市 会宁县”
@zip  //生成邮政编码
@ID() // => “420000200710091854”
@guid()  // => “662C63B4-FD43-66F4-3328-C54E3FF0D56E”