【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.rhkb.cn/news/98954.html

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

相关文章

【前端】vscode javascript 代码片段失效问题解决

1. 文件--首选项--用户代码片段-vue.json : 添加 // { // // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // // description. Add comma separated ids of the languages where the snippet is app…

探索Perfetto:开源性能追踪工具的未来之光

探索Perfetto:开源性能追踪工具的未来之光 1. 引言 A. 介绍Perfetto的背景和作用 随着移动应用、桌面软件和嵌入式系统的不断发展,软件性能优化变得愈发重要。在这个背景下,Perfetto作为一款开源性能追踪工具,日益引起了开发者…

GraphQL strawberry的使用回顾和体会

GraphQL vs RESTful 简单来说GraphQL 比起 RESTful 集成额外一些功能 出入参校验、序列化 (简化后端编程)自由可选的返回数据字段 (简化一些多余接口开发和沟通联调成本) 这些都是优点了。 开发效率在项目初期是很重要的,需要快速原型化。 但是后期稳定后&#…

Web 拦截器-interceptor

拦截器是一种动态拦截方法调用的机制,类似于过滤器,是Spring框架提出的,用来动态拦截控制器方法的执行。 其作用是拦截请求,在指定方法调用前后,根据业务执行预设代码。 实现步骤 1.定义拦截器,实现Handl…

常用消息中间件介绍

RocketMQ 阿里开源,阿里参照kafka设计的,Java实现 能够保证严格的消息顺序 提供针对消息的过滤功能 提供丰富的消息拉取模式 高效的订阅者水平扩展能力 实时的消息订阅机制 亿级消息堆积能力 RabbitMQ Erlang实现,非常重量级,更适…

HTTPS代理搭建技巧分享

今天我们来分享一下如何搭建一个能够实现中间人 检测和防护的HTTPS代理。保护我们的网络通信安全是至关重要的,让我们一起学习如何构建一个安全可靠的HTTPS代理吧! 什么是中间人 ? 首先,让我们来了解一下什么是中间人 。中间人 是…

前端工程化到底是啥?可不止Webpack哦~

前言 什么是前端工程化,是我去年困扰我很久的一个问题,打开搜索引擎一搜,能找到四个关键字,模块化、组件化、规范化、自动化,但一看这几个字,更加迷茫了,没说解决了什么问题。大部分搜出来的都…

C语言刷题训练DAY.7

1.及格分数 解题思路&#xff1a; 这里直接用while语句控制循环&#xff0c;if else语句判断即可。 解题代码&#xff1a; #include<stdio.h> int main() {int a 0;while(scanf("%d", &a) ! EOF){if (a >60)printf("Pass\n");elseprintf…

嵌入式设备应用开发(其他第三方库)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 前面我们介绍的qt、boost这些都是通用库。也就是说,不管什么样的场景,这些库都可以拿过来使用。然而在实际开发中还有一些第三方库,它是需要和实际场景联系在一起的。也就是说,…

如何编写一个通用的函数?

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 金句分享:…

java云智慧工地管理平台系统源码

智慧工地将“互联网”的理念和技术引入建筑工地&#xff0c;从施工现场源头抓起&#xff0c;最大程度地收集人员、安全、环境、材料等关键业务数据&#xff0c;依托物联网、互联网&#xff0c;建立云端大数据管理平台&#xff0c;形成“端云大数据”的业务体系和新的管理模式&a…

实现简单的element-table的拖拽效果

第一步&#xff0c;先随便创建element表格 <el-table ref"dragTable" :data"tableData" style"width: 100%" border fit highlight-current-row><el-table-column label"日期" width"180"><template slot-sc…

使用 Node.js 生成优化的图像格式

使用 Node.js 生成优化的图像格式 图像是任何 Web 应用程序的重要组成部分&#xff0c;但如果优化不当&#xff0c;它们也可能成为性能问题的主要根源。在本文中&#xff0c;我们将介绍如何使用 Node.js 自动生成优化的图像格式&#xff0c;并以最适合用户浏览器的格式显示它们…

Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理(包括词的属性处理)的简单整理

Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 目录 Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 一、简单介绍 二、实现原理…

四款源代码扫描工具

一、DMSCA-企业级静态源代码扫描分析服务平台 端玛企业级静态源代码扫描分析服务平台&#xff08;英文简称&#xff1a;DMSCA&#xff09;是一个独特的源代码安全漏洞、质量缺陷和逻辑缺陷扫描分析服务平台。该平台可用于识别、跟踪和修复在源代码中的技术和逻辑上的缺陷&…

jstack(Stack Trace for Java)Java堆栈跟踪工具

jstack&#xff08;Stack Trace for Java&#xff09;Java堆栈跟踪工具 jstack&#xff08;Stack Trace for Java&#xff09;命令用于生成虚拟机当前时刻的线程快照&#xff08;一般称为threaddump或者javacore文件&#xff09;。 线程快照就是当前虚拟机内每一条线程正在执…

uniapp 微信小程序 绘制海报,长按图片分享,保存海报

uView UI 2.0 dcloud 插件市场地址 弹窗海报源码 <template><!-- 推荐商品弹窗 --><u-popup :show"haibaoShow" mode"center" round26rpx z-index10076 bgColortransparent safeAreaInsetTop close"goodsclose"><image …

Linux 内核与架构速查

Linux 内核与架构速查 博主博客 https://blog.uso6.comhttps://blog.csdn.net/dxk539687357 本文主要记录查询 Linux 计算机的内核与架构&#xff0c; 用于下载对应架构的第三方软件。 一、介绍 如上图所示&#xff0c; 有时候我们下载一些第三方软件&#xff0c; 软件会有很…

Googel Earth Engine 配置Python 环境

1. 安装并配置python环境 此处不再赘述 2. 安装 earthengine-api pip install earthengine-api C:\Users\xixi>pip install earthengine-api Collecting earthengine-apiUsing cached earthengine_api-0.1.363-py3-none-any.whl Requirement already satisfied: google-c…