mock-前端数据模拟

news2025/1/19 22:23:29

简介

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

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 头，允许跨源请求。
}