基于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>

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

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

相关文章

PIL/Pillow

Abstract PIL(Python Imaging Library)是一个用于图像处理的 Python 库。它提供了广泛的功能&#xff0c;包括图像加载、保存、调整大小、裁剪、旋转、滤镜应用等。 由于 PIL 的开发停止在 2009 年&#xff0c;因此推荐使用其后续的维护版本 Pillow。Pillow 是一个兼容 PIL 接…

Springboot启动异常 OgnlException: sqlSelect [java.lang.NoSuchMethodError

完整的日志如下&#xff1a; Invocation of init method failed; nested exception is org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.builder.BuilderException: Error evaluating expression ew ! null and ew.sqlSelect ! null. Cause…

不忍学弟学妹受苦受难!!!逐一讲解发动机原理实验报告(1)

固体火箭发动机侵蚀燃烧测试实验 经过了愉快迷糊——哦不瑟瑟发抖——哦不痛不欲生的两天&#xff0c;终于和小伙伴们协力完成了西北工业大学航天学院发动机原理实验报告。具体的实验指导书均可在本人博客资源站下载。 固体火箭发动机侵蚀燃烧测试实验&#xff0c;嗯哼—— 实…

MySQL 事务的ACID特性

MySQL事务是什么&#xff0c;它就是一组数据库的操作&#xff0c;是访问数据库的程序单元&#xff0c;事务中可能包含一个或者多个 SQL 语句。这些SQL 语句要么都执行、要么都不执行。我们知道&#xff0c;在MySQL 中&#xff0c;有不同的存储引擎&#xff0c;有的存储引擎比如…

c++学习笔记-提高篇-STL标准模板库3(stack容器、queue容器以及list容器)

目录 Stack容器 一、Stack容器介绍 二、stack常用接口 三、栈的示例 queue&#xff08;队列&#xff09;容器 一、queue容器介绍 二、queue常用接口 三、queue示例 list容器 一、list容器介绍 二、list常用接口及示例 &#xff08;一&#xff09;list构造函数 &am…

使用Swift Package Manager (SPM)实现xcframework分发

Swift Package Manager (SPM) 是苹果官方提供的用于管理 Swift 项目的依赖关系和构建过程的工具。它是一个集成在 Swift 编程语言中的包管理器&#xff0c;用于解决在开发过程中管理和构建包依赖项的需求。 1、上传xcframework.zip到服务端 压缩xcframeworks成一个zip包&…

【flink】状态清理策略(TTL)

flink的keyed state是有有效期(TTL)的&#xff0c;使用和说明在官网描述的篇幅也比较多&#xff0c;对于三种清理策略没有进行横向对比得很清晰。 全量快照清理(FULL_STATE_SCAN_SNAPSHOT)增量清理(INCREMENTAL_CLEANUP)rocksdb压缩清理(ROCKSDB_COMPACTION_FILTER) 注意&…

国图公考:公考常识题如何复习更高效?

公务员考试是许多人求职的首选之一&#xff0c;而公考常识题作为公务员考试的重要组成部分&#xff0c;对于考生来说具有很高的分值。在这一模块的复习中&#xff0c;有以下几点可以帮助考生提高学习效率&#xff0c;一起来看一下吧! 一、明确复习目标 了解自己在各个知识点上…

gitee版本回退本地和仓库的执行步骤(后悔药,无副作用,按说明书使用)

目录 1.本地回退 1.打开项目文件夹 3.回退到指定版本 4.选择回退模式并确认 5.本地回退成功 2.回退仓库版本 1.在git上面找到项目的提交记录 2.找到提交错误的版本​编辑 3.双击新页面这个版本进去 点击操作再点击revert​编辑 4.确认回退 ​5.仓库回退成功 在使用…

The Cherno C++笔记02

目录 Part 06 How the C Compiler Works 1.编译过程 2.C并不关心文件 3.翻译单元&#xff08;Translation Unit&#xff09; 4. 实际用代码感受一下编译过程 4.1 预处理 4.1.1 预处理的本质 4.1.2 预处理后的.i文件 4.1.3 骚操作 4.2 .asm文件&#xff08;汇编语言源文…

安装nodejs,配置环境变量并将npm设置淘宝镜像源

安装nodejs并将npm设置淘宝镜像源 1. 下载nodejs 个人不喜欢安装包&#xff0c;所以是下载zip包的方式。这里我下载的node 14解压包版本 下载地址如下&#xff1a;https://nodejs.org/dist/v14.15.1/node-v14.15.1-win-x64.zip 想要其他版本的小伙伴去https://nodejs.org/di…

C++ 检测 是不是 com组件 的办法 已解决

在日常开发中&#xff0c;遇到动态库和 com组件库的调用 无法区分。检测是否com组件的办法 在头部文件&#xff0c;引入文件 如果能编译成功说明是 com组件&#xff0c;至于动态库如何引入&#xff0c;还在观察中 最简单办法 regsvr32 TerraExplorerX.dll 是com 组件 regs…

LLaMA开源大模型源码分析!

Datawhale干货 作者&#xff1a;宋志学&#xff0c;Datawhale成员 花了一晚上照着transformers仓库的LLaMA源码&#xff0c;把张量并行和梯度保存的代码删掉&#xff0c;只留下模型基础结构&#xff0c;梳理了一遍LLaMA的模型结构。 今年四月份的时候&#xff0c;我第一次接触…

OpenAI 疑似正在进行 GPT-4.5 灰度测试!

‍ 大家好&#xff0c;我是二狗。 今天&#xff0c;有网友爆料OpenAI疑似正在进行GPT-4.5灰度测试&#xff01; 当网友询问ChatGPT API调用查询模型的确切名称是什么时&#xff1f; ChatGPT的回答竟然是 gpt-4.5-turbo。 也有网友测试之后发现仍然是GPT-4模型。 这是有网友指…

自动化测试架构设计必会知识点——对核心业务进行封装复用(附Java源码)

随着UI自动化测试工具可选性越来越多&#xff0c;工具也越来越稳定&#xff0c;前几年关于自动化测试架构设计的概念逐渐淡化&#xff0c;但是做自动化测试最重要的两点—— PO设计模式和核心业务的封装复用大家还是必须掌握的&#xff0c;前面的文章我已经介绍了什么是PO设计模…

基于 Sentry 的前端监控系统搭建(Linux)

一、前言 随着技术这几年的发展与沉淀&#xff0c;线上数据指标监控也变得尤为重要&#xff0c;研发人员和运营人员需要对线上的产品指标有所感知&#xff0c;同时风险也需要及时暴露&#xff0c;很多公司开始自建监控系统&#xff0c;但对于一些定制化要求不是特别高的团队&a…

网络爬虫之Ajax动态数据采集

动态数据采集 规则 有时候我们在用 requests 抓取页面的时候&#xff0c;得到的结果可能和在浏览器中看到的不一样&#xff0c;在浏览器中可以看到正常显示的页面教据&#xff0c;但是使用 requests 得到的结果并没有&#xff0c;这是因为requests 获取的都是原始的 HTML 文档…

(1)(1.9) MSP (version 4.2)

文章目录 前言 1 协议概述 2 配置 3 参数说明 前言 ArduPilot 支持 MSP 协议&#xff0c;可通过任何串行端口进行遥测、OSD 和传感器。这样&#xff0c;ArduPilot 就能将遥测数据发送到 MSP 兼容设备&#xff08;如大疆护目镜&#xff09;&#xff0c;用于屏幕显示&#x…

银河麒麟v10 安装mysql 8.35

银河麒麟v10 安装mysql 8.35 1、卸载mariadb2、下载Mysql安装包3、安装Mysql 8.353.1、安装依赖包3.2、安装Mysql3.3、安装后配置 1、卸载mariadb 由于银河麒麟v10系统默认安装了mariadb 会与Mysql相冲突&#xff0c;因此首先需要卸载系统自带的mariadb 查看系统上默认安装的M…

MyBatis动态SQL中if,where,set,trim四种标签的使用和联系

目录 MyBatis动态SQL中if&#xff0c;where&#xff0c;set&#xff0c;trim四种标签的使用和联系1、先介绍trim标签以下是trim标签中涉及到的属性&#xff1a; 2、使用trim标签或where标签去除多余的and关键字3、使用trim标签或set标签去除多余的逗号 MyBatis动态SQL中if&…