js按条件生成随机json:randomjson实现方法


Posted in Javascript onApril 07, 2017

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

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

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

3,mock图片特别困难

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

github地址:

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

如何使用

# randomjson

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

## 如何使用

### 安装

   npm install randomjson

### 用法

// 安装

  npm install randomjson

// 用法
  // 引用包
  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

以上这篇js按条件生成随机json:randomjson实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
详解JS中遍历语法的比较
Apr 07 #Javascript
JavaScript原生数组Array常用方法
Apr 06 #Javascript
微信小程序 图片宽度自适应的实现
Apr 06 #Javascript
微信小程序 下拉菜单的实现
Apr 06 #Javascript
微信小程序五星评分效果实现代码
Apr 06 #Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 #Javascript
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
You might like
域名查询代码公布
2006/10/09 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
element form 校验数组每一项实例代码
2019/10/10 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python去除字符串中的换行符
2017/10/11 Python
python实现猜数字小游戏
2020/03/24 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python算法题 链表反转详解
2019/07/02 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
工作中的自我评价如何写好
2013/10/28 职场文书
营业经理岗位职责
2013/11/10 职场文书
认识深刻的检讨书
2014/02/16 职场文书
创先争优活动心得体会
2014/09/04 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python