mockjs模拟数据（本地版）

下载地址：https://github.com/nuysoft/Mock

官网地址：http://mockjs.com/

引入mockjs

<script src="js/mock.js">script>

常用API：

1.数字类

'name|+1': number

根据数字的值递增

'name|min-max': number

数字取值在设置的最小值和最大值之间

'name|min-max.dmin-dmax': number

小数点左边数字取值在最小值和最大值之间，小数点右边位数在最小值和最大值之间

2.对象类

'name|min-max': object
//例子
Mock.mock({ "object|2-4": { "110000": "北京市", "120000": "天津市", "130000": "河北省", "140000": "山西省" } })

对象的key的长度在最小值和最大值之间

3.数组类

'name|min-max': array
//例子
Mock.mock({
  "array|1-10": [
    "Hello",
    "Mock.js",
    "!"
  ]
})

数组的长度在最小值和最大值之间

4.数据占位符

@Random.datetime( format? )
//例子
@datetime("yyyy-MM-dd A HH:mm:ss")

日期时间，格式可做配置

@image( size?, background?, foreground?, format?, text? )
//例子
@image('200x100', '#50B347', '#FFF', 'Mock.js')

生成图片，参数分别为尺寸，背景色，字体颜色，格式，显示内容

@paragraph( min?, max? ) 
@cparagraph( min?, max? )

段落，有c前缀的为中文，无c则为英文，参数可不要。

@sentence( min?, max? )
@csentence( min?, max? )

句子，用法同上

@title( min?, max? )
@ctitle( min?, max? )

标题，用法同上

更多的API文档详见官网：http://mockjs.com/examples.html

 

mockjs模拟数据demo

//mock模拟数据
var mockData = Mock.mock({
    "showData|20":[
         {
             "id|+1": 1,//递增的id
             "url": "@url",//随机生成的url
             "img": "@image('230x320', '#50B347', '#FFF', '@last')",//生成图片
             "title": "@csentence(5,12)",//中文标题，若需英文，去掉前缀c
             "summary": "@cparagraph",//中文段落，若需英文，去掉前缀c
             "time" : "@datetime('yyyy.MM.dd HH:mm:ss')",//时间，可设置格式
             "detail": "@cparagraph",
             "photo|6-16":[
                 "images/photo/item5/photo01.jpg"
             ],//长度为6-16的数组
             "price|10-500.2": 200,//小数点前数字范围在10-500之内，小数点后位数为2
             "cost|10-800.1-2": 220,//小数点前数字范围在10-800之内，小数点后位数为1-2位
             "regexp": /[a-z][A-Z][0-9]/,//正则表达式
         }
    ]
})
console.log(mockData);
var showData = mockData.showData;

 

效果如图：

 

 

转载于:https://www.cnblogs.com/lw5116/p/7206896.html