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

基于Vite+Vue3 给项目引入Axios

基于Vite+Vue3 给项目引入Axios,方便与后端进行通信。

系列文章指路👉

系列文章-基于Vue3创建前端项目并引入、配置常用的库和工具类

文章目录

  • 安装依赖
  • 新建src/config/config.js 用于存放常用配置
  • 进行简单封装
  • 解决跨域问题
  • 调用尝试

安装依赖

npm install axios

新建src/config/config.js 用于存放常用配置

const config = {baseUrl: '/boot-test'
}export default config

进行简单封装

引用阶段先简单封装,后续有复杂功能添加进来再进行改造。

src目录下,新建utils,axios两个文件夹,新建index.js
在这里插入图片描述

import axios from 'axios'
import config from "@/config/config.js";const http = axios.create()
http.defaults.baseURL = config.baseUrl
http.defaults.timeout = 15 * 1000
http.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'export default http

解决跨域问题

复用我们之前的后端项目,作为Vue3的后端:系列文章-基于SpringBoot3创建项目并配置常用的工具和一些常用的类
需要解决跨域问题,前后端解决都可以,我们本次采用前端解决。
2

    server: {open: true,// 启动项目自动弹出浏览器port: 4000,// 启动端口proxy: {'/boot-test': {target: 'http://localhost:8001/boot-test',	// 实际请求地址changeOrigin: true,rewrite: (path) => path.replace(/^\/boot-test/, '')},}},

调用尝试

写个小demo,把后端请求到的水果列表展示到前端表格上。
2

<template><h3>展示水果列表</h3><div style="width: 1000px;"><a-table bordered  :scroll="{ y: 300 }":dataSource="tableData" :columns="tableColumn"/></div></template><script setup>
import {ref} from 'vue';
import http from "@/utils/axios/index.js";let tableData = ref([])
let tableColumn = initColumns()
getAjaxData()function getAjaxData() {http.get("/goods/fruit/list").then(resp => {if (resp && resp.data.code === 200) {tableData.value = resp.data.data}}).catch(err => {})
}
function initColumns(){let columns = []columns.push({title: '编码',dataIndex: 'frCode',key: 'frCode',minWidth: 150},{title: '名称',dataIndex: 'frName',key: 'frName',minWidth: 200},{title: '价格',dataIndex: 'frPrice',key: 'frPrice',minWidth: 120},)return columns
}
</script><style scoped></style>

相关文章:

基于Vite+Vue3 给项目引入Axios

基于ViteVue3 给项目引入Axios,方便与后端进行通信。 系列文章指路&#x1f449; 系列文章-基于Vue3创建前端项目并引入、配置常用的库和工具类 文章目录 安装依赖新建src/config/config.js 用于存放常用配置进行简单封装解决跨域问题调用尝试 安装依赖 npm install axios …...

为什么查企业的时候有的公司没有显示注册资金?

我们在查询企业信息时&#xff0c;有时候会遇到某一家企业没有注册资金的情况&#xff0c;但是该企业又不是已经注销的。出现这种情况是什么原因呢&#xff1f; 1.该公司是一家分公司&#xff0c;分公司没有独立法人资格&#xff0c;因此没有注册资金。 2.有些情况下&#xf…...

DataProcess-VOC数据图像和标签一起进行Resize

VOC数据图像和标签一起进行Resize 参加检测比赛的时候&#xff0c;很多时候工业原始数据尺度都比较大&#xff0c;如果对数据不提前进行处理&#xff0c;会导致数据在加载进内存时花费大量的时间&#xff0c;所以在执行训练程序之前需要将图像提前进行预处理。对于目标检测的数…...

MultiValueMap

MultiValueMap是Spring框架中提供的一个接口&#xff0c;它继承了Map接口&#xff0c;用于存储键值对&#xff0c;但与普通的Map不同的是&#xff0c;MultiValueMap中一个键可以对应多个值&#xff0c;因此它也可以被称为“多值Map”。 MultiValueMap的使用场景一般是在需要存…...

山西电力市场日前价格预测【2023-12-25】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-12-25&#xff09;山西电力市场全天平均日前电价为469.89元/MWh。其中&#xff0c;最高日前电价为1048.40元/MWh&#xff0c;预计出现在08:30。最低日前电价为252.77元/MWh&#xff0c;预计…...

【华为OD机试真题2023CD卷 JAVAJS】5G网络建设

华为OD2023(C&D卷)机试题库全覆盖,刷题指南点这里 5G网络建设 时间限制:4s 空间限制:256MB 限定语言:不限 题目描述: 现需要在某城市进行5G网络建设,已经选取N个地点设置5G基站,编号固定为1到N,接下来需要各个基站之间使用光纤进行连接以确保基站能互联互通,不同…...

OSI 七层参考模型及TCP/IP 四层模型

OSI 七层参考模型 七层模型&#xff0c;亦称 OSI &#xff08; Open System Interconnection &#xff09;参考模型&#xff0c;即开放式系统互联。参考模型是国际标准化组织&#xff08;ISO &#xff09;制定的一个用于计算机或通信系统间互联的标准体系&#xff0c;一般称为…...

【面向对象】对比JavaScript、Go、Ada、Python、C++、Java、PHP的访问限制。

在不同编程语言中&#xff0c;控制成员&#xff08;变量、方法、类等&#xff09;可见性的机制不尽相同。以下是对比JavaScript、Go、Ada、Python、C、Java、PHP所使用的访问限制关键字和约定&#xff1a; 一、JavaScript ### JavaScript访问限制 早期的JavaScript并没有类似…...

力扣(leetcode)第26题删除有序数组中的重复项(Python)

26.删除有序数组的重复项 题目链接&#xff1a;26.删除有序数组的重复项 给你一个非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 …...

【内存泄漏】内存泄漏及常见的内存泄漏检测工具介绍

内存泄漏介绍 什么是内存泄漏 内存泄漏是指程序分配了一块内存&#xff08;通常是动态分配的堆内存&#xff09;&#xff0c;但在不再需要这块内存的情况下未将其释放。内存泄漏会导致程序浪费系统内存资源&#xff0c;持续的内存泄漏还导致系统内存的逐渐耗尽&#xff0c;最…...

FPGA-ZYNQ-7000 SoC在嵌入式系统中的优势

FPGA-ZYNQ-7000 SoC在嵌入式系统中的优势 本章节主要参考书籍《Xilinx Zynq-7000 嵌入式系统设计与实现 基于ARM Cortex-A9双核处理器和Vivado的设计方法 (何宾&#xff0c;张艳辉编著&#xff09;》 本章节主要讲述FPGA-ZYNQ-7000 SoC在嵌入式系统中的优势&#xff0c;学习笔…...

如何在Vue3中实现无缝热重载:提升你的开发效率

Vue3中的热重载&#xff08;Hot Module Replacement&#xff0c;简称HMR&#xff09;是一种开发时的功能&#xff0c;它允许开发者在不刷新整个页面的情况下&#xff0c;实时替换、添加或删除模块。这意味着当你对Vue组件进行修改并保存时&#xff0c;这些更改会立即反映在浏览…...

盒子 Box

UVa1587 思路&#xff1a; 1.输入每个面的长宽并将每个面较长的一边放在前面 2.判断是否存在三对面分别相等 3.判断是否存在三组四棱相等 #include <stdio.h> #include <stdlib.h> #define maxn 100int cmp(const void* e1, const void* e2) {return (int)(*(d…...

uni-app附件下载预览 并解决打开附件时黑屏

// 预览附件perviewFile(file) {console.log(点击附件, file)var strfile.previewUrlvar filTypestr.split(.)console.log(filType,filType)uni.downloadFile({url: success: function(res) {console.log(打开文档成功, res);if (res.statusCode 200) {uni.saveFile({tempFile…...

卸载了Visual Studio后,在vscode中执行npm i或npm i --force时报错,该怎么解决?

卸载了Visual Studio后&#xff0c;在vscode中执行npm i或npm i --force时报错,该怎么解决&#xff1f; 报错内容&#xff1a;原因解决办法 报错内容&#xff1a; npm ERR! code 1 npm ERR! path E:\VScode\codeDate\yugan\node_modules\node-sass npm ERR! command failed np…...

渗透测试 | 信息收集常用方法合集

目录 一、关于域名 1.子域名收集 a.搜索引擎查找 b.在线查询 c.工具 d.SSL/TLS证书查询 2.端口型站点收集 3.目录文件扫描 a.目录扫描工具 b.github搜索 c.google搜索 d.在线网站 e.文件接口工具 4.旁站和C段 a.旁站查询 b.C段查询 5.网站技术架构信息 a.基础…...

使用 ElementUI 组件构建无边框 Window 桌面应用(WinForm/WPF)

生活不可能像你想象得那么好,但也不会像你想象得那么糟。 我觉得人的脆弱和坚强都超乎自己的想象。 有时,我可能脆弱得一句话就泪流满面;有时,也发现自己咬着牙走了很长的路。 ——莫泊桑 《一生》 一、技术栈 Vite + Vue3 + TS + ElementUI(plus) + .NET Framework 4.7.2…...

JavaScript中数组的方法和函数作用域问题

1 -函数作用域问题-: 函数的外层作用域&#xff0c;在函数创建时就已确定&#xff0c;和函数的调用位置无关 var name 嘿嘿;// 函数的外层作用域&#xff0c;在函数创建时就已确定&#xff0c;和函数的调用位置无关// JS中的作用域被称为 词法作用域function fn() {console.…...

nodejs设置x-xss-protection解决xss问题

在Node.js中设置X-XSS-Protection可以通过使用helmet库来完成。 首先&#xff0c;确保已经安装了helmet库。如果没有安装&#xff0c;可以运行以下命令进行安装&#xff1a; npm install helmet --save 然后&#xff0c;在你的Node.js应用程序中引入并配置helmet库&#xff…...

C/C++不同整数类型的区别

在C/C中涉及的整数相关的类型大致有如下几种&#xff1a; char、unsigned charshort、unsigned shortint、unsigned intlong、unsigned longlong long、unsigned long longint8_t、uint8_tint32_t、uint32_tint64_t、uint64_tDWORDDWORD32、DWORD64size_t、ssize_tSIZE_T、SSI…...

怎样快速掌握mGBA测试套件:5个专业技巧确保模拟器稳定性

怎样快速掌握mGBA测试套件&#xff1a;5个专业技巧确保模拟器稳定性 【免费下载链接】mgba mGBA Game Boy Advance Emulator 项目地址: https://gitcode.com/gh_mirrors/mg/mgba mGBA作为一款开源的高精度Game Boy Advance模拟器&#xff0c;其测试套件是确保模拟器稳定…...

广州SEO优化对网站转化有什么帮助_广州SEO优化应该注意哪些问题

<h2>广州SEO优化对网站转化有什么帮助</h2> <p>在当今数字化时代&#xff0c;广州SEO优化成为了企业提升在线业务的关键策略。广州作为中国南方的重要城市&#xff0c;其互联网市场竞争激烈&#xff0c;掌握有效的SEO优化手段对于提升网站转化率至关重要。广…...

大模型LLM ACA - ACP认证考试模拟试卷一

目录 一、大模型LLM ACA - ACP认证考试 二、大模型LLM ACA - ACP认证考试模拟试卷 &#xff08;一&#xff09;单选题&#xff1a;70 题 1 分 70 分 1. 在代码中&#xff0c;answer_correctness 指标的主要作用是什么&#xff1f; 2. 在ask_llm_route函数中&#xff0c;…...

从HikariCP连接泄漏告警到业务逻辑耗时优化实战

1. 从告警日志到问题定位 那天早上刚到公司&#xff0c;就收到运维同事发来的告警截图。日志里赫然写着"Apparent connection leak detected"&#xff0c;后面跟着一堆堆栈信息。作为负责这个微服务的老司机&#xff0c;我第一反应就是&#xff1a;HikariCP又在报连…...

深入解析 Promise 核心原理,从零手写实现到实战应用

1. Promise 基础概念与使用场景 1.1 什么是 Promise&#xff1f; 想象你点了一份外卖&#xff0c;商家给你一个取餐号而不是立即给你食物。这个取餐号就是 Promise&#xff0c;它代表一个未来才会完成的操作&#xff08;外卖送达&#xff09;。在 JavaScript 中&#xff0c;Pro…...

Java大厂面试揭秘:从Spring Boot到Kubernetes的技术深挖

Java大厂面试揭秘&#xff1a;从Spring Boot到Kubernetes的技术深挖 场景背景 王大壮是一位初入职场的程序员&#xff0c;怀揣着对互联网大厂的向往&#xff0c;来到了一家知名互联网企业参加Java开发岗的面试。面试官老李以严肃的态度&#xff0c;针对核心技术栈进行了深挖式提…...

如何使用usearch进行水资源分配优化:用水数据的向量分析完整指南

如何使用usearch进行水资源分配优化&#xff1a;用水数据的向量分析完整指南 【免费下载链接】usearch Fastest Open-Source Search & Clustering engine for Vectors & &#x1f51c; Strings in C, C, Python, JavaScript, Rust, Java, Objective-C, Swift, C#, Go…...

别再为小程序合法域名发愁了!手把手教你用宝塔+FRP搞定内网穿透与HTTPS配置

微信小程序合法域名配置实战&#xff1a;从内网穿透到HTTPS全流程指南 当你兴致勃勃地开发完微信小程序的后端接口&#xff0c;准备在真机测试时&#xff0c;却遭遇"不在合法域名列表中"的报错——这种挫败感我深有体会。三年前我的第一个小程序项目就卡在这个环节整…...

三相三电平Vienna整流器:SPWM与SVPWM调制仿真及控制策略对比分析

三相三电平vienna整流器SPWM和SVPWM调制仿真 基于plecs搭建 温度场分析 双PI控制 锁相环控制 中点电压平衡控制 功率因数为1 SPWM和SVPWM调制对比 谐波畸变率对比分析 电压利用率对比分析 电压平衡和不平衡控制对比 图1 仿真模型 图2 温度场分析 图3 交流电压电流三电平…...

Power BI视觉对象交互设计秘籍--巧用书签按钮实现动态提示

1. 为什么需要动态提示功能&#xff1f; 做数据分析报表最怕什么&#xff1f;不是数据不准&#xff0c;而是看报表的人看不懂。我见过太多这样的场景&#xff1a;精心设计的柱状图被用户误读&#xff0c;复杂的折线图被理解成完全相反的趋势。这时候你会想&#xff0c;要是有个…...