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

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

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

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

www.zeeklog.com  - 使用Mock.js生成随机JSON数据

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

www.zeeklog.com  - 使用Mock.js生成随机JSON数据

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

www.zeeklog.com  - 使用Mock.js生成随机JSON数据

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

www.zeeklog.com  - 使用Mock.js生成随机JSON数据

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

www.zeeklog.com  - 使用Mock.js生成随机JSON数据

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>

附:

Mock模块除上述简单的使用外,也可以运用在Vue这种框架中,具体的教程可参考如下教程:

Read more

超棒的雅思资源!

超棒的雅思资源!

雅思真题材料地址: https://github.com/zeeklog/IETLS 感谢所有人。材料来自:@shah0150 & @kbtxwer * 超棒的雅思资源 * 雅思简介 * 听力 * 阅读 * 写作 * 口语 * 词汇 * 其他 * YouTube 频道 * [播客] (#podcasts) 雅思简介 * 什么是雅思 - 了解什么是雅思 听力 * 高级听力 * 雅思官方网站 * 考试英语 * 英国广播公司节目 * 乔治梅森大学口音学习网站 - 学习不同的口音 * 英国广播公司播客 * 英国文化协会听力练习 阅读 * 雅思提升阅读 写作 * 雅思提升写作 * 雅思从 6 分到 9 分 * 迷你雅思 口语 * Verbling 提供在线英语家教服务

By Ne0inhk
🚀Zeek.ai一款基于 Electron 和 Vite 打造的跨平台(支持 Windows、macOS 和 Linux) AI 浏览器

🚀Zeek.ai一款基于 Electron 和 Vite 打造的跨平台(支持 Windows、macOS 和 Linux) AI 浏览器

是一款基于 Electron 和 Vite 打造的跨平台(支持 Windows、macOS 和 Linux) AI 浏览器。 集成了 SearXNG AI 搜索、开发工具集合、 市面上最流行的 AI 工具门户,以及代码编写和桌面快捷工具等功能, 通过模块化的 Monorepo 架构,提供轻量级、可扩展且高效的桌面体验, 助力 AI 驱动的日常工作流程。

By Ne0inhk