Vue.js学习（四）—— mockjs入门了解

2022-09-19 21:30:23

一、什么是mockjs？

　　生成随机数据，拦截Ajax请求。是一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发，帮助编写单元测试，提供了以下模拟功能：

1、根据数据模板生成模拟数据
2、模拟Ajax请求，生成并返回模拟数据
3、基于HTML模板生成模拟数据

　　具有以下优点：　

1、前后端分离
    让前端工程师独立于后端进行开发。
2、增加单元测试的真实性
    通过随机数据，模拟各种场景。
3、并发无侵入
　  不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
4、用法简单
    符合直觉的接口。
5、数据类型丰富
    支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6、方便扩展
    支持扩展更多数据类型，支持自定义函数和正则。
7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。

二、mockjs安装

　　1、npm安装

npm install mockjs

　　发出警告，没有对应文件信息。这个错误信息是不是很熟悉，我们在上一篇博客Vue.js学习（一）—— axios了解安装axios的时候也碰到了。解决方法：执行该命令之前，使用命令： npm init 命令生成package.json

　　注意：npm init的时候package name不能和你安装的包名mock相同，否则会冲突。npm初始化完毕之后会在对应目录（E:\Java\setting\mock）下生成package.json，内容信息与你初始化时候的信息一致，内容如下：

　　然后执行npm install mockjs之后文件目录如下：

　　至此安装完毕

　　2、cnpm安装

npm install mockjs

　　备注：cnpm安装方式，不需要npm init

　　3、bower安装

bower install mockjs

　　安装结果：

　　注意：必须先安装bower，否则会报显示‘bower‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。解决和安装方法见上一次的博文 Vue.js学习（一）—— axios了解

　　4、使用cdn引入

<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>

　　注：下载链接： https://github.com/nuysoft/Mock

三、使用语法

　　1、基本语法

Mock.mock(‘地址‘,{ "dataname|rule":{"对应的值"} })

　　说明：地址就是我们通过ajax获取数据时候填写的地址，这里填写的地址可以是任意不存在的地址，第二个参数是我们要模拟的数据以及对应的规则。

　　2、语法规范

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

a.数据模板定义规范
b.数据占位符定义规范

　　（1）数据模板定义规范

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

// 属性名   name
// 生成规则 rule
// 属性值   value
‘name|rule‘: value

　　注意：

1、属性名 和 生成规则 之间用竖线 | 分隔。
2、生成规则 是可选的。
3、生成规则 有 7 种格式：
   （1）‘name|min-max‘: value
   （2）‘name|count‘: value
   （3）‘name|min-max.dmin-dmax‘: value
   （4）‘name|min-max.dcount‘: value
   （5）‘name|count.dmin-dmax‘: value
   （6）‘name|count.dcount‘: value
   （7）‘name|+step‘: value
4、生成规则的含义需要依赖属性值的类型才能确定。
5、属性值中可以包含@占位符。
6、属性值还指定了最终值的初始值和类型。

　　生成规则和示例：

1、属性值是字符串String
    （1）‘name|min-max‘: string
        通过重复 String 生成一个字符串，重复次数大于等于 min ，小于等于max 。
    （2）‘name|count‘: string
        通过重复 String 生成一个字符串，重复次数等于 count 。
2、属性值是数字Number
    （1）‘name|+1‘: number
        属性值自动加 1 ，初始值为 number
    （2）‘name|min-max‘: number
        生成一个大于等于 min 、小于等于 max 的整数，属性值 Number 只是用来确定类型。
    （3）‘name|min-max.dcount‘: value
        生成一个浮点数，整数部分大于等于 min 、小于等于 max， 小数部分为 dcount 位。
    （4）‘name|min-max.dmin-dmax‘: number
        生成一个浮点数，整数部分大于等于 min 、小于等于 max ，小数部分保留 dmin 到 dmax 位。
　　　示例：
        Mock.mock({
            ‘number1|1-100.1-10‘: 1,
            ‘number2|123.1-10‘: 1,
            ‘number3|123.3‘: 1,
            ‘number4|123.10‘: 1.123
        })
        // =>
        {
            "number1": 12.92,
            "number2": 123.51,
            "number3": 123.777,
            "number4": 123.1231091814
        }     
3、属性值是布尔型Boolean
    （1）‘name|1‘: boolean
        随机生成一个布尔值，值为 true 的概率为1/2，值为 false 的概率同样是1/2。
    （2）‘name|min-max‘: value
        随机生成一个布尔值，值为 value 的概率是 min/(min+max) ，值为 !value 的概率为 max/(min+max)。
4、属性值是对象Object
    （1）‘name|count‘: object
        从属性值 object 中随机选取 count 个属性。
    （2）‘name|min-max‘: object
        从属性值 object 中随机选取 min 到 max 个属性。
5、属性值是数组Array
    （1）‘name|1‘: array
        从属性值 array 中随机选取 1 个元素，作为最终值。
    （2）‘name|+1‘: array
        从属性值 array 中顺序选取 1 个元素，作为最终值
    （3）‘name|min-max‘: array
        通过重复属性值 array 生成一个新数组，重复次数大于等于 min ，小于等于 max 。
    （4）‘name|count‘: array
        通过重复属性值 array 生成一个新数组，重复次数为 count 。
6、属性值是函数Function
    （1）‘name‘: function
        执行函数 function ，取其返回值作为最终的属性值，函数的上下文为属性 ‘name‘ 所在的对象
7、属性值是正在表达式RegExp
    （1）‘name‘: regexp
        根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
        示例：
        Mock.mock({
            ‘regexp1‘: /[a-z][A-Z][0-9]/,
            ‘regexp2‘: /\w\W\s\S\d\D/,
            ‘regexp3‘: /\d{5,10}/
        })
        // =>
        {
            "regexp1": "pJ7",
            "regexp2": "F)\fp1G",
            "regexp3": "561659409"
        }

　　（2）数据占位符定义规范

　　占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。

　　占位符的格式为：

@占位符
@占位符(参数 [, 参数])

　　内置方法列表

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

Vue.js学习（四）—— mockjs入门了解

　　注意：

1、用 @ 来标识其后的字符串是 占位符 。
2、占位符 引用的是 Moc.Random 中的方法，它是一个工具类，用于生成各种随机数据。
3、通过 Mock.Random.extend() 来扩展自定义占位符。
4、占位符 也可以引用 数据模板 中的属性
5、占位符 会优先引用 数据模板 中的属性。
6、占位符 支持 相对路径 和绝对路径。
    示例：
    Mock.mock({
        name: {
            first: ‘@FIRST‘,
            middle: ‘@FIRST‘,
            last: ‘@LAST‘,
            full: ‘@first @middle @last‘
        }
    })
    // =>
    {
        "name": {
            "first": "Charles",
            "middle": "Brenda",
            "last": "Lopez",
            "full": "Charles Brenda Lopez"
        }
    }

四、数据模板定义规范使用实例

　　使用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>

　　效果如下：

　　上面的语法规范对应下面的测试demo如下

1、属性值是字符串

（1）‘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属性的值有长有短，说明随机重复设置成功。　

（2）‘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、属性值是数字

（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
    }
  ]
}

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) ，值为 !value 的概率为 max/(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>

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、可以生成随机的基本数据类型

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、图像方法

　　内置方法 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=!”

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(字数)：生成随机的中文标题

　　其他的文本方法

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)

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>

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"

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"
    }
  ]
}

TypeMethod基本类型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————————————————版权声明：本文为CSDN博主「Armymans」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_43652509/article/details/84029619

Vue.js学习（四）—— mockjs入门了解

码农公寓

相关文章