使用Mock.js生成随机JSON数据

原创

北love辰666 2022-02-21 15:51:32 博主文章分类：Mock使用 ©著作权

文章标签 mock mock生成json数据 html 模版 json数据 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者北love辰666的原创作品，请联系作者获取转载授权，否则将追究法律责任

1 首先，我们需要在代码文件中安装mock模块，所以，我们打开代码文件的根目录，然后在此处启动命令行工具。

2 依次输入以下两条命令，完成mock模块的安装。此处要注意的是，安装之前电脑要有Node.js的环境，因为在此处用到了它的npm工具。

使用Mock.js生成随机JSON数据_json数据

3 安装完成后，我们发现在我们的代码文件根目录下多出来了一个名为“bower_components”的文件夹，我们后续用到的Mock模块就在此文件夹里，如图：

使用Mock.js生成随机JSON数据_json数据_02

4 所有安装工作结束后，我们新建一个HTML文件，然后引入mock模块，如图：

使用Mock.js生成随机JSON数据_mock生成json数据_03

5 引入模块后我们定义我们所需的json的数据格式，也就是定义模版，此处使用网上的一个简易模版，如下;

使用Mock.js生成随机JSON数据_模版_04

6 我们通过console.log()方法将结果输出，此时可看到生成的50条json数据，如下：

使用Mock.js生成随机JSON数据_html_05

7 整个代码文件如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JSON数据生成</title>
    </head>
    <body>
        <script type="text/javascript" src="./bower_components/mockjs/dist/mock.js">            </script>
        <script>
            window.onload=function(){
                var Random = Mock.Random;
                Random.date();
                var dataMock = Mock.mock({
                    'list|50': [{
                    'simCar|13000000000-19900000000': 1440191734422,
                    'operator|1': [
                        '移动',
                        '联通',
                        '电信'
                    ],
                    'packageName|1': [
                        '5元30M',
                        '10元500M',
                        '50元100G'
                    ],
                    validityPeriod: '@date',
                    'unitPrice|5-10': 5,
                    'quantity|10-30': 12,
                    'amount|1-100': 60,
                    'imei|800000000000000-900000000000000': 868120203709164,
                    user: 'test'
                }]
            });

            //console.log(JSON.stringify(dataMock,null,4));
            console.log(dataMock);
            }
        </script>
    </body>
</html>