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 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
js函数调用常用方法详解
Dec 03 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
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
curl和libcurl的区别简介
2015/07/01 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
联想C++笔试题
2012/06/13 面试题
授权委托书协议书
2014/10/16 职场文书
礼仪培训心得体会
2016/01/22 职场文书
2016年母亲节广告语
2016/01/28 职场文书