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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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学习笔记之二
2011/01/17 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
python实现反转部分单向链表
2018/09/27 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
医学生自我鉴定范文
2013/11/08 职场文书
优秀求职信范文分享
2014/01/26 职场文书
就业表自我评价分享
2014/02/06 职场文书
质量安全标语
2014/06/07 职场文书
公司食堂管理制度
2015/08/05 职场文书