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);图示"
目录
相关文章
|
JavaScript 前端开发 应用服务中间件
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
这篇文章分析了Vue项目在服务器部署后出现404错误的原因,主要是由于history路由模式下服务器缺少对单页应用的支持,并提供了通过修改nginx配置使用`try_files`指令重定向所有请求到`index.html`的解决方案。
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
Vue2时间轴(Timeline)
本文介绍了一个基于 Vue3 的时间轴组件 `Timeline`,允许用户自定义时间轴宽度和描述文本。通过在 `Timeline.vue` 中使用模板、脚本及样式代码,文章展示了如何创建并使用该组件,并提供了示例代码以供参考。
1175 2
Vue2时间轴(Timeline)
|
编译器 C++
VS Code设置C++编译器路径
VS Code设置C++编译器路径
691 0
|
小程序
微信小程序之weui.wxss不能引用查找的解决方案
微信小程序之weui.wxss不能引用查找的解决方案
344 0
|
设计模式 数据采集 程序员
代码整洁之道--告别码农,做一个有思想的程序员
代码整洁是软件长期稳定和可扩展的基础,本文作者从现实中的代码、重构、设计模式谈论代码整洁之道,总结出如何做一个有思想的程序员。
131671 58
|
前端开发
ElementUI——el-upload上传前校验图片宽高
ElementUI——el-upload上传前校验图片宽高
486 0
|
数据管理 API 调度
阿里云百炼平台知识检索应用评测:搭建之旅与一点建议
阿里云百炼平台成为企业智能化转型的重要工具之一。
|
存储 数据管理 数据库
CRUD操作实战:从理论到代码实现的全面解析
【7月更文挑战第4天】在软件开发领域,CRUD代表了数据管理的四个基本操作:创建(Create)、读取(Read)、更新(Update)和删除(Delete)。这四个操作构成了大多数应用程序数据交互的核心。本文将深入讲解CRUD概念,并通过一个简单的代码示例,展示如何在实际项目中实现这些操作。我们将使用Python语言结合SQLite数据库来演示,因为它们的轻量级特性和易用性非常适合教学目的。
1399 2
|
JavaScript 前端开发 索引
往数组添加对象的方法
往数组添加对象的方法
211 0