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