mockjs介绍总结

已于 2022-08-31 14:38:54 修改
阅读量925 收藏 4
点赞数
分类专栏： js/jQuery mock 文章标签： 前端 javascript vue.js
于 2020-12-03 15:47:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhkuxia/article/details/110521371
版权

本篇为mockjs的总结介绍，内容来自mock官方

文章目录

安装

官方教程上只给出了npm形式的安装。这种方式之外还有另外几种方式

1. CDN

https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js

用法：

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>

2. 本地js文件

下载
  1. 可以本地新建一个mock.js文件，把https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js或者https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js上的复制到里面。
  2. 也可以去GitHub上面下载https://github.com/nuysoft/Mock/tree/refactoring/dist
引用
<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>

注意路径

3. npm安装

指令

npm install mockjs

语法规范

Mock.js 的语法规范包括两部分：

  1. 数据模板定义规范（Data Template Definition，DTD）
  2. 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：

属性名 和 生成规则 之间用竖线|分隔。
生成规则 是可选的。
生成规则 有 7 种格式：

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
  • 生成规则 的含义需要依赖属性值的类型 才能确定。
  • 属性值 中可以含有 @占位符。
  • 属性值 还指定了最终值的初始值和类型。

生成规则和示例：

1. 属性值是字符串 String

  1. 'name|min-max': string

    通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

  2. 'name|count': string

    通过重复string生成一个字符串，重复次数等于 count。

2. 属性值是数字 Number

  1. 'name|+1': number

    属性值自动加 1，初始值为 number。

  2. 'name|min-max': number

    生成一个大于等于 min、小于等于max的整数，属性值number只是用来确定类型。

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

    生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

Mock.mock({
    'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
})
// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}
3. 属性值是布尔型 Boolean

  1. 'name|1': boolean

    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

  2. 'name|min-max': value

    随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

4. 属性值是对象 Object

  1. 'name|count': object

    从属性值 object 中随机选取 count 个属性。

  2. 'name|min-max': object

    从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array

  1. 'name|1': array

    从属性值array中随机选取 1 个元素，作为最终值。

  2. 'name|+1': array

    从属性值 array 中顺序选取 1 个元素，作为最终值。

  3. 'name|min-max': array

    通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

  4. 'name|count': array

    通过重复属性值 array 生成一个新数组，重复次数为 count。

6. 属性值是函数 Function

  1. 'name': function

    执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性'name'所在的对象。

7. 属性值是正则表达式 RegExp
  1. 'name': regexp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})
// =>
{
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
}

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符 的格式为：

@占位符
@占位符(参数 [, 参数])
注意：

用 @ 来标识其后的字符串是 占位符。
占位符 引用的是 Mock.Random 中的方法。
通过Mock.Random.extend()来扩展自定义占位符。
占位符 也可以引用 数据模板 中的属性。
占位符 会优先引用 数据模板 中的属性。
占位符 支持 相对路径 和 绝对路径。

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

使用

在使用上，有以下几个方法

  1. Mock.mock()
  2. Mock.setup()
  3. Mock.Random
  4. Mock.valid()
  5. Mock.toJSONchema()

Mock.mock( rurl?, rtype?, template|function( options ) )

根据数据模板生成模拟数据。

参数解析

rurl

可选。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。

rtype

可选。

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

template

可选。

表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

function(options)

可选。

表示用于生成响应数据的函数。

options
指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。

用法

Mock.mock( template )

根据数据模板生成模拟数据。

Mock.mock({
    'name': '@cname', // 随机生成中文名称
});
Mock.mock( rurl, template )

记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

Mock.mock('http://asd.asd', {
    'name': '@cname', // 随机生成中文名称
});
Mock.mock( rurl, function( options ) )

记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

Mock.mock('http://asd.asd', (options) => {
    console.log(options); // 接收请求参数
    return {
        'name': '@cname', // 随机生成中文名称
    }
});
Mock.mock( rurl, rtype, template )

记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

Mock.mock('http://asd.asd', 'get', {
    'name': '@cname', // 随机生成中文名称
});
Mock.mock( rurl, rtype, function( options ) )

记录用于生成响应数据的函数。当拦截到匹配rurl和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

Mock.mock('http://asd.asd', 'get', (options) => {
    console.log(options); // 接收请求参数
    return {
        'name': '@cname', // 随机生成中文名称
    }
});

Mock.setup( settings )

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

settings

必选。

配置项集合。

timeout

可选。

指定被拦截的 Ajax 请求的响应时间，单位是毫秒。
值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和600毫秒之间。默认值是'10-100'。

Mock.setup({
    timeout: 400
})
// or
Mock.setup({
    timeout: '200-600'
})

Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据。

Mock.Random 的方法在数据模板中称为『占位符』，书写格式为@占位符(参数 [, 参数])。

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

方法

Mock.Random 提供的完整方法（占位符）如下：

TypeMethod
Basicboolean, natural, integer, float, character, string, range
Datedate, time, datetime, now
Imageimage, dataImage
Colorcolor
Textparagraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Namefirst, last, name, cfirst, clast, cname
Weburl, domain, email, ip, tld
Addressarea, region
Helpercapitalize, upper, lower, pick, shuffle
Miscellaneousguid, id

扩展（自定义方法）

Mock.Random 中的方法与数据模板的 @占位符 一一对应，在需要时还可以为 Mock.Random 扩展方法，然后在数据模板中通过 @扩展方法 引用。例如：

Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
    constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }

Mock.valid( template, data )

校验真实数据data是否与数据模板 template 匹配。

template

必选。

表示数据模板，可以是对象或字符串。例如 { 'list|1-10':[{}] }、'@EMAIL'。

data

必选。

表示真实数据。

var template = {
    name: 'value1'
}
var data = {
    name: 'value2'
}
Mock.valid(template, data)
// =>
[
    {
        "path": [
            "data",
            "name"
        ],
        "type": "value",
        "actual": "value2",
        "expected": "value1",
        "action": "equal to",
        "message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
    }
]

Mock.toJSONSchema( template )

把 Mock.js 风格的数据模板template转换成 JSON Schema。

template

必选。

表示数据模板，可以是对象或字符串。例如 { 'list|1-10':[{}] }、'@EMAIL'。

var template = {
    'key|1-10': '★'
}
Mock.toJSONSchema(template)
// =>
{
    "name": undefined,
    "path": [
        "ROOT"
    ],
    "type": "object",
    "template": {
        "key|1-10": "★"
    },
    "rule": {},
    "properties": [{
        "name": "key",
        "path": [
            "ROOT",
            "key"
        ],
        "type": "string",
        "template": "★",
        "rule": {
            "parameters": ["key|1-10", "key", null, "1-10", null],
            "range": ["1-10", "1", "10"],
            "min": 1,
            "max": 10,
            "count": 3,
            "decimal": undefined,
            "dmin": undefined,
            "dmax": undefined,
            "dcount": undefined
        }
    }]
}

var template = {
    'list|1-10': [{}]
}
Mock.toJSONSchema(template)
// =>
{
    "name": undefined,
    "path": ["ROOT"],
    "type": "object",
    "template": {
        "list|1-10": [{}]
    },
    "rule": {},
    "properties": [{
        "name": "list",
        "path": ["ROOT", "list"],
        "type": "array",
        "template": [{}],
        "rule": {
            "parameters": ["list|1-10", "list", null, "1-10", null],
            "range": ["1-10", "1", "10"],
            "min": 1,
            "max": 10,
            "count": 6,
            "decimal": undefined,
            "dmin": undefined,
            "dmax": undefined,
            "dcount": undefined
        },
        "items": [{
            "name": 0,
            "path": ["data", "list", 0],
            "type": "object",
            "template": {},
            "rule": {},
            "properties": []
        }]
    }]
}
苦夏木禾
关注
专栏目录
第十三节 MockJs的定义、安装及使用
01-11 871
这节主要介绍项目配置mockJs并模拟实现接口。并介绍了Mock相关的方法和常用语法。接下来会介绍如何使用配置axios，用axios请求登录接口并接收到接口返回的数据。拦截ajax请求，生成伪数据应用场景:在没有后端支持的情况下，自己生成数据当然主要是在工作中,后端已经出接口文档,还没有实现数据由前端依照接口文档模拟伪数据,实现前端开发功能Mock的配置完成，很简单吧。没有废话，满满的干货
Mock.random常见用法
weCat_s的博客
02-20 5949
模拟Web数据： 生成随机域名(每次运行结果不同)： var Random = Mock.Random Random.domain() // "nhou.org.cn" 生成随机IP(每次运行结果不同) var Random = Mock.Random Random.ip() // "74.97.41.159" 生成随机URL(每次运行结果不同) Random.url() // ...
mockjs语法规范、设置mockjs拦截响应时间、Mock.Random占位符生成随机数据
zhouzuoluo的博客
08-20 7409
首先回顾vue-cli项目中使用mockjs步骤： 1、安装mockjs、axios（http请求库）； cnpm install mockjs axios --save 2、在项目中新建一个mock.js文件，用于定义接口返回的数据； const Mock = require('mockjs') // 获取mock对象 const Random = Mock.Random //...
mockjs使用
热门推荐
xiaoxiaojie12321的博客
07-31 5万+
1.安装 npm install mockjs --save npm install axios --save 安装axios是为了能模拟后台接口。 2.建立目录结构如下： 3.在main.js引入mockjs 4. mock.js import Mock from 'mockjs' // 引入mockjs const Random = Mock.Random // Mo...
mockjs-生成随机数据
harmsworth的博客
05-12 2万+
mockjs-生成随机数据 mockjs-生成随机数据 概述 环境 引入mock.js文件 mock.js文件-拦截ajax请求，返回数据 使用axios发起http请求 概述 现在，前后端分离趋势很明显，前端负责数据展示、页面动态效果等，而后端负责编写 应用程序接口，供页面、第三方等调用。工作时，常常遇见的问题是：前端已经写好了 页面，一直在等待后端接口的联调，等待也不是办...
mockjs(3)
weixin_45618535的博客
01-22 1068
这篇主要是Mock.random工具类，前段要用的话主要是在模版中的占位符。
vue+mockjs模拟数据实现前后端分离开发的实例代码
01-21
本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，分享给大家，也给自己留个笔记。 在项目中尝试了mockjs，mock数据，实现前后端分离开发。 关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有...
vue-cli4+mockjs的使用
qq_36818931的博客
10-09 2135
文章目录前言一、mockjs是什么？二、使用步骤1.npm安装mockjs2.创建utils文件夹统一存放api3.将api.js挂载到vue原型上4.创建mock文件夹5.在开发环境下添加mockjs的依赖6.在vue文件中使用mockjs总结 前言 如今web开发大部分都采用前后端分离开发模式，那么我们可以使用mockjs来模拟后端数据，独立于后端开发，从而提高开发效率 本demo使用的为vue-cli 4.2.2版本 提示：以下是本篇文章正文内容，下面案例可供参考 一、mockjs是什么？ moc
vue项目中引用mockjs--登陆接口为例
m0_37825704的博客
09-28 1941
在vue项目中，如果后台接口没有开发好，前端可以用mockjs模拟报文发送 一、安装mockjs npm install mockjs 二、先看下目录（红框部分为新建的，下面有介绍） 三、src文件夹下，新建mock文件夹，并在mock下建mock.js文件 四、因为项目中会用到很多模拟接口，这些接口统一用变量引入，放在一个单独的文件统一管理，我们在src文件夹下新建constants文件夹，并在constants文件夹下新建API.js文件 let baseUrl = proc.
mock.js文档详解3及下载(Random中的Date种类函数)
yuey0809的博客
12-08 1039
Mock.Random 是一个工具类，用于生成各种随机数据 var Random = Mock.Random Date 格式化 描述 示例 yyyy 4位数表示的年份 2008 yy 2位数表示的年份(取后两位) 08 y 2位数表示的年份(取后两位) 08 MM 表示月份,补零 03 M 表示月份,不补零 3 dd 表示日期,补零 05 d 表示日期,不补零 5 HH 24小时制时间,补零 02 H 24小时制时间,不补零 2 hh 12小时制.
mock.js文档详解2及下载(Random中的Basic种类函数)
yuey0809的博客
12-08 328
Mock.Random 是一个工具类，用于生成各种随机数据 var Random = Mock.Random Basic /** 1. * @function Random.boolean( min?, max?, current? ) * @param? {number} min=1 最小值 默认值 1 * @param? {number} max=1 最大值 * @param? {boolean} current true 或者 false * @returns {boolean} .
玩转 Mockjs，前端也能跑的很溜
最新发布
2401_84098058的博客
04-18 996
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！
mockjs介绍
顺其自然~专栏
04-02 1282
官网https://github.com/nuysoft/Mock/wiki/Getting-Started 一、为什么使用mockjs 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口。 1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查 2.使用json-server模拟，但不能随机生成所需数据 3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查 二、mock优点 1.前后端分离 2.可随机生成大量的数据 3
Mock工具库Random学习
xun__xing的博客
07-12 2677
Mock工具库一、Basic方法七个二、Date方法四个三、Image方法两个四、Color方法五个五、Text方法八个六、Name方法六个七、Web方法六个八、Address方法五个九、Helper方法五个十、Miscellaneous方法三个十一、占位符 一、Basic方法七个 Random.boolean() /( min, max, current ) 随机一个布尔值 Random.boolean(); Random.boolean(1, 9, true); Random.boolean(1,
vue2中使用Mock.js生成随机数据，拦截 Ajax 请求
丿灬安之若死
12-28 1022
官网：http://mockjs.com/ 安装 yarn add mockjs 新建home.js用于数据处理 // mock数据模拟 import Mock from 'mockjs' // 图表数据 let List = [] export default { getStatisticalData: () => { //Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位 for (let.
vue进阶3 - Mock.js（生成随机数据，模拟Ajax请求）
weixin_34032827的博客
07-26 897
一、安装 1.安装mock、axios npm install mockjs axios 2、安装axios-mock-adapter axios-mock-adapter是axios与mock配置器，是axios的模拟调试器 npm install axios-mock-adapter --save-dev 二、创建mock文件 1....
Mock.js 超全 超详细总结 保姆级别的教程
Mme061300的博客
04-24 3万+
mock.js是一款模拟数据生成器，可以生成随机数据，拦截 Ajax 请求，帮助前端开发工程师提供数据、快速开发
vue mockjs
08-23
Vue Mockjs 是一个用于生成随机数据并拦截 Ajax 请求的插件。它可以帮助前端开发人员在实际开发中模拟后端接口的数据返回，以便更好地进行前端开发和调试。 使用 Vue Mockjs，你可以定义模拟数据的结构和规则，并将其绑定到特定的 URL 上。当前端代码发起 Ajax 请求时，Mockjs 会拦截请求，并根据定义的规则返回模拟数据，从而实现前后端分离的开发方式。 以下是一个简单的示例，展示了如何在 Vue 项目中使用 Mockjs： ```javascript import Mock from 'mockjs' // 使用 Mock.mock() 定义模拟接口 Mock.mock('/api/users', 'get', { 'list|10': [{ 'id|+1': 1, 'name': '@cname', 'age|18-60': 1 }] }) // 在 Vue 组件中发起 Ajax 请求 export default { mounted() { this.$http.get('/api/users').then(response => { // 处理请求返回的模拟数据 console.log(response.data.list) }) } } ``` 在上述示例中，我们使用 Mock.mock() 定义了一个 GET 请求的模拟接口，该接口返回一个包含 10 条用户信息的数组。然后，在 Vue 组件中使用 this.$http.get() 发起了这个模拟接口的请求，并打印了返回的模拟数据。 需要注意的是，为了使用 Vue Mockjs，你需要先安装并引入 Mockjs 插件，并在项目中进行相应的配置。具体的安装和配置方式可以参考 Mockjs 的官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦夏木禾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值