前端开发中,在做前后端分离的时候,经常需要手写json数据,有3个问题特别揪心:

1,数据是写死的,不能按一定的条件随机生成长度不一,内容不一的数据

2,写数组的时候,如果有很多条,需要一条一条地写,费时费力

3,mock图片特别困难

randomjson用来根据模型随机生成json,mock json数据的时候特别有用

先来个例子:http://zhoushengfe.com/random/example/randomjson.html

github地址:

https://github.com/finance-sh/randomjson

如何使用

# randomjson

根据条件生成json对应的随机json

## 如何使用

### 安装

npm install randomjson

或者直接引用产出文件:<script src="dist.js"></script>

### 用法

// 用法
   // amd或cmd环境中引用包,浏览器中无需引用
   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生成随机json:randomjson的更多相关文章

  1. 利用纯JS和HTML Canvas生成随机迷宫过程中产生的有趣的事情

    上效果图: #先看生成随机迷宫的代码吧↓ <html> <head> <title>生成随机迷宫v1.0</title> </head> & ...

  2. C#-Newtonsoft.Json生成复杂JSON

    官方文档:https://www.newtonsoft.com/json/help/html/SerializeObject.htm 一种方式就可以生成所有的 JSON Collection -> ...

  3. Web 开发人员必备的随机 JSON 数据生成工具

    在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...

  4. 按条件生成j随机json包:randomjson

    前端开发中,在做前后端分离的时候,经常需要手写json数据,有2个问题特别揪心: 1,数据是写死的,不能按一定的条件随机生成长度不一,内容不一的数据 2,写数组的时候,如果有很多条,需要一条一条地写, ...

  5. RandomUser – 生成随机用户 JSON 数据的 API

    RandomUser 是一个 API,它为您提供了一个或者一批随机生成的用户.这些用户可以在 Web 应用程序原型中用作占位符,将节省您创建自己的占位符信息的时间.您可以使用 AJAX 或其他方法来调 ...

  6. json-server 和mock.js生成大量json数据

    JSON-server和mock.jsmock文件夹下 db.json db.jsjson-sever使用 安装:npm install json-server -g/mock 目录下执行json-s ...

  7. js控制json生成菜单——自制菜单(一)

    此文档解决以下问题: 1.JSON文件的书写方式 2.jQuery.getJSON()的运用 3.jQuery.each()的运用 4.jQuery的DOM 操作方法之一:.append()的运用 5 ...

  8. MOCK.JS 生成随机数据,拦截 Ajax 请求

    mock.js 的用处 前后端分离 :让前端攻城师独立于后端进行开发. 增加单元测试的真实性 :通过随机数据,模拟各种场景. 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响 ...

  9. JSON生成c#类代码小工具

    JSON生成c#类代码小工具 为什么写这么个玩意 最近的项目中需要和一个服务端程序通讯,而通讯的协议是基于流行的json,由于是.net,所以很简单的从公司代码库里找到了Newtonsoft.dll( ...

随机推荐

  1. es6的解构赋值学习(1)

    相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...

  2. webservice基本功能介绍

    WebService, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据WebService规范实施的应用之间, 无论它们所使用的语言. 平台或内 ...

  3. 数据库读写分离Amoeba

    1.理解读写分离的原理 Amoeba(变形虫)项目,该开源框架于2008发布一款Amoeba for mysql软件,该软件致力于mysql的分布式数据库前端代理层,主要的作用是应用服务访问mysql ...

  4. 关于c# 基础运算符的应用

    运算符 分为5种 1 算数预算符 +,-,*,/,分别为加减乘除 ++为加1,--为减1, 前++   后++  的区别 int a = 10, b = a++;            Console ...

  5. keepalived 安装配置

    keepalived介绍 1. keepalived 是lvs 的扩展项目,因此它们之间具备良好的兼容性. 2. 通过对服务器池对象的健康检查,实现对失效机器/服务的故障隔离. 3. 负载均衡器之间的 ...

  6. Maven 搭建SpringMvc+Spring+Mybatis详细记录

    总觉得,看比人写的总是那么好,每次搭建框架时都会找博客,找教程来跟着一步一步走,虽然很快搭建成功了,但是经常情况是我并不知道我干了什么,也不记得具体步骤,到底为什么要这么做,今天我详细记录了一下自己搭 ...

  7. 1081: [SCOI2005]超级格雷码

    1081: [SCOI2005]超级格雷码 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 301  Solved: 159[Submit][Statu ...

  8. 3892: [Usaco2014 Dec]Marathon

    3892: [Usaco2014 Dec]Marathon Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 169  Solved: 100[Submi ...

  9. jquery写日期选择器

    跟上我的脚步,让我们来领略代码的世界! 使用jquery做一个日期时间选择器,最好使用bootstrap弹窗 实现: (1)点击文本框弹出窗口: (2)弹窗里面显示日期时间选择下拉 (3)年份取当前年 ...

  10. 快速上手UIBezierPath

    UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般U ...