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

4 前端前置技术（上）：AJAX技术、Axios技术（前端发送请求）

news 来源：原创 2025/5/9 15:04:29

文章目录

前言
一、Ajax技术（从服务端获取数据，发送各种请求）
- 0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试
- 1 基本概念
- 2 原生Ajax使用示例（几年前的早期用法）
二、 Axios技术(对原生的Ajax进行了封装)
- 1 基本概念
- - （1）Axios是什么
  - （2）常见的请求方式有哪些？
- 2 快速入门
- - 示例1：入门案例
  - 示例2：入门案例+绑定事件
- 3 Axios通用请求格式语法
- - 示例1：params传递参数发送get请求
  - 示例2：data传递参数发送post请求
  - 综合案例：地区查询
- 4 axios 错误处理

前言

本课程所有接口采用apifox模拟，全部使用的是
B站-AJAX和黑马头条-数据管理平台
这个里面的接口进行测试

一、Ajax技术（从服务端获取数据，发送各种请求）

参考视频
官方文档

0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试

参考视频

接口文档管理：
- 在线
  - apipost
  - apifox
  - postman等等
- 离线
  - word
  - md

在线的apipost这些测试工具功能很多，具体的后面不断深入学习慢慢了解这个测试工具，这个测试工具必须会用，后面无论是前端还是后端都需要频繁使用这个工具来进行测试。

下面的Ajax技术案例中的后端返回json数据都是通过这些接口工具的mock功能模拟生成的。

1 基本概念

学习本节前建议先去学习什么是GET、POST请求这些

概念: Asynchronous JavaScript And XML，异步的JavaScript和XML。
Ajax技术是一个异步交互技术，通过这个Ajax技术我们就可以从服务端获取数据
作用:
- 数据交换: 通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互: 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如: 搜索联想、用户名是否可
  用的校验等等。
同步与异步请求区别
- 举一个例子就好理解了
  我们在点击某些页面的时候，如果网络不好界面就会一直卡在转圈圈的界面，我们不能进行任何操作，这就是同步请求；如果我们点击某些页面就算网络不好我们还是可以操作页面，例如我们下载文件这个请求就是典型的异步请求。
Ajax技术就是一项发送异步请求的技术了。

2 原生Ajax使用示例（几年前的早期用法）

太繁琐，现在已经淘汰，了解一下
可以使用网页版的apifox、或者apipost（个人感觉apifox更好用，界面更加清晰，apipost界面有点复杂，好多功能要摸索）生成一个get请求响应数据作为测试
使用
- （1）准备数据地址: http://hmajax.itheima.net/api/province
  示例接口文档：获取-省份列表
- （2）创建XMLHttpRequest对象: 用于和服务器交换数据
- （3）向服务器发送请求
- （4）获取服务器响应数据

示例：

<body><input type="button" value="获取数据" onclick = "getData()"><div id="div1"></div>
</body><script>function getData(){// 1 创建 XMLHttpRequest 对象var xmlHttpRequest = new XMLHttpRequest();// 2 发送异步请求xmlHttpRequest.open("GET","http://hmajax.itheima.net/api/province");xmlHttpRequest.send(); // 发送请求// 3 获取服务器响应的数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){      // 判断服务器是否响应成功//var data = JSON.parse(xmlHttpRequest.responseText);document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;// xmlHttpRequest.responseText ：返回服务器响应的数据，以字符串形式返回}}}</script>

查看结果：
在这里插入图片描述

代码解释
- 官方文档

二、 Axios技术(对原生的Ajax进行了封装)

1 基本概念

（1）Axios是什么

参考视频

介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网(使用文档等): https://www.axios-http.cn/
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

（2）常见的请求方式有哪些？

请求方法: 对服务器资源，要执行的操作
在这里插入图片描述

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

比较常用的就是get和post请求，其余的说实话post请求好像也都能干

2 快速入门

step1: 引入Axios的js文件
<script src=“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>
使用 axios 函数发送请求，并获取响应结果
（1）传入配置对象
（2）再用 .then 回调函数接收结果，并做后续处理
下面的语法，默认是get请求

示例1：入门案例

参考视频

需求: 请求目标资源地址，拿到省份列表数据，显示到页面
目标资源地址: http://hmajax.itheima.net/api/province
接口文档说明

<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></body><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>

结果：
在这里插入图片描述

示例2：入门案例+绑定事件

<body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><body><input type="button" value="获取数据" onclick = "getData()"><div id="div1"></div></body></body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>function getData(){// 通过axios发送异步请求,默认是GET请求axios({url: "http://hmajax.itheima.net/api/province"}).then(result =>{document.getElementById("div1").innerHTML = result.data.list.join('<br>');// 通过 result.data 获取服务器返回的的JSON对象})}</script>

结果：
在这里插入图片描述

3 Axios通用请求格式语法

通用请求格式语法

axios({method: 'post',        // 可以省略就是默认get请求, 大小写都可以 get\post\put\delete\patchurl: '/user/123',      // 注意 参数传递的那部分要写写到params里面去data: { ... },         // 写到这个里面的数据会直接发送出去, 例如json、xml等结构化数据都可以在这个里面发送出去params: { ... },       // 写到这个里面的请求参数会拼接到 url 中发送出去  http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
});

一般地：

url中要传递参数数据就写到params里面去，get,post方法可以
data里面可以传任何参数，特别是文件上传、json、xml等结构化数据都通过这个传，所以POST/PUT 数据会比较多
误区：params只能传递get数据、data只能传POST/PUT 数据（这个结合后端的接收请求接口就好理解了）
除了url，method，data，params都是可选项，根据实际情况判断是否要不要

具体的怎么发送还是要看后端接口是怎么写的
@RequestBody ：参数来源是请求体中的json等结构化数据
@RequestParam ：参数来源可以是url或者请求体的表单数据
@RequestPart：用于上传文件，参数来源是请求体中的表单数据
@PathVariable：参数来源是url中的路径变量

示例1：params传递参数发送get请求

语法: 使用 axios 提供的 params 选项
注意: axios 在运行时把参数名和值，会拼接到 url?参数名=值
城市列表: http://hmajax.itheima.net/api/city?pname=河北省

接口文档

<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>

结果：
在这里插入图片描述

示例2：data传递参数发送post请求

参考视频

需求：

接口文档

<body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户：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: 'hejuzs_01',    // 注意，重新注册用户名要修改，同样用户名不能注册两次password: 'hejuzs_01'}})})</script>
</body>

结果：
在这里插入图片描述

综合案例：地区查询

参考视频

需求：
接口文档

<!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><!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body><div class="container"><form id="editForm" class="row"><!-- 输入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" /></div><!-- 输入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" /></div></form><button type="button" class="btn btn-primary sel-btn">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 示例地区 --><li class="list-group-item">东城区</li></ul></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/// 目标: 根据省份和城市名字, 查询地区列表// 1. 查询按钮-点击事件document.querySelector('.sel-btn').addEventListener('click', () => {// 2. 获取省份和城市名字let p_name = document.querySelector('.province').valuelet c_name = document.querySelector('.city').value// 3. 基于axios请求地区列表数据axios({url: 'http://hmajax.itheima.net/api/area',params: {pname:p_name,cname:c_name}}).then(result => {// console.log(result)// 4. 把数据转li标签插入到页面上let list = result.data.listconsole.log(list)let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')console.log(theLi)document.querySelector('.list-group').innerHTML = theLi})})</script>
</body></html>

结果：
在这里插入图片描述

4 axios 错误处理

参考视频

语法:在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参
处理:注册案例，重发注册时通过弹框提示用户错误原因
需求：

<!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><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'hejuzs_01',password: 'hejuzs_01'}}).then(result => {// 成功console.log(result)}).catch(error => {      // error里面可以捕获到错误信息，如果后端的java接口抛出异常信息，返回了了一个状态码不正常的响应信息，那么就会进入到catch里面捕获到// 失败// 处理错误信息console.log(error)console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body></html>

结果：
在这里插入图片描述

4 前端前置技术（上）：AJAX技术、Axios技术（前端发送请求）

文章目录前言一、Ajax技术（从服务端获取数据，发送各种请求）0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试1 基本概念2 原生Ajax使用示例（几年前的早期用法） 二、 Axios技术(对原…...

编程日记 2025/5/9 15:04:29

三星手机为何不大力扩展中国市场？

三星在中国市场的手机销量长期低迷，主要原因可以归结为以下几点，这也解释了为什么三星可能没有大力扩展中国市场的计划： 1. 市场竞争激烈中国市场已经被华为、OPPO、vivo、小米和苹果等品牌牢牢占据，这些品牌在产品设计、本地化…...

编程日记 2025/4/27 4:33:35

Linux在x86环境下制作ARM镜像包

在x86环境下制作ARM镜像包（如qemu.docker），可以通过QEMU和Docker的结合来实现。以下是详细的步骤： 安装QEMU-user-static QEMU-user-static是一个静态编译的QEMU二进制文件，用于在非目标架构上运行目标架构的二进制文…...

编程日记 2025/5/9 8:34:08

【算法篇】贪心算法

目录贪心算法贪心算法实际应用一，零钱找回问题二，活动选择问题三，分数背包问题将数组和减半的最小操作次数最大数贪心算法贪心算法，是一种在每一步选择中都采取当前状态下的最优策略，期望得到全局最优…...

编程日记 2025/5/9 14:41:56

硬件电路基础

目录 1. 电学基础 1.1 原子 1.2 电压 1.3 电流 1.电流方向： 正极->负极,正电荷定向移动方向为电流方向，与电子定向移动方向相反。 2.电荷（这里表示负电荷）运动方向： 与电流方向相反 1.4 测电压的时候 2. 地线…...

编程日记 2025/5/3 17:29:48

iOS 音频录制、播放与格式转换

iOS 音频录制、播放与格式转换：基于 AVFoundation 和 FFmpegKit 的实现在 iOS 开发中，音频处理是一个非常常见的需求，比如录音、播放音频、音频格式转换等。本文将详细解读一段基于 AVFoundation 和 FFmpegKit 的代码，展示如何实现音频录制、播放以及 PCM 和 AAC 格式之间…...

编程日记 2025/5/9 5:12:08

探索前端框架的未来：Svelte 的崛起

引言在前端开发的世界里，框架更新换代的速度仿佛光速。从 jQuery 到 Angular，再到如今大热的 React 和 Vue，开发者们不断追逐更轻量、更快、更易于维护的框架。如今，Svelte 正悄然崛起，并引发了关于前端框架未来的热烈…...

编程日记 2025/5/2 5:30:40

Gitea+Gridea 创建个人博客

历史文档存档，该方法目前已经无法使用，部署方法可供参考 Gitea部分 1.关于Gitea Gitea 是一个面向开源及私有软件项目的托管平台，是全球最大的代码托管平台之一。它采用 Git 分布式版本控制系统，为开发者提供了代码托管、版本控…...

编程日记 2025/4/29 7:03:40

DeepSeek-V3：开源多模态大模型的突破与未来

目录引言一、DeepSeek-V3 的概述 1.1 什么是 DeepSeek-V3？ 1.2 DeepSeek-V3 的定位二、DeepSeek-V3 的核心特性 2.1 多模态能力 2.2 开源与可扩展性 2.3 高性能与高效训练 2.4 多语言支持 2.5 安全与伦理三、DeepSeek-V3 的技术架构 3.1 模型架构 3…...

编程日记 2025/5/8 1:45:00

通过制作docker镜像的方式在阿里云部署前端后台服务

前端Dockerfile文件的内容： FROM nginx:版本，如果不指定，默认是latest COPY dist/ /usr/share/nginx/html/dist COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 端口前端sh脚本文件内容： appName项目名 tar -xvf dist.tar …...

编程日记 2025/5/3 7:41:02

无界构建微前端？NO！NO！NO！多系统融合思路！

文章目录微前端理解1、微前端概念2、微前端特性3、微前端方案a、iframeb、qiankun --> 使用比较复杂 --> 自己写对vite的插件c、micro-app --> 京东开发 --> 对vite支持更拉跨d、EMP 方案--> 必须使用 webpack5 --> 很多人感觉不是微前端 --> 去中心化方…...

编程日记 2025/5/4 21:34:56

Linux（CentOS）安装 Nginx

CentOS版本：CentOS 7 Nginx版本：1.24.0 两种安装方式： 一、通过 yum 安装，最简单，一键安装，全程无忧。二、通过编译源码包安装，需具备配置相关操作。最后附：设置 Nginx 服务开…...

编程日记 2025/5/2 12:32:46

【提示词工程】探索大语言模型的参数设置：优化提示词交互的技巧

在与大语言模型（Large Language Model, LLM）进行交互时，提示词的设计和参数设置直接影响生成内容的质量和效果。无论是通过 API 调用还是直接使用模型，掌握模型的参数配置方法都至关重要。本文将为您详细解析常见的参数设置及其应用场景，帮助您更高效地利用大语言模型。 …...

编程日记 2025/5/7 23:15:47

GNN多任务预测模型实现（二）：将EXCEL数据转换为图数据

目录一. 引言二. 加载和检查数据三. 提取特征和标签四. 标准化特征五. 构建节点索引六. 构建边及其特征七. 总结八. 结语一. 引言在图神经网络（Graph Neural Networks, GNNs）的多任务学习场景中，数据预处理是至关重要的一…...

编程日记 2025/5/9 14:46:22

1.写个Lazy<T>的单例模式 public class SingleInstance{private static readonly Lazy<SingleInstance> instance new Lazy<SingleInstance>(() > new SingleInstance());private SingleInstance(){}public static SingleInstance Instace > instance…...

编程日记 2025/5/9 14:43:40

Java 线程池：7参数配置、4拒绝策略与执行流程详解

1. 为什么需要线程池？ 在 Java 并发编程中，线程的创建和销毁是一项昂贵的操作。频繁地创建和销毁线程会带来较高的系统开销，甚至可能因线程数过多而导致 OOM（OutOfMemoryError） 或 CPU 过载。线程池（Thre…...

编程日记 2025/5/7 12:47:20

SQL带外注入

SQL 带外注入（Out-of-Band SQL Injection, OOB SQLi） 是 SQL 注入的一种特殊类型，主要用于以下情况： 数据库没有直接返回错误信息（比如被防火墙拦截了）。无法使用常规注入手法（如 UNION、错误信…...

编程日记 2025/5/9 14:45:20

MySQL知识点总结（一）

1.SQL分类数据定义（DDL）:创/改/删/名/清（cadrt） 数据库对象：表/视图/存储/函数/触发器/事件数据操作（DML）：增/删/改/查（idus） 操作数据库对象数据控制&…...

编程日记 2025/5/7 8:33:45

【报错解决】MySQL报错：sql_mode=only_full_group_by

文章目录报错信息 DataGrip 报错还原Navicat 报错还原报错原因解决方案查看当前 sql mode方案一：临时解决方案二：永久解决方案三：使用 any_value() 或 group_concat()方案四：调整实现思路，避开 GROUP BY 使用我…...

编程日记 2025/5/8 9:25:58

【华为OD机考】华为OD笔试真题解析(1)--AI处理器组合

一、题目描述某公司研发了一款高性能AI处理器，每台物理设备具备8颗AI处理器，编号分别为0、1、2、3、4、5、6、7。编号0~3的处理器处于同一链路中，编号4~7的处理器处于另外一个链路中，不同链路中的处理器不能通信，如…...

编程日记 2025/5/6 3:32:40

【redis】缓存设计规范

本文是 Redis 键值设计的 14 个核心规范与最佳实践，按重要程度分层说明： 一、通用数据类型选择这里我们先给出常规的选择路径图。以下是对每个步骤的分析： 是否需要排序？： zset（有序集合）用…...

编程日记 2025/5/2 1:13:02

Node.js 实现简单爬虫

介绍爬虫是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。本文将使用 Nodejs 编写一个简单的爬虫脚本，爬取一个美食网站，获取菜品的标题和图片链接，并以表格的形式输出。准备工作 1、初始化项目首先&#xff0…...

编程日记 2025/5/6 13:45:50

一次奇怪的空指针问题分析：事务、死锁与隐式回滚

最近我们在排查一个诡异的空指针异常，整个分析过程可以说是跌宕起伏，最终的结论也颇具隐蔽性。今天就把这个问题分享出来，希望对大家有所帮助。问题现象在系统中，我们有单据 B，它通过一个关联 ID 字段与上级单…...

编程日记 2025/5/4 22:42:06

数据结构-基础

1、概念： 程序数据结构算法 2、程序的好坏可读性，稳定性，扩展性，时间复杂度，空间复杂度。 3、数据结构是指存储、组织数据的方式，以便高效地进行访问和修改。通过选择适当的数据结构， 能…...

编程日记 2025/5/7 22:28:14

问题大集04-浏览器阻止从本地发起的跨域请求，因为服务器的响应头 Access-Control-Allow-Origin 设置为通配符 *

1、问题 localhost/:1 Access to XMLHttpRequest at xxx（请求） from origin http://localhost:xxx（本地） has been blocked by CORS policy: The value of the Access-Control-Allow-Origin header in the response must not be t…...

编程日记 2025/5/6 6:19:10

音频进阶学习十二——Z变换一（Z变换、收敛域、性质与定理）

文章目录前言一、Z变换1.Z变换的作用2.Z变换公式3.Z的状态表示1） r 1 r1 r12） 0 < r < 1 0<r<1 0<r<13） r > 1 r>1 r>1 4.关于Z的解释二、收敛域1.收敛域的定义2.收敛域的表示方式3.ROC的分析1）当 …...

编程日记 2025/5/5 5:50:02

leetcode——组合总和（回溯算法详细讲解）

在面试或刷题过程中，回溯算法是一个绕不开的核心算法之一。今天，我们来详细解析 LeetCode 39「组合总和」问题，并用 Java 回溯剪枝优化来高效解决它！这篇文章不仅适合初学者，也适合希望提高回溯算法的朋友们。给你…...

编程日记 2025/5/7 23:33:24

说一下JVM管理的常见参数

Java虚拟机（JVM）有许多常见参数，用于控制其行为和性能。以下是一些常见的JVM参数及其说明： 1. 内存管理参数 -Xms<size> START 设置初始堆内存大小。例如，-Xms512m表示初始堆大小为512MB。 -Xmx<size>…...

编程日记 2025/5/8 8:13:06

leetcode_47全排列II

1. 题意给一个含有重复数字的数组，求不重复的排列。 2. 题解将数组进行排序，当回溯发生的时候，找到下个不重复的元素即可。 class Solution { public:void genPerm(std::vector<std::vector<int>> &ans, std::vector&l…...

编程日记 2025/5/9 14:41:56

pytest-xdist 进行多进程并发测试！

在软件开发过程中，测试是确保代码质量和可靠性的关键步骤。随着项目规模的扩大和复杂性的增加，测试用例的执行效率变得尤为重要。为了加速测试过程，特别是对于一些可以并行执行的测试用例，pytest-xdist 提供了一种强大的工具&…...

编程日记 2025/5/7 22:23:15

【CPP】CPP经典面试题

文章目录引言1. C 基础1.1 C 中的 const 关键字1.2 C 中的 static 关键字 2. 内存管理2.1 C 中的 new 和 delete2.2 内存泄漏 3. 面向对象编程3.1 继承和多态3.2 多重继承 4. 模板和泛型编程4.1 函数模板4.2 类模板 5. STL 和标准库5.1 容器5.2 迭代器 6. 高级特性6.1 移动语义…...

编程日记 2025/5/6 12:28:31

STM32的HAL库开发---通用定时器（TIMER)---定时器脉冲计数

一、脉冲计数实验原理 1、外部时钟模式1：核心为蓝色部分的时基单元，时基单元的时钟源可以来自四种，分别是内部时钟PCLK、外部时钟模式1，外部时钟模式2、内部定时器触发（级联）。而脉冲计数就是使用外部时钟…...

编程日记 2025/5/9 14:36:32

在C#中,Array,List,ArrayList,Dictionary,Hashtable,SortList,Stack的区别

Array Array你可以理解为是所有数组的大哥普通数组 : 特点是长度固定, 只能存储相同类型的数据 static void Main(string[] args){//声明int[] ints;string[] strings;People[] peoples;//默认值 //int 类型是 0//string 类型是 nullint[] ints1 { 1, 2, 3 };string[] …...

编程日记 2025/5/9 14:51:38

Ollama 部署本地大语言模型

一、下载安装ollama 1.百度 ollama Ollama 2.点击下载可以复制下载链接，使用下载器下载。 3.双击安装默认安装目录：C:\Users\用户名\AppData\Local\Programs\Ollama 二、更改模型下载目录 0.默认下载目录 (跳过) 之前没下载过模型，不…...

编程日记 2025/5/9 14:25:28

sql批量更新和删除语句

1.更新一条数据 update om_sellorder set SOSTATUS2 where id 283d3eb87b134e1c993b70b018406285 2.更新多个数据为某一个特点值 string ID context.Request["ID"]; //需要替换‘,’逗号，不然识别不出ID数据这里注意 ‘ID’ 是一个逗号（&a…...

编程日记 2025/5/9 14:36:31

探索从传统检索增强生成（RAG）到缓存增强生成（CAG）的转变

在人工智能快速发展的当下，大型语言模型（LLMs）已成为众多应用的核心技术。检索增强生成（RAG）（RAG 系统从 POC 到生产应用：全面解析与实践指南）和缓存增强生成（CAG&#x…...

编程日记 2025/5/9 13:55:16

基于ArcGIS的SWAT模型+CENTURY模型模拟流域生态系统水-碳-氮耦合过程研究

流域是一个相对独立的自然地理单元，它是以水系为纽带，将系统内各自然地理要素连结成一个不可分割的整体。碳和氮是陆地生态系统中最重要的两种化学元素，而在流域系统内，水-碳-氮是相互联动、不可分割的耦合体。随着流域内人类活动…...

编程日记 2025/5/7 9:21:41

深入浅出：机器学习的全面解析

深入浅出：机器学习的全面解析引言机器学习（Machine Learning, ML）作为人工智能的一个重要分支，近年来取得了显著进展，并在多个领域中得到了广泛应用。本文将从基础概念、核心算法、应用场景以及未来发展趋势等方面…...

编程日记 2025/5/5 21:05:21

go运算符

内置运算符算术运算符关系运算符逻辑运算符位运算符赋值运算符算术运算符注意： （自增）和–（自减）在 Go 语言中是单独的语句，并不是运算符 package mainimport "fmt"func main() {fmt.Printl…...

编程日记 2025/5/9 14:47:12

w196Spring Boot高校教师科研管理系统设计与实现

🙊作者简介：多年一线开发工作经验，原创团队，分享技术代码帮助学生学习，独立完成自己的网站项目。代码可以查看文章末尾⬇️联系方式获取，记得注明来意哦~🌹赠送计算机毕业设计600个选题excel文…...

编程日记 2025/5/9 13:39:51

SQL Server 数据库迁移到 MySQL 的完整指南

文章目录引言一、迁移前的准备工作1.1 确定迁移范围1.2 评估兼容性1.3 备份数据二、迁移工具的选择2.1 使用 MySQL Workbench2.2 使用第三方工具2.3 手动迁移三、迁移步骤3.1 导出 SQL Server 数据库结构3.2 转换数据类型和语法3.3 导入 MySQL 数据库3.4 迁移数据3.5 迁移存…...

编程日记 2025/5/9 2:32:54

安卓7以上抓包证书安装

安卓7以上抓包证书安装 fiddler 用户可以直接试试这个文件前提是要root过了，如果是模拟器就很容易开启前提：要有openssl工具，在linux一个指令就可以下载了：sudo apt-get install openssl,windons则是在https://www.openssl.org/…...

编程日记 2025/4/30 4:45:01

C基础寒假练习(8)

一、终端输入10个学生成绩，使用冒泡排序对学生成绩从低到高排序 #include <stdio.h> int main(int argc, const char *argv[]) {int arr[10]; // 定义一个长度为10的整型数组，用于存储学生成绩int len sizeof(arr) / sizeof(arr[0]); // 计算数组…...

编程日记 2025/5/3 23:20:08

10. k8s二进制集群之Kube Scheduler部署

在开始之前需要准备什么？创建kube-scheduler证书请求文件【即证书的生成⓵】根据上面证书配置文件生成kube-scheduler证书【即证书的生成⓶】创建与关联kube-scheduler配置文件（为后面生成系统服务做准备）创建kube-scheduler服务配置文件【准备系统服务⓵】创建kube-schedul…...

编程日记 2025/5/4 17:55:59

低代码开发与传统开发：未来的技术路线选择

在科技飞速发展的当下，软件开发技术日新月异，低代码开发与传统开发作为两种重要的开发模式，正站在未来技术路线选择的十字路口，引发了众多企业和开发者的关注。它们各自有着独特的优势和适用场景，究竟该如何抉择&#…...

编程日记 2025/5/5 14:33:02

HIVE如何注册UDF函数

如果注册UDF函数的时候报了上面的错误，说明hdfs上传的路径不正确， 一定要用下面的命令 hadoop fs -put /tmp/hive/111.jar /user/hive/warehouse 一定要上传到上面路径，这样在创建函数时，引用下面的地址就可以创建成功...

编程日记 2025/5/9 7:02:01

Got socket exception during request. It might be caused by SSL misconfiguration

引入xutils3依赖，结果包找不到 maven里面添加阿里云镜像核心 maven { url uri("https://maven.aliyun.com/nexus/content/groups/public/") }repositories {google()maven { url uri("https://maven.aliyun.com/nexus/content/groups/public/"…...

编程日记 2025/4/28 14:02:41

ORACLE 数据库的启动和关闭

文章目录 1、启动 ORACLE 数据库的三步操作2、关闭 ORACLE 数据库的三步操作3 、启动和关闭 ORACLE 数据库的相关命令4、启动和关闭 ORACLE 数据库 1、启动 ORACLE 数据库的三步操作 1、启动数据库并使它可用，有三步操作：a、启动一个实例b、装配数据…...

编程日记 2025/5/4 14:00:53

搭建集成开发环境PyCharm

1.下载安装Python（建议下载并安装3.9.x） https://www.python.org/downloads/windows/ 要注意勾选“Add Python 3.9 to PATH”复选框，表示将Python的路径增加到环境变量中 2.安装集成开发环境Pycharm http://www.jetbrains.com/pycharm/…...

编程日记 2025/5/2 11:52:58

Python 学习与开发：高效编程技巧与实用案例

Python 学习与开发：高效编程技巧与实用案例 Python 是现代编程语言中最受欢迎的一种，它以简洁、易读的语法和强大的功能广泛应用于数据分析、人工智能、Web开发等多个领域。无论你是 Python 新手还是有经验的开发者，掌握一些高效编程技巧和实…...

编程日记 2025/5/9 14:14:16

文章目录

前言

一、Ajax技术（从服务端获取数据，发送各种请求）

0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试

1 基本概念

2 原生Ajax使用示例（几年前的早期用法）

二、 Axios技术(对原生的Ajax进行了封装)

1 基本概念

（1）Axios是什么

（2）常见的请求方式有哪些？

2 快速入门

示例1：入门案例

示例2：入门案例+绑定事件

3 Axios通用请求格式语法

示例1：params传递参数发送get请求

示例2：data传递参数发送post请求

综合案例：地区查询

4 axios 错误处理

相关文章：