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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
详解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脚本数据库功能详解(下)
2006/10/09 PHP
php桌面中心(二) 数据库写入
2007/03/11 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
python re模块常见用法例举
2021/03/01 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
运动会稿件100字
2014/02/21 职场文书
应届生找工作求职信
2014/06/24 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
入股协议书范本
2014/11/01 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
python缺失值的解决方法总结
2021/06/09 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL