后端工程师快速使用axios

文章目录

    • 01.AJAX 概念和 axios 使用
      • 模板
      • 目标
      • 讲解
      • 代码解析
      • 案例
        • 前端
        • 后端
        • 结果截图
    • 02.URL 查询参数
      • 模板
      • 目标
      • 讲解
      • 案例
        • 前端
        • 后端
        • 结果截图
    • 03.常用请求方法和数据提交
      • 模板
      • 目标
      • 讲解
      • 案例
        • 前端
        • 后端
        • 结果截图
    • 04.axios 错误处理
      • 模板
      • 目标
      • 讲解
      • 案例
        • 前端
        • 后端
        • 结果截图

01.AJAX 概念和 axios 使用

模板

axios({url: '目标资源地址'
}).then((result) => {// 对服务器返回的数据做后续处理
})

注：url中的地址可以直接使用相对路径，不必写完整的IP或域名

例如：

url: ‘localhost:8080/test3’ 可以写成 url: ‘/test3’

目标

了解 AJAX 概念并掌握 axios 库基本使用

讲解

  1. 什么是 AJAX ? mdn

    • 使用浏览器的 XMLHttpRequest 对象 与服务器通信

    • 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

      image-20230403173156484

  2. 什么是服务器？

    • 可以暂时理解为提供数据的一台电脑

  3. 为何学 AJAX ?

    • 以前我们的数据都是写在代码里固定的, 无法随时变化
    • 现在我们的数据可以从服务器上进行获取，让数据变活

  4. 怎么学 AJAX ?

    • 这里使用一个第三方库叫 axios, 后续在学习 XMLHttpRequest 对象了解 AJAX 底层原理
    • 因为 axios 库语法简单，让我们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也使用 axios 库与服务器通信

  5. 需求：从服务器获取省份列表数据，展示到页面上（体验 axios 语法的使用）

    获取省份列表数据 - 目标资源地址：http://hmajax.itheima.net/api/province

    • 完成效果：

      image-20230220113157010

  6. 接下来讲解 axios 语法，步骤：

  7. 引入 axios.js 文件到自己的网页中

    axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

  8. 明确axios函数的使用语法

    注意：请求的 url 地址, 就是标记资源的网址

    注意：then 方法这里先体验使用，由来后续会讲到

  9. 对应代码

<!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>AJAX概念和axios使用</title>
</head><body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><p class="my-p"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2. 使用axios函数axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)// 好习惯：多打印，确认属性名console.log(result.data.list)console.log(result.data.list.join('<br>'))// 把准备好省份列表，插入到页面document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') })</script>
</body></html>

代码解析

  1. document.querySelector('.my-p'): 这一部分使用了 querySelector 方法来获取文档中具有 class 为 my-p 的第一个元素。querySelector 方法返回匹配到的第一个元素，如果没有找到匹配的元素，则返回 null。
  2. .innerHTML: 这是一个 DOM 元素的属性，用于获取或设置元素的 HTML 内容。在这里，它被用于设置元素的 HTML 内容。
  3. result.data.list.join('<br>'): 这部分使用了 join 方法，将 result.data.list 数组中的每个元素用 <br> 连接起来成为一个字符串。join 方法会将数组的元素以指定的分隔符连接起来。在这里，分隔符是 <br>，表示换行。

案例

前端
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>axios({url: 'http://localhost:8080/test'}).then(result => {console.log(result)console.log(result.data.data)console.log(result.data.data.join('<br>'))// document.querySelector('.my-p').innerHTML=result.data.list.join('<br>')var divs = document.getElementsByClassName('my-p');var div1=divs[0];div1.innerHTML=result.data.data.join('<br>')});
</script>
<p class="my-p"></p>
</body>
</html>
后端
package nuage.controller;import nuage.common.R;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping
public class TestController {@GetMapping("/test")public R<List<String>> test() {List<String> list = new ArrayList<>();list.add("a");list.add("b");list.add("c");return R.success(list);}
}
结果截图

image-20240315111242951

02.URL 查询参数

模板

axios({url: '目标资源地址',params: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

目标

掌握-通过URL传递查询参数，获取匹配的数据

讲解

  1. 什么是查询参数 ?

    • 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据

    • 举例：查询河北省下属的城市列表，需要先把河北省传递给服务器

      image-20230404101257205

  2. 查询参数的语法 ？

    • 在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
    • 参数名一般是后端规定的，值前端看情况传递即可

  3. axios 如何携带查询参数?

    • 使用 params 选项即可

      查询城市列表的 url地址：http://hmajax.itheima.net/api/city

      参数名：pname （值要携带省份名字）

  4. 需求：获取“河北省”下属的城市列表，展示到页面，对应代码：

    <!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>查询参数</title>
</head>
<body><!-- 城市列表: http://hmajax.itheima.net/api/city参数名: pname值: 省份名字--><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/city',// 查询参数params: {pname: '辽宁省'}}).then(result => {console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')})</script>
</body>
</html>

案例

前端
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>axios({url: 'http://localhost:8080/test2',params: {name: '河北省'}}).then(result => {console.log(result);var list = document.getElementsByClassName("my-p");var list1 = list[0];list1.innerHTML=result.data.data.join('<br>')});</script>
<p class="my-p"></p>
</body>
</html>
后端
package nuage.controller;import nuage.common.R;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping
public class TestController {@GetMapping("/test2")public R<List<String>> test2(String name) {List<String> list = new ArrayList<>();list.add(name);list.add("a");list.add("b");list.add("c");return R.success(list);}
}
结果截图

image-20240315111750353

03.常用请求方法和数据提交

模板

axios({url: '目标资源地址',method: '请求方法',data: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

目标

掌握如何向服务器提交数据，而不单单是获取数据

讲解

  1. 想要提交数据，先来了解什么是请求方法

    • 请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作

    • 前面我们获取数据其实用的就是GET请求方法，但是axios内部设置了默认请求方法就是GET，我们就没有写

    • 但是提交数据需要使用POST请求方法

      请求方法操作
      GET获取数据
      POST数据提交
      PUT修改数据（全部）
      DELETE删除数据
      PATCH修改数据（部分）

  2. 什么时候进行数据提交呢？

    • 例如：多端要查看同一份订单数据，或者使用同一个账号进行登录，那订单/用户名+密码，就需要保存在服务器上，随时随地进行访问

      image-20230404104328384

      image-20230404104333584

    3.需求：注册账号，提交用户名和密码到服务器保存

    注册用户 URL 网址：http://hmajax.itheima.net/api/register

    请求方法：POST

    参数名：

    username：用户名（要求中英文和数字组成，最少8位）

    password：密码（最少6位）

    image-20230404104350387

    4.正确代码如下：

    /*注册用户：http://hmajax.itheima.net/api/register请求方法：POST参数名：username：用户名（中英文和数字组成，最少8位）password：密码  （最少6位）目标：点击按钮，通过axios提交用户和密码，完成注册
*/
document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username: 'itheima007',password: '7654321'}})
})

    注：PUT和DELETE与POST类似，只需要将method改为PUT或DELETE即可

    实现路径参数，只需要在url后面拼接字符串即可,如：url: '/user/delet/' + row.id,row.id根据上下文查询

案例

前端
<!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>常用请求方法和数据提交</title>
</head><body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>function dianji() {// console.log(123)var username = document.getElementsByClassName("username")[0].value;var password = document.getElementsByClassName("password")[0].value;console.log(username);axios({url: 'http://localhost:8080/test3',method: 'POST',data: {username: username,password: password}}).then(result=>{console.log(result.data);alert(result.data.data)})}</script>
用户名：<input class="username" type="text" ><br>
密码：<input class="password" type="password"><br>
<button class="bt" onclick="dianji()">注册</button>
</body></html>
后端
package nuage.controller;import nuage.common.R;
import nuage.entity.User;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping
public class TestController {@PostMapping("/test3")public R<String> test3(@RequestBody User user) {System.out.println(user);return R.success("注册成功");}
}
package nuage.entity;public class User {private String username;private String password;//get和set方法自己补充
}
结果截图

image-20240315164558128

04.axios 错误处理

模板

axios({// ...请求选项
}).then(result => {// 处理成功数据
}).catch(error => {// 处理失败错误
})

目标

掌握接收 axios 响应错误信息的处理语法

讲解

  1. 如果注册相同的用户名，则会遇到注册失败的请求，也就是 axios 请求响应失败了，你会在控制台看到如图的错误：

    image-20230220131753051

  2. 在 axios 语法中要如何处理呢？

    • 因为，普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上

  3. 需求：再次重复注册相同用户名，提示用户注册失败的原因

    image-20230404104440224

    image-20230404104447501

  4. 对应代码

    document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'itheima007',password: '7654321'}}).then(result => {// 成功console.log(result)}).catch(error => {// 失败// 处理错误信息console.log(error)console.log(error.response.data.message)alert(error.response.data.message)})
})

案例

因为项目中我们的错误信息也是返回正确的状态码，所以不能写在.catch中，我们可以根据后端传过来的code来进行判断

前端
<!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>常用请求方法和数据提交</title>
</head><body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>function dianji() {// console.log(123)var username = document.getElementsByClassName("username")[0].value;var password = document.getElementsByClassName("password")[0].value;console.log(username);axios({url: 'http://localhost:8080/test3',method: 'POST',data: {username: username,password: password}}).then(result => {if (result.data.code === 1) {console.log(result);alert(result.data.data)}else if (result.data.code === 0) {console.log(result);alert(result.data.msg)}}).catch(error => {});}</script>
用户名：<input class="username" type="text" ><br>
密码：<input class="password" type="password"><br>
<button class="bt" onclick="dianji()">注册</button>
</body></html>
后端
package nuage.controller;import nuage.common.R;
import nuage.entity.User;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping
public class TestController {@PostMapping("/test3")public R<String> test3(@RequestBody User user) {if (user.getUsername().equals("nuage")) {return R.error("注册失败");}System.out.println(user);return R.success("注册成功");}
}
结果截图

image-20240315173307346

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

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

相关文章

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：ListItem）

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：ListItem）

用来展示列表具体item&#xff0c;必须配合List来使用。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。该组件的父组件只能是List或者ListItemGroup。 子组件 可以包含单个子组件。 接口 从API…
阅读更多...
ASP.NET Core 8.0 WebApi 从零开始学习JWT登录认证

ASP.NET Core 8.0 WebApi 从零开始学习JWT登录认证

文章目录 前言相关链接Nuget选择知识补充JWT不是加密算法可逆加密和不可逆加密 普通Jwt&#xff08;不推荐&#xff09;项目环境Nuget 最小JWT测试在WebApi中简单使用简单使用运行结果 WebApi 授权&#xff0c;博客太老了&#xff0c;尝试失败 WebApi .net core 8.0 最新版Jwt …
阅读更多...
笔记本插入耳机没有声音

笔记本插入耳机没有声音

笔记本插入耳机没有声音&#xff0c;有可能是因为音频设置问题 打开声音小喇叭&#xff0c;选择耳机频道就好了
阅读更多...
【Qt图形界面引擎（一）】：第一个Qt程序

【Qt图形界面引擎（一）】：第一个Qt程序

跨平台图形界面引擎&#xff0c;接口简单&#xff0c;易上手&#xff0c;一定程度简化内存。 Qt发展史 1991年由Qt Company开发的跨平台C图形用户界面应用程序开发框架2008年&#xff0c;Qt Company科技被诺基亚公司收购&#xff0c;Qt也因此成为诺基亚旗下的编程语言工具2012…
阅读更多...
数字人解决方案— SadTalker语音驱动图像生成视频原理与源码部署

数字人解决方案— SadTalker语音驱动图像生成视频原理与源码部署

简介 随着数字人物概念的兴起和生成技术的不断发展&#xff0c;将照片中的人物与音频输入进行同步变得越来越容易。然而&#xff0c;目前仍存在一些问题&#xff0c;比如头部运动不自然、面部表情扭曲以及图片和视频中人物面部的差异等。为了解决这些问题&#xff0c;来自西安…
阅读更多...
【软件工程】一份完整的软件工程实践论文格式

【软件工程】一份完整的软件工程实践论文格式

一份完整的软件工程实践论文格式 记录一下&#xff0c;以备不时之需&#xff01; 目 录 第1章 绪 论 1.1 课题背景 1.2 课题意义 1.3 国内外现状 2 第2章 系统关键技术 4 2.1 开发技术 4 2.2 MVVM模式 4 2.3 MySQL数据库 4 2.4 B/S结构 5 2.5 框架介绍 5 2.6 Vue.js主要功能 6…
阅读更多...
sentinel熔断降级

sentinel熔断降级

熔断降级 Slot 责任链上的最后一环&#xff1a;熔断降级 DegradeSlot,熔断降级作为保护系统的一种强大手段,可以根据慢调用、异常比例和异常数进行熔断,并自定义持续时间以实现系统保护 规则配置 规则类中属性解析 与控制面板对应 // 其中资源名称在 AbstractRule 里。 pu…
阅读更多...
LiveGBS流媒体平台GB/T28181功能-大屏播放上大屏支持轮巡播放分屏轮巡值守播放监控视频轮播大屏轮询播放轮播

LiveGBS流媒体平台GB/T28181功能-大屏播放上大屏支持轮巡播放分屏轮巡值守播放监控视频轮播大屏轮询播放轮播

LiveGBS支持-大屏播放上大屏支持轮巡播放分屏轮巡值守播放监控视频轮播大屏轮询播放轮播 1、轮播功能2、分屏展示3、选择轮播通道4、配置轮播间隔(秒)5、点击开始轮播6、轮播停止及全屏7、搭建GB28181视频直播平台 1、轮播功能 视频监控项目使用过程中&#xff0c;有时需要大屏…
阅读更多...
聊聊Go程序是如何运行的

聊聊Go程序是如何运行的

写在文章开头 Go语言是一门编译语言&#xff0c;其工作过程即直接通过编译生成各大操作系统的机器码即可直接执行&#xff0c;所以这篇文章笔者就从底层汇编码的角度聊一聊Go语言是如何运行的。 Hi&#xff0c;我是 sharkChili &#xff0c;是个不断在硬核技术上作死的 java c…
阅读更多...
IntelliJ IDEA 设置运行时环境变量

IntelliJ IDEA 设置运行时环境变量

背景 博主要测试langchain4j&#xff0c;运行时需要OPENAI_BASE_URL和OPENAI_API_KEY这两个环境变量的值。 临时设置 Run -> Edit Configurations -> Edit Environmental Variables 永久设置 在系统环境变量中设置&#xff0c;教程无数。 注意&#xff1a;windows在…
阅读更多...
MATLAB教程

MATLAB教程

目录 前言一、MATLAB基本操作1.1 界面简介1.2 搜索路径1.3 交互式命令操作1.4 帮助系统 二、MATLAB语言基础2.1 数据类型2.2 MATLAB运算2.2.1 算数运算2.2.2 关系运算2.2.3 逻辑运算 2.3 常用内部函数2.4 结构数据与单元数据 三、MATLAB程序设计3.1 M文件3.2 函数文件3.3 程序控…
阅读更多...
c#接口 axios的get请求url过长时该怎么做

c#接口 axios的get请求url过长时该怎么做

今天又碰到了&#xff0c;大托参数拼在url里用get传 1、改服务器最大字数限制&#xff08;还是会错&#xff09; 2、改post&#xff08;有些还要跟着把[FromUri]改成[FromBody]&#xff09;
阅读更多...
windows查看局域网内所有已使用的IP IP扫描工具 扫描网段下所有的IP Windows环境下

windows查看局域网内所有已使用的IP IP扫描工具 扫描网段下所有的IP Windows环境下

推荐使用&#xff1a; Advanced IP Scanner 官网下载&#xff1a; https://www.advanced-ip-scanner.com/
阅读更多...
sqllab第35-45关通关笔记

sqllab第35-45关通关笔记

35关知识点&#xff1a; 宽字节注入数值型注入错误注入 payload:id1andextractvalue(1,concat(0x7e,database(),0x7e))0--联合注入 payload:id0unionselect1,database(),version()-- 36关知识点&#xff1a; 字符型注入宽字节注入错误注入 payload:id1%df%27andextractvalue(…
阅读更多...
广州大彩科技新品发布:大彩科技COF系列2.4寸串口屏发布！

广州大彩科技新品发布:大彩科技COF系列2.4寸串口屏发布！

一、产品介绍 此次发布的是S系列平台2.4寸COF超薄结构串口屏&#xff0c;分辨率为240*320&#xff0c;该平台采用了Cortex-M3内核的处理器&#xff0c;内置了2Mbyte PSRAM和64Mbit FLASH&#xff0c;是专为小尺寸串口屏设计的MCU&#xff0c;精简了外围电路。 该平台默认支持大…
阅读更多...
青海200MW光伏项目 35kV开关站图像监控及安全警示系统

青海200MW光伏项目 35kV开关站图像监控及安全警示系统

一、背景 随着我国新能源产业的快速发展&#xff0c;光伏发电作为清洁能源的重要组成部分&#xff0c;得到了国家政策的大力扶持。青海作为我国光伏资源丰富地区&#xff0c;吸引了众多光伏项目的投资建设。在此背景下&#xff0c;为提高光伏发电项目的运行效率和安全性能&…
阅读更多...
【C++】堆区空间的申请和释放--- 2024.3.19

【C++】堆区空间的申请和释放--- 2024.3.19

目录 C和C的区别&#xff08;申请堆区空间&#xff09;C中的new和delete结束语 C和C的区别&#xff08;申请堆区空间&#xff09; 在c语言中&#xff0c;在遇到需要申请一块堆区空间时&#xff0c;我们往往会使用malloc申请&#xff0c;使用free进行释放&#xff0c;但是为什么…
阅读更多...
数据可信流通：从运维信任到技术信任

数据可信流通：从运维信任到技术信任

1.数据可信流通概念 "数据可信流通"通常指的是确保数据在不同系统、应用程序或者组织之间的传输和交换过程中的可信性、完整性和安全性。在数据流通的过程中&#xff0c;确保数据的真实性、完整性和保密性是非常重要的&#xff0c;尤其是涉及到敏感信息或者重要数据…
阅读更多...
GateWay路由规则

GateWay路由规则

Spring Cloud GateWay 帮我们内置了很多 Predicates功能&#xff0c;实现了各种路由匹配规 则&#xff08;通过 Header、请求参数等作为条件&#xff09;匹配到对应的路由 1 时间点后匹配 server:port: 8888 spring:application:name: gateway-servicecloud:nacos:discovery:…
阅读更多...
mysql虚拟列Generated Column

mysql虚拟列Generated Column

目录​​​​​​​ 1、Generated Column简介 生成的列定义具有以下语法&#xff1a; 2、实践 2.1 存储格式为json字段增加索引 2.2 手机号后四位 3、虚拟列索引介绍 3.1 虚拟列索引的限制 3.1.1 Virtal Generated Column 4、阿里云数据库环境是否支持 下期扩展&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023