当前位置：首页 > news >正文

一个前端，如何同时联调多个后端

news 来源：原创 2025/9/18 21:46:47

文章目录

场景
解决方案
- 思路
- 实现步骤
- - 创建项目
  - 目标
  - 前端配置
  - - 安装`cross-env`
    - 配置`vue.config.js`
    - 配置package.json
- 测试

场景

1. 一个前端，需要同时和N个后端联调
1. 一个需求里有若干个模块，分别给不同的后端开发，前端需要和N个后端联调
1. 本地开启一个端口给测试，然后你需要去做其他的需求，但是其他的需求需要连接另一个后端接口
1. 其他情况，总之：1个前端 VS N个后端

上述场景，都是一个前端，联调N个后端的场景，你可能没遇到过，但是确实存在上述的场景。尤其是第三种最为常见，你会一直等测试完了、再去换一个后端代理地址接着开发吗？当然不能，这样做很浪费时间，说明你不是一个合格的牛马，牛马的觉悟不够，牛马是不会让自己闲着的。

那么，怎么办呢？和A联调时proxy指向url-A，和B联调时proxy指向url-B……换其他人联调时，你是把本地项目关掉，然后换个proxy代理、再重启一下吗？

当然可以，如果你不嫌麻烦的话！那么有没有好办法呢？

这个问题问得好，当然有了！

解决方案

本例以vue2的vue-cli方式【webpack】为例

思路

既然vue.config.js能代理一个proxy，那么能不能代理多个proxy呢？当然能！

本文先讲解传统模式的代理，以后写一个函数式代理
vite有更好的代理方式，暂且不表

实现步骤

创建项目

创建一个空的vue2项目

vue create project-name

默认情况下，npm run serve会启动8080端口

目标

我希望不同的端口，指向不同的后端代理proxy地址，如：

8100端口，代理后端7001端口
8105端口，代理后端7002端口

没毛病吧？本文以代理2个后端为例，其余的大家自行补充

前端配置

安装`cross-env`

yarn add cross-env

cross-env是nodejs设置环境变量的工具，它解决了不同操作系统之间环境变量设置语法不一致的问题，具体可自行搜索

配置`vue.config.js`

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,// webpack-dev-server 相关配置devServer: {host: '0.0.0.0',port: process.env.PORT || 8100,open: false,proxy: {'/api': {target: getProxyTarget(process.env.PORT),changeOrigin: true,pathRewrite: { '^/api': '' }}},},
})function getProxyTarget(port) {switch (port) {case '8100':return 'http://127.0.0.1:7001'case '8105':return 'http://127.0.0.1:7002'default:return 'http://127.0.0.1:7001' // 默认代理地址}
}

上述代码，默认设置启动端口为8100，并且getProxyTarget函数可以根据不同的端口，指向不同的代理地址。

配置package.json

{"name": "more-proxy","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","serve:8005": "cross-env PORT=8105 vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"cross-env": "^7.0.3","vue": "^2.6.14"},"devDependencies": {"@vue/cli-service": "~5.0.0","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"]
}

上述代码，重点是serve:8005这行，就是你要代理哪个端口，这里需要你在vue.config.js写对应的映照proxy

测试

上述配置已经实现了我们的需求，那么，具体测试一下吧。

本地启动两个nodejs服务，分别为7001和7002端口，内容如下

/// 7001端口
const http = require('http');const hostname = '127.0.0.1';
const port = 7001;const server = http.createServer((req, res) => {res.statusCode = 200;res.setHeader('Content-Type', 'text/plain');res.end('my port is 7001!');
});server.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);
});

/// 7002端口
const http = require('http');const hostname = '127.0.0.1';
const port = 7002;const server = http.createServer((req, res) => {res.statusCode = 200;res.setHeader('Content-Type', 'text/plain');res.end('my port is 7002!');
});server.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);
});

然后前端把上面的2个端口启动，写一个测试函数

mounted() {fetch('/api').then(() => {})
}

效果如下：
8100已经成功代理7001了
在这里插入图片描述
同样的，8105也代理了7002

其余的vue3，react，也可以用类似的思路

如果感兴趣，可以点一下关注，后续会出函数式1前端 VS N后端，更加优雅

如果有其他更好的方案，可以评论留言。

一个前端，如何同时联调多个后端

文章目录场景解决方案思路实现步骤创建项目目标前端配置安装cross-env配置vue.config.js配置package.json 测试场景一个前端，需要同时和N个后端联调一个需求里有若干个模块，分别给不同的后端开发，前端需要和N个后端联调本地开启一个端…...

编程日记 2025/9/18 21:46:47

Scrapy：DownloaderAwarePriorityQueue队列设计详解

DownloaderAwarePriorityQueue 学习笔记 1. 简介 DownloaderAwarePriorityQueue 是 Scrapy 中一个高级的优先级队列实现，它不仅考虑请求的优先级，还会考虑下载器的负载情况。这个队列为每个域名（slot）维护独立的优先级队列&#…...

编程日记 2025/9/19 21:29:16

GoFound 与 MySQL 集成优化方案

GoFound 与 MySQL 集成优化方案 1. 明确需求文章信息存储在 MySQL 数据库中。使用 GoFound 实现全文搜索功能。搜索时，先从 GoFound 中获取匹配的文章 ID，然后从 MySQL 中查询完整的文章信息。 2. 优化思路数据同步：将 MySQL 中的文章数…...

编程日记 2025/9/18 23:00:15

需求: 打开相机并显示在UI上效果: 注意： 电脑可能有多个摄像头，注意名称代码: using System; using System.Linq; using UnityEngine; using UnityEngine.UI; using System.Collections.Generic; #if UNITY_EDITOR using UnityEditor; #endifname…...

编程日记 2025/9/19 16:58:20

PostgreSQL的学习心得和知识总结（一百六十九）|深入理解PostgreSQL数据库之 Group By 键值消除的使用和实现

目录结构注：提前言明本文借鉴了以下博主、书籍或网站的内容，其列表如下： 1、参考书籍：《PostgreSQL数据库内核分析》 2、参考书籍：《数据库事务处理的艺术：事务管理与并发控制》 3、PostgreSQL数据库仓库…...

编程日记 2025/9/19 10:11:01

Word中接入大模型教程

前言为什么要在word中接入大模型呢？ 个人觉得最大的意义就是不用来回切换与复制粘贴了吧。今天分享一下昨天实践的在word中接入大模型的教程。在word中接入大模型最简单的方式就是使用vba。 vba代码要做的事，拆分一下就是： 获取用户…...

编程日记 2025/9/17 8:00:07

Vue前端开发-Vant介绍，安装部署

Vant 是有赞前端团队开源的移动端组件库，适用于手机端的页面，它体积轻量，Vant组件的平均体积仅有8.8KB，压缩后只有1KB;除体积轻量外，可定制又是它的另外一个特点，它不仅提供基础的UI组件，还提供…...

编程日记 2025/9/19 21:01:24

Linux中线程创建，线程退出，线程接合

线程的简单了解之前我们了解过 task_struct 是用于描述进程的核心数据结构。它包含了一个进程的所有重要信息，并且在进程的生命周期内保持更新。我们想要获取进程相关信息往往从这里得到。在Linux中，线程的实现方式与进程类似，每个线程都…...

编程日记 2025/9/18 15:50:42

教学资料档案管理系统

本系统构建 JAVA 体系的后端系统，围绕以安全，可靠，高速，健壮，易于扩展为目标的方向进行开发，在阿里等开源库的基础上实现提供教学资料档案的管理系统的后端接口的微服务架构系统。功能包含：系…...

编程日记 2025/9/18 23:22:08

《Stable Diffusion绘画完全指南：从入门到精通的Prompt设计艺术》-配套代码示例

第一章：模型加载与基础生成 1.1 基础模型加载 from diffusers import StableDiffusionPipeline import torch# 加载SD 1.5基础模型（FP32精度） pipe StableDiffusionPipeline.from_pretrained("runwayml/stable-diffusion-v1-5",…...

编程日记 2025/9/16 9:30:33

代码随想录算法【Day50】

Day50 图的基础知识图的种类：有向图，无向图，带权值的图度有多少条边连接这个节点就是几度出度：从该节点指到别的节点的边入度：与“出度”相反连通性一般在无向图中研究连通图：任何一个节点都…...

编程日记 2025/9/19 10:02:22

禁止WPS强制打开PDF文件

原文网址：禁止WPS强制打开PDF文件_IT利刃出鞘的博客-CSDN博客简介本文介绍如何避免WPS强制打开PDF文件。方法 1.删除注册表里.pdf的WPS绑定 WinR，输入：regedit，回车。找到：HKEY_CLASSES_ROOT\.pdf删除KWPS.PDF…...

编程日记 2025/9/19 9:22:08

DeepSeek R1生成图片总结2（虽然本身是不能直接生成图片，但是可以想办法利用别的工具一起实现）

DeepSeek官网目前阶段，DeepSeek R1是不能直接生成图片的，但可以通过优化文本后转换为SVG或HTML代码，再保存为图片。另外，Janus-Pro是DeepSeek的多模态模型，支持文生图，但需要本地部署或者使用第三方工具。…...

编程日记 2025/9/19 8:31:21

深入解析NoSQL数据库：从文档存储到图数据库的全场景实践

title: 深入解析NoSQL数据库：从文档存储到图数据库的全场景实践 date: 2025/2/19 updated: 2025/2/19 author: cmdragon excerpt: 通过电商、社交网络、物联网等12个行业场景，结合MongoDB聚合管道、Redis Stream实时处理、Cassandra SSTable存储引擎、Neo4j路径遍历算法等42…...

编程日记 2025/9/17 7:59:49

大模型WebUI：Gradio全解11——使用transformers.agents构建Gradio UI（3）

大模型WebUI：Gradio全解11——使用transformers.agents构建Gradio UI（3） 前言本篇摘要11. 使用transformers.agents构建Gradio UI11.3 创建和使用工具Tools11.3.1 默认工具箱与load_tool11.3.2 创建新工具11.3.3 管理代理的工具箱toolbox11.3…...

编程日记 2025/9/19 13:10:43

Mybatis-Plus的使用

1. MyBatis-Plus介绍 MyBatis-Plus(简称 MP)是⼀个MyBatis的增强⼯具,在MyBatis的基础上只做增强不做改变,为简化开发.提⾼效率⽽⽣特性: • 润物⽆声:只做增强不做改变，引⼊它不会对现有⼯程产⽣影响，如丝般顺滑. • 效率⾄上:只需简单配置&#…...

编程日记 2025/9/19 20:04:42

基于YOLO11深度学习的心脏超声图像间隔壁检测分割与分析系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标分割、人工智能

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/9/19 18:19:25

什么是神经网络？

0 前言神经网络是一种人工智能方法，用于教计算机以受人脑启发的方式处理数据。这是一种机器学习过程，称为深度学习，它使用类似于人脑的分层结构中的互连节点或神经元。它可以创建自适应系统，计算机使用该系统来从错误中进行学习…...

编程日记 2025/9/19 18:26:52

【第12章：深度学习与伦理、隐私—12.1 AI伦理原则与偏见检测的方法与实践】

凌晨三点，某法院的AI量刑系统突然将一桩盗窃案的刑期预测从6个月改为3年——只因被告人的居住地邮编关联到某个少数族裔聚居区。这场静默的算法叛乱，揭开了AI伦理问题的冰山一角。一、AI伦理的五大天条 1.1 公平性原则：算法没有"完美中立" ![不同算法在COMPAS…...

编程日记 2025/9/19 21:30:06

运用先进的智能算法和优化模型，进行科学合理调度的智慧园区开源了

智慧园区场景视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约95%的开发成本。充分利用现有…...

编程日记 2025/9/16 13:40:11

Redis过期机制

const (cacheDuration 24 * time.Hour )func SetToCache(rdb *redis.Client, key string, data []byte) error {return rdb.Set(rdb.Context(), key, data, cacheDuration).Err() }以上函数中的rdb.Set(rdb.Context(), key, data, cacheDuration).Err()中的 cacheDuration一旦…...

编程日记 2025/9/17 15:38:59

Android ListPreference使用

Android ListPreference使用参考添加链接描述导入 androidx.preference.ListPreferenceListPreference是Android中的一个Preference子类，用于显示一个可选择的列表，并且可以保存用户所选择的值。它继承自DialogPreference，可以在用户点击时弹出一个对话框，显示可选择的…...

编程日记 2025/9/19 18:03:51

10分钟上手DeepSeek开发：SpringBoot + Vue2快速构建AI对话系统

作者：后端小肥肠目录 1. 前言为什么选择DeepSeek？ 本文技术栈 2. 环境准备 2.1. 后端项目初始化 2.2. 前端项目初始化 3. 后端服务开发 3.1. 配置文件 3.2. 核心服务实现 4. 前端服务开发 4.1. 聊天组件ChatWindow.vue开发 5. 效果展示及源…...

编程日记 2025/9/18 2:02:27

瑞芯微RV1126部署YOLOv8全流程：环境搭建、pt-onnx-rknn模型转换、C++推理代码、错误解决、优化、交叉编译第三方库

目录 1 环境搭建 2 交叉编译opencv 3 模型训练 4 模型转换 4.1 pt模型转onnx模型 4.2 onnx模型转rknn模型 4.2.1 安装rknn-toolkit 4.2.2 onn转成rknn模型 5 升级npu驱动 6 C++推理源码demo 6.1 原版demo 6.2 增加opencv读取图片的代码 7 交叉编译x264 ffmepg和op…...

编程日记 2025/9/19 2:06:30

泰山派RK3566移植QT，动鼠标时出现屏幕闪烁

总结： 交叉编译到泰山派rk3566跑调海康摄像头的qt应用程序失败了。 X11无效窗口。移植QT注意屏幕分辨率不要改。改了执行QT的时候，framebuffer识别不出设备。命令行安装QT-Creator sudo install 类似的指令安装Qt-Creator时，可能找不到编…...

编程日记 2025/9/18 17:17:31

一周学会Flask3 Python Web开发-post请求与参数获取

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili app.route 装饰器默认只支持get请求。假如我们要让绑定的视图函数支持其他请求方式，我们可以在methods属性里配置…...

编程日记 2025/9/19 2:20:15

Vue 3 中可读可写的计算属性（Computed Properties）的使用场景

在 Vue 3 中，计算属性（Computed Properties）是一种基于响应式依赖进行缓存的属性。它们通常用于处理复杂的逻辑，并且只有当依赖的响应式数据发生变化时，才会重新计算。计算属性非常适合用于处理模板中的复杂表达式&…...

编程日记 2025/9/16 15:32:25

EXCEL解决IF函数“您已为此函数输入太多个参数”的报错

IF函数的基本结构是IF(条件, 值为真时的结果, 值为假时的结果)，所以标准的IF函数最多只能有三个参数。当用户输入的参数超过三个时，Excel就会报这个错误。比如多个IF语句叠加，但可能在嵌套的过程中没有正确关闭每个IF函数的括号，导…...

编程日记 2025/9/18 12:29:30

Redis7——基础篇（二）

前言：此篇文章系本人学习过程中记录下来的笔记，里面难免会有不少欠缺的地方，诚心期待大家多多给予指教。基础篇： Redis（一） 接上期内容：上期完成了Redis环境的搭建。下面开始学习Redis常用命令…...

编程日记 2025/9/16 14:46:02

vue3 ref和reactive的区别

在 Vue 3 中，ref 和 reactive 是两种用于创建响应式数据的 API，但它们的使用场景和实现方式有一些区别。用大白话来说，它们的区别可以这样理解： 1. ref：适合处理简单数据是什么：ref 是用来包装一个基本类…...

编程日记 2025/9/18 21:45:32

Elasticsearch7.1.1 配置密码和SSL证书

生成SSL证书 ./elasticsearch-certutil ca -out config/certs/elastic-certificates.p12 -pass 我这里没有设置ssl证书密码，如果需要设置密码，需要再配置给elasticsearch 在之前的步骤中，如果我们对elastic-certificates.p12 文件配置了密码…...

编程日记 2025/9/17 12:51:40

初识Redis

1.什么是Redis Redis是一种基于键值对（key-value）的NoSQL数据库。与很多键值对数据库不同的是，Redis中的value可以由String（字符串），hash（哈希），list（列表&a…...

编程日记 2025/9/19 13:27:28

Python Selenium自动化操作详解：从入门到实战

Python Selenium自动化操作详解：从入门到实战一、Selenium简介 Selenium是一个用于Web应用程序自动化测试的工具，支持多种浏览器和编程语言。结合Python使用，可以实现： 自动化表单提交动态网页数据抓取功能测试网页交互模拟二…...

编程日记 2025/9/18 14:24:03

第四天面试题

文章目录 1.什么叫 Java 的内存泄露与内存溢出？**1. 内存泄露（Memory Leak）****内存泄露的常见原因：****如何避免内存泄露：** **2. 内存溢出（Out Of Memory, OOM）****内存溢出的常见原因&#x…...

编程日记 2025/9/16 15:02:26

[论文阅读] SeeSR: Towards Semantics-Aware Real-World Image Super-Resolution

文章目录一、前言二、主要贡献三、Introduction四、Methodology4.1 Motivation ：4.2Framework Overview.** 一、前言通信作者是香港理工大学 & OPPO研究所的张磊教授，也是图像超分ISR的一个大牛了。论文如下 SeeSR: Towards Semantics-Aware Rea…...

编程日记 2025/9/17 12:51:30

面试题之箭头函数和普通函数有什么区别？

箭头函数（Arrow Function）和普通函数（Regular Function）是 JavaScript 中两种不同的函数定义方式，它们在语法、上下文（this）、原型链等方面存在显著区别。以下是它们的主要区别： 1. …...

编程日记 2025/9/18 19:25:26

jQuery AJAX 方法详解

jQuery AJAX 方法详解引言随着互联网技术的不断发展，前端开发领域的技术也在不断更新迭代。jQuery 作为一种广泛使用的前端JavaScript库，极大地简化了DOM操作和事件处理。在众多jQuery功能中，AJAX（Asynchronous JavaScript and XML）方法尤为突出，它允许我们在不重新加…...

编程日记 2025/9/17 12:51:26

深度集成DeepSeek大模型：WebSocket流式聊天实现

目录 5分钟快速接入DeepSeek大模型：WebSocket实时聊天指南创建应用开发后端代码 (Python/Node.js)结语 5分钟快速接入DeepSeek大模型：WebSocket实时聊天指南创建应用访问DeepSeek官网前往 DeepSeek官网。如果还没有账号，需要先注册一个。…...

编程日记 2025/9/18 13:51:33

千峰React:组件使用（1）

事件添加点击事件 function App() {const handClick () > {console.log(123)}return (<><button onClick{handClick}>点击</button></>) } export default App在react里也可以添加事件对象e 合成e 这个e和js里的e不太一样，是合成的…...

编程日记 2025/9/16 18:15:07

ram的使用——初始化很重要

背景 ram是非常常用的ip，前人的经验告诉我们，如果不对ram进行初始化直接读写，不定态在实际上板时会出现不可预知的问题。我们需要对ram进行初始化写0操作，代码如下。需要注意，复位释放时立马写入可能存在复位抖动的…...

编程日记 2025/9/17 9:38:50

JVM深入理解

目录 JVM介绍： 解释： 特点： 整体构成： 执行过程： 运行时数据区： Java堆剖析： 堆内存区域划分为什么要分代呢？ 内存分配： 新生区与老年区配置比例&#xff1a…...

编程日记 2025/9/19 17:17:55

DeepSeek 开放平台无法充值改用其他平台API调用DeepSeek-chat模型方法

近几天DeepSeek开放平台无法充值目前已经关闭状态，大家都是忙着接入DeepSeek模型 ，很多人想使用DeepSeek怎么办？ 当然还有改用其他平台API调用方法，本文以本站的提供chatgpt系统为例，如何修改DeepSeek-chat模型API接口…...

编程日记 2025/9/19 3:00:23

ImportError: cannot import name ‘FixtureDef‘ from ‘pytest‘

错误信息表明 pytest 在尝试导入 FixtureDef 时出现了问题。通常是由于 pytest 版本不兼容或插件版本冲突引起的。以下是详细的排查步骤和解决方案： 1. 检查 pytest 版本首先，确认当前安装的 pytest 版本。某些插件可能需要特定版本的 pytest 才能…...

编程日记 2025/9/16 13:20:16

懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制)

1.合集懒人精灵本地离线卡密验证系统教程(不联网、安全稳定、省钱、永久免费、无任何限制)：https://www.bilibili.com/video/BV1M6rdYEEog/ 备注： 1.本地离线卡密采用最安全的非对称加解密技术，设备id采用最安全多重混合加密不可逆技术生成&…...

编程日记 2025/9/17 9:38:42

Rust编程语言入门教程（六）变量与可变性

Rust 系列 🎀Rust编程语言入门教程（一）安装Rust🚪 🎀Rust编程语言入门教程（二）hello_world🚪 🎀Rust编程语言入门教程（三） Hello Cargo&#x1f…...

编程日记 2025/9/17 9:38:41

ArcGis和Super Map

1.ArcGIS ArcGIS 是美国环境系统研究所（ESRI）开发的一系列地理信息系统（GIS）软件产品的总称，它提供了一套全面的工具和服务，可用于采集、存储、分析、管理和展示地理数据，在众多领域都有广泛的…...

编程日记 2025/9/17 9:38:39

POI优化Excel录入

57000单词原始录入时间258S 核心代码: List<Word> wordBookList ExcelUtil.getReader(file.getInputStream()).readAll(Word.class);if (!CollectionUtil.isEmpty(wordBookList)) {for (Word word : wordBookList) {//逐条向数据库中插入单词wordMapper.insert(word);}…...

编程日记 2025/9/19 6:32:55

Zookeeper和Kafka的依赖关系

Zookeeper 和 Kafka 是紧密相关的，它们在功能上相互协作，共同为分布式系统提供支持，以下是它们的关系具体介绍： Kafka 依赖 Zookeeper 进行元数据管理主题信息存储：Kafka 中的主题（Topic）相关信息，如主题的名称、分区数量、副本分布等都存储在 Zookeeper 中。当 Kafk…...

编程日记 2025/9/19 19:30:57

驱动开发、移植

一、任务明确：把创龙MX8的驱动按照我们的要求然后移植到我们的板子 1.Linux系统启动卡制作， sd卡先按照《用户手册—3-2-Linux系统启动卡制作及系统固化》把创龙的Linux系统刷进去。 2. 把TLIMX8-EVM的板子过一遍把刚刚烧好系统的sd卡插入创…...

编程日记 2025/9/17 9:38:33

RT-Thread+STM32L475VET6实现红外遥控实验

文章目录前言一、板载资源介绍二、具体步骤1. 确定红外接收头引脚编号2. 下载infrared软件包3. 配置infrared软件包4. 打开STM32CubeMX进行相关配置4.1 使用外部高速时钟，并修改时钟树4.2 打开定时器16(定时器根据自己需求调整)4.3 打开串口4.4 生成工程 5. 打开HW…...

编程日记 2025/9/18 17:55:06