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

vue之axios基本使用

news 2025/11/12 15:07:53

文章目录

  • 1. axios 网络请求库
  • 2. axios+vue

在这里插入图片描述

1. axios 网络请求库

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>/*接口1:随机笑话请求地址:https://autumnfish.cn/api/joke/list请求方法:get请求参数:num(笑话条数,数字)响应内容:随机笑话*/document.querySelector(".get").onclick = function () {axios.get("https://autumnfish.cn/api/joke/list?num=3")//测试错误触发事件// axios.get("https://autumnfish.cn/api/joke/list1234?num=6").then(function (response) {console.log(response);},function(err){console.log(err);})}/*接口2:用户注册请求地址:https://autumnfish.cn/api/user/reg请求方法:post请求参数:username(用户名,字符串)响应内容:注册成功或失败*/document.querySelector(".post").onclick = function () {axios.post("https://autumnfish.cn/api/user/reg",{username:"雲兮动人"}).then(function(response){console.log(response);},function (err) {console.log(err);})}</script>
</body>
  • get请求结果，获取到三条笑话结果
    在这里插入图片描述
  • get请求，指定不存在的接口，返回错误信息
    在这里插入图片描述
  • post请求，指定 username
    在这里插入图片描述
  • 再次注册时，发现已经存在同名，不能注册了
    在这里插入图片描述
  • 把post请求地址api改成不存在的，结果返回错误，跟get请求的回调函数一样返回错误的信息
    在这里插入图片描述
  • 在控制台的Network下查看是不是基于Ajax，点击get、post请求，查看
    在这里插入图片描述

2. axios+vue

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 案例：获取笑话
<body>
<div id="app"><input type="button" value="获取笑话" @click="getJoke"><p> {{ joke }}</p>
</div>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>/*接口:随机获取一条笑话请求地址:https://autumnfish.cn/api/joke请求方法:get请求参数:无响应内容:随机笑话*/var app = new Vue({el:"#app",data:{joke:"很好笑的笑话"},methods: {getJoke:function(){// console.log(this.joke);var that = this;axios.get("https://autumnfish.cn/api/joke").then(function(response){//console.log(response)console.log(response.data);// console.log(this.joke);that.joke = response.data;},function (err) {  })}},})
</script>
</body>

在这里插入图片描述

  • 点击按钮后，就会改变一次获取到笑话的内容
    在这里插入图片描述
    在这里插入图片描述

相关文章：

vue之axios基本使用

文章目录 1. axios 网络请求库2. axiosvue 1. axios 网络请求库 <body> <input type"button" value"get请求" class"get"> <input type"button" value"post请求" class"post"> <!-- 官网提供…...

编程日记 2024/12/28 21:20:53

三只脚的电感是什么东西？

最近在做加湿器&#xff0c;把水雾化的陶瓷片需要有专门的驱动电路。 我参考了某宝卖家的驱动板以及网上的开源项目&#xff0c;发现了驱动电路的核心就是一个三脚电感。 在此之前我都没注意过这玩意&#xff0c;三脚电感不也还是电感嘛&#xff1f; 今天我们就来看看三脚电…...

编程日记 2024/12/28 21:17:47

【数据库学习笔记】SQL触发器（例题+代码）

数据库SQL 1、触发器概念 &#xff08;1&#xff09;触发器&#xff08;trigger&#xff09;是用户定义在关系表上的一类由事件驱动的存储过程&#xff0c;由服务器自动激活。 &#xff08;2&#xff09;触发器可进行更为复杂的检查和操作&#xff0c;具有更精细和更强大的数…...

编程日记 2024/12/28 21:16:46

Unittest02|TestSuite、TestRunner、HTMLTestRunner、处理excel表数据、邮件接收测试结果

目录 八、测试套件TestSuite和测试运行器TestRunner 1、基本概念 2、创建和使用测试套件 3、 自动发现测试用例、创建测试套件、运行测试 4、生成html的测试报告&#xff1a;HTMLTestRunner 1️⃣导入HTMLTestRunner模块 2️⃣运行测试用例并生成html文件 九、unittest…...

编程日记 2024/12/28 21:14:44

BAPI_BATCH_CHANGE在更新后不自动更新批次特征

1、问题介绍 在CL03中看到分类特性配置了制造日期字段&#xff0c;并绑定了生产日期字段MCH1~HSDAT MSC2N修改批次的生产日期字段时&#xff0c;自动修改了对应的批次特性 但是通过BAPI&#xff1a;BAPI_BATCH_CHANGE修改生产日期时&#xff0c;并没有更新到批次特性中 2、BAPI…...

编程日记 2024/12/28 21:10:41

顶会评测集解读-AlignBench: 大语言模型中文对齐基准

评测集社区 CompssHub 作为司南 OpenCompass大模型评测体系的重要组成部分&#xff0c;致力于简化并加快研究人员和行业人士搜索和使用评测集的过程。评测集社区 CompssHub 目前已收录了学科、推理、知识、代码等12个方向的评测集&#xff0c;欢迎大家探索。 为了将评测集社区…...

编程日记 2024/12/28 21:08:36

MySQL外键类型与应用场景总结：优缺点一目了然

前言&#xff1a; MySQL的外键简介&#xff1a;在 MySQL 中&#xff0c;外键 (Foreign Key) 用于建立和强制表之间的关联&#xff0c;确保数据的一致性和完整性。外键的作用主要是限制和维护引用完整性 (Referential Integrity)。 主要体现在引用操作发生变化时的处理方式&…...

编程日记 2024/12/28 21:07:33

【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的网上书店管理系统的设计与实现

开题报告 本研究论文主要介绍了基于Spring Boot框架开发的全面网上书店管理系统的构建与实现。该系统以用户为核心&#xff0c;提供了丰富的个性化服务功能。首先&#xff0c;系统支持用户进行便捷的登录注册操作&#xff0c;并具备安全可靠的密码修改机制&#xff0c;同时允许…...

编程日记 2024/12/28 21:03:26

力扣面试题 - 40 迷路的机器人 C语言解法

题目&#xff1a; 设想有个机器人坐在一个网格的左上角&#xff0c;网格 r 行 c 列。机器人只能向下或向右移动&#xff0c;但不能走到一些被禁止的网格&#xff08;有障碍物&#xff09;。设计一种算法&#xff0c;寻找机器人从左上角移动到右下角的路径。 网格中的障碍物和空…...

编程日记 2024/12/28 21:00:21

ElementPlus 自定义封装 el-date-picker 的快捷功能

文章目录 需求分析 需求 分析 我们看到官网上给出的案例如下&#xff0c;但是不太满足我们用户想要的快捷功能&#xff0c;因为不太多&#xff0c;因此需要我们自己封装一些&#xff0c;方法如下 外部自定义该组件的快捷内容 export const getPickerOptions () > {cons…...

编程日记 2024/12/28 20:59:20

二百八十二、ClickHouse——删除Linux中的ClickHouse

一、目的 由于ClickHosue的库表发生变化&#xff0c;需要删除原有的表结构数据&#xff0c;才能直接把脚本里文件重新安装 二、删除步骤 1、关闭ClickHouse服务 systemctl stop clickhouse-server 2、卸载ClickHouse软件包 sudo yum remove clickhouse-server clickhouse…...

编程日记 2024/12/28 20:57:16

c++ 命名空间使用规则

之前一直没搞懂为什么c 用了using namespace std;就能直接调用内部的类&#xff0c;直接调用内部函数 今天试着实现了一下&#xff1a; #include <iostream>// 命名空间 namespace mp{ class point{public: // 构造函数point(int x 0, int y 0) : x(x), y(y) {}//…...

编程日记 2024/12/28 20:56:14

从 ELK Stack 到简单 — Elastic Cloud Serverless 上的 Elastic 可观察性

作者&#xff1a;来自 Elastic Bahubali Shetti, Chris DiStasio 宣布 Elastic Cloud Serverless 上的 Elastic Observability 正式发布 — 一款完全托管的可观察性解决方案。 随着组织规模的扩大&#xff0c;一个能够处理分布式云环境的复杂性并提供实时洞察的可观察性解决方…...

编程日记 2024/12/28 20:55:13

Pandas系列|第二期：Pandas中的数据结构

1.Pandas中的数据结构&#xff1a;Series和DataFrame Pandas 的主要数据结构是 Series &#xff08;一维数据&#xff09;与 DataFrame&#xff08;二维数据&#xff09;&#xff0c;这两种数据结构足以处理金融、统计、社会科学、工程等领域里的大多数典型用例。 Series 是一…...

编程日记 2024/12/28 20:53:11

Hadoop中MapReduce过程中Shuffle过程实现自定义排序

文章目录 Hadoop中MapReduce过程中Shuffle过程实现自定义排序一、引言二、实现WritableComparable接口1、自定义Key类 三、使用Job.setSortComparatorClass方法2、设置自定义排序器3、自定义排序器类 四、使用示例五、总结 Hadoop中MapReduce过程中Shuffle过程实现自定义排序 一…...

编程日记 2024/12/28 20:52:11

数位dp-acwing

题目&#xff1a;Windy数 1083. Windy数 - AcWing题库 分析 不能有前导0&#xff0c;初始化的时候需要有前导0&#xff0c;因为除了最高位数其他位数可以。 windy &#xff1a; 2 5 1 类似这样的数 第二位与第一位相差3 > 2 分类讨论 &#xff1a; 1. 位数跟 n 同位数 的…...

编程日记 2024/12/28 20:51:10

智慧园区小程序开发制作功能介绍

智慧园区小程序开发制作功能介绍 智慧园区小程序系统作为一款面向园区企业的一站式线上服务平台&#xff0c;可为企业提供数智化的园区办公服务。智慧园区小程序功能介绍 1、园区公告、政策信息查看足不出户掌握最新动态&#xff0c;“园区公告、政策信息”等信息。首页点击对应…...

编程日记 2024/12/28 20:50:06

STM32高级 物联网之Wi-Fi通讯

Wi-Fi基础知识 Wi-Fi由来 Wi-Fi，又称“无线网路”，是Wi-Fi联盟的商标，一个基于IEEE 802.11标准的无线局域网技术。“Wi-Fi”常写作“WiFi”或“Wifi”，但是这些写法并没有被Wi-Fi联盟认可。 Wi-Fi这个术语经常被误以为是指无线保真（Wireless Fidelity），类似历史悠久的…...

编程日记 2024/12/28 20:48:05

LLM预训练recipe — 摘要版

文章核心主题&#xff1a; 本文深入探讨了从零开始进行大型语言模型&#xff08;LLM&#xff09;预训练&#xff08;pretrain&#xff09;的各个环节&#xff0c;侧重方法论和实践细节&#xff0c;旨在普及预训练过程中的关键步骤、常见问题及避坑技巧&#xff0c;而非技术原理…...

编程日记 2024/12/28 20:47:03

波动理论、传输线和S参数网络

波动理论、传输线和S参数网络 传输线 求解传输线方程 对于传输线模型&#xff0c;我们通常用 R L G C RLGC RLGC 来表示&#xff1a; 其中 R R R 可以表示导体损耗&#xff0c;由于电子流经非理想导体而产生的能量损耗。 G G G 表示介质损耗&#xff0c;由于非理想电介质…...

编程日记 2024/12/28 20:41:57

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/11/12 8:17:34

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/11/7 20:35:11

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/11/8 23:20:55

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/11/11 23:37:33

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/11/10 16:31:28

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/11/12 5:14:55

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/11/12 5:17:22