收下这份Mock,极速与后端联调,提升效率不止亿点点

发布时间:2024-01-03 19:00

目录

前言

正文

一、Mock 介绍

1、Mock 的原理

2、Mock.mock()

3、Mock 的语法规范

4、Mock.setup()

5、更多方法

二、Mock 使用

1、安装

2、创建

3、使用

三、注意事项

总结


前言

在日常开发过程中,一个必不可少的阶段就是与后端进行联调,通过后端返回的数据,查看页面渲染效果与交互模拟。但是,经常会出现一个尴尬的场景:前端页面开发完了,后端接口还在开发中或是接口文档还在撰写中,这时,前端便只能等后端开发结束才能与之联调。试想一下,如果后端接口过多,且我们需要等所有的接口都开发完才能一起联调,这会造成等待真空期过长,最后会压缩我们联调接口的时间,在短时间内同时联调多个接口,时间压力大,既容易混乱,又容易出bug,整个人心态也受到影响。

那么,有没有什么方式,可以让前端一开发完了立马联调呢?试想一下,只要我们开发完一个页面就立马进行联调然后进行调整,不仅时间充足,还能减少bug的产生,整个人在一个轻松的状态下开发,代码质量也提高了。今天的主角 Mock 就可以帮助我们解决这个窘境。

正文

一、Mock 介绍

1、Mock 的原理

Mock 其实就是 Mock.js,它可以拦截所有的请求并代理到本地模拟数据,模拟请求接口返回数据的这么一个过程,且 network 中没有发出任何的请求,降低频繁发请求给服务器造成的压力。用一句话概括就是:生成随机数据,拦截 Ajax 请求。

2、Mock.mock()

该方法根据数据模板生成模拟数据。

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

rurl

可选。

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

rtype

可选。

表示需要拦截的 Ajax 请求类型。例如 GETPOSTPUTDELETE 等。

template

可选。

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

function(options)

可选。

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

options

指向本次请求的 Ajax 选项集,含有 urltype 和 body 三个属性,参见 XMLHttpRequest 规范。

3、Mock 的语法规范

我们主要从两大块内容了解 Mock,一个是它的使用方式,另一个是它的语法规范。在使用之前,我们有必要了解一下它的语法规范,不要求全都掌握,至少简单的语法要能看懂并能自己实现。切记,磨刀不误砍柴工,当然你也可以直接跳到使用部分,再来参照语法规范。

Mock 的语法规范主要分为:数据模板定义规范、数据占位符定义规范。

(1)数据模板定义规范(Data Template Definition,DTD)

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

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

表现形式:

  • 属性名 和 生成规则 之间用竖线 | 分隔。
  • 生成规则 是可选的。
  • 生成规则 有 7 种格式:
    1. 'name|min-max': value
    2. 'name|count': value
    3. 'name|min-max.dmin-dmax': value
    4. 'name|min-max.dcount': value
    5. 'name|count.dmin-dmax': value
    6. 'name|count.dcount': value
    7. 'name|+step': value
  • 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
  • 属性值 中可以含有 @占位符
  • 属性值 还指定了最终值的初始值和类型。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号