zoukankan      html  css  js  c++  java
  • js根据条件json生成随机json:randomjson

    前端开发中,在做前后端分离的时候,经常需要手写json数据,有3个问题特别揪心:

    1,数据是写死的,不能按一定的条件随机生成长度不一,内容不一的数据

    2,写数组的时候,如果有很多条,需要一条一条地写,费时费力

    3,mock图片特别困难

    randomjson用来根据模型随机生成json,mock json数据的时候特别有用

    先来个例子:http://zhoushengfe.com/random/example/randomjson.html

    github地址:

    https://github.com/finance-sh/randomjson

    如何使用

     

    # randomjson

    根据条件生成json对应的随机json

    ## 如何使用

    ### 安装

       npm install randomjson

       或者直接引用产出文件:<script src="dist.js"></script>

    ### 用法

    // 用法
        // amd或cmd环境中引用包,浏览器中无需引用
        var randomjson = require('randomjson');
        // 模型
        var modelJson = {
            "code": "00",
            "numberCode": "<@[10000,20000]>",
            "msg": "<@chinese{12,50}>",
            "msg2": "<@string{2,3}>",
            "logo": "<@image{100,100}>",
            "result": {
                "pList<@{1,3}>":[ 
                    {
                        "indexToString": "<@index><@>",
                        "index": "<@index>",
                        "id": "<@[1-5]>", 
                        "price": "<@float>",
                        "name": "公司名称<@index>",
                        "person": "李文武<@index>",
                        "address": "北京市海淀区西三旗",
                        "mobile": "1<@number{10}>",
                        "tel": "<@number{4}>-<@number{8}>",
                        "list": [
                            {
                                "auditKey": 1,
                                "auditValue": "<@[0,1,2]>"
                            }, 
                            {
                                "auditKey": 2,
                                "auditValue": "<@[0,1,2]>"
                            }
                        ]
                    }
                ]
            }
        }
        // 根据模型生成json
        var myJson = randomjson(modelJson);
        
        根据上边模型生成的json可能是这样:
        
        {
            "code": "00",
            "numberCode": 10000,
            "msg": "加义为边平压你治提用根治问求只或程干立农资特",
            "msg2": "dv",
            "logo": "https://dummyimage.com/100x100",
            "result": {
                "pList": [
                    {
                        "indexToString": "1",
                        "index": 1,
                        "id": 2,
                        "price": 93.78,
                        "name": "公司名称1",
                        "person": "李文武1",
                        "address": "北京市海淀区西三旗",
                        "mobile": "17929438781",
                        "tel": "1148-56055642",
                        "list": [
                            {
                                "auditKey": 1,
                                "auditValue": 0
                            },
                            {
                                "auditKey": 2,
                                "auditValue": 1
                            }
                        ]
                    },
                    {
                        "indexToString": "2",
                        "index": 2,
                        "id": 5,
                        "price": 29.49,
                        "name": "公司名称2",
                        "person": "李文武2",
                        "address": "北京市海淀区西三旗",
                        "mobile": "17826945504",
                        "tel": "7298-46226026",
                        "list": [
                            {
                                "auditKey": 1,
                                "auditValue": 0
                            },
                            {
                                "auditKey": 2,
                                "auditValue": 0
                            }
                        ]
                    }
                ]
            }
        }
        



    ## 词法

       以<@开始,以>结束,中间内容是randomjson的词法

    ## 模型定义

    ### 数据类型

       "<@number>": number类型

       "<@string>": string类型

       "<@null>": null

       "<@boolean>": boolean类型

       "<@chinese>": 中文字符串

       "<@float{number1,number2}>": 浮点数 number1代表整数位数,number2代表小数位数,默认都为2
       
    "<@image{width,height}>": 生成图片 width为生成图片宽度,height为生成图片高度,默认为400,400

       "<@index>": 元素在数组中的位置,从1开始

    ### 量词

       {minNumber, maxNumber}: minNumber到maxNumber个

       {minNumber,}: 最少minNumber

       {number}: number个

       如果是float,minNumber, maxNumber表示整数部分和小数部分的位数

       如果是imgae,minNumber, maxNumber表示图片宽度高度
       
    ### 随机生成其中之一

       你可以使用“|” 分离多个选项,随机值是其中之一,值为字符串

    ### 数字范围

       [1,2,3] 表示1,2,3中的一个,值为数字

       [1-90] 表示1到90中的一个int值,值为数字

    ### 数字转字符串

       在number类型后加空的占位符
      
    "indexToString": "<@index><@>"

    ### 量词定义注意点

       值为非数组时,长度在value字符串里,例如:"ret": "<@number{4}>"

       值为数组时,长度在key里,例如:

    "p11<@{2,5}>": [{
                    "p8": "12312",
                    "p9": ["<@string{4,7}>"],
                    "p10": "<@string>"
                }]

    github地址:

    https://github.com/finance-sh/randomjson

  • 相关阅读:
    php反射类 ReflectionClass
    大写中文数字-財务
    Cookie/Session机制具体解释
    具体解释VB中连接access数据库的几种方法
    Hibernate Criterion
    hdu1151 Air Raid,DAG图的最小路径覆盖
    【收藏】十大Webserver漏洞扫描工具
    美国地名大全(美国城市名称英文、中文)
    图像切割之(五)活动轮廓模型之Snake模型简单介绍
    数据库索引的作用和长处缺点
  • 原文地址:https://www.cnblogs.com/mufc-go/p/6679060.html
Copyright © 2011-2022 走看看