zoukankan      html  css  js  c++  java
  • 使用Mock.js生成随机JSON数据

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

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

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

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

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

            6 我们通过console.log()方法将结果输出,此时可看到生成的50条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.οnlοad=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这种框架中,具体的教程可参考如下教程:

    https://github.com/nuysoft/Mock/wiki/Getting-Started

    X北辰北的博客,想看更多内容,请移步我的个人博客:http://www.xbeichenbei.com/
  • 相关阅读:
    数据类型
    python安装
    计算机基础
    Ajax--1
    ASP.net+MVC--2
    More lumber is required
    History Grading
    strcmp() Anyone?
    How Many Points of Intersection?
    Remember the Word
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794631.html
Copyright © 2011-2022 走看看