[亲测]mock.js使用

分手后的思念是犯贱 2022-04-17 05:11 258阅读 0赞

# 一、Mock.js入门 #

## 1． 什么是mock.js? ##

Mock.js （官网[http://mockjs.com/][http_mockjs.com]）是一款模拟数据生成器，旨在帮助前端攻城狮独立

于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

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

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

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

#### Mock.js 具有以下特点： ####

1.前后端分离,让前端攻城师独立于后端进行开发。

2.增加单元测试的真实性

3.通过随机数据，模拟各种场景。

4.开发无侵入

5.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

6.用法简单

7.符合直觉的接口

8.数据类型丰富

9.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

10.方便扩展

11.支持支持扩展更多数据类型，支持自定义函数和正则。

在进行前后端分离式的开发中，前端负责制作页面和显示数据，后端负责提供数据，前端通过后端提供的RESTFul规范的接口来获取 JSON 格式的数据：

![在这里插入图片描述][20181113115612224.jpg]

对于前端开发人员来说，必须要从服务器获取数据，所以就只能等待后端开发好接口之后，前端才可以获取数据，这会影响前端开发的效果。

聪明的前端开发人员就会想：如果前端可以自己模拟出数据，那么在开发时就不需要服务器提供的数据了。于是就出现了mockjs

## 2． Mock.js安装 ##

1）使用CDN

2）使用本地文件

下载Mock.js: [https://github.com/nuysoft/Mock][https_github.com_nuysoft_Mock]

导入到本地页面使用：  
![在这里插入图片描述][20181113115707239.jpg]

引入：

## 3． Mock.js入门案例 ##

### 3.1． 模拟数据 ###

需求：模拟一个用户列表，用户三个字段组件：自增ID、姓名

显示效果如下：

{ 
        "list": [
            { 
                "id": 1,
                "name": "测试"
            },
            { 
                "id": 1,
                "name": "测试"
            },
            { 
                "id": 1,
                "name": "测试"
            },
            { 
                "id": 1,
                "name": "测试"
            },
            { 
                "id": 1,
                "name": "测试"
            }
        ]
    }

Mock模拟代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock入门案例</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
      <div id="app1">
      </div>
    </body>
    <script> var data = Mock.mock({ //list是一个数组，包含5个元素 'list|5':[ { 'id':1, 'name':'测试' } ] }) // 每一个层级比上一个多2个空格 console.log(JSON.stringify(data,null,2 )) </script>
    </html>

测试结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70]

Mock.js模拟数据成功。

### 3.2． 使用实例 ###

使用axios向模拟数据的服务发送请求，获取模拟数据在页面进行展示

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock入门案例</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
      <div id="app">
        <ul>
          <li v-for="u in users">
           id： {
       {u.id}}
           name：{
       {u.name}}
          </li>
        </ul>
      </div>
    </body>
    <script> var data = Mock.mock("/users","get",{ //list是一个数组，包含5个元素 'list|5':[ { 'id':1, 'name':'测试' } ] }) const vm = new Vue({ el:"#app", data:{ users:[] }, created:function(){ //发送ajax请求 axios.get("/users").then((res)=>{ this.users = res.data.list; }) } }) </script>
    </html>

浏览器显示效果如图所示：  
![在这里插入图片描述][20181113141940617.jpg]

# 二、 Mock.js的语法规范 #

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

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

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

## 1． 数据模板定义规范 ##

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

// 属性名 name

// 生成规则 rule

// 属性值 value  
‘name|rule’: value

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

属性值 中可以含有 @占位符。

属性值 还指定了最终值的初始值和类型  
例如：

var data = Mock.mock("/users","get",{
        //list是一个数组，包含5个元素
        'list|5':[
            {
                'id':1,
                'name':'测试'
            }
        ]
      })

可见： list 是属性名 中间使用|分隔，数字5是生成规则（表示生成5条数据），后面是json数据。

生成规则的含义需要依赖属性值的类型才能确定。因此我们需要根据属性的值类型来学习Mock.js的模板语法规范

### 1.1． 属性值是字符串 ###

**1**）‘name|count’: string\*\*

通过重复 string 生成一个字符串，重复次数等于 count

<!DOCTYPE html>
    <html lang="en">
    <head <meta charset="UTF-8">
      <title>Mock入门案例</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ //重复5次，生成一个具有5个对象的数组 'list|5': [{ 'id': 1, 'name':'测试', //重复11次组装成一个字符串 'phone|11':'1' }] }) // 输出结果 console.log(JSON.stringify(data,null,2)) </script>
    </html>

//浏览器控制台结果：

{ 
      "list": [
        { 
          "id": 1,
          "name": "测试",
          "phone": "11111111111"
        },
        { 
          "id": 1,
          "name": "测试",
          "phone": "11111111111"
        },
        { 
          "id": 1,
          "name": "测试",
          "phone": "11111111111"
        },
        { 
          "id": 1,
          "name": "测试",
          "phone": "11111111111"
        },
        { 
          "id": 1,
          "name": "测试",
          "phone": "11111111111"
        }
      ]
    }

**2**）‘name|min-max’: string

通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|5': [{ 'id': 1, //测试这个词语 重复随机次数：最大9次，最小重复2次 'name|2-9': '测试', 'phone|11': '1' }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

**显示结果：**

{ 
      "list": [
        { 
          "id": 1,
          "name": "测试测试测试测试测试测试测试",
          "phone": "11111111111"
        },
        { 
          "id": 1,
          "name": "测试测试测试测试测试",
          "phone": "11111111111"
        },
        { 
          "id": 1,
          "name": "测试测试测试测试测试",
          "phone": "11111111111"
        },
        { 
          "id": 1,
          "name": "测试测试测试测试测试测试测试",
          "phone": "11111111111"
        },
        { 
          "id": 1,
          "name": "测试测试测试测试测试测试测试测试",
          "phone": "11111111111"
        }
      ]
    }

**可以发现：name属性的值有长，有短，说明随机重复设置成功。**

### 1.2． 属性值是数字 ###

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|5': [{ //属性值自动加1,后面1是初始值 'id|+1': 1, //测试这个词语 重复随机次数：最大9次，最小重复2次 'name|2-9': '测试', 'phone|11': '1' }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

**浏览器显示结果：**

{ 
      "list": [
        { 
          "id": 1,
          "name": "测试测试测试测试测试测试测试测试",
          "phone": "11111111111"
        },
        { 
          "id": 2,
          "name": "测试测试测试测试",
          "phone": "11111111111"
        },
        { 
          "id": 3,
          "name": "测试测试",
          "phone": "11111111111"
        },
        { 
          "id": 4,
          "name": "测试测试测试",
          "phone": "11111111111"
        },
        { 
          "id": 5,
          "name": "测试测试测试测试测试测试测试测试测试",
          "phone": "11111111111"
        }
      ]
    }

**可以发现：此时id的值是自动增长的。每次循环加1.**

**2）‘name|min-max’: number**

生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型

**示例如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|5': [{ //属性值自动加1,后面1是初始值 'id|+1': 1, //测试这个词语 重复随机次数：最大9次，最小重复2次 'name|2-9': '测试', 'phone|11': '1', //生成200到1000以内随机的整数 'point|200-1000':0 }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

**浏览器效果如下所示：**

{ 
      "list": [
        { 
          "id": 1,
          "name": "测试测试测试测试",
          "phone": "11111111111",
          "point": 689
        },
        { 
          "id": 2,
          "name": "测试测试测试测试",
          "phone": "11111111111",
          "point": 519
        },
        { 
          "id": 3,
          "name": "测试测试测试测试测试测试测试",
          "phone": "11111111111",
          "point": 604
        },
        { 
          "id": 4,
          "name": "测试测试测试",
          "phone": "11111111111",
          "point": 797
        },
        { 
          "id": 5,
          "name": "测试测试测试测试",
          "phone": "11111111111",
          "point": 348
        }
      ]
    }

**3）‘name|min-max.dcount’: value**  
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分为dcount位  
示例如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|5': [{ //属性值自动加1,后面1是初始值 'id|+1': 1, //测试这个词语 重复随机次数：最大9次，最小重复2次 'name|2-9': '测试', 'phone|11': '1', //生成200到1000以内随机的整数 'point|200-1000':0, //整数部分大于等于3000，小于等于8000，max小数部分保留2位的数据 'money|3000-8000.2':0 }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

浏览器显示如下图所示：

{ 
      "list": [
        { 
          "id": 1,
          "name": "测试测试测试测试",
          "phone": "11111111111",
          "point": 848,
          "money": 7080.35
        },
        { 
          "id": 2,
          "name": "测试测试测试测试",
          "phone": "11111111111",
          "point": 530,
          "money": 4580.34
        },
        { 
          "id": 3,
          "name": "测试测试测试测试测试",
          "phone": "11111111111",
          "point": 486,
          "money": 6253.33
        },
        { 
          "id": 4,
          "name": "测试测试测试",
          "phone": "11111111111",
          "point": 627,
          "money": 7222.72
        },
        { 
          "id": 5,
          "name": "测试测试测试测试",
          "phone": "11111111111",
          "point": 285,
          "money": 7821.81
        }
      ]
    }

**4）‘name|min-max.dmin-dmax’: number**

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到

dmax 位。

**示例如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|5': [{ //属性值自动加1,后面1是初始值 'id|+1': 1, //测试这个词语 重复随机次数：最大9次，最小重复2次 'name|2-9': '测试', 'phone|11': '1', //生成200到1000以内随机的整数 'point|200-1000':0, //整数部分大于等于3000，小于等于8000，max小数部分保留2位的数据 'money|3000-8000.2':0, //整数部分大于等于3000小于等于8000，小数随机保留2到4位的小数 'money2|1000-2000.2-4':0 }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

**浏览器控制台显示效果如下所示：**

{ 
      "list": [
        { 
          "id": 1,
          "name": "测试测试测试测试测试测试测试测试",
          "phone": "11111111111",
          "point": 694,
          "money": 3317.13,
          "money2": 1986.514
        },
        { 
          "id": 2,
          "name": "测试测试测试测试测试测试",
          "phone": "11111111111",
          "point": 770,
          "money": 3912.08,
          "money2": 1971.5343
        },
        { 
          "id": 3,
          "name": "测试测试测试",
          "phone": "11111111111",
          "point": 386,
          "money": 6353.74,
          "money2": 1036.605
        },
        { 
          "id": 4,
          "name": "测试测试测试测试测试",
          "phone": "11111111111",
          "point": 241,
          "money": 4918.78,
          "money2": 1951.792
        },
        { 
          "id": 5,
          "name": "测试测试测试测试测试测试测试",
          "phone": "11111111111",
          "point": 426,
          "money": 3075.37,
          "money2": 1828.802
        }
      ]
    }

### 1.3． 属性是布尔值 ###

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script>
      let  data  =  Mock.mock({ 
            'list|5':  [{ 
                  //属性值自动加1,后面1是初始值
                  'id|+1':  1,
                  //测试这个词语 重复随机次数：最大9次，最小重复2次
                  'name|2-9': '测试',
                  'phone|11': '1',
                  //生成200到1000以内随机的整数
                  'point|200-1000':0,
                  //生成整数部分大于等于3000，小于等于8000，max小数部分保留2位的数据
                  'money|3000-8000.2':0,
                  //整数部分大于等于3000小于等于8000，max小数部分随机保留2到4位的小数
                  'money2|1000-2000.2-4':0,
                  //随机生成布尔值，默认为ture,为true概率：1/2
                  'status|1':true
            }]
      })
      // 输出结果
      console.log(JSON.stringify(data, null, 2))
    </script>
    </html>

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|5': [{ //属性值自动加1,后面1是初始值 'id|+1': 1, //测试这个词语 重复随机次数：最大9次，最小重复2次 'name|2-9': '测试', 'phone|11': '1', //生成200到1000以内随机的整数 'point|200-1000':0, //生成整数部分大于等于3000，小于等于8000，max小数部分保留2位的数据 'money|3000-8000.2':0, //整数部分大于等于3000小于等于8000，max小数部分随机保留2到4位的小数 'money2|1000-2000.2-4':0, //随机生成布尔值，默认为ture,为true概率：1/2 'status|1':true, 'default|1‐3':true }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

### 1.4． 属性值是Object ###

1）‘name|count’: object

从属性值 object 中随机选取 count 个属性。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    
    </body>
    <script> let data = Mock.mock({ 'list|5': [{ //属性值自动加1,后面1是初始值 'id|+1': 1, //测试这个词语 重复随机次数：最大9次，最小重复2次 'name|2-9': '测试', 'phone|11': '1', //生成200到1000以内随机的整数 'point|200-1000':0, //生成整数部分大于等于3000，小于等于8000，max小数部分保留2位的数据 'money|3000-8000.2':0, //整数部分大于等于3000小于等于8000，max小数部分随机保留2到4位的小数 'money2|1000-2000.2-4':0, //随机生成布尔值，默认为ture,为true概率：1/2 'status|1':true, 'default|1‐3':true, //2的意思是从后面对象中随机选取2个属性进行展示 'detail|2':{ 'id':1,'date':'2005‐01‐01','content':'记录'} }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

浏览器显示结果：

{ 
      "list": [
        { 
          "id": 1,
          "name": "测试测试测试测试测试测试测试测试",
          "phone": "11111111111",
          "point": 733,
          "money": 6534.66,
          "money2": 1930.35,
          "status": true,
          "default‐3": false,
          "detail": { 
            "content": "记录",
            "id": 1
          }
        },
        { 
          "id": 2,
          "name": "测试测试测试测试测试",
          "phone": "11111111111",
          "point": 918,
          "money": 6777.32,
          "money2": 1738.8219,
          "status": true,
          "default‐3": true,
          "detail": { 
            "date": "2005‐01‐01",
            "content": "记录"
          }
        },
        { 
          "id": 3,
          "name": "测试测试测试测试测试测试",
          "phone": "11111111111",
          "point": 415,
          "money": 5692.17,
          "money2": 1140.123,
          "status": true,
          "default‐3": true,
          "detail": { 
            "date": "2005‐01‐01",
            "id": 1
          }
        },
        { 
          "id": 4,
          "name": "测试测试测试测试测试测试测试测试",
          "phone": "11111111111",
          "point": 495,
          "money": 5877.03,
          "money2": 1632.1647,
          "status": true,
          "default‐3": true,
          "detail": { 
            "date": "2005‐01‐01",
            "content": "记录"
          }
        },
        { 
          "id": 5,
          "name": "测试测试测试测试测试测试测试测试",
          "phone": "11111111111",
          "point": 229,
          "money": 6538.04,
          "money2": 1383.342,
          "status": true,
          "default‐3": false,
          "detail": { 
            "date": "2005‐01‐01",
            "content": "记录"
          }
        }
      ]
    }

**可以发现模拟生成的数据结果：是从对象中随机选取得几个数据。**  
**2 ）‘name|min-max’: object**  
**从属性值 object中随机选取 min到 max个属性**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|5': [{ //属性值自动加1,后面1是初始值 'id|+1': 1, //测试这个词语 重复随机次数：最大9次，最小重复2次 'name|2-9': '测试', 'phone|11': '1', //生成200到1000以内随机的整数 'point|200-1000':0, //生成整数部分大于等于3000，小于等于8000，max小数部分保留2位的数据 'money|3000-8000.2':0, //整数部分大于等于3000小于等于8000，max小数部分随机保留2到4位的小数 'money2|1000-2000.2-4':0, //随机生成布尔值，默认为ture,为true概率：1/2 'status|1':true, 'default|1‐3':true, //2的意思是从后面对象中随机选取2到3个属性进行展示 'detail|2-3':{ 'id':1,'date':'2005‐01‐01','content':'记录'} }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

### 1.5． 属性值是数组 ###

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|2-6': [{ //属性值自动加1,后面1是初始值 'id|+1': 1, //测试这个词语 重复随机次数：最大9次，最小重复2次 'name|2-9': '测试', 'phone|11': '1', //生成200到1000以内随机的整数 'point|200-1000':0, //生成整数部分大于等于3000，小于等于8000，max小数部分保留2位的数据 'money|3000-8000.2':0, //整数部分大于等于3000小于等于8000，max小数部分随机保留2到4位的小数 'money2|1000-2000.2-4':0, //随机生成布尔值，默认为ture,为true概率：1/2 'status|1':true, 'default|1‐3':true, //2的意思是从后面对象中随机选取2到3个属性进行展示 'detail|2-3':{ 'id':1,'date':'2005‐01‐01','content':'记录'} }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

## 2． 数据占位符定义规范 ##

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

**书写格式为: @占位符(参数 \[参数\])**

内置方法列表：

<table> 
 <thead> 
  <tr> 
   <th><strong>Type</strong></th> 
   <th><strong>Method</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基本类型</td> 
   <td>boolean, natural, integer, float, character, string, range, date, time, datetime, now</td> 
  </tr> 
  <tr> 
   <td>图片</td> 
   <td>image, dataImage</td> 
  </tr> 
  <tr> 
   <td>颜色</td> 
   <td>color</td> 
  </tr> 
  <tr> 
   <td>文本</td> 
   <td>paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle</td> 
  </tr> 
  <tr> 
   <td>姓名</td> 
   <td>first, last, name, cfirst, clast, cname</td> 
  </tr> 
  <tr> 
   <td>网站</td> 
   <td>url, domain, email, ip, tld</td> 
  </tr> 
  <tr> 
   <td>地址</td> 
   <td>area, region</td> 
  </tr> 
  <tr> 
   <td>编号</td> 
   <td>guid, id</td> 
  </tr> 
 </tbody> 
</table>

使用时只需要把值设置成 @方法名【内置列表名】 即可，比如，生成一个随机的 Email：

![在这里插入图片描述][20181113145652400.jpg]

### 2.1． 基本方法 ###

可以生成随机的基本数据类型

1，string 字符串  
2，integer 整数  
3，date 日期

示例如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|10': [{ 'id|+1': 1, //生成随机字符串作为名称，string是内置方法 'name':'@string', //生成随机数字 'point':'@integer', //随机日期 'birthday':'@date' }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

浏览器运行显示结果如下所示：

{ 
      "list": [
        { 
          "id": 1,
          "name": "(mq",
          "point": 5083791101873200,
          "birthday": "1977-07-13"
        },
        { 
          "id": 2,
          "name": "isp@",
          "point": 6599960830871660,
          "birthday": "1980-01-10"
        },
        { 
          "id": 3,
          "name": "h5w%z",
          "point": 5930212585321868,
          "birthday": "1986-02-09"
        },
        { 
          "id": 4,
          "name": "4G!@",
          "point": -2998846183626736,
          "birthday": "2005-11-15"
        },
        { 
          "id": 5,
          "name": "FxRo",
          "point": 1335300809353096,
          "birthday": "2007-05-15"
        },
        { 
          "id": 6,
          "name": "sSpX",
          "point": 4263721724318444,
          "birthday": "2008-07-05"
        },
        { 
          "id": 7,
          "name": "3gyb3y",
          "point": -7937459295974808,
          "birthday": "2009-07-29"
        },
        { 
          "id": 8,
          "name": "$hHr9",
          "point": -1902814810400284,
          "birthday": "1985-06-09
        },
        { 
          "id": 9,
          "name": "s)Ib5Y",
          "point": -4044267640262532,
          "birthday": "1975-12-22"
        },
        { 
          "id": 10,
          "name": "mn0L",
          "point": 5526227040106936,
          "birthday": "1974-02-03"
        }
      ]
    }

可以发现属性值都是随机生成的。

### 2.2． 图像方法 ###

内置方法image 随机生成图片地址

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|3': [{ 'id|+1': 1, 'name':'@string', 'point':'@integer', 'birthday':'@date', 'img':'@image' }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

浏览器生成结果如下所示：

{ 
      "list": [
        { 
          "id": 1,
          "name": "^XRWg",
          "point": -4210258101944688,
          "birthday": "1970-11-13",
          "img": "http://dummyimage.com/180x150"
        },
        { 
          "id": 2,
          "name": "OGptm)z",
          "point": -7325415739657424,
          "birthday": "1998-01-08",
          "img": "http://dummyimage.com/250x250"
        },
        { 
          "id": 3,
          "name": "nKFRq",
          "point": 6928542938653648,
          "birthday": "1987-12-21",
          "img": "http://dummyimage.com/250x250"
        }
      ]
    }

图片随机地址已经生成。

**图片设置的其他用法：**  
@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。

@image()

// => “http://dummyimage.com/125x125”

@image(‘200x100’)

// => “http://dummyimage.com/200x100”

@image(‘200x100’, ‘\#fb0a2a’)

// => “http://dummyimage.com/200x100/fb0a2a”

@image(‘200x100’, ‘\#02adea’, ‘Hello’)

// => “http://dummyimage.com/200x100/02adea&text=Hello”

@image(‘200x100’, ‘\#00405d’, ‘\#FFF’, ‘Mock.js’)

// => “http://dummyimage.com/200x100/00405d/FFF&text=Mock.js”

@image(‘200x100’, ‘\#ffcc33’, ‘\#FFF’, ‘png’, ‘!’)

// => “http://dummyimage.com/200x100/ffcc33/FFF.png&text=!”

### 2.3． 文本方法 ###

@title: 标题

@cword(100) :文本内容 参数为字数  
代码实例如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|3': [{ 'id|+1': 1, 'name':'@string', 'point':'@integer', 'birthday':'@date', 'img':'@image', //随机标题 'title':'@title', //随机标题内容，字数为20 'content':'@cword(20)' }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

显示结果：

{ 
      "list": [
        { 
          "id": 1,
          "name": "eQw!Qks",
          "point": 2809586035596492,
          "birthday": "1996-12-28",
          "img": "http://dummyimage.com/336x280",
          "title": "Dxmessvmjh Ykcqcqi Nncy Cwbhicpgj Smdmbbk Zwbsjrhww Qohelmygyx"
          "content": "无深性命象院积少时到但共院太理音究维生学"
        },
        { 
          "id": 2,
          "name": "RgS*",
          "point": -1288728653110828,
          "birthday": "2005-01-12",
          "img": "http://dummyimage.com/720x300",
          "title": "Ussi Yngavtemlr Kryvkh",
          "content": "好道立或易标花天外路位使身称深作响向之们"
        },
        { 
          "id": 3,
          "name": "e^o",
          "point": 2829338975044496,
          "birthday": "1999-01-29",
          "img": "http://dummyimage.com/120x600",
          "title": "Woy Gswrz Hwmrxx",
          "content": "产写总必指农进和专许想式层人位心准适开习"
        }
      ]
    }

可以发现：

@title： 生成随机的英文标题  
@cword(字数)：生成随机的中文标题

**3）其他的文本方法**

l 单个字符：  
@character

l 英文单词

@word  
@word(length)  
@word(min,max)

l 英文句子  
@sentence  
@sentence(len)  
@sentence(min,max)

l 中文汉字  
@cword  
@cword(len)  
@cword(min,max)

l 中文句子  
@csentence  
@csentence(len)  
@csentence(min,max)

l 中文段落  
@cparagraph  
@cparagraph(len)  
@cparagraph(min,max)

l 中文标题  
@ctitle  
@ctitle(len)  
@ctitle(min,max)

### 2.4． 名称方法 ###

1）英文名生成  
@first  
名  
@last  
姓  
@name  
姓名  
@name(middle)  
middle：是否生成中间名字  
@name()

// => “Larry Wilson”

@name(true) //true表示生成

// => “Helen Carol Martinez”

2）中文名  
@cfirst  
姓  
@clast  
名  
@cname  
@cname()

// => “袁军”

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

使用实例如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|3': [{ 'id|+1': 1, //名 'name':'@cname', 'ename':'@last', 'cfirst':'@cfirst', 'point':'@integer', 'birthday':'@date', 'img':'@image', //随机标题 'title':'@title', //随机标题内容，字数为20 'content':'@cword(20)' }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

### 2.5． 网络方法 ###

可以生成url ip email等网络相关信息

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|3': [{ 'id|+1': 1, //名 'name':'@cname', 'ename':'@last', 'cfirst':'@cfirst', 'point':'@integer', 'birthday':'@date', 'img':'@image', //随机标题 'title':'@title', //随机标题内容，字数为20 'content':'@cword(20)', //生成地址 'url':"@url", //生成ip 'ip':"@ip", //生成邮箱 'email':"@email" }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

生成结果如下所示：

{ 
      "list": [
        { 
          "id": 1,
          "name": "江强",
          "ename": "White",
          "cfirst": "尹",
          "point": 4877914021134976,
          "birthday": "1971-07-20",
          "img": "http://dummyimage.com/160x600",
          "title": "Zmbq Lqkt Bvmukqilyb Qbtsdrdn Rzjhyqc Fbzw",
          "content": "门层对表产么高习原四王从区照派天即也就布",
          "url": "news://wyqb.pa/fadm",
          "ip": "41.185.151.157",
          "email": "h.dghxxob@ioldag.yu"
        },
        { 
          "id": 2,
          "name": "姚芳",
          "ename": "Miller",
          "cfirst": "郑",
          "point": 614768891928184,
          "birthday": "1999-10-27",
          "img": "http://dummyimage.com/120x90",
          "title": "Igaermo Muwcd Oxuy Phrbpiooq Pmccbcx Jqiniwn",
          "content": "断放活备者组不取平元数又技度研名于何越后",
          "url": "news://segyvpfd.vc/gfpyvz",
          "ip": "133.35.163.143",
          "email": "u.xnes@isksci.tc"
        },
        { 
          "id": 3,
          "name": "文霞",
          "ename": "Williams",
          "cfirst": "龚",
          "point": 1051041620263212,
          "birthday": "2006-05-30",
          "img": "http://dummyimage.com/125x125",
          "title": "Ybmuoycm Jsvc Obb Jpydendf",
          "content": "外素特不专现工却因与发属集身设本究且重传",
          "url": "nntp://oip.dz/wrqdpd",
          "ip": "238.129.84.64",
          "email": "e.djfbicgdc@kpvlyvhvt.gn"
        }
      ]
    }

随机生成网络地址，ip地址，邮箱地址：用法如下  
//生成地址  
‘url’:"@url"  
//生成ip  
‘ip’:"@ip",  
//生成邮箱  
‘email’:"@email"

### 2.6． 地址方法 ###

1）生成中国大区：@region 区域 （华北……）  
2）生成省份：@province  
3）生成城市：@city @city(prefix)

//prefix：布尔值，是否生成所属的省

@city()  
// => “唐山市”

@city(true)  
// => “福建省 漳州市”

4）生成县：@county @county(prefix)  
//prefix：布尔值，是否生成所属省、市

@county()  
// => “上杭县”

@county(true)  
// => “甘肃省 白银市 会宁县”

5）生成邮政编码: @zip

6）生成身份证号 @ID

@ID()  
// => “420000200710091854”

7）生成GUID字符串 @guid  
@guid()  
// => “662C63B4-FD43-66F4-3328-C54E3FF0D56E”

生成实例如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
    </body>
    <script> let data = Mock.mock({ 'list|3': [{ 'id|+1': 1, //名 'name':'@cname', 'ename':'@last', 'cfirst':'@cfirst', 'point':'@integer', 'birthday':'@date', 'img':'@image', //随机标题 'title':'@title', //随机标题内容，字数为20 'content':'@cword(20)', //生成地址 'url':"@url", //生成ip 'ip':"@ip", //生成邮箱 'email':"@email", //生成区域 'erea':'@region', //生成省，市 'city':'@city(true)', //县 'contry':'@county(true)', 'id':'@ID', 'zip':'@zip', 'guid':'@guid' }] }) // 输出结果 console.log(JSON.stringify(data, null, 2)) </script>
    </html>

浏览器输出结果：

{ 
     "list": [
        { 
          "id": 1,
          "name": "杨军",
          "ename": "Robinson",
          "cfirst": "卢",
          "point": 7707259653262132,
          "birthday": "2017-02-08",
          "img": "http://dummyimage.com/336x280",
          "title": "Lhefgmvoo Aocod Wlbql Dsdhwm Mqdaoaa Oknucn Urrcw",
          "content": "到局这方多再律求认办万员置特目且战持十省",
          "url": "cid://vnthestwl.tp/ijdlnclh",
          "ip": "37.75.137.193",
          "email": "y.ddwhfbrgz@fglsuyufkb.mw",
          "erea": "华中",
          "city": "香港特别行政区 九龙",
          "contry": "宁夏回族自治区 固原市 泾源县",
          "zip": "269948",
          "guid": "8Bc7Cb4A-e114-53de-B815-9db9cD57faA1"
        },
        { 
         "id": 2,
          "name": "何敏",
          "ename": "Taylor",
          "cfirst": "廖",
          "point": 7537535106427220,
          "birthday": "1973-07-31",
          "img": "http://dummyimage.com/240x400",
          "title": "Ajwmx Nmdfubn Qjolmdslq Cduoktjva",
          "content": "强用回装近为为术白明养被队治走铁话格入他",
          "url": "telnet://cwow.no/rslekzq",
          "ip": "79.188.30.248",
          "email": "h.bwul@lnxenhizew.mp",
          "erea": "华东",
          "city": "陕西省 咸阳市",
          "contry": "西藏自治区 那曲地区 巴青县",
          "zip": "386548",
          "guid": "87b8a66c-13B7-eCde-f31e-Ae3E91493AE0"
        },
        { 
          "id": 3,
          "name": "叶娜",
          "ename": "Garcia",
          "cfirst": "姚",
          "point": 7922600921770400,
          "birthday": "1972-04-01",
          "img": "http://dummyimage.com/250x250",
          "title": "Umumjnomv Aualxrhxs Dhbduggch Qcxv Uqjtmoytr",
          "content": "里铁还角深分非新了时小入层素几立传压按和",
          "url": "telnet://jyft.nz/rypdqqpm",
          "ip": "131.162.164.166",
          "email": "k.iddfzs@xdvm.io",
          "erea": "华东",
          "city": "四川省 宜宾市",
          "contry": "香港特别行政区 九龙 黄大仙区",
          "zip": "497267",
          "guid": "01EBF61D-0Eef-01dd-B971-74aEF67fd53e"
        }
      ]
    }

# 三、 Mock.js案例 #

## 1． 需求分析 ##

向Mock.js模拟好的书籍发送请求，展示用户列表数据。

请求：/user/list

请求方式：get

## 2． 模拟数据 ##

let  data  =  Mock.mock('/user/list','get',{ 
           'list|3': [{ 
            'id|+1': 1,
            //名
            'name':'@cname',
            'ename':'@last',
            'cfirst':'@cfirst',
            'point':'@integer',
            'birthday':'@date',
            'img':'@image',
            //随机标题
            'title':'@title',
            //随机标题内容，字数为20
            'content':'@cword(20)',
            //生成地址
            'url':"@url",
            //生成ip
            'ip':"@ip",
            //生成邮箱
            'email':"@email",
            //生成区域
            'erea':'@region',
            //生成省，市
            'city':'@city(true)',
            //县
            'contry':'@county(true)',
            'id':'@ID',
            'zip':'@zip',
            'guid':'@guid'
        }]
      })

## 3． 发送ajax请求 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Mock</title>
      <script src="js/vuejs-2.5.16.js"></script>
      <script src="js/axios-0.18.0.js"></script>
      <script src="js/mock-min.js"></script>
    </head>
    <body>
      <div id="app">
    <table border="1px;" style="width: 600px;height: 60px;">
          <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>标题</td>
            <td>地址</td>
          </tr>
          <tr v-for="(u,k) in users">
              <td>{
       {k+1}}</td>
              <td>{
       {u.name}}</td>
              <td>{
       {u.title}}</td>
              <td>{
       {u.city}}</td>
            </tr>
        </table>
      </div>
    </body>
    <script> let data = Mock.mock('/user/list','get',{ 'list|3': [{ 'id|+1': 1, //名 'name':'@cname', 'ename':'@last', 'cfirst':'@cfirst', 'point':'@integer', 'birthday':'@date', 'img':'@image', //随机标题 'title':'@title', //随机标题内容，字数为20 'content':'@cword(20)', //生成地址 'url':"@url", //生成ip 'ip':"@ip", //生成邮箱 'email':"@email", //生成区域 'erea':'@region', //生成省，市 'city':'@city(true)', //县 'contry':'@county(true)', 'id':'@ID', 'zip':'@zip', 'guid':'@guid' }] }); new Vue({ el:'#app', data:{ users:[], }, created:function(){ //发送ajax请求 axios.get('/user/list').then((res)=>{ this.users = res.data.list; }) } }) </script>
    </html>

[http_mockjs.com]: http://mockjs.com/
[20181113115612224.jpg]: /images/20220417/c7941fb5b39344f2b53049bd7ade41f1.png
[https_github.com_nuysoft_Mock]: https://github.com/nuysoft/Mock
[20181113115707239.jpg]: /images/20220417/76a2a077ec08493eacd411aa0fe190b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70]: /images/20220417/42fc5a1d97324291b318af4151c827b9.png
[20181113141940617.jpg]: /images/20220417/4ff4ad48779743ad91c53c453f0669d1.png
[20181113145652400.jpg]: /images/20220417/a90a0c18900f4cb886a362658b529afe.png