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

【Vue】2-8、Axios 网络请求

news 2026/5/24 4:49:26 
cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

注：使用 CDN 链接就可以不需要去下载对应的 js 文件到本地，只需要联网即可使用，可以减少项目的体积  

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios</title>
</head>
<body><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>const result = axios({method: 'GET',url: 'http://www.liulongbin.top:3006/api/getbooks'})then(function(books){console.log(books)})</script>
</body>
</html>
<body><button id="btnGet">get</button><button id="btnPost">post</button><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>document.querySelector('#btnGet').addEventListener('click',async function(){const { data:res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{params: {id: 1}})console.log(res)})document.querySelector('#btnPost').addEventListener('click',async function(){const { data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{name: 'zs',gender: '女'})console.log(res)})</script>
</body>

import axios from 'axios'// Vue.prototype.axios = axios
Vue.prototype.$http = axios

 如果每次使用都要导入一次，那就太麻烦了，也降低了可维护性

可以在 main.js 文件中导入 axios ，这样就不需要在每个组件中都重新导入了   

methods: {async postInfo() {const { data: res } = await this.$http.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', age: 20 })console.log(res)}
}
// 全局配置 axios 的请求跟路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

 缺点：不利于 API 的复用！

一  叶  知  秋，奥  妙  玄  心 

相关文章：

【Vue】2-8、Axios 网络请求

cdn&#xff1a;<script src"https://unpkg.com/axios/dist/axios.min.js"></script> 注&#xff1a;使用 CDN 链接就可以不需要去下载对应的 js 文件到本地&#xff0c;只需要联网即可使用&#xff0c;可以减少项目的体积 <!DOCTYPE html> <…...

编程日记 2024/2/1 7:34:13

Vue中嵌入原生HTML页面

Vue中嵌入html页面并相互通信 需求&#xff1a;b2b支付需要从后获取到数据放到form表单提交跳转&#xff0c;如下&#xff1a; 但是vue目前暂时没找到有类似功能相关文档&#xff0c;所以我采用iframe嵌套的方式 1. Vue中嵌入Html <iframe src"/static/gateway.htm…...

编程日记 2024/2/1 7:32:11

streampark+flink一键整库或多表同步mysql到doris实战

streamparkflink一键整库或多表同步mysql到doris实战&#xff0c;此应用一旦推广起来&#xff0c;那么数据实时异构时&#xff0c;不仅可以减少对数据库的查询压力&#xff0c;还可以减少数据同步时的至少50%的成本&#xff0c;还可以减少30%的存储成本&#xff1b; streampar…...

编程日记 2024/2/1 7:29:09

Vim实战：使用 Vim实现图像分类任务（二）

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…...

编程日记 2024/2/1 7:28:08

学习MySQL ENUM数据类型

学习MySQL ENUM数据类型 ENUM是MySQL中的一个字符串对象&#xff0c;它允许从预定义的值列表中选择一个值。这种数据类型特别适用于值的数量有限且不太可能变化的情况。 定义ENUM类型 在定义ENUM类型时&#xff0c;你需要明确列出所有可能的字符串值。例如&#xff1a; CRE…...

编程日记 2024/2/1 7:27:07

88.合并两个有序数组

88.合并两个有序数组 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 **注意&#xff1a;**最…...

编程日记 2024/2/1 7:23:04

python查询xml类别

第一章 导包 import os from xml.etree.ElementTree import ElementTree第二章 存储类别 # 定义一个空集合用于存储类别 classes set()第三章 遍历所有XML文件 # 遍历指定目录下的所有XML文件 for filename in os.listdir(/home/li/PycharmProjects/Annotations):if filena…...

编程日记 2024/2/1 7:22:02

nginx配置及性能优化

1. 请简述nginx的工作原理&#xff1f; Nginx的工作原理基于事件驱动模型和异步非阻塞I/O处理机制。 具体来说&#xff0c;Nginx接收到客户端的请求后&#xff0c;会将该请求映射到配置文件中指定的location block。这个过程中&#xff0c;Nginx本身并不执行实际的工作&#…...

编程日记 2024/2/1 7:20:00

阿里云如何找回域名，进行添加或删除？

权威域名管理介绍说明&#xff0c;包含添加域名、删除域名、找回域名、域名分组等操作介绍。 一、添加域名 非阿里云注册域名或子域名如需使用云解析DNS&#xff0c;需要通过添加域名功能&#xff0c;将主域名或子域名添加到云解析控制台&#xff0c;才可以启用域名解析服务。…...

编程日记 2024/2/1 7:18:59

机器学习 低代码 ML：PyCaret 的使用

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…...

编程日记 2024/2/1 7:17:58

前端入门第二天

目录 一、列表、表格、表单 二、列表&#xff08;布局内容排列整齐的区域&#xff09; 1.无序列表&#xff08;不规定顺序&#xff09; 2.有序列表&#xff08;规定顺序&#xff09; 3.定义列表&#xff08;一个标题多个分类&#xff09; 三、表格 1.表格结构标签 2.合并…...

编程日记 2024/2/1 7:07:49

Django实现富文本编辑器Ckeditor5图片上传功能

上一章我们已经为我们的博客继承了富文本编辑器Ckeditor5，虽然已经可以对文字进行排版处理，虽然已经可以通过插入图片的url地址来插入图片，但还无法通过本地上传图片，那么我们这个富文本编辑器就是不完整的，这一章我们将实现上传图片功能！ ​ Ckeditor5图片上传采用的是…...

编程日记 2024/2/1 7:03:45

【C语言】epoll_wait / select

一、epoll_wait和select对比 1. 阻塞和非阻塞 在Linux C语言中进行socket编程时&#xff0c;epoll_wait 和 select 都是用于多路I/O复用的系统调用&#xff0c;但是它们的行为可以设置为阻塞和非阻塞模式&#xff0c;这取决于调用它们时所使用的参数。 让我们分别看看 epoll…...

编程日记 2024/2/1 7:02:44

Java 数据抓取

大家好我是苏麟 , 今天聊聊数据抓取 . 大家合理使用 注意&#xff0c;爬虫技术不能滥用&#xff0c;干万不要给别人的系统造成压力、不要侵犯他人权益! 数据抓取 实质上就是java程序模拟浏览器进行目标网站的访问&#xff0c;无论是请求目标服务器的接口还是请求目标网页内容…...

编程日记 2024/2/1 7:01:43

深度学习之处理多维特征的输入

我们首先来看一个糖尿病的数据集&#xff1a; 在数据集中&#xff0c;我们称每一行叫做sample&#xff0c;表示一个样本&#xff0c;称每一列是feature&#xff0c;也就是特征在数据库里面这就是一个关系表&#xff0c;每一行叫做记录&#xff0c;每一列叫做字段。 每一个样本都…...

编程日记 2024/2/1 7:00:42

西瓜书读书笔记整理（十二） —— 第十二章 计算学习理论（下）

第十二章 计算学习理论&#xff08;下&#xff09; 12.4 VC 维&#xff08;Vapnik-Chervonenkis dimension&#xff09;12.4.1 什么是 VC 维12.4.2 增长函数&#xff08;growth function&#xff09;、对分&#xff08;dichotomy&#xff09;和打散&#xff08;shattering&…...

编程日记 2024/2/1 6:59:42

初探分布式链路追踪

本篇文章&#xff0c;主要介绍应用如何正确使用日志系统&#xff0c;帮助用户从依赖、输出、清理、问题排查、报警等各方面全面掌握。 可观测性 可观察性不单是一套理论框架&#xff0c;而且并不强制具体的技术规格。其核心在于鼓励团队内化可观察性的理念&#xff0c;并确保由…...

编程日记 2024/2/1 6:58:41

闭包的理解？闭包使用场景

说说你对闭包的理解&#xff1f;闭包使用场景 #一、是什么 一个函数和对其周围状态&#xff08;lexical environment&#xff0c;词法环境&#xff09;的引用捆绑在一起&#xff08;或者说函数被引用包围&#xff09;&#xff0c;这样的组合就是闭包&#xff08;closure&#…...

编程日记 2024/2/1 6:51:34

openssl3.2 - 帮助文档的整理

文章目录 openssl3.2 - 帮助文档的整理概述笔记整理后, 非空的文件夹如下整理后, 留下的有点用的文件列表如下备注END openssl3.2 - 帮助文档的整理 概述 openssl3.2源码工程编译安装完, 对于库的使用者, 有用的文档, 远不止安装的那些html. 用everything查找, 配合手工删除,…...

编程日记 2024/2/1 6:50:33

中移（苏州）软件技术有限公司面试问题与解答（5）—— Linux进程调度参数调优是如何通过代码实际完成的1

接前一篇文章&#xff1a;中移&#xff08;苏州&#xff09;软件技术有限公司面试问题与解答&#xff08;0&#xff09;—— 面试感悟与问题记录 本文对于中移&#xff08;苏州&#xff09;软件技术有限公司面试问题中的“&#xff08;11&#xff09;Linux进程调度参数调优是如…...

编程日记 2024/2/1 6:46:28

LLM多智能体驱动微服务自治：从架构设计到Sock Shop实战评估

1. 项目概述&#xff1a;当微服务遇见大模型&#xff0c;自管理不再是空谈在云原生和微服务架构成为主流的今天&#xff0c;我们运维工程师面对的早已不是几台物理服务器&#xff0c;而是一个由成百上千个容器化服务实例构成的、动态且复杂的生态系统。服务间的调用链路像一张错…...

编程新知 2026/5/24 3:13:27

用Python模拟10000次实验，直观理解卡方分布如何从正态分布‘长’出来

用Python模拟10000次实验&#xff0c;直观理解卡方分布如何从正态分布‘长’出来统计学中的分布概念常常让人望而生畏&#xff0c;尤其是当公式推导占据主导时。但如果我们换一种方式——用代码和可视化来探索&#xff0c;这些抽象概念会立刻变得鲜活起来。今天&#xff0c;我们…...

编程新知 2026/5/24 2:19:56

兰亭妙微｜UI设计外包中的UI图标设计核心技巧与设计师职业发展指南

在UI设计的视觉体系中&#xff0c;图标是传递信息的视觉语言&#xff0c;也是产品个性的关键载体。一枚富有设计感的图标&#xff0c;既能降低用户认知成本&#xff0c;又能让产品更具竞争力。北京兰亭妙微团队从工具选择、设计流程到个性表达&#xff0c;拆解UI图标创作的核心…...

编程新知 2026/5/24 1:16:05

C#与Unity的协作协议：从语法表层到引擎契约的深度解析

1. 这不是“学编程”&#xff0c;而是重新建立你和机器对话的语法系统很多人点开这个标题&#xff0c;心里想的是&#xff1a;“Unity游戏开发&#xff1f;那我得先学会C#&#xff0c;再学Unity编辑器&#xff0c;最后做个小飞机打砖块……”——这个思路本身就把门关死了。我带…...

编程新知 2026/5/23 23:02:05

别再死记硬背了！用这20个Blender核心快捷键，5分钟搞定模型贴图基础操作

别再死记硬背了&#xff01;用这20个Blender核心快捷键&#xff0c;5分钟搞定模型贴图基础操作 第一次打开Blender时&#xff0c;那个密密麻麻的界面和复杂的菜单系统确实容易让人望而生畏。但别担心&#xff0c;今天我要分享的这套快捷键组合&#xff0c;能让你像专业建模师一…...

编程新知 2026/5/23 21:59:22

射频集成电路中MIM电容与多晶硅电阻的建模与优化

1. MIM电容布局模型解析在射频集成电路设计中&#xff0c;金属-绝缘体-金属&#xff08;MIM&#xff09;电容因其高密度、高线性度和良好的匹配特性而成为关键被动元件。图14(a)展示了典型的MIM电容布局结构&#xff0c;采用上下金属层夹介质层的三明治结构。1.1 电容模型构成原…...

编程新知 2026/5/23 19:01:39

Chrome画中画扩展终极指南：一键实现多任务视频播放

Chrome画中画扩展终极指南&#xff1a;一键实现多任务视频播放 【免费下载链接】picture-in-picture-chrome-extension 项目地址: https://gitcode.com/gh_mirrors/pi/picture-in-picture-chrome-extension Chrome画中画扩展是一款基于原生Picture-in-Picture API开发的…...

编程新知 2026/5/23 18:44:05

Cortex-M55内存属性与缓存机制深度解析

1. Cortex-M55内存属性与缓存机制解析 在嵌入式系统开发中&#xff0c;正确配置内存属性对于系统性能和功能正确性至关重要。Cortex-M55作为Armv8-M架构的处理器&#xff0c;通过内存保护单元(MPU)和内存属性间接寄存器(MAIR_ATTR)提供了灵活的内存属性配置能力。本文将深入剖析…...

编程新知 2026/5/23 18:27:47

开源游戏加速神器OpenSpeedy：突破帧率限制的终极解决方案

开源游戏加速神器OpenSpeedy&#xff1a;突破帧率限制的终极解决方案 【免费下载链接】OpenSpeedy &#x1f3ae; An open-source game speed modifier. 项目地址: https://gitcode.com/gh_mirrors/op/OpenSpeedy OpenSpeedy是一款专为单机游戏玩家设计的开源游戏加速工…...

编程新知 2026/5/23 17:14:42

戴森球计划工厂蓝图架构深度解析：构建高效星际生产线的核心策略

戴森球计划工厂蓝图架构深度解析&#xff1a;构建高效星际生产线的核心策略 【免费下载链接】FactoryBluePrints 游戏戴森球计划的**工厂**蓝图仓库 项目地址: https://gitcode.com/GitHub_Trending/fa/FactoryBluePrints FactoryBluePrints 项目作为戴森球计划游戏中最…...

编程新知 2026/5/23 16:38:29