一、Mock.js入门

1．什么是mock.js?

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

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

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

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

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

Mock.js 具有以下特点：

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

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

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

4.开发无侵入

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

6.用法简单

7.符合直觉的接口

8.数据类型丰富

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

10.方便扩展

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

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

在这里插入图片描述

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

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

2． Mock.js安装

1）使用CDN

2）使用本地文件

下载Mock.js: https://github.com/nuysoft/Mock

导入到本地页面使用：
在这里插入图片描述

引入：

<script src="js/mock-min.js"></script>

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>

测试结果：
在这里插入图片描述

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>

浏览器显示效果如图所示：
在这里插入图片描述

二、 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 的方法在数据模板中称为『占位符』.

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

内置方法列表：

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

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

在这里插入图片描述

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": "[email protected]"
    },
    {
      "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": "[email protected]"
    },
    {
      "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": "[email protected]"
    }
  ]
}

随机生成网络地址，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": "[email protected]",
      "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": "[email protected]",
      "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": "[email protected]",
      "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>

[亲测]mock.js使用

一、Mock.js入门

1．什么是mock.js?

Mock.js 具有以下特点：

2． Mock.js安装

3． Mock.js入门案例

3.1．模拟数据

3.2．使用实例

二、 Mock.js的语法规范

1．数据模板定义规范

1.1．属性值是字符串

1.2．属性值是数字

1.3．属性是布尔值

1.4．属性值是Object

1.5．属性值是数组

2．数据占位符定义规范

2.1．基本方法

2.2．图像方法

2.3．文本方法

2.4．名称方法

2.5．网络方法

2.6．地址方法

三、 Mock.js案例

1．需求分析

2．模拟数据

3．发送ajax请求

猜你喜欢

[亲测]mock.js使用

一、Mock.js入门

1． 什么是mock.js?

Mock.js 具有以下特点：

2． Mock.js安装

3． Mock.js入门案例

3.1． 模拟数据

3.2． 使用实例

二、 Mock.js的语法规范

1． 数据模板定义规范

1.1． 属性值是字符串

1.2． 属性值是数字

1.3． 属性是布尔值

1.4． 属性值是Object

1.5． 属性值是数组

2． 数据占位符定义规范

2.1． 基本方法

2.2． 图像方法

2.3． 文本方法

2.4． 名称方法

2.5． 网络方法

2.6． 地址方法

三、 Mock.js案例

1． 需求分析

2． 模拟数据

3． 发送ajax请求

猜你喜欢

1．什么是mock.js?

3.1．模拟数据

3.2．使用实例

1．数据模板定义规范

1.1．属性值是字符串

1.2．属性值是数字

1.3．属性是布尔值

1.4．属性值是Object

1.5．属性值是数组

2．数据占位符定义规范

2.1．基本方法

2.2．图像方法

2.3．文本方法

2.4．名称方法

2.5．网络方法

2.6．地址方法

1．需求分析

2．模拟数据

3．发送ajax请求