首页 > HTML5资源教程 > mockjs模拟json数据教程

mockjs模拟json数据教程

日期：2018-08-18

来源：程序思维浏览：2450次

什么是mockjs?

在实际开发当中咱们前端工程师调用后端给的接口，那么如果后端没有给接口我们需要模拟json数据，那么就需要使用mockjs。

咱们来看看mockjs如何使用吧？

方法一：cdn引入
<script src="http://mockjs.com/dist/mock.js"></script>
// 使用 Mock
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
$('<pre>').text(JSON.stringify(data, null, 4))
    .appendTo('body')

方法二：Node (CommonJS)
// 安装
npm install mockjs

// 使用
var Mock = require('mockjs');
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
});
console.log(JSON.stringify(data, null, 4))

方法三：RequireJS (AMD)

// 配置 Mock 路径
require.config({
paths:{
    'mock':'http://mockjs.com/dist/mock'
}
})
// 加载 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    });
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

方法四：Sea.js (CMD)

eajs.config({
alias: {
    "mock": "http://mockjs.com/0.1/dist/mock.js"
}
})

// 加载 Mock
seajs.use('mock', function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    });
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

一个简单的例子：

Mock.mock('http://api.com',{
    'name|3':'lijie',
    'age|20-30':25,
})

$.ajax({
    url:'http://api.com',
    dataType:'json',
    success:function(e){
       console.log(e)
    }
})

在这个例子中我们截获地址为http://api.com返回的数据是一个拥有name和age的对象，那么ajax返回的数据就是Mock定义的数据，返回的数据格式如下：

{
     name:'lijielijielijie',
     age:30,
}

下面是模拟后端删除功能的接口实现

复制代码
/*模拟删除数据的方式*/
var arr=[
    {name:'fei',age:20,id:1},
    {name:'liang',age:30,id:2},
    {name:'jun',age:40,id:3},
    {name:'ming',age:50,id:4}
]

Mock.mock('http://www.bai.com','delete',function(options){
    var id = parseInt(options.body.split("=")[1])//获取删除的id
    var index;
    for(var i in arr){
        if(arr[i].id===id){//在数组arr里找到这个id
            index=i
            break;
        }
    }
    arr.splice(index,1)//把这个id对应的对象从数组里删除
    return arr;//返回这个数组,也就是返回处理后的假数据
})
$.ajax({
    url:'http://www.bai.com',
    type:"DELETE",
    data:{
        id:1//假设需要删除id=1的数据
    },
    dataType:'json',
    success:function(e){
        console.log(e)
    }
})

数据模板定义

String

'name|min-max': string

Data Template

Mock.mock({
  "string|1-10": "★"
})

Result

{
  "string": "★★★★★★★"
}

'name|count': string

Data Template

Mock.mock({
  "string|3": "★★★"
})

Result

{
  "string": "★★★★★★★★★"
}

Number

'name|+1': number

Data Template

Mock.mock({
  "number|+1": 202
})

Result

{
  "number": 201
}

'name|min-max': number

Data Template

Mock.mock({
  "number|1-100": 100
})

Result

{
  "number": 65
}

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

Data Template

Mock.mock({
  "number|1-100.1-10": 1
})

Result

{
  "number": 14.8744885618
}

Data Template

Mock.mock({
  "number|123.1-10": 1
})

Result

{
  "number": 123.08933767
}

Data Template

Mock.mock({
  "number|123.3": 1
})

Result

{
  "number": 123.184
}

Data Template

Mock.mock({
  "number|123.10": 1.123
})

Result

{
  "number": 123.1237338535
}

Boolean

'name|1': boolean

Data Template

Mock.mock({
  "boolean|1": true
})

Result

{
  "boolean": true
}

'name|min-max': boolean

Data Template

Mock.mock({
  "boolean|1-2": true
})

Result

{
  "boolean": false
}

Object

'name|count': object

Data Template

Mock.mock({
  "object|2": {
    "310000": "上海市",
    "320000": "江苏省",
    "330000": "浙江省",
    "340000": "安徽省"
  }
})

Result

{
  "object": {
    "320000": "江苏省",
    "330000": "浙江省"
  }
}

'name|min-max': object

Data Template

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

Result

{
  "object": {
    "110000": "北京市",
    "120000": "天津市",
    "140000": "山西省"
  }
}

Array

'name|1': array

Data Template

Mock.mock({
  "array|1": [
    "AMD",
    "CMD",
    "UMD"
  ]
})

Result

{
  "array": "CMD"
}

'name|+1': array

Data Template

Mock.mock({
  "array|+1": [
    "AMD",
    "CMD",
    "UMD"
  ]
})

Result

{
  "array": "AMD"
}

Data Template

Mock.mock({
  "array|1-10": [
    {
      "name|+1": [
        "Hello",
        "Mock.js",
        "!"
      ]
    }
  ]
})

Result

{
  "array": [
    {
      "name": "Hello"
    },
    {
      "name": "Mock.js"
    },
    {
      "name": "!"
    },
    {
      "name": "Hello"
    },
    {
      "name": "Mock.js"
    }
  ]
}

'name|min-max': array

Data Template

Mock.mock({
  "array|1-10": [
    "Mock.js"
  ]
})

Result

{
  "array": [
    "Mock.js",
    "Mock.js",
    "Mock.js",
    "Mock.js",
    "Mock.js",
    "Mock.js",
    "Mock.js",
    "Mock.js",
    "Mock.js"
  ]
}

Data Template

Mock.mock({
  "array|1-10": [
    "Hello",
    "Mock.js",
    "!"
  ]
})

Result

{
  "array": [
    "Hello",
    "Mock.js",
    "!",
    "Hello",
    "Mock.js",
    "!",
    "Hello",
    "Mock.js",
    "!",
    "Hello",
    "Mock.js",
    "!",
    "Hello",
    "Mock.js",
    "!"
  ]
}

'name|count': array

Data Template

Mock.mock({
  "array|3": [
    "Mock.js"
  ]
})

Result

{
  "array": [
    "Mock.js",
    "Mock.js",
    "Mock.js"
  ]
}

Data Template

Mock.mock({
  "array|3": [
    "Hello",
    "Mock.js",
    "!"
  ]
})

Result

{
  "array": [
    "Hello",
    "Mock.js",
    "!",
    "Hello",
    "Mock.js",
    "!",
    "Hello",
    "Mock.js",
    "!"
  ]
}

Function

'name': function

Data Template

Mock.mock({
  'foo': 'Syntax Demo',
  'name': function() {
    return this.foo
  }
})

Result

{
  "foo": "Syntax Demo",
  "name": "Syntax Demo"
}

RegExp

'name': regexp

Data Template

Mock.mock({
  'regexp': /[a-z][A-Z][0-9]/
})

Result

{
  "regexp": "wO4"
}

Data Template

Mock.mock({
  'regexp': /\w\W\s\S\d\D/
})

Result

{
  "regexp": "O*\fk1o"
}

Data Template

Mock.mock({
  'regexp': /\d{5,10}/
})

Result

{
  "regexp": "501834"
}

Data Template

Mock.mock({
  'regexp|3': /\d{5,10}\-/
})

Result

{
  "regexp": "8711446-585144252-4573002-"
}

Data Template

Mock.mock({
  'regexp|1-5': /\d{5,10}\-/
})

Result

{
  "regexp": "397310-4909461157-5241836578-825553554-"
}

Path

Absolute Path

Data Template

Mock.mock({
  "foo": "Hello",
  "nested": {
    "a": {
      "b": {
        "c": "Mock.js"
      }
    }
  },
  "absolutePath": "@/foo @/nested/a/b/c"
})

Result

{
  "foo": "Hello",
  "nested": {
    "a": {
      "b": {
        "c": "Mock.js"
      }
    }
  },
  "absolutePath": "Hello Mock.js"
}

Relative Path

Data Template

Mock.mock({
  "foo": "Hello",
  "nested": {
    "a": {
      "b": {
        "c": "Mock.js"
      }
    }
  },
  "relativePath": {
    "a": {
      "b": {
        "c": "@../../../foo @../../../nested/a/b/c"
      }
    }
  }
})

Result

{
  "foo": "Hello",
  "nested": {
    "a": {
      "b": {
        "c": "Mock.js"
      }
    }
  },
  "relativePath": {
    "a": {
      "b": {
        "c": "Hello Mock.js"
      }
    }
  }
}

数据占位符定义

Basic

Random.boolean( min?, max?, current? )

Data Template

// Random.boolean()
Random.boolean()
Mock.mock('@boolean')
Mock.mock('@boolean()')

// Random.boolean( min, max, current )
Random.boolean(1, 9, true)
Mock.mock('@boolean(1, 9, true)')

Result

// Random.boolean()
false
false
false

// Random.boolean( min, max, current )
false
false

Random.natural( min?, max? )

Data Template

// Random.natural()
Random.natural()
Mock.mock('@natural')
Mock.mock('@natural()')

// Random.natural( min )
Random.natural(10000)
Mock.mock('@natural(10000)')

// Random.natural( min, max )
Random.natural(60, 100)
Mock.mock('@natural(60, 100)')

Result

// Random.natural()
6010418346056632
1466613068054564
3094713260345242

// Random.natural( min )
8348304828937672
3782481232428913

// Random.natural( min, max )
83
70

Random.integer( min?, max? )

Data Template

// Random.integer()
Random.integer()
Mock.mock('@integer')
Mock.mock('@integer()')

// Random.integer( min )
Random.integer(10000)
Mock.mock('@integer(10000)')

// Random.integer( min, max )
Random.integer(60, 100)
Mock.mock('@integer(60, 100)')

Result

// Random.integer()
7448319907060264
4826160517160192
8650941147446960

// Random.integer( min )
5816803674038688
3596041628411266

// Random.integer( min, max )
68
87

Random.float( min?, max?, dmin?, dmax? )

Data Template

// Random.float()
Random.float()
Mock.mock('@float')
Mock.mock('@float()')

// Random.float( min )
Random.float(0)
Mock.mock('@float(0)')

// Random.float( min, max )
Random.float(60, 100)
Mock.mock('@float(60, 100)')

// Random.float( min, max, dmin )
Random.float(60, 100, 3)
Mock.mock('@float(60, 100, 3)')

// Random.float( min, max, dmin, dmax )
Random.float(60, 100, 3, 5)
Mock.mock('@float(60, 100, 3, 5)')

Result

// Random.float()
-2416891478753028.5
363009417447716.9
-469371688041340.6

// Random.float( min )
192658407565358.6
689065699019025

// Random.float( min, max )
73.6843131
76.23

// Random.float( min, max, dmin )
97.2203548833
76.6774627

// Random.float( min, max, dmin, dmax )
73.7622
71.06655

Random.character( pool? )

Data Template

// Random.character()
Random.character()
Mock.mock('@character')
Mock.mock('@character()')

// Random.character( 'lower/upper/number/symbol' )
Random.character('lower')
Random.character('upper')
Random.character('number')
Random.character('symbol')

Mock.mock('@character("lower")')
Mock.mock('@character("upper")')
Mock.mock('@character("number")')
Mock.mock('@character("symbol")')

// Random.character( pool )
Random.character('aeiou')
Mock.mock('@character("aeiou")')

Result

// Random.character()
"&"
"E"
"d"

// Random.character( 'lower/upper/number/symbol' )
"t"
"X"
"2"
"&"

"x"
"N"
"5"
"^"

// Random.character( pool )
"e"
"e"

Random.string( pool?, min?, max? )

Data Template

// Random.string()
Random.string()
Mock.mock('@string')
Mock.mock('@string()')

// Random.string( length )
Random.string(5)
Mock.mock('@string(5)')

// Random.string( pool, length )
Random.string('lower', 5)
Random.string('upper', 5)
Random.string('number', 5)
Random.string('symbol', 5)
Random.string('aeiou', 5)

Mock.mock('@string("lower", 5)')
Mock.mock('@string("upper", 5)')
Mock.mock('@string("number", 5)')
Mock.mock('@string("symbol", 5)')
Mock.mock('@string("aeiou", 5)')

// Random.string( min, max )
Random.string(7, 10)
Mock.mock('@string(7, 10)')

// Random.string( pool, min, max )
Random.string('lower', 1, 3)
Random.string('upper', 1, 3)
Random.string('number', 1, 3)
Random.string('symbol', 1, 3)
Random.string('aeiou', 1, 3)

Mock.mock('@string("lower", 1, 3)')
Mock.mock('@string("upper", 1, 3)')
Mock.mock('@string("number", 1, 3)')
Mock.mock('@string("symbol", 1, 3)')
Mock.mock('@string("aeiou", 1, 3)')

Result

// Random.string()
"zOgU"
"B4GOjs"
"Mu7hM"

// Random.string( length )
"fJgst"
"y&]#Y"

// Random.string( pool, length )
"owjxe"
"IHJIY"
"33516"
"%[@&%"
"iaeei"

"tkdio"
"FLWER"
"96718"
"&@@%#"
"eeooe"

// Random.string( min, max )
"Rb#IQQtq"
"QureoW^wg"

// Random.string( pool, min, max )
"qr"
"CE"
"50"
"!["
"o"

"hqg"
"LE"
"9"
"**"
"ee"

Random.range(start?, stop, step?)

Data Template

// Random.range( stop )
Random.range(10)
Mock.mock('@range(10)')

// Random.range( start, stop )
Random.range(3, 7)
Mock.mock('@range(3, 7)')

// Random.range( start, stop, step )
Random.range(1, 10, 2)
Random.range(1, 10, 3)

Mock.mock('@range(1, 10, 2)')
Mock.mock('@range(1, 10, 3)')

Result

// Random.range( stop )
[0,1,2,3,4,5,6,7,8,9]
[0,1,2,3,4,5,6,7,8,9]

// Random.range( start, stop )
[3,4,5,6]
[3,4,5,6]

// Random.range( start, stop, step )
[1,3,5,7,9]
[1,4,7]

[1,3,5,7,9]
[1,4,7]

Date

Random.date( format? )

Data Template

// Random.date()
Random.date()
Mock.mock('@date')
Mock.mock('@date()')

// Random.date( format )
Random.date('yyyy-MM-dd')
Random.date('yy-MM-dd')
Random.date('y-MM-dd')
Random.date('y-M-d')

Mock.mock('@date("yyyy-MM-dd")')
Mock.mock('@date("yy-MM-dd")')
Mock.mock('@date("y-MM-dd")')
Mock.mock('@date("y-M-d")')

Mock.mock('@date("yyyy yy y MM M dd d")')

Result

// Random.date()
"2012-07-13"
"1983-01-02"
"1998-05-05"

// Random.date( format )
"2000-08-17"
"06-10-23"
"92-01-23"
"90-1-23"

"1983-09-15"
"93-07-05"
"98-03-06"
"76-3-27"

"1997 97 97 02 2 22 22"

Random.time( format? )

Data Template

// Random.time()
Random.time()
Mock.mock('@time')
Mock.mock('@time()')

// Random.time( format )
Random.time('A HH:mm:ss')
Random.time('a HH:mm:ss')
Random.time('HH:mm:ss')
Random.time('H:m:s')

Mock.mock('@time("A HH:mm:ss")')
Mock.mock('@time("a HH:mm:ss")')
Mock.mock('@time("HH:mm:ss")')
Mock.mock('@time("H:m:s")')

Mock.mock('@datetime("HH H hh h mm m ss s SS S A a T")')

Result

// Random.time()
"02:45:48"
"16:56:03"
"20:09:40"

// Random.time( format )
"PM 21:03:33"
"am 09:30:00"
"07:01:07"
"14:58:31"

"PM 12:38:19"
"am 00:59:44"
"12:25:28"
"18:33:38"

"03 3 03 3 34 34 51 51 974 974 AM am 824844891974"

Random.datetime( format? )

Data Template

// Random.datetime()
Random.datetime()
Mock.mock('@datetime')
Mock.mock('@datetime()')

// Random.datetime( format )
Random.datetime('yyyy-MM-dd A HH:mm:ss')
Random.datetime('yy-MM-dd a HH:mm:ss')
Random.datetime('y-MM-dd HH:mm:ss')
Random.datetime('y-M-d H:m:s')

Mock.mock('@datetime("yyyy-MM-dd A HH:mm:ss")')
Mock.mock('@datetime("yy-MM-dd a HH:mm:ss")')
Mock.mock('@datetime("y-MM-dd HH:mm:ss")')
Mock.mock('@datetime("y-M-d H:m:s")')

Mock.mock('@datetime("yyyy yy y MM M dd d HH H hh h mm m ss s SS S A a T")')

Result

// Random.datetime()
"2003-04-27 03:44:00"
"1978-12-04 14:45:51"
"2017-10-17 13:01:06"

// Random.datetime( format )
"1998-07-21 AM 04:11:28"
"04-10-17 pm 15:23:58"
"79-07-09 05:03:06"
"99-7-6 22:1:5"

"1979-12-08 PM 13:22:52"
"74-09-16 pm 15:26:50"
"05-02-21 15:07:20"
"77-2-8 8:1:51"

"2005 05 05 05 5 19 19 00 0 00 0 07 7 27 27 363 363 AM am 1116432447363"

Random.now( unit?, format? )

Data Template

// Ranndom.now()
Random.now()
Mock.mock('@now')
Mock.mock('@now()')

// Ranndom.now( unit )
Random.now('year')
Random.now('month')
Random.now('week')
Random.now('day')
Random.now('hour')
Random.now('minute')
Random.now('second')

// Ranndom.now( format )
Random.now('yyyy-MM-dd HH:mm:ss SS')

// Ranndom.now( unit, format )
Random.now('day', 'yyyy-MM-dd HH:mm:ss SS')

Result

// Ranndom.now()
"2018-08-18 17:34:39"
"2018-08-18 17:34:39"
"2018-08-18 17:34:39"

// Ranndom.now( unit )
"2018-01-01 00:00:00"
"2018-08-01 00:00:00"
"2018-08-12 00:00:00"
"2018-08-18 00:00:00"
"2018-08-18 17:00:00"
"2018-08-18 17:34:00"
"2018-08-18 17:34:39"

// Ranndom.now( format )
"2018-08-18 17:34:39 114"

// Ranndom.now( unit, format )
"2018-08-18 00:00:00 000"

Image

Random.image( size?, background?, foreground?, format?, text? )

Data Template

// Random.image()
Random.image()
// Random.image( size )
Random.image('200x100')
// Random.image( size, background )
Random.image('200x100', '#FF6600')
// Random.image( size, background, text )
Random.image('200x100', '#4A7BF7', 'Hello')
// Random.image( size, background, foreground, text )
Random.image('200x100', '#50B347', '#FFF', 'Mock.js')
// Random.image( size, background, foreground, format, text )
Random.image('200x100', '#894FC4', '#FFF', 'png', '!')

Result

Random.dataImage( size?, text? )

Data Template

// Random.dataImage()
Random.dataImage()

// Random.dataImage( size )
Random.dataImage('200x100')

// Random.dataImage( size, text )
Random.dataImage('200x100', 'Hello Mock.js!')

上一篇：React服务端渲染SSR超详细教程
下一篇：React解决白屏问题

精品好课

jQuery视频教程从入门到精通

jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......

Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程

2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...

HTML5视频播放器video开发教程

适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...

HTML5基础入门视频教程易学必会

HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...

最新完整React+VUE视频教程从入门到精，企业级实战项目

React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...

最新完整React视频教程从入门到精通纯干货纯实战

React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...

VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)

VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...

React实战视频教程仿京东移动端电商

React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。