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

vue之axios基本使用

news 2026/4/1 18:47:18

文章目录

  • 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

嵌入式系统中的累加和校验算法原理与实现

1. 累加和校验算法概述在嵌入式系统开发中&#xff0c;数据通信的可靠性至关重要。想象一下&#xff0c;当你通过无线模块控制一台工业机器人时&#xff0c;如果传输的运动指令数据出现错误&#xff0c;可能导致机械臂做出完全不可预测的动作&#xff0c;轻则损坏产品&#xff…...

编程新知 2026/4/1 18:14:38

AWCII 040 CPU模块

AWCII 040 CPU 模块AWCII 040 是工业自动化控制系统中的中央处理单元&#xff08;CPU 模块&#xff09;&#xff0c;主要用于执行控制程序、数据运算及系统管理&#xff0c;是整个控制系统的核心“大脑”。一、基本概述AWCII 040 CPU 模块集成了处理器、存储单元及系统管理功能…...

编程新知 2026/4/1 17:41:25

全能解析工具UniExtract2：多格式提取的效率革命

全能解析工具UniExtract2&#xff1a;多格式提取的效率革命 【免费下载链接】UniExtract2 Universal Extractor 2 is a tool to extract files from any type of archive or installer. 项目地址: https://gitcode.com/gh_mirrors/un/UniExtract2 在数字化信息处理领域&…...

编程新知 2026/4/1 17:26:59

为什么数据质量成为人工智能领域最重要的问题

简而言之&#xff1a;传统的基于人工编写规则和被动检查的数据质量体系&#xff0c;从未针对智能体人工智能进行设计。到2026年&#xff0c;当自主代理处理错误数据时&#xff0c;没有人会介入以发现问题。那些在人工智能领域取得成功的组织&#xff0c;并非从更好的模型入手&a…...

编程新知 2026/4/1 17:07:45

为什么90%的词库转换都会失败？输入法词库迁移的终极解决方案：全方位指南

为什么90%的词库转换都会失败&#xff1f;输入法词库迁移的终极解决方案&#xff1a;全方位指南 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 在数字化时代&#x…...

编程新知 2026/4/1 16:24:43

从‘翻车’到稳定：手把手教你用Matlab极点配置驯服小车倒立摆（附Simulink模型）

用Matlab极点配置实现小车倒立摆的精准控制&#xff1a;从理论到Simulink实战 倒立摆系统作为控制理论中的经典案例&#xff0c;完美展现了动态系统稳定控制的挑战与魅力。想象一下&#xff0c;一根垂直向上的杆子放在移动小车上&#xff0c;任何微小的扰动都会导致杆子倾倒——…...

编程新知 2026/4/1 14:20:08

别再死记硬背了！用FPGA和Verilog HDL手把手带你玩转数字电路设计（附避坑指南）

用FPGA和Verilog HDL玩转数字电路设计&#xff1a;从理论到实战的避坑指南 数字电路设计常常让初学者感到抽象和枯燥——真值表、状态机、时序约束这些概念看似冰冷&#xff0c;但当你亲手用FPGA开发板点亮第一个LED时&#xff0c;一切都会变得生动起来。本文将带你用Xilinx Ar…...

编程新知 2026/4/1 12:54:27

视觉隐形：在亚马逊，为何模仿“IBM式缩写”是新品牌的认知坟墓

在亚马逊这个由清晰搜索和快速决策驱动的商业世界&#xff0c;无数新卖家犯下一个致命的战略性错误&#xff1a;他们看到“IBM”、“GE”等巨无霸公司使用缩写名&#xff0c;便误以为这是一种高级、专业的品牌姿态&#xff0c;于是为自己的新品牌也注册了诸如“KMZ Tech”、“V…...

编程新知 2026/4/1 12:52:26

基于python的一线式酒店管理系统

目录 同行可拿货,招校园代理 ,本人源头供货商功能模块设计技术实现要点扩展功能建议异常处理机制 项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作 同行可拿货,招校园代理 ,本人源头供货商 功能模块设计 前台管理模块 客房预…...

编程新知 2026/4/1 11:37:42

智能抢购京东茅台：零基础上手的成功率提升指南

智能抢购京东茅台&#xff1a;零基础上手的成功率提升指南 【免费下载链接】jd_maotai 抢京东茅台脚本&#xff0c;定时自动触发&#xff0c;自动预约&#xff0c;自动停止 项目地址: https://gitcode.com/gh_mirrors/jd/jd_maotai 在电商抢购的激烈竞争中&#xff0c;这…...

编程新知 2026/4/1 11:19:37