React、Vue项目中如何调用多个不同的后台请求地址

简介: React、Vue项目中如何调用多个不同的后台请求地址

在一般项目中这个问题不会出现,但是在二般项目中还是会出现类似问题,就比如:医院项目中,表单接口是:

http://192.168.2.1:900
而有一个登录接口,后台请求地址是

http://192.168.2.2:900
这种情况下怎么办呢?

虽然有的伙伴说,老师,你说的这个问题一般在我这里碰不到的,毕竟我们就一个服务器。

话虽没错。线上一个服务器,那如果说这是在内网环境下部署呢,就比如医院项目中,有三个服务器,一个资源上传,一个普通接口(包含认证),一个表单数据记录。

当三个不同地址的接口放在一起的时候,我们的vue项目还能解决吗?

答案是:一定能!

首先,我们先来拆解它的需求,也就是说我们一个网页项目需要同时使用三个不同地址的需求。

一般来说我们项目只能配置一个请求地址,那是没错的。但是我们同样也可以处理当前这个请求地址走一个配置文件,而我们三个不同的请求地址统一指向这个配置文件即可。类似于下方:
image.png

不知道各位伙伴看的懂不。

大概意思就是,在我们前端项目中新建一个配置文件,在这个配置文件中设置接口请求地址。

然后将这个配置文件引入到我们的项目中,并在每次打开时候进行获取,然后加载。在项目每次发起请求的时候,根据当前业务传入不同的参数,分别获取不同的请求接口即可。

说干就干。

  1. 我们在项目的工具目录下创建一个接口配置文件,config.js。并声明三个不同地址的接口。

image.png
image.png

  1. 我们在根目录创建一个方法文件,util.js。用来判断当前接口的地址

image.png

上述代码中axios,是我二次封装的axios,axios的部分代码如下,它接收传递进来的url 做为项目的请求地址。
image.png

  1. 我们在接口维护处判断当前使用哪个接口。如下方我们默认就是BS这个地址,所以我们可以不传

    image.png

如果这个接口走的是IOT的话,我们则如下

image.png

这样的话,我们成功实现了当前项目支持多个不同请求地址的办法。其实原理很简单,就是我需要哪个接口引入哪个接口进来就行。如果还有疑问,可以欢迎留言。

目录
相关文章
|
4月前
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时,考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线,Vue可能是更好的选择。相反,如果项目需要更大的灵活性,或者项目团队已经有React的经验,那么React可能是更合适的选择。
224 13
|
7月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
441 83
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
422 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
218 0
|
9月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
336 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
9月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
449 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
9月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
392 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
9月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
411 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
8月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
618 4
|
8月前
|
JavaScript 前端开发 算法
vue和react 哪个更强大
vue和react 哪个更强大
233 3