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

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

news 2025/12/15 11:17:36

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：<script src"https://unpkg.com/axios/dist/axios.min.js"></script> 注：使用 CDN 链接就可以不需要去下载对应的 js 文件到本地，只需要联网即可使用，可以减少项目的体积 <!DOCTYPE html> <…...

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

Vue中嵌入原生HTML页面

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

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

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

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

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

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

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

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

学习MySQL ENUM数据类型

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

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

88.合并两个有序数组

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

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

第一章导包 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的工作原理？ Nginx的工作原理基于事件驱动模型和异步非阻塞I/O处理机制。具体来说，Nginx接收到客户端的请求后，会将该请求映射到配置文件中指定的location block。这个过程中，Nginx本身并不执行实际的工作&#…...

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

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

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

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

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

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

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

前端入门第二天

目录一、列表、表格、表单二、列表（布局内容排列整齐的区域） 1.无序列表（不规定顺序） 2.有序列表（规定顺序） 3.定义列表（一个标题多个分类） 三、表格 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编程时，epoll_wait 和 select 都是用于多路I/O复用的系统调用，但是它们的行为可以设置为阻塞和非阻塞模式，这取决于调用它们时所使用的参数。让我们分别看看 epoll…...

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

Java 数据抓取

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

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

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

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

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

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

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

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

初探分布式链路追踪

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

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

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

说说你对闭包的理解？闭包使用场景 #一、是什么一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（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

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

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

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2025/12/10 21:25:18

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2025/12/10 15:33:55

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。核心优势对比基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/12/10 1:18:36

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/12/9 4:34:34