MockJS学习的初识姿势

今天和各位一起学习一下mock,文章中若有出入之处,还望不吝指教…

初识mockjs

1、什么是mockjs?

生成随机数据,拦截 Ajax 请求(moockjs官网)
通过随机数据,模拟各种场景;不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则。

mockjs有那些优点

  • 前后端分离:让前端攻城师独立于后端进行开发。
  • 增加单元测试的真实性:通过随机数据,模拟各种场景。
  • 开发无侵入:不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
  • 用法简单:符合直觉的接口。
  • 数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
  • 方便扩展:支持支持扩展更多数据类型,支持自定义函数和正则。

mockjs的两个种要特性

众所周知Mock.js因为两个重要的特性风靡前端:

  • 数据类型丰富
    支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
  • 拦截 Ajax 请求
    不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。安全又便捷

文章会用到的API(也是Mock经常使用的API):

  • Mock.mock(url, type, data)
参数名 参数需求 参数描述 例子
url 可选: URL 字符串或 URL 正则 拦截请求的地址 /mock
type 可选 拦截Ajax类型 GET、POST
template 可选: 可以是对象或字符串 生成数据的模板 {'data 1-10’:[‘mock’] }、’@EMAIL’

template可能有点难理解,我们试几个例子就一目了然了!

//类型1: 名字|规则: 内容
Mock.mock({'data|1-4': '哑巴'})
//生成1-4个哑巴字符串
{
    data: "哑巴哑巴哑巴"
}
//类型2: Mock自带模板
Mock.mock('@province')
//随机生成一个省份
"上海"
下面就简单的说说mockjs的基本用法

不同情况,使用mockjs的方式也可能不一样

  • 直接使用
    1、 直接在需要Mock数据的js文件使用
    2、 创建一个js/json文件,导入使用
  • 搭配node使用
    1、通过node开启Mock服务, 可加入到package.json命令里
两者区别
  • 直接创建的Mockjs数据, 控制台的NETWORK无法看到.
  • 服务开启的Mockjs数据,控制台可以看得到拦截
  • 对于要上线的项目, 直接创建(导入)Mock数据还会导致一个大的麻烦!当开始调用真正后端接口的时候, 不得不删除创建的数据(即使你统一在一个文件创建,但也要一个个注释掉导入的地方)
  • node服务,就避免了这个问题了。因为你需要用Mock数据的时候,只需要开启它的服务,而不需要导入

两种方式使用如下
node:npm安装:npm install mockjs;
直接使用

你可能感兴趣的:(mock)