mock基本使用

简介: 【10月更文挑战第4天】

一、mockjs定义

拦截ajax请求,生成伪数据
应用场景:在工作中,后端已经出接口文档,还没有实现代码
由前端依照接口文档模拟伪数据,实现前端开发功能

二、mockjs安装

npm i mockjs -D

三 、mockjs使用

  • 1定义/mock/index.js
    import Mock from 'mockjs'
    Mock.mock(" /api/feed",{
         json数据})
    
  • 2在main.js导入
    import '../mock/index.js'
    

此时发送ajax请求访问/api/feed就会被mock拦截,获取到json模板对应的虚拟数据,并且在浏览器的network之中看不到发起的请求,如果需要在network中看到发起的请求可以利用devserve拦截请求,仅使用mock生成模拟数据

四、mockjs方法

mock(data)
mock(url,data)
mock(url,type,data)
mock(url,type,function)
data:数据
url:拦截地址(可以是正则)
type:拦截请求类型(post,get,put,delete),默认get请求
function:通过函数返回数据,参数用config 请求的配置

五、mockjs语法

"id":"@id"
"star|1-2":"⭐"  字符串重复1-2次
"price|100-200.2-3”小数点2-3"data | 10"";[{name:"名称")]数组的内容重复10"live | 1":true,随机返回true,false
"tel":/13\d{
   9}/  手机号码
"des":function(){
    return this.start+this.price}
"name":"@cname" 表示中文名称
"address":"@country(true)" 地址
"description":"@cparagraph(13)”随机段落2-3"pic":@datalmage(200x100);图示"
目录
相关文章
|
前端开发
什么是 Mock 测试?掌握 Mock 测试的核心原理
Mock 的意思就是,当你很难拿到源数据时,你可以使用某些手段,去获取到跟源数据相似的假数据,拿着这些假数据,前端可以先行开发,而不需要等待后端给了数据后再开发。
|
XML 前端开发 测试技术
【前端小技巧】如何使用 Eolink Apilkit 调用 Mock ?
在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。 这个时候 Mock 就可以很好的解决这个问题,前端团队可以在 API 还没开发完成的情况下,借助 Mock API 实现预对接,加速开发进程。测试团队可以通过 Mock API 解决不必要的系统,完成集成测试。 Eolink Apikit 为前端工程师提供 API 文档管理,快速接口测试,以及 Mock API 创建与调用,及查看文档变更历史的能力。有助于前端工程师快速查看 API 文档详情与历史记录,快速生成和使用 Mock API 提前进行页面效果验证。
81 0
|
5月前
|
测试技术
详解单元测试问题之处理@Mock注解时mock对象的创建如何解决
详解单元测试问题之处理@Mock注解时mock对象的创建如何解决
49 1
|
6月前
|
XML Java 数据格式
Acitiviti7基本使用- 2、Servcie服务接口介绍
Acitiviti7基本使用- 2、Servcie服务接口介绍
|
7月前
|
JavaScript 前端开发
Mockjs基本使用
Mockjs基本使用
38 0
|
7月前
|
JSON 前端开发 JavaScript
如何使用Mock.js来模拟后端接口
如何使用Mock.js来模拟后端接口
101 0
|
7月前
|
前端开发 Linux Docker
DOClever安装和mock数据基础教程
DOClever安装和mock数据基础教程
134 0
|
前端开发 JavaScript
Mock 语法讲解
Mock 是生成随机数据,拦截 Ajax 请求的 JavaScript 库。 本文来介绍下 Mock 的常用语法。
Mock 语法讲解
|
前端开发 JavaScript 测试技术
前端封装库/工具库的mock数据之Mock.js
在Web应用程序开发过程中,通常需要使用后台API接口来获取数据。然而,在开发初期或者没有后台接口的情况下,我们需要模拟数据来进行开发和测试。为了更好地实现这项任务,前端封装库/工具库的出现成为一个非常好的解决方案。其中一款备受关注的mock数据库是Mock.js。
374 0
|
数据可视化 前端开发 Java
Mock工具介绍,为什么使用Mock?
Mock工具介绍,为什么使用Mock?
626 0