mock基本使用

作者: 忘了呼吸的那只猫 | 来源:发表于2022-10-26 17:07 被阅读0次

一、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(1,3)”随机段落2-3行
"pic":@datalmage(200x100);图示"

更多语法示例可以到官网的示例中:http://mockjs.com/examples.html

相关文章

  • mock

    基本使用 Mock.mock('http://123.com', { // name字...

  • mock基本使用

    一、mockjs定义 拦截ajax请求,生成伪数据应用场景:在工作中,后端已经出接口文档,还没有实现代码由前端依照...

  • Mock Server 入门

    Mock Server介绍 什么是mock ? 我在去年的时候介绍一篇幅 python mock的基本使用,htt...

  • 比较 mock、json-server、graphQL

    mock.js 安装 基本使用 现在就可以拦截请求返回 mock 数据了,post 请求'http://a.com...

  • 使用 Mockjs 模拟数据

    Mock 数据 Mock 在 vue 中的使用 使用npm下载mock 2.使用 mock 在 mock 文件夹下...

  • Webpack(十九):webpack4+vue+vuex+mo

    一:mock安装和使用进入项目的根目录下,执行mock安装命令如下: 使用:1. 比如生成列表数据,基本代码(在v...

  • mock单元测试 mockito实践

    1基本的使用步骤 1,环境使用mock和test包 2,使用mockitoRule构造mockito环境 @Rul...

  • 安卓单元测试(九):使用Mockito Annotation快速

    注:如果你还不了解Mock的概念或Mockito框架的使用,请先看这篇文章。 @Mock的基本用法 如果你foll...

  • mock语法

    mock使用方法 Mock.mock( rurl?, rtype?, template|function( opt...

  • Mockito初级学习

    标签:mockito 使用Mockito来Mock对象 有两种方法来mock对象,1)使用静态方法: mock()...

网友评论

    本文标题:mock基本使用

    本文链接:https://www.haomeiwen.com/subject/jqpazrtx.html