html网页中使用mock,关于Mock.js使用

目前在做一个个人网站，写了一半没有数据填充，也不知道写啥了，就顺带学习下mockjs这个东西，官网上主要介绍它是一个可以随机生成各种类型数据，拦截ajax请求等优点。接下来就近距离结束下mockjs吧！

1.安装

通过npm为自己的项目安装mockjs。

npm install mockjs

安装完成后对mockjs进行使用：

const Mock \= require('mockjs')

let data \= Mock.mock({

'list|10': \[{'id|+1': 1}\]

})

先不要管里面的语法，这上面生成的是一个对象数组，里面每个元素是一个对象，每个对象的key是从0-9，value是一个对象，对象中的key是id，value是1-10.

这里只介绍commonjs中的用法，其实用es6的模块引入方法也可以，但是最终被babel转义的也是通过require引入的。关于import，require这些区别建议看下这篇文章

2. 语法规范

mockjs的语法规范包括两部分：

1\. 数据模板定义规范

2\. 数据占位符定义规范

数据模板定义规范

数据模板中的属性由三个部分组成：属性名，生成规则，属性值

// 属性名   name

// 生成规则 rule

// 属性值   value

'name|rule': value

Notice:

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生成一个字符串，重复次数大于等于