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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
js数组的基本使用总结
Jan 18 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
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
python自动化之Ansible的安装教程
2019/06/13 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
自我反省检讨书
2014/01/23 职场文书
医药营销个人求职信
2014/04/12 职场文书
化工操作工岗位职责
2014/04/29 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
同学聚会邀请函
2015/01/30 职场文书
社会实践单位意见
2015/06/05 职场文书
导游词之长城八达岭
2019/09/24 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android