mock-前端数据模拟

简介

数据模拟不是开发流程中的必要一环

Json-server

简介:

json-server 是一个简单的 Node.js 服务端应用程序,这个工具的主要作用是提供一个模拟的后端服务,可以在前端开发过程中独立于后端进行简单工作。

使用:

1、 安装

Npm install -g json-server

2、 创建json文件
在这里插入图片描述

这个json文件在哪创建都可以,我只是为了方便在我的工程创建了,json文件中可以定义多个路径接口。

3、 启动服务

json-server --watch .\json-server-mock\json-server-mock.json --port 3003

在这里插入图片描述
在这里插入图片描述

如果不加 –port 3003 默认端口是3000

命令太长,可以将命令配置到package.json中。

4、 访问json接口

在这里插入图片描述

在这里插入图片描述

5、 更多操作

可以对数据进行简单的增删改查以及其他操作,详情观看学习地址链接。

优缺点:

优点:零编码;完全脱离我们开发的项目;只需要提供一个json文件,支持简单的增删改查。

缺点:需要手动编写模拟数据

学习:

学习视频:【Web开发必备技能】json-server搭建数据mock服务器,实现数据增删改查_哔哩哔哩_bilibili

GITHUB:typicode/json-server:在不到 30 秒的时间内获得一个完整的假 REST API,零编码(认真) (github.com)

Mock.js

简介:

Mock.js 是一个用于生成随机数据的 JavaScript 库,它可以帮助前端开发者在没有后端数据的情况下模拟 API 响应。通过 Mock.js,开发者可以很容易地生成各种类型的数据,如字符串、数字、布尔值、对象、数组、图片等,并且可以自定义数据生成的规则。

mock.js有两个作用:

1、 产生模拟数据:调用mock接口后直接返回模拟数据。

2、 拦截ajax:拦截请求并返回模拟数据。

安装配置:

1、 安装。

npm install mockjs vite-plugin-mock

如果项目使用TypeScript的话,需要在src下创建一个mockjs.d.ts文件,并且写入内容如下:

在这里插入图片描述

然后在tsconfig.json进行配置

在这里插入图片描述

因为mockjs没有*.d.ts文件,我们再项目引用时会报错

2、 使用1-只模拟数据

在src下创建mock文件夹,然后在此文件夹下创建mock文件

在这里插入图片描述

然后在文件中编写模拟代码

import Mock from 'mockjs'
export const data_1  = Mock.mock({'name|1-5': 'abc', //这行代码表示 属性名为:name ,属性值随机1到5个                            ’abc’字符串拼接在一起///更多数据
}

调用

在这里插入图片描述

启动项目查看结果

在这里插入图片描述

更多模拟数据规则写法详见官方文档:Home · nuysoft/Mock Wiki (github.com) | Mock.js (mockjs.com)

3、 使用2-拦截xhr请求返回模拟数据(需要配置以vite为例)

a) 如果我们需要拦截xhr请求的话需要先进行配置

在这里插入图片描述

更多配置如下:

{
mockPath?: string:可选,指定存放 mock 文件的目录路径。默认通常是 'mock',意味着插件会默认在项目根目录下的 mock 目录中查找 mock 文件。
configPath?: string:可选,指定 mock 服务配置文件的路径。如果你需要将 mock 配置与 Vite 主配置分离,可以使用这个参数指定配置文件的位置。
ignore?: RegExp | ((fileName: string) => boolean):可选,用于指定哪些文件应该被 mock 服务忽略。可以是一个正则表达式,也可以是一个函数,函数接受文件名作为参数,返回 true 表示忽略该文件。
watchFiles?: boolean:可选,指示 mock 服务是否应该监听 mock 文件的变动。如果设置为 true,则在文件变化时,mock 服务会自动更新。这在开发过程中非常有用,默认值通常是 true。
enable?: boolean:可选,指示是否启用 mock 服务。如果设置为 false,则 mock 服务将不会启动。这可以用来在特定环境下控制是否使用 mock 服务,例如只在开发模式下启用。
logger?: boolean:可选,指示是否启用请求和响应的日志记录。如果设置为 true,则 mock 服务会在控制台输出请求和响应的详细信息,便于调试。
cors?: boolean:可选,指示是否启用 CORS(跨源资源共享)。如果设置为 true,则 mock 服务会对请求响应添加 CORS 相关的 HTTP 头,允许跨源请求。
}

b) 正常编写axios的访问api接口代码

在这里插入图片描述

c) 我们在之前的mock/index.ts中开始编写mock

在这里插入图片描述

d) 正常调用接口

在这里插入图片描述

在这里插入图片描述

注意:

1、MOCK.JS仅能拦截XHR的数据请求(或者基于XHR的第三方库,比如axios),无法拦截使用fetch发出的请求(不直接支持fetch)。

2、使用Mock.js导致文件的下载功能异常。问题是由于 mock.js 在拦截请求时覆盖了 responseType 的值,导致预期应该是 blob 类型的响应数据被错误地处理成了 string 类型。这通常发生在 mock.js 拦截了 AJAX 请求并返回模拟数据时。

在开发环境中测试使用下载功能时禁用mock.js

优缺点

优点:支持生成各种类型的数据,并且可以通过拦截 Ajax 请求模拟后端接口返回数据。

缺点:需要学习 Mock.js 的语法规则。

axios-mock-adapter

针对axios-mock-adapter 是一个专门为 axios HTTP 客户端设计的模拟适配器,用于在测试环境中模拟 HTTP 请求和响应,不能模拟数据。

官网:axios-mock-adapter:Axios adapter that allows to easily mock requests - GitCode

在线平台-APIFOX

在这里插入图片描述

B站官方账号学习:apifox-哔哩哔哩_bilibili

APIFOX教程视频-视频长度22分钟:22分钟学会Apifox!2024年的Apifox有什么全新功能?_哔哩哔哩_bilibili

APIFOX-MOCK-视频长度20分钟: Apifox Mock功能全解析!高级 Mock 自定义脚本功能尝鲜!_哔哩哔哩_bilibili

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/859753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

作为一个AI语言模型,我没有个人期待或情感。

更高的准确性和理解能力:未来的模型可能会在理解上下文、推理能力和生成准确回答方面表现得更加出色。 更好的多语言支持:改进后的模型可能会在处理和生成多种语言的文本方面表现得更好,使其在全球范围内的应用更加广泛和有效。 增强的对话…

桌面编辑器ONLYOFFICE 功能多样性快来试试吧!

目录 ONLYOFFICE 桌面编辑器 8.1 ONLYOFFICE介绍 主要功能和特点 使用场景 1.PDF编辑器 2.幻灯片版式 3.编辑,审阅和查看模式 4.隐藏连接到云版块 5.RTL语言支持和本地化选项 6.媒体播放器 7、其他新功能 8.下载 总结 ONLYOFFICE 桌面编辑器 8.1 官网地…

STM32+AppInventor+ESP8266设置AP模式和手机TCP通信

完整程序和APP下载链接:下载链接 1、设置AP模式 ATCWMODE2 2、开启热点供手机连接 ATCWSAP"ESP8266_01","12345678",6,43、设置模块为多连接模式 注:该AT指令每次上电都需要重新配置,否则无法工作 ATCIPMUX1 说明…

mediasoup 源码分析(六)consumer和producer

consumer和producer 一、consumer 类型介绍二、创建过程三、创建Producer时传进来rtpParametertips 一、consumer 类型介绍 mediasoup总共有四种消费者类型,SimpleConsumer、PipeConsumer、SvcConsumer、SimucastConsumer。 consumer的类型是基于producer的类型来创…

[Linux]缓冲区

一、概念 缓冲区,也称为缓存,是内存空间的一部分。也就是说,在内存空间中预留了一定的存储空间,用来缓冲输入或输出的数据。这个保留的空间称为缓冲区。 缓冲区的主要作用就是提高效率: 提高使用者的效率&#xff0…

【杂记-浅谈IS-IS路由协议】

这里写目录标题 一、IS-IS路由协议概述二、IS-IS协议特点三、IS-IS路由器分类四、IS-IS协议应用场景五、IS-IS与OSPF协议的比较 一、IS-IS路由协议概述 IS-IS,Intermediate System-to-Intermediate System,中间系统到中间系统,是一种内部网关…

大家都爱用!不可错过的 AI API 接口

AI API(人工智能应用程序接口)是一种软件中间件,它允许开发者和企业通过编程方式访问和集成人工智能服务到他们自己的应用程序、网站或系统中。AI API通常由专业的AI服务提供商开发和维护,使得用户无需深入了解复杂的AI算法和模型…

操作系统入门 -- 死锁

操作系统入门 – 死锁 1.什么是死锁、死锁产生的条件 1.1 死锁 在两个或多个并发进程中,如果每个进程都持有某种资源,并且正在等待其他进程释放它或进程都保持资源,在当前状态下无法推进。通俗来说就是两个或多个进程进入无限期阻塞、互相…

AI视频改字系统+五端兼容+卡密兑换+内置素材,系统搭建部署

目录 前言: 一、AI视频改字系统是什么 二、AI视频改字系统的功能 三、总结 前言: AI视频改字是利用套模板的原理,对短视频的模板进行更改,从而生成新的短视频。当然这个AI短视频改字系统都是有素材的,不用自己上传…

vim跳转到文件末尾

在 Vim 编辑器中,有几种方法可以跳转到文件的末尾: 使用 G 命令: 在 Vim 的正常模式下(即不是插入模式或可视模式),只需按下大写字母 G。这将立即将光标移动到文件的末尾。 使用 : 命令模式: 在…

在小程序wxml中截取字符串

在微信小程序的WXML中直接进行字符串截取是不被支持的,因为WXML主要负责布局和渲染,不包含数据处理逻辑。 但你可以通过使用微信小程序提供的wxs(WeiXin Script)来实现字符串的截取。 wxs是一种运行在客户端的脚本语言&#xff…

tensorflow2实现多智能体强化学习算法MADDPG

目录 1.MADDPG算法简介2.实验环境搭建3.实验代码3.1 maddpg.py1.导入一些要使用的包以及函数2.MADDPG中单个智能体的结构基类(1)单个智能体的有关参数(2)单个智能体的有关网络的结构actor 的网络结构critic的网络结构 (3)优化器部分(4)MADDPGAgent完整代码 3.MADDPG中单个智能体…

深入解析与解决高并发下的线程池死锁问题

问题背景 在现代互联网应用中,高并发场景是常态,为了高效处理大量用户请求,后端服务通常会采用线程池来管理线程资源。然而,在一个复杂的微服务架构项目中,我们遇到了一个棘手的问题:在业务高峰期&#xf…

WSL安装的Ubuntu与docker desktop集成

WSL安装的Ubuntu与docker desktop集成 最近因为项目需要,要在本地利用WSL搭建一个docker和Ubuntu的部署环境。一开始并不知道docker desktop与Ubuntu可以集成使用,所以在Ubuntu上独立安装了docker引擎,但在安装docker-compose的时候出现以下…

MN316 AT模式丨低功耗实测分析

NB-IoT模组的应用场景一般具备低频次、小数据量、上行为主、工作时间短(激活态时间短)等特点。因此,休眠态的功耗是NB-IoT模组产品综合耗电的重点考量参数之一。中移物联OneMO超低功耗NB-IoT模组MN316,凭借其紧凑的尺寸、极低的休…

天翼云服务器80、443等特殊端口无法访问原因记录

之前阿里云、腾讯云的服务器上,想要用域名访问项目简单配置就好了,这次甲方直接买的翼云的服务器,配置了半天,防火墙端口80、443端口开放了,控制台安全组也添加了,就是不能用域名或IP直接访问,配…

51串口通讯

介绍 串口是一种应用十分广泛的通讯接口,串口成本低、容易使用、通信线路简单,可实现两个设备的互相通信。单片机的串口可以使单片机与单片机、单片机与电脑、单片机与各式各样的模块互相通信,极大的扩展了单片机的应用范围&#xff0…

Java读取指定 JAR 包路径中的 git.properties 文件

Java读取指定 JAR 包路径中的 git.properties 文件 在上述代码中,首先打开 JAR 文件,获取 git.properties 文件的 JarEntry 对象,如果存在该条目,就获取其输入流进行后续的读取和处理。具体的读取和处理逻辑需要根据您的实际需求在…

淘宝item_password接口技术详解

淘宝item_password接口技术详解 一、引言 在电商领域,淘宝作为中国最大的在线购物平台之一,拥有海量的商品信息和用户数据。为了方便用户快速访问和分享商品,淘宝推出了淘口令功能,这是一种加密的链接形式,用户可以在…

在QLineEdit或QPushButton上检测Enter键按下

前言 在开发一个游戏应用时,玩家需要猜测系统随机选择的数字。当玩家输入一个数字并点击“Play”按钮后,应用会根据玩家的猜测给出反馈。然而,频繁地点击按钮显得有些不便。为了提升用户体验,我们希望在玩家按下Enter键时也能触发相同的操作。本文将介绍如何在QLineEdit和…