从零开始搭建React+TypeScript+webpack开发环境-自定义配置化的模拟服务器

技术栈

我们将使用Node.js和Express.js作为我们的后端框架,以及Node.js的文件系统(fs)模块来操作文件和文件夹。此外,我们将使用Node.js的requiredelete require.cache来加载和更新模拟数据。

项目结构

首先,让我们定义一个简单的项目结构:

- your-project/- mock/- api/- users.json- other/- products.json- server.js

mock文件夹中,我们可以为不同的API接口创建不同的子文件夹,并在每个子文件夹中放置相应的JSON文件,以模拟不同的数据。然后,我们将在server.js文件中创建我们的配置化的模拟服务器。

代码示例

const path = require('path');
const fs = require('fs');
const express = require('express');function watchMockFiles(mockDirectory, mockData) {function watchDirectory(directory) {fs.watch(directory, (eventType, filename) => {if (filename.endsWith('.json')) {const mockPath = path.join(directory, filename);const mockKey = path.relative(mockDirectory, mockPath).replace('.json', '').replace(/\\/g, '/');delete require.cache[require.resolve(mockPath)];const jsonData = require(mockPath);mockData[mockKey] = jsonData;console.log(`Updated mock data for ${mockKey}`);}});fs.readdirSync(directory).forEach((file) => {const fullPath = path.join(directory, file);const stats = fs.statSync(fullPath);if (stats.isDirectory()) {watchDirectory(fullPath);}});}watchDirectory(mockDirectory);
}function readMockFiles(mockDirectory) {const mockData = {};function traverse(directory) {const files = fs.readdirSync(directory);files.forEach((file) => {const fullPath = path.join(directory, file);const stats = fs.statSync(fullPath);if (stats.isDirectory()) {traverse(fullPath);} else if (file.endsWith('.json')) {const mockKey = path.relative(mockDirectory, fullPath).replace('.json', '').replace(/\\/g, '/');const jsonData = require(fullPath);mockData[mockKey] = jsonData;}});}traverse(mockDirectory);return mockData;
}function configureMockDevServer({mockDirectory = path.resolve(__dirname, 'mock'),defaultResponseTime = 2000,
}) {const mockData = readMockFiles(mockDirectory);watchMockFiles(mockDirectory, mockData);const app = express();app.use('/api', (req, res) => {const url = req.originalUrl;const mockKey = url.replace('/api/', '');if (mockData[mockKey]) {const { responseTime = defaultResponseTime, statusCode = 200 } = mockData[mockKey];setTimeout(() => {res.status(statusCode).json(mockData[mockKey].data);}, responseTime);} else {res.status(404).json({ error: 'Mock data not found' });}});const port = 3000;app.listen(port, () => {console.log(`Mock server is running on port ${port}`);});
}configureMockDevServer();

在上面的示例中,我们创建了一个配置化的模拟服务器。它递归遍历mock文件夹和子文件夹,监视JSON文件的更改,支持不同的响应时间和HTTP响应码,并通过Express.js提供API接口。

使用示例

要使用这个配置化的模拟服务器,只需运行server.js文件。它将在端口3000上启动服务器,可以通过访问http://localhost:3000/api/{mockKey}来模拟API请求,其中{mockKey}是JSON文件的相对路径。

例如,要获取users.json文件的数据,可以访问http://localhost:3000/api/users。你还可以为每个API接口配置不同的响应时间和HTTP响应码,以满足你的需求。

结语

创建一个配置化的模拟服务器是一个有用的工具,可以帮助前

端开发人员模拟不同的API请求,并为每个接口配置不同的响应时间和HTTP响应码。这个方案可以提高开发和测试效率,同时提供更多的控制和灵活性。

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

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

相关文章

Modbus封装库(Com,tcp,udp一应俱全)

自行封装在用的Modbus通迅库,集成了com,tcp,udp, 做个笔记吧&#xff0c; 以下头文件&#xff0c; #pragma once #include <functional> #include <vector> #include <string> #include <memory> #ifdef LIBMODBUS_EXPORTS #define LIBMODBUS_EXPORT_…

重磅发布 OpenAI 推出用户自定义版 ChatGPT

文章目录 重磅发布 OpenAI 推出用户自定义版 ChatGPT个人简介 重磅发布 OpenAI 推出用户自定义版 ChatGPT OpenAI 首届开发者大会 (OpenAI DevDay) 于北京时间 11 月 7 日凌晨 02:00 开始&#xff0c;大会上宣布了一系列平台更新。其中一个重要更新是用户可以创建他们自己的自定…

从零开始的C++(十四)

继承&#xff1a; 作用&#xff1a;减少重复代码&#xff0c;简化程序。 用法&#xff1a; class b&#xff1a;public a {//...b中成员 } 在如上代码中&#xff0c;b类以public的方式继承了a类。规定a类是父类、基类&#xff0c;b类是子类、派生类。 关于继承方式&#xf…

Qt::WindowFlags

Qt::WindowFlags 文章目录 Qt::WindowFlags摘要窗口&部件Qt::WindowFlags&WindowType窗口类型窗口提示 关键字&#xff1a; Qt、 Qt::WindowFlags、 Qt::WindowType、 关键字4、 关键字5 摘要 今天在公司解决自己的Bugs的时候&#xff0c;发现一个以前可以用的功…

在Kotlin中设置User-Agent以模拟搜索引擎爬虫

前言 随着双十一电商活动的临近&#xff0c;电商平台成为了狂欢的中心。对于商家和消费者来说&#xff0c;了解市场趋势和竞争对手的信息至关重要。在这个数字时代&#xff0c;爬虫技术成为了获取电商数据的有力工具之一。本文将以亚马逊为例&#xff0c;介绍如何使用Kotlin编…

软件测试面试题【2023最新合集】

收集了各大公司的面试经验&#xff0c;现整理出来&#xff0c;希望能给正在找工作的志同道合的小伙伴一些指引&#xff0c;本文会持续更新的哦。 1、 CPU 和 GPU的区别 一个是通用计算&#xff0c;一个是专用计算。 CPU主要负责操作系统和应用程序&#xff0c;GPU主要负责跟…

针对图像分类的数据增强方法,离线增强,适合分类,无标签增强

针对图像分类的数据增强方法&#xff0c;离线增强&#xff0c;适合分类&#xff0c;无标签增强 代码&#xff1a; 改变路径即可使用 # 本代码主要提供一些针对图像分类的数据增强方法# 1、平移。在图像平面上对图像以一定方式进行平移。 # 2、翻转图像。沿着水平或者垂直方向…

【BUG解决】服务器没报警但是应用接口崩了....

最近遇到一个突发问题&#xff1a;服务器没报警但是应用接口崩了… 为其他业务系统提供一个接口&#xff0c;平时好好的&#xff0c;突然就嚷嚷反馈说访问不了了&#xff0c;吓得我赶紧跳起来&#xff01; 正常情况下在系统崩溃前&#xff0c;我会收到很多系统报警&#xff0…

【AI编程】ai编程插件汇总iFlyCode、codegeex

1、iFlyCode 开发公司&#xff1a;讯飞 支持IDE: VS Code、IntelliJ IDEA、CLion、PyCharm、WebStorm 支持语言: Python、JavaScript、C、Java 下载地址&#xff1a;https://iflycode.xfyun.cn/ iFlyCode 快捷键列表&#xff1a;  Tab 采纳建议  Esc 拒绝建议  Alt\ 主动…

CSDN每日一题学习训练——Java版(对给定的两个日期之间的日期进行遍历、子集 II、填充每个节点的下一个右侧节点指针)

版本说明 当前版本号[20231107]。 版本修改说明20231107初版 目录 文章目录 版本说明目录对给定的两个日期之间的日期进行遍历题目解题思路代码思路参考代码 子集 II题目解题思路代码思路参考代码 填充每个节点的下一个右侧节点指针题目解题思路代码思路参考代码 对给定的两…

Flink架构

1、Apache Flink集群的核心架构&#xff1a; 1、client&#xff08;作业客户端&#xff09;&#xff1a;提交任务的地方叫做客户端 2、JobManager&#xff08;作业管理器&#xff09;&#xff1a;作用是用于管理集群中任务 3、TaskManager&#xff08;任务管理器&#xff09;&a…

WPF布局与控件分类

Refer&#xff1a;WPF从假入门到真的入门 - 知乎 (zhihu.com) Refer&#xff1a;WPF从假入门到真的入门 - 知乎 (zhihu.com) https://www.zhihu.com/column/c_1397867519101755392 https://blog.csdn.net/qq_44034384/article/details/106154954 https://www.cnblogs.com/mq0…

unittest 统计测试执行case总数,成功数量,失败数量,输出至文件,生成一个简易的html报告带饼图

这是一个Python的单元测试框架的示例代码&#xff0c;主要用于执行测试用例并生成测试报告。其中&#xff0c;通过unittest模块创建主测试类MainTestCase&#xff0c;并加载其他文件中的测试用例&#xff0c;统计用例的执行结果并将结果写入文件&#xff0c;最后生成一个简单的…

无人机航迹规划:五种最新智能优化算法(KOA、COA、LSO、GRO、LO)求解无人机路径规划MATLAB

一、五种算法&#xff08;KOA、COA、LSO、GRO、LO&#xff09;简介 1、开普勒优化算法KOA 开普勒优化算法&#xff08;Kepler optimization algorithm&#xff0c;KOA&#xff09;由Mohamed Abdel-Basset等人于2023年提出。五种最新优化算法&#xff08;SWO、ZOA、EVO、KOA、…

【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割10(测试推理篇)

对于直接将裁剪的patch&#xff0c;一个个的放到训练好的模型中进行预测&#xff0c;这部分代码可以直接参考前面的训练部分就行了。其实说白了&#xff0c;就是验证部分。不使用dataloader的方法&#xff0c;也只需要修改少部分代码即可。 但是&#xff0c;这种方法是不end t…

bs4介绍和遍历文档树、搜索文档树、案例:爬美女图片、 bs4其它用法、css选择器

bs4介绍和遍历文档树 BeautifulSoup 是一个可以从HTML或XML文件中提取数据的Python库&#xff0c;解析库 需要安装模块&#xff1a;pip install beautifulsoup4 使用 解析库可以使用 lxml&#xff0c;速度快&#xff08;必须安装&#xff09; 可以使用python内置的 # html…

Intel oneAPI笔记(4)--jupyter官方文档(Unified Shared Memory)学习笔记

前言 本文是对jupyterlab中oneAPI_Essentials/03_Unified_Shared_Memory文档的学习记录&#xff0c;主要包含对统一共享内存的讲解 USM概述 USM (Unified Shared Memory)是SYCL中基于指针的内存管理。对于使用malloc或new来分配数据的C和C程序员来说应该很熟悉。当将现有的C…

关于卷积神经网络的填充(padding)

认识填充 &#xff08;padding&#xff09; 随着卷积层数的加深&#xff0c;输出进一步缩小&#xff0c;那么最终会导致输出很快就只剩下1∗1的数组&#xff0c;这也就没办法继续计算了&#xff0c;所以提出了填充的方法来方便网络的进一步加深。 其实填充的原因有两点&#xf…

MapReduce:大数据处理的范式

一、介绍 在当今的数字时代&#xff0c;生成和收集的数据量正以前所未有的速度增长。这种数据的爆炸式增长催生了大数据领域&#xff0c;传统的数据处理方法往往不足。MapReduce是一个编程模型和相关框架&#xff0c;已成为应对大数据处理挑战的强大解决方案。本文探讨了MapRed…

post给后端传递数组和多个参数

这是前端的数据结构 data() {return {loading: false,inputForm: {id: ${gridProject.id},gridName: ,gridId: ,projectName: ,projectId: ,type: },data: [],value: []}}, 其中 gridId 和 type 是单个参数 , value 是个数组&#xff0c;注意 这里data中的value[]不要直接给后…