【vue3】对axios进行封装,方便更改路由并且可以改成局域网ip访问(附代码)

对axios封装是在main.js里面进行封装,因为main.js是一个vue项目的入口


步骤:

  1. 在1处创建一个axios实例为http,baseURL是基础地址(根据自己的需求写),写了这个在vue界面调用后端接口时只用在post请求处写路由地址就可以了
  2. 在2处将创建的axios实例挂到app上
  3. 在3处,vue页面进行调用后端接口时只写后端路由就好(我后端使用的Django)

代码:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios'
// createApp(App).use(store).use(router).mount('#app')// // 创建基础url
const http = axios.create({baseURL: 'http://127.0.0.1:8000/'
})const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.use(store)
app.config.globalProperties.$http = http
app.mount('#app')
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

 这是Django服务器启动成功的提示信息。它表示你已经在本地计算机上启动了一个开发服务器,可以通过http://0.0.0.0:8000/访问它。其中0.0.0.0是一个通配符地址,它表示可以从任何网络接口(例如本地主机或公共IP)访问服务器。

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

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

相关文章

每天一道leetcode:934. 最短的桥(图论中等广度优先遍历)

今日份题目: 给你一个大小为 n x n 的二元矩阵 grid ,其中 1 表示陆地,0 表示水域。 岛 是由四面相连的 1 形成的一个最大组,即不会与非组内的任何其他 1 相连。grid 中 恰好存在两座岛 。 你可以将任意数量的 0 变为 1 &#…

基于X86六轮差速移动机器人运动控制器设计与实现(二)规划控制算法

带输入约束的 MPC 路径跟踪控制 MPC 算法是一种基于控制对象模型的控制方法,其优势在于在控制中考虑了 系统的多种物理约束,同时基于模型与当前机器人的反馈信息预估出未来机器人 位姿信息的处理方法可以解决控制迟滞的问题。 4.1 MPC 路径跟踪控…

iOS 17 正式版预计 9 月中下旬发布,部分新功能延后推出

苹果公司预计将在 9 月中下旬推出 iOS 17 正式版,iPhone XS 及更新的机型可免费更新。这次更新包含了许多新功能,但是根据苹果公司的网站显示,并不是所有的功能都会立即可用。苹果表示有一些功能“将在今年晚些时候推出”,比如&am…

接口自动化yaml文件读取与写入

前言 在走进yaml文件之前大家应该都很想知道他是用来干嘛的? 是的是的,他是用来做接口自动化测试的。 我们一起来学习他吧!——(一定要收藏带走哦❤) 1、yaml文件有什么作用呢? ①可作为配置文件使用—…

WMS仓库管理系统选择指南:如何确保您的仓库提高效率?

如何选择WMS仓库管理系统?仓库管理主要包括以下四个方面: 1.商品出入库管理 2.库存调拨 3.库存盘点 4.虚拟库存/实际库存管理 为了更好地管理仓库,我们需要确保基本的硬件设施得以满足,例如划分存储区域、使用货架以及进行员工培训…

区间预测 | MATLAB实现QRBiGRU双向门控循环单元分位数回归时间序列区间预测

区间预测 | MATLAB实现QRBiGRU双向门控循环单元分位数回归时间序列区间预测 目录 区间预测 | MATLAB实现QRBiGRU双向门控循环单元分位数回归时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 MATLAB实现QRBiGRU双向门控循环单元分位数回归时间序列…

LVS-DR模式下(RS检测)ldirectord工具实现部分节点掉点后将请求发往正常设备进行处理

基于前文的LVS-DR集群构建环境 一.下载ldirectord软件 二.将模板文件中的LVS-DR模式相关文件拷贝到/etc/ha.d主配置目录并按实际设备修改 三.配置两台RS匹配规则 四.停止RS1的http服务进行测试 RS1失去工作能力,RS2接替RS1 基于前文的LVS-DR集群构建环境 一.下…

Stable Diffusion:使用自己的数据集微调训练LoRA模型

Stable Diffusion:使用自己的数据集微调训练LoRA模型 前言前提条件相关介绍微调训练LoRA模型下载kohya_ss项目安装kohya_ss项目运行kohya_ss项目准备数据集生成关键词模型参数设置预训练模型设置文件夹设置训练参数设置 开始训练LoRA模型TensorBoard查看训练情况 测…

一篇搞懂TCP、HTTP、Socket、Socket连接池

前言:作为一名开发人员我们经常会听到HTTP协议、TCP/IP协议、UDP协议、Socket、Socket长连接、Socket连接池等字眼,然而它们之间的关系、区别及原理并不是所有人都能理解清楚,这篇文章就从网络协议基础开始到Socket连接池,一步一步…

算法题面试实战收集

回文数字 2023-08-18 美团 一面 在不使用额外的内存空间的条件下判断一个整数是否是回文。 回文指逆序和正序完全相同。 数据范围: 进阶: 空间复杂度O(1) ,时间复杂度 O(n) 提示: 负整数可以是回文吗?(比如…

Flink内核源码解析--Flink中重要的工作组件和机制

Flink内核源码 1、掌握Flink应用程序抽象2、掌握Flink核心组件整体架构抽象3、掌握Flink Job三种运行模式4、理解Flink RPC网络通信框架Akka详解5、理解TaskManager为例子,分析Flink封装Akka Actor的方法和整个调用流程6、理解Flink高可用服务HighAvailabilityServ…

了解生成对抗网络 (GAN)

一、介绍 Yann LeCun将其描述为“过去10年来机器学习中最有趣的想法”。当然,来自深度学习领域如此杰出的研究人员的赞美总是对我们谈论的主题的一个很好的广告!事实上,生成对抗网络(简称GAN)自2014年由Ian J. Goodfel…

派森 #P126. 维吉尼亚加密

描述 维吉尼亚密码引入了“密钥”的概念,即根据密钥来决定字符的替换关系。 如上图为维吉尼亚密码的加密过程示意,左边为加密替换表,上面第一行代表明文字母,左面第一列代表密钥字母,对如下明文加密:‪‬…

2023.8 - java - 泛型

泛型问题的引出: jdk 1.5 引出泛型 // package 泛型; public class index {public static void main (String[] args){test t new test();t.setContent("aaa");int a (int) t.getContent();System.out.println(a);} }class test{Object content;publi…

快速解决Ubuntu 中 wine 程序 中文显示为方块/显示错误/无法显示中文(2023)

解决办法就是在创建prefix的命令行里加上LANG“zh_CN.UTF8” 或 LC_ALL“zh_CN.UTF8”,并安装cjkfonts,即可。 1、生成prefix、安装cjk字体 以下是基本流程: 现在假定wine和winetricks已经装好, // 先创建一个prefix&#xff0…

【docker】基于dockerfile编写LNMP

目录 一、基础环境准备 二、部署nginx(容器IP为172.18.0.10) 1、整个Dockerfile文件内容 2、配置nginx.conf文件 3、构建镜像 ​编辑 三、部署mysql 1、整个Docker文件内容 2、准备my.conf文件 3、生成镜像 4、启动镜像容器 5、验证mysql 四、PH…

❤echarts折线图完整使用及详细配置参数

❤echarts折线图完整使用及详细配置参数 进入echarts官网 查看案例,下面说说一些echarts图的调节 一、配置echarts具体参数 01 基础版本的折线图 option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data…

将eNSP Pro部署在华为云是什么体验

eNSP Pro简介 eNSP Pro 是华为公司数据通信产品线新推出的数通设备模拟器,主要应用在数据通信技能培训,为使用者提供华为数据通信产品设备命令行学习环境。 具备的能力 多产品模拟能力:支持数据通信产品线NE路由器、CE交换机、S交换机、AR…

Spring-3-Spring AOP概念全面解析

今日目标 能够理解AOP的作用 能够完成AOP的入门案例 能够理解AOP的工作流程 能够说出AOP的五种通知类型 一、AOP 1 AOP简介 思考:什么是AOP,AOP的作用是什么? 1.1 AOP简介和作用【理解】 AOP(Aspect Oriented Programming)面向切面编程,一…

AveMaria 传播手段的变化

AveMaria 是一种最早在 2018 年 12 月出现的窃密木马,攻击者越来越喜欢使用其进行攻击,运营方也一直在持续更新和升级。在过去六个月中,研究人员观察到 AveMaria 的传播手段发生了许多变化。 2022 年 12 月攻击行动 研究人员发现了名为 .Vh…