3分钟带你了解mock.js

1. mock.js是什么？

mock.js是基于node平台的一款生成随机数据的资源包，使用 npm install mockjs 即可下载到本地node环境中，通过操纵mock指令完成对随机数据的增删改查（crud），是前后端分离（mvvm）过程中前端比较优秀的模拟接口API的工具。

2. mock.js有什么用？

在后端接口（API）尚未完工之前，前端制作“假数据”（或者说模拟数据请求场景，交互）时使用，并在接口API文档拟定之后切换成真实数据组，完成页面的相关交互效果以及对程序性能的相关测试。

3. mock.js的生成原理

1.添加相关接口地址，

2.拦截发送请求以及请求信息，

3.按照模板生成随机数据，

4.返回请求源生成信息

4. 有哪些模板可供使用：

此处列举几条，余下部分可以去官网查看：指路地址

“数据名字”|“数据数量”：【{

“数据名称|+1”:1，

“数据名称”：“@ctitle(5,6)”

}】，

上式中。第一条指令一般用作唯一id使用，即数据名称替换为id，表示根据数据数量生成id以累加的方式，第二条中数据名称是作为key的值，value中@c是指中文状态，@没有c是英文模式，后面的title是指标题段，表示随机生成5-6个符号的标题（加了c就是中文字符，没有加就是英文），同样最上面的“数据数量也可以写成10-15”表示10-15条数据：比如下文：

"namelist|3":[{"nameId|+1":0,"peopleName":"@ctitle(2,3)"
}]console.log('------------------------------------------')"classList|5-8":[{"classId|+1":1,"className":"@ctitle(4,5)","classHour":"@integer(2,3)","classHoster":"@title(6,7)"
}]console.log('--------------------------------------------')//上面@integer表示随机生成整数
//第一段代码随机生成一个对象，3条内容，
//下面一段代码表示随机生成一个对象，5-8条内容，除了id是递增1，其他都是随机生成

以上仅供参考，想要具体内容和API请前往官网查看。

5. 常用拦截用法：

1. 在node环境里下载

2. 在相关js文件里面导入，通常建议在一个文件夹mock里面创建index.js文件，里面引入，

指令是 import Mock from "mockjs"

3.生成一组数据

const data1 = Mock.mock({

"data1|3":【{

"id|+1":1,

"name":"@ctitle(4,6)"

}】

})

4. 拦截相关请求：

Mock.mock('url','get(post)'，（options）=>{

return data1

})

5. 在需要发送请求的页面引入相关文件

import "../........../mock/index.js"（双引号内填你mock设置文件的位置）

6. data1 即返回的假数据，并且请求得到了响应，也不会抛出错误。不过值得注意的是如果页面使用的axios发送请求，axios会把参数进行json封装，mock.js里面需要转换一下格式 JSON.parse(data)

7. 这一步是额外的，前6步足以拿到预设的假数据，如果此时后端接口已经完毕，想要真实数据的话只需在需要发送请求的页面里面，删除或者注释掉 步骤5 里面的 import代码行，停止mock对接口的劫持，就可以发送请求到后端服务器了！

以上便是博主的使用总结，如果感觉此文对你有帮助的话就请点个赞吧！NICE！

3分钟带你了解mock.js相关推荐

十分钟带你了解mock.js
一.初识Mock.js 什么是mock.js mock.js:是一款模拟数据生成器,可以生成随机数据,拦截 Ajax 请求它的官网是mockjs 为什么要使用mock.js 由于很多公司,后端还没有 ...
【网络爬虫教学】一分钟带你快速寻找JS加密入口（二）
Hi,大家好,欢迎大家参阅由IT猫之家精心制作的JS实战系列教学课程,我是作者叮当猫,在上期教学中,我们学习了如何快速分析基于Header授权加密协议,同时我们也初次接触到了钩子(hook)的概念,钩 ...
js一个按钮弹出两个按钮_车内常见按钮，你却一个不认识？一分钟带你认识车内常见按钮...
导读:车内常见按钮,你却一个不认识?一分钟带你认识车内常见按钮各位点开这篇文章的朋友们,想必都是很高的颜值吧,我们真的是很有缘哦,小编每天都会给大家带来不一样的汽车资讯,如果对小编的文章或者其他的什 ...
前端Vue使用封装Mock.js和api请求模拟数据案例(带源码)
目录一:准备阶段二:使用阶段一:准备阶段 1.安装mockjs axios npm install mockjs --save npm install axios --save 2.main.j ...
java编程石头剪刀布图片_石头、剪刀、布！10分钟带你打开深度学习大门，代码已开源...
原标题:石头.剪刀.布!10分钟带你打开深度学习大门,代码已开源沉沉发自宇宙中心量子位出品 | 公众号 QbitAI 深度学习技术的不断普及,越来越多的语言可以用来进行深度学习项目的开发,即 ...
用node.js启动mock.js
Node.js Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP.Python.Perl.Ruby 等服务端语言平起平坐的脚本语言.官网下载n ...
Mock.js mysql_平台支持mock功能—未完成版
项目背景: 目前测试接口有些是依赖第三方接口,若第三方接口出现异常,会对测试进度有所影响.需要开发mock相关功能辅助测试. 技术选型: 1.前端:python+xadmin+django+mysql ...
10分钟带你学会微信小程序的反编译
以xxxxx小程序为例10分钟带你学会微信小程序的反编译 2019-11-28 12:59:26 以一个简单的例子介绍下小程序反编译操作流程实验环境前置准备模拟器内软件安装获取小程序包开始解 ...
三分钟带你看懂prototype原型——ES6进阶
三分钟带你看懂prototype原型--ES6进阶 1. prototype 定义 2. new 构造函数 3. 存储 4. prototype 作用 1. prototype 定义在JS中的类的实 ...

3分钟带你了解mock.js

3分钟带你了解mock.js相关推荐

最新文章

热门文章