在vue种将发送请求的接口地址独立出来

最新推荐文章于 2023-10-24 18:54:17 发布
最新推荐文章于 2023-10-24 18:54:17 发布
阅读量1.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_29009169/article/details/84996922
版权

有两种方法

一种使用在static文件夹下添加ipconfig文件 引入变量

var ipconfig= window.ipconfig{

ip：‘’

}

然后在 html中 使用src引入

之后在所有文件中都可以引用ipconfig的变量值

第二种

百度的还没试过

先占坑  过后把这两个方法的链接都贴上来

 

左手是笋右手是窝头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Retrofit2 入门篇
doris_d的专栏
09-11 466
Retrofit介绍 Retrofit是Square公司基于RESTful风格的网络框架封装，它并不是一个网络框架，而是对OKHttp的二次封装，其本质仍是OKHttp。 github地址 API设计简洁； 通过注解配置请求，高度解耦； 支持多种解析器，支持Gson（默认）、Jackson、Protobuf等； 支持RxJava； Retrofit2中导入了OKHttp3； 其他网络框架介绍 AndroidAsynHttp 基于HttpClient； 在UI线程外异步的进行Http请求，在匿名回调中
vue项目如何自定义配置数据请求方式
qq_36633616的博客
05-30 1195
1.引入依赖 npm install axios 再main.js里面全局引入使用 2.配置拦截器 3.自定义封装接口请求方式(只封装了get和post) 新建一个js脚本（api/**.js） 4.接口配置（新建一个存放所有接口的脚本） 5.至此项目的请求拦截到响应整个过程都就完成了，封装之后用起来非常的简便，不需要再使用原生的写法了。 ...
vue如何设定接口请求的方式
weixin_42284453的博客
07-02 3826
在拦截器里面添加 service.interceptors.request.use(config => { config.headers.post['Content-Type'] = 'application/json'; //主要是这里 if (getToken()) { if (config.method === 'post') { var parm = { token ...
axios封装与api接口管理
田兴的博客
09-14 3821
一、前言 axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。 在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库 二、axios封装步骤 安装axios npm instal
Vue项目切换内外网请求地址(内外网调用不同后端接口)
过去属于死神，未来属于自己
10-24 1027
业务场景: 客户电脑一部分只有内网，另一部分则只有外网，此时同一项目打包上线后需调用不同后端接口，可在请求拦截器中做以下处理。
vue.config.js使用代理配置真实请求url
盼盼大小姐的博客
11-22 4380
前端请求接口过程中为解决跨域问题，会配置代理请求url，配置之后浏览器只能看到local host路径。为方便查看请求的真实ip，需要在vue.config.js中做如下配置，便能在浏览器实时查看到真实地址。
vue-admin-template与SpringBoot前后端接口请求数据示例代码.rar
09-08
在IT领域，前后端分离是一种常见的开发模式，它将用户界面和服务器逻辑分开，提高了系统的可维护性和可扩展性。本示例代码是关于“vue-admin-template”与“SpringBoot”整合实现前后端接口请求数据的实践案例。下面...
springboot+vue实现邮箱发送功能.zip
05-12
在本项目中，"springboot+vue实现邮箱发送功能.zip" 是一个包含了使用Spring Boot后端框架和Vue.js前端框架实现电子邮件发送功能的示例应用。这个项目旨在帮助开发者了解如何将这两个流行的开源技术整合起来，创建一...
Vue购物车地址选配
08-24
`saveAddress`方法将在用户提交表单时被调用，这里我们可以将地址保存到本地存储（例如localStorage）或者向后端服务器发送请求。这个方法的具体实现取决于你的项目需求和架构。 为了完善地址选配功能，你可能还...
student-master学生选课vue三种角色.rar
11-13
"student-master学生选课vue三种角色.rar" 这个标题提到了一个名为 "student-master" 的项目，该项目与学生选课系统有关，并且使用了Vue技术来实现用户界面。"三种角色" 暗示系统中可能包括了学生、教师和管理员等...
vue_demo 乐橙云
08-08
3. **封装API接口**：将乐橙云提供的API接口封装成Vue.js的组件方法，这样可以在组件内部直接调用，简化代码结构。 4. **处理响应数据**：收到乐橙云API返回的数据后，Vue.js的响应式系统会自动更新相应的数据属性，...
axios获取发起请求的地址 vue_axios安装，发送地址请求实例
weixin_34553415的博客
03-03 3322
安装先在当前项目安装axioscnpm i axios -Sget请求axios.get('http://localhost:8082/getAllStudents').then(res=>{console.log(res);}).catch(err=>{console.log(err);});上面这个例子并没有带参数过去，如果需要携带参数可以有2种写法。方法1直接在请求的地址里，写上...
vue获取url请求地址
weixin_46156770的博客
09-24 3421
有时候需要前端请求地址的ip，所以找到了如何获取url请求地址 window.location.href
vue-cli项目中抽离管理所有接口地址的一个简单粗暴的方案
weixin_34226182的博客
04-25 473
第一步：根据环境使用相应的host地址 一般来说，开发环境和生产环境所用的接口地址不会是同一个，比如大多数开发者都会在开发环境配置mock server而在生产环境使用真实api。更别说严谨的项目可能会有测试环境和预发环境。 方法1. 配置DefinePlugin 一个方法是在webpack.dev.conf.js和webpack.pro...
vue项目接口地址暴露_Vue 新增不参与打包的接口地址配置文件
weixin_39935903的博客
01-12 671
Vue新增不参与打包的接口地址配置文件by:授客QQ：1033553122开发环境Win 10Vue 2.5.2问题描述vue工程项目，npm run build webpack方式打包，每次打包后如果需要更改后台接口地址(项目中，接口地址设置成变量，存放在js文件中，需要用到的地方导入)，都需要重新打包，比较麻烦，所以，想给项目增加个配置文件，打包后如果要更改接口地址，修改该文件即可。解决方法创...
vue项目打包上线后接口地址报错问题
热门推荐
imkxrc的博客
06-11 2万+
 代理设置的作用是你要访问后端的请求直接发到当前站点，因此你的 api 路径都应该是不含 hostname 的相对路径部署到生产环境时，只要相对路径保持不变，就不需要任何设置。如果开发环境下的 api 路径和生产环境的路径不一致，那么一定可以通过设置 proxyTable 使之一致。因此，结论是，只要 proxyTable 设置得好，部署上线不需要做任何改动。...
注册安全工程师预报考人员管理台账.xlsx
最新发布
07-04
注册安全工程师预报考人员管理台账.xlsx
vue3 接口请求封装
08-24
Vue 3 中接口请求的封装有多种方式，下面我会介绍一种常见的方法： 首先，我们可以创建一个独立的模块，专门用于发送接口请求。这个模块可以是一个单独的文件，比如 `api.js`。 ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://api.example.com', // 接口请求的基础 URL timeout: 5000, // 请求超时时间 }); export function fetchUser(userId) { return api.get(`/user/${userId}`); } export function updateUser(userId, data) { return api.put(`/user/${userId}`, data); } // 其他接口请求方法... ``` 然后，在需要使用接口的地方，我们可以导入上面定义的方法，并调用它们来发送请求。 ```javascript import { fetchUser, updateUser } from './api'; export default { data() { return { user: null, }; }, methods: { async getUser(userId) { try { const response = await fetchUser(userId); this.user = response.data; } catch (error) { console.error(error); } }, async updateUser(userId, data) { try { await updateUser(userId, data); // 更新成功的处理逻辑... } catch (error) { console.error(error); } }, // 其他接口请求方法... }, }; ``` 上述代码中，我们使用了 axios 库来发送实际的请求。你可以根据项目需求选择其他库或自己封装一个请求库。 需要注意的是，上述代码只是一个简单的示例，实际项目中可能还需要处理请求的错误、loading 状态、请求拦截器、响应拦截器等等。具体的封装方式可以根据项目的需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值