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 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
JQuery for与each性能比较分析
May 14 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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 mysql 判断update之后是否更新了的方法
2012/01/10 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
jquery实现数字输入框
2017/02/22 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
python制作websocket服务器实例分享
2016/11/20 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
python队列原理及实现方法示例
2019/11/27 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
Ajax的优点和缺点
2014/11/21 面试题
仓库班组长岗位职责
2013/12/12 职场文书
2015年教师节主持词
2015/07/03 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
Oracle笔记
2021/04/05 Oracle