黑色网站欣赏,统一企业执照信息管理系统,西安异构国际设计,知名网站都是什么系统做的简介
数据模拟不是开发流程中的必要一环
Json-server
简介#xff1a;
json-server 是一个简单的 Node.js 服务端应用程序#xff0c;这个工具的主要作用是提供一个模拟的后端服务#xff0c;可以在前端开发过程中独立于后端进行简单工作。
使用#xff1a;
1、 安装…简介
数据模拟不是开发流程中的必要一环
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
GITHUBtypicode/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分钟学会Apifox2024年的Apifox有什么全新功能_哔哩哔哩_bilibili
APIFOX-MOCK-视频长度20分钟: Apifox Mock功能全解析高级 Mock 自定义脚本功能尝鲜_哔哩哔哩_bilibili
