Mock.js安装与语法(一)

作者: GaoEnron | 来源:发表于2019-12-12 21:14 被阅读0次

Mock.js安装与语法

一. mock.js 创建相应的demo工程

在创建工程的目录文件夹下创建相应工程目录，根据步骤建立相应mock.js工程

建立package.json文件

 npm install <pkg>  // 生成package.json

安装mock.js文件

通过下面的命令生成工程目录下相应 node_modules 模块，可以使用VSCode打开
```
npm install mockjs
```

在根目录下建立 index.js文件

var Mock = require('mockjs')
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1, // 生成一条数据
        'name': 'javaName'
    }]
})
console.log(JSON.stringify(data, null, 4));

在终端命令下进入该工程目录运行下面的命令

node index  执行可以看到生成的随机数据

输出的结果如下：

{
    "list": [
        {
            "id": 1,
            "name": "javaName"
        },
        {
            "id": 2,
            "name": "javaName"
        },
        {
            "id": 3,
            "name": "javaName"
        }
    ]
}

二、Mock.js语法

数据模板定义规范(Data Template Definition，DTD)
数据占位符定义规范(Data Placeholder Definition，DPD)

1. 数据模板定义规范DTD

属性名 name
生成规则 rule
属性值 value

Eg:

'name|rule': value

2. 生成规则格式

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

'name|min-max': value

var data = Mock.mock({
    'list|3': [{  
        'id|+1': 1, // 生成一条数据
        'name': 'javaName',
        'phone|5-11': '1'  // 生成一个 5 - 11 位的重复1的字符串
    }]
})
console.log(JSON.stringify(data, null, 4));

上面代码执行的结果

{
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "1111111111" //
        },
        {
            "id": 2,
            "name": "javaName",
            "phone": "1111111"
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "111111111"
        }
    ]
}

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

'name|count': value

**mock的代码 **

var data = Mock.mock({
    'list|3': [{
        'id|+1': 1, // 生成一条数据
        'name': 'javaName',
        'phone|11': '1'  // 生成一个 11 位数字 通过给的Value值去生成
    }]
})
console.log(JSON.stringify(data, null, 4));

输出的结果

 {
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "11111111111"
        },
        {
            "id": 2,
            "name": "javaName",
            "phone": "11111111111"
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "11111111111"
        },
    ]
}

属性值是数字number

1. 属性值是数字number

属性自动加1初始时候是number类型

'name|+step': value

// 'phone|5-11': '1'  // 生成一个 11 位数字 通过给的Value值去生成
var data = Mock.mock({
    'list|3': [{
        'id|+1': 1, // 生成一条数据, +1 代表id 自增加1
        'name': 'javaName',
        'phone|5-11': '1'  // 生成一个 11 位数字 通过给的Value值去生成
    }]
})
console.log(JSON.stringify(data, null, 4)); //

输出结果:

{
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "1111111111"
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "111111111"
        },
        {
            "id": 5,
            "name": "javaName",
            "phone": "1111111111"
        }
    ]
}

2. 属性的值是number类型

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

'name|min-max': number

var data = Mock.mock({
    'list|5': [{
        'id|+1': 1, // 生成一条数据
        'name': 'javaName',
        'phone|5-11': '1', // 生成一个 11 位数字 通过给的Value值去生成
        'point|100-500': 0 // 生成一个数字为 100 到 500 之间的数据
    }]
})
console.log(JSON.stringify(data, null, 4)); //

输出的结果:

{
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "11111",
            "point": 407
        },
        {
            "id": 2,
            "name": "javaName",
            "phone": "1111111111",
            "point": 128
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "1111111111",
            "point": 386
        },
        {
            "id": 4,
            "name": "javaName",
            "phone": "111111111",
            "point": 474
        },
        {
            "id": 5,
            "name": "javaName",
            "phone": "111111111",
            "point": 322
        }
    ]
}

3. 生成浮点数据

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分为dcount位

'name|min-max.dcount': value

{
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "11111111",
            "point": 144,
            "money": 145.05
        },
        {
            "id": 2,
            "name": "javaName",
            "phone": "111111",
            "point": 485,
            "money": 365.23
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "11111111",
            "point": 408,
            "money": 265.23
        },
        {
            "id": 4,
            "name": "javaName",
            "phone": "11111111111",
            "point": 227,
            "money": 453.73
        },
        {
            "id": 5,
            "name": "javaName",
            "phone": "111111111",
            "point": 336,
            "money": 136.47
        }
    ]
}

4. 生成浮点数据

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

dmax 位。

'name|min-max.dmin-dmax': value

var data = Mock.mock({
    'list|5': [{
        'id|+1': 1, // 生成一条数据
        'name': 'javaName',
        'phone|5-11': '1', // 生成一个 11 位数字 通过给的Value值去生成
        'point|100-500': 0, // 生成一个数字为 100 到 500 之间的数据
        'money|100-500.2-4': 0 // 生成一个数字为 100 到 500 之间的数据 小数位 2 位 - 4位变化
        
    }]
})
console.log(JSON.stringify(data, null, 4)); //

输出生成的结果：

{
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "1111111",
            "point": 187,
            "money": 297.702
        },
        {
            "id": 2,
            "name": "javaName",
            "phone": "11111111",
            "point": 124,
            "money": 391.778
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "111111111",
            "point": 261,
            "money": 442.31
        },
        {
            "id": 4,
            "name": "javaName",
            "phone": "1111111111",
            "point": 246,
            "money": 219.577
        },
        {
            "id": 5,
            "name": "javaName",
            "phone": "11111",
            "point": 386,
            "money": 488.79
        }
    ]
}

属性值是布尔类型

5. 属性值是布尔类型

随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2

'name|1': boolean

var data = Mock.mock({
    'list|4': [{
        'id|+1': 1, // 生成一条数据
        'name': 'javaName',
        'phone|5-11': '1', // 生成一个 11 位数字 通过给的Value值去生成
        'point|100-500': 0, // 生成一个数字为 100 到 500 之间的数据
        'money|100-500.2-4': 0, // 生成一个数字为 100 到 500 之间的数据 小数位 2 位 - 4位变化
        'status|1': true // 生成布尔值， true和false 各位1/2 
    }]
})
console.log(JSON.stringify(data, null, 4)); //

输出的结果是：

{
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "11111111",
            "point": 141,
            "money": 356.89,
            "status": true
        },
        {
            "id": 2,
            "name": "javaName",
            "phone": "1111111",
            "point": 143,
            "money": 145.58,
            "status": true
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "11111",
            "point": 215,
            "money": 165.778,
            "status": false
        },
        {
            "id": 4,
            "name": "javaName",
            "phone": "111111",
            "point": 346,
            "money": 376.185,
            "status": true
        }
    ]
}

6. 属性值是布尔类型

随机生成一个布尔值，值为 value 的概率是 min / (min + max)

'name|min-max': value

var data = Mock.mock({
    'list|4': [{
        'id|+1': 1, // 生成一条数据
        'name': 'javaName',
        'phone|5-11': '1', // 生成一个 11 位数字 通过给的Value值去生成
        'point|100-500': 0, // 生成一个数字为 100 到 500 之间的数据
        'money|100-500.2-4': 0, // 生成一个数字为 100 到 500 之间的数据 小数位 2 位 - 4位变化
        'status|1': true, // 生成布尔值， true和false 各位1/2 
        'statusTwo|1-5': true // 随机生成一个布尔值，值为 value 的概率是 1 / 6
    }]
})
console.log(JSON.stringify(data, null, 4)); //

{
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "1111111",
            "point": 416,
            "money": 169.55,
            "status": true,
            "statusTwo": false
        },
        {
            "id": 2,
            "name": "javaName",
            "phone": "111111",
            "point": 392,
            "money": 337.2145,
            "status": false,
            "statusTwo": true
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "111111111",
            "point": 123,
            "money": 201.493,
            "status": false,
            "statusTwo": true
        },
        {
            "id": 4,
            "name": "javaName",
            "phone": "11111111111",
            "point": 484,
            "money": 207.16,
            "status": true,
            "statusTwo": false
        }
    ]
}

属性是Object类型

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

'name|count': object

var data = Mock.mock({
    'list|45': [{
        'id|+1': 1, // 生成一条数据
        'name': 'javaName',
        'phone|5-11': '1', // 生成一个 11 位数字 通过给的Value值去生成
        'point|100-500': 0, // 生成一个数字为 100 到 500 之间的数据
        'money|100-500.2-4': 0, // 生成一个数字为 100 到 500 之间的数据 小数位 2 位 - 4位变化
        'status|1': true, // 生成布尔值， true和false 各位1/2 
        'statusTwo|1-5': true, // 生成布尔值， true和false 各位1/2 
        'detail|2': { // 随机选取对象中的两个属性
            id: 1,
            data: '2019-12-23',
            content: '记录内容'
        }
    }]
})
console.log(JSON.stringify(data, null, 4)); //

{
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "11111",
            "point": 169,
            "money": 308.464,
            "status": false,
            "statusTwo": true,
            "detail": {
                "content": "记录内容",
                "data": "2019-12-23"
            }
        },
        {
            "id": 2,
            "name": "javaName",
            "phone": "11111111111",
            "point": 405,
            "money": 167.164,
            "status": false,
            "statusTwo": false,
            "detail": {
                "id": 1,
                "content": "记录内容"
            }
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "1111111111",
            "point": 197,
            "money": 177.846,
            "status": false,
            "statusTwo": false,
            "detail": {
                "data": "2019-12-23",
                "id": 1
            }
        },
        {
            "id": 4,
            "name": "javaName",
            "phone": "111111",
            "point": 361,
            "money": 357.5053,
            "status": false,
            "statusTwo": true,
            "detail": {
                "content": "记录内容",
                "data": "2019-12-23"
            }
        }]
}

选取 min 到 max 个属性

从属性值 object 中随机选取 min 到 max 个属性

'name|min-max': object

var data = Mock.mock({
    'list|6': [{
        'id|+1': 1, // 生成一条数据
        'name': 'javaName',
        'phone|5-11': '1', // 生成一个 11 位数字 通过给的Value值去生成
        'point|100-500': 0, // 生成一个数字为 100 到 500 之间的数据
        'money|100-500.2-4': 0, // 生成一个数字为 100 到 500 之间的数据 小数位 2 位 - 4位变化
        'status|1': true, // 生成布尔值， true和false 各位1/2 
        'statusTwo|1-5': true, // 生成布尔值， true和false 各位1/2 
        'detail|2-3': {  // 选取其中2-3个属性值
            id: 1,
            data: '2019-12-23',
            content: '记录内容'
        }
    }]
})
console.log(JSON.stringify(data, null, 4)); //

{
    "list": [
        {
            "id": 1,
            "name": "javaName",
            "phone": "11111",
            "point": 259,
            "money": 164.0349,
            "status": true,
            "statusTwo": false,
            "detail": {
                "id": 1,
                "data": "2019-12-23",
                "content": "记录内容"
            }
        },
        {
            "id": 2,
            "name": "javaName",
            "phone": "11111111",
            "point": 192,
            "money": 199.323,
            "status": true,
            "statusTwo": false,
            "detail": {
                "id": 1,
                "content": "记录内容"
            }
        },
        {
            "id": 3,
            "name": "javaName",
            "phone": "11111",
            "point": 151,
            "money": 479.356,
            "status": true,
            "statusTwo": false,
            "detail": {
                "data": "2019-12-23",
                "id": 1
            }
        }
    ]
}

Mock.js安装与语法(一)

Mock.js安装与语法

一. mock.js 创建相应的demo工程

二、Mock.js语法

属性值是数字number

属性值是布尔类型

属性是Object类型

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读