Mock | MockJS 的安装以及基本语法

最新推荐文章于 2024-04-29 11:28:04 发布

兀坐晴窗独饮茶

最新推荐文章于 2024-04-29 11:28:04 发布

阅读量1.8k

点赞数 1

分类专栏：前端日志前端基础

本文链接：https://blog.csdn.net/weixin_40040107/article/details/115272308

版权

javascript mock

前端日志同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

前端基础

8 篇文章 0 订阅

订阅专栏

MockJS 的入门以及安装

1. 安装 NodeJS

// 创建 Mock 目录，先安装 node 下的 mock.js； 

npm install mockjs

2. 运行官网示例代码

创建一个 js 文件，键入官网示例代码：
    
//引入 mock.js，相当于 src=mock.js
const  Mock = require('mockjs');

const data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10' : [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1' : 1
    }]
});

console.log(data);
console.log(JSON.stringify(data, null, 4));

3. 在 html页面运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mock</title>
    <!-- 引入 mock.js -->
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script>
        const data = Mock.mock({
            // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
            'list|1-10': [{
                'id|+1': 1
            }]
        });
        console.log(data);
        console.log(JSON.stringify(data, null, 4));
    </script>
</head>
<body>

</body>
</html>

MockJS的数据模板定义规范

1. 属性值是字符串

const Mock = require('mockjs');

// mock 语法规范
//数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值： 'name|rule': value

// 1. 属性值是字符串 String
const str = Mock.mock({
    // 'name|min-max': string
    // 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
    'myStr1|1-10': "abc",
    // 'name|count': string
    // 通过重复 string 生成一个字符串，重复次数等于 count
    'myStr2|3': 'a'
})


// 结果 

{ myStr1: 'abcabcabcabcabcabcabcabc', myStr2: 'aaa' }

2.属性值是数字 Number

const num = Mock.mock({
    // 'name|+1': number
    // 属性值自动加 1，初始值为 number
    'myNum1|+1': 1,
    // 'name|min-max': number
    // 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
    // 根据具体数值 来确定生成数据的类型
    'myNum2|20-30': 2,
    // 'name|min-max.dmin-dmax': number
    // 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
    'myNum3|1-10.2-6': 1.2
})



// 运行结果

{ myNum1: 1, myNum2: 21, myNum3: 9.28 }

3.属性值是布尔型 Boolean

// 3.属性值是布尔型 Boolean
const bol = Mock.mock({
    // 'name|1': boolean
    // 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
    'myBol1|1': true,
    // 'name|min-max': value
    // 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
    'myBol2|0.2-0.8': true
})


// 运行结果

{ myBol1: true, 'myBol2.8': false }

4. 属性值是对象 Object

const objs = {
    'name': 'kkk',
    'age': 18,
    'email': 'kkkk1@163.com'
}
const obj = Mock.mock({
    // 'name|count': object
    // 从属性值 object 中随机选取 count 个属性。count < object的属性数量
    'myObj1|2': objs,
    // 'name|min-max': object
    // 从属性值 object 中随机选取 min 到 max 个属性
    'myObj2|1-3': objs
})

// 运行结果

{ myObj1: { age: 18, name: 'kkk' }, myObj2: { name: 'kkk' } }

5. 属性值是数组 Array

const array = [
    "aa", "bb", "cc", "dd", "ee", "ff"
]

const arr = Mock.mock({
    // 'name|1': array
    // 从属性值 array 中随机选取 1 个元素，作为最终值。
    'arr1|1': array,
    // 'name|+1': array
    // 从属性值 array 中顺序选取 1 个元素，作为最终值。
    'arr2|1-10': [{
        'id|+1': array
    }],
    // 'name|min-max': array
    // 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max
    'arr3|1-5': array,
    //'name|count': array
    // 通过重复属性值 array 生成一个新数组，重复次数为 count
    'arr4|2': array
})

// 运行结果


{
  arr1: 'dd',
  arr2: [ { id: 'aa' }, { id: 'bb' } ],
  arr3: [
    'aa', 'bb', 'cc', 'dd',
    'ee', 'ff', 'aa', 'bb',
    'cc', 'dd', 'ee', 'ff',
    'aa', 'bb', 'cc', 'dd',
    'ee', 'ff', 'aa', 'bb',
    'cc', 'dd', 'ee', 'ff'
  ],
  arr4: [
    'aa', 'bb', 'cc',
    'dd', 'ee', 'ff',
    'aa', 'bb', 'cc',
    'dd', 'ee', 'ff'
  ]
}

6. 属性值是函数 Function


function test() {
    return 10
}

const func = Mock.mock({
    // 'name': function
    // 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象
    'func': test()
})

// 运行结果

{ func: 10 }

7. 属性值是正则表达式 RegExp

const reg = Mock.mock({
    // 'name': regexp
    // 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})


// 运行结果
{ regexp1: 'kT3', regexp2: 'D"\tX6+', regexp3: '4875671' }

MockJS 的入门以及安装

1. 安装 NodeJS

// 创建 Mock 目录，先安装 node 下的 mock.js； 

npm install mockjs

2. 运行官网示例代码

创建一个 js 文件，键入官网示例代码：
    
//引入 mock.js，相当于 src=mock.js
const  Mock = require('mockjs');

const data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10' : [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1' : 1
    }]
});

console.log(data);
console.log(JSON.stringify(data, null, 4));

3. 在 html页面运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mock</title>
    <!-- 引入 mock.js -->
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script>
        const data = Mock.mock({
            // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
            'list|1-10': [{
                'id|+1': 1
            }]
        });
        console.log(data);
        console.log(JSON.stringify(data, null, 4));
    </script>
</head>
<body>

</body>
</html>

MockJS的数据模板定义规范

1. 属性值是字符串

const Mock = require('mockjs');

// mock 语法规范
//数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值： 'name|rule': value

// 1. 属性值是字符串 String
const str = Mock.mock({
    // 'name|min-max': string
    // 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
    'myStr1|1-10': "abc",
    // 'name|count': string
    // 通过重复 string 生成一个字符串，重复次数等于 count
    'myStr2|3': 'a'
})


// 结果 

{ myStr1: 'abcabcabcabcabcabcabcabc', myStr2: 'aaa' }

2.属性值是数字 Number

const num = Mock.mock({
    // 'name|+1': number
    // 属性值自动加 1，初始值为 number
    'myNum1|+1': 1,
    // 'name|min-max': number
    // 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
    // 根据具体数值 来确定生成数据的类型
    'myNum2|20-30': 2,
    // 'name|min-max.dmin-dmax': number
    // 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
    'myNum3|1-10.2-6': 1.2
})



// 运行结果

{ myNum1: 1, myNum2: 21, myNum3: 9.28 }

3.属性值是布尔型 Boolean

// 3.属性值是布尔型 Boolean
const bol = Mock.mock({
    // 'name|1': boolean
    // 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
    'myBol1|1': true,
    // 'name|min-max': value
    // 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
    'myBol2|0.2-0.8': true
})


// 运行结果

{ myBol1: true, 'myBol2.8': false }

4. 属性值是对象 Object

const objs = {
    'name': 'kkk',
    'age': 18,
    'email': 'kkkk1@163.com'
}
const obj = Mock.mock({
    // 'name|count': object
    // 从属性值 object 中随机选取 count 个属性。count < object的属性数量
    'myObj1|2': objs,
    // 'name|min-max': object
    // 从属性值 object 中随机选取 min 到 max 个属性
    'myObj2|1-3': objs
})

// 运行结果

{ myObj1: { age: 18, name: 'kkk' }, myObj2: { name: 'kkk' } }

5. 属性值是数组 Array

const array = [
    "aa", "bb", "cc", "dd", "ee", "ff"
]

const arr = Mock.mock({
    // 'name|1': array
    // 从属性值 array 中随机选取 1 个元素，作为最终值。
    'arr1|1': array,
    // 'name|+1': array
    // 从属性值 array 中顺序选取 1 个元素，作为最终值。
    'arr2|1-10': [{
        'id|+1': array
    }],
    // 'name|min-max': array
    // 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max
    'arr3|1-5': array,
    //'name|count': array
    // 通过重复属性值 array 生成一个新数组，重复次数为 count
    'arr4|2': array
})

// 运行结果


{
  arr1: 'dd',
  arr2: [ { id: 'aa' }, { id: 'bb' } ],
  arr3: [
    'aa', 'bb', 'cc', 'dd',
    'ee', 'ff', 'aa', 'bb',
    'cc', 'dd', 'ee', 'ff',
    'aa', 'bb', 'cc', 'dd',
    'ee', 'ff', 'aa', 'bb',
    'cc', 'dd', 'ee', 'ff'
  ],
  arr4: [
    'aa', 'bb', 'cc',
    'dd', 'ee', 'ff',
    'aa', 'bb', 'cc',
    'dd', 'ee', 'ff'
  ]
}

6. 属性值是函数 Function


function test() {
    return 10
}

const func = Mock.mock({
    // 'name': function
    // 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象
    'func': test()
})

// 运行结果

{ func: 10 }

7. 属性值是正则表达式 RegExp

const reg = Mock.mock({
    // 'name': regexp
    // 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})


// 运行结果
{ regexp1: 'kT3', regexp2: 'D"\tX6+', regexp3: '4875671' }

兀坐晴窗独饮茶

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Mock | MockJS 的安装以及基本语法

MockJS 的入门以及安装1. 安装 NodeJS// 创建 Mock 目录，先安装 node 下的 mock.js； npm install mockjs 2. 运行官网示例代码创建一个 js 文件，键入官网示例代码： //引入 mock.js，相当于 src=mock.jsconst Mock = require('mockjs');const data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 '
复制链接

扫一扫