14.前端数据模拟MockJS.pdfVIP

前端数据模拟MockJS

教学内容

l第一节mockjs介绍

l第二节mockjs基本使用

l第三节数据生成规则

mockjs介绍

nMock.js是一款前端开发中拦截Ajax请求再生成随机数据响应的工具，可以用

来模拟服务器响应.

n优点是非常简单方便,无侵入性,基本覆盖常用的接口数据类型.。

n支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

n安装：npminstallmockjs

基本使用

n在项目中创建mock目录，新建index.js文件

基本使用

n组件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用

Mock.mock(‘url’,data）中设置的data

核心方法

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

nrurl，表示需要拦截的URL，可以是URL字符串或URL正则

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

ntemplate，表示数据模板，可以是对象或字符串

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

n设置延时请求到数据

数据生成规则

nmock的语法规范包含两层规范数据模板（DTD）、数据占位符（DPD）

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

value：

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