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

前端技术Ajax入门

1.1 AJAX 概念和 axios 使用

目标

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

讲解

1. 什么是 AJAX?

  • 使用浏览器的 XMLHttpRequest 对象与服务器通信。
  • 在浏览器网页中,通过 AJAX 技术(XHR 对象)发起获取省份列表数据的请求,服务器返回准备好的省份列表数据给前端,前端将数据展示到网页。

2. 什么是服务器?

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

3. 为何学习 AJAX?

  • 以前数据是固定的,无法随时变化。
  • 现在可以从服务器获取数据,让数据动态化。

4. 如何学习 AJAX?

  • 使用第三方库 axios,后续再学习 XMLHttpRequest 对象以了解 AJAX 底层原理。
  • axios 语法简单,让我们更关注与服务器通信,且在 Vue、React 中也使用 axios

5. 需求:从服务器获取省份列表数据并展示到页面

  • 目标资源地址:http://hmajax.itheima.net/api/province

6. 讲解 axios 语法步骤

7. 引入 axios.js 文件
 

html

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
8. axios 函数语法
 

javascript

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

9. 示例代码

 

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX概念和axios使用</title>
</head>
<body>
<p class="my-p"></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result.data.list);
document.querySelector('.my-p').innerHTML = result.data.list.join('<br>');
});
</script>
</body>
</html>

小结

  • AJAX 的作用:浏览器和服务器之间通信,实现动态数据交互。
  • 学习方法:先掌握 axios 库,再了解 XMLHttpRequest 原理。
  • axios 体验步骤:引入库文件,使用 axios 语法。

1.2 认识 URL

目标

  • 了解 URL 的组成和作用

讲解

1. 为什么要认识 URL?

  • 了解 URL 的结构,方便与服务器有效沟通。

2. 什么是 URL?

  • 统一资源定位符,简称网址,用于定位网络中的资源(如网页、图片、数据等)。

3. URL 的组成

  • 协议:如 http,规定浏览器和服务器传递数据的格式。
  • 域名:标记服务器在互联网中的位置。
  • 资源路径:标识服务器内的具体资源。

4. 示例需求

  • 访问新闻列表的 URL:http://hmajax.itheima.net/api/news

5. 示例代码

 

javascript

axios({
url: 'http://hmajax.itheima.net/api/news'
}).then(result => {
console.log(result);
});

小结

  • URL 是什么:统一资源定位符,用于访问服务器上的资源。
  • URL 组成:协议、域名、资源路径。

1.3 URL 查询参数

目标

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

讲解

1. 什么是查询参数?

  • 携带给服务器的额外信息,用于获取特定数据。

2. 查询参数语法

 

http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

3. axios 携带查询参数

 

javascript

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

4. 示例需求

  • 获取“河北省”下属的城市列表:
    • URL:http://hmajax.itheima.net/api/city
    • 参数名:pname

5. 示例代码

 

javascript

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>');
});

小结

  • 查询参数作用:提供额外信息,获取对应数据。
  • axios 使用方法:通过 params 选项携带参数。

1.4 案例:查询地区列表

目标

  • 巩固查询参数的使用,查看多对查询参数如何传递

讲解

1. 需求

  • 根据输入的省份和城市名字,查询下属地区列表。
  • URL:http://hmajax.itheima.net/api/area
  • 参数名:
    • pname:省份名字
    • cname:城市名字

2. 示例代码

 

javascript

document.querySelector('.sel-btn').addEventListener('click', () => {
let pname = document.querySelector('.province').value;
let cname = document.querySelector('.city').value;
axios({
url: 'http://hmajax.itheima.net/api/area',
params: {
pname,
cname
}
}).then(result => {
let list = result.data.list;
let theLi = list.map(areaName => `<li>${areaName}</li>`).join('');
document.querySelector('.list-group').innerHTML = theLi;
});
});

小结

  • ES6 对象简写:属性名和值同名时可简写。

1.5 常用请求方法和数据提交

目标

  • 掌握如何向服务器提交数据

讲解

1. 请求方法

  • 常用方法:GETPOSTPUTDELETEPATCH
  • GET:获取数据(默认)。
  • POST:提交数据。

2. 何时提交数据?

  • 如订单数据、登录信息等需要保存到服务器。

3. axios 提交数据

 

javascript

axios({
url: '目标资源地址',
method: 'POST',
data: {
参数名: 值
}
}).then(result => {
// 处理服务器返回的数据
});

4. 示例需求

  • 注册账号,提交用户名和密码:
    • URL:http://hmajax.itheima.net/api/register
    • 请求方法:POST
    • 参数名:
      • username:用户名
      • password:密码

5. 示例代码

 

javascript

document.querySelector('.btn').addEventListener('click', () => {
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'POST',
data: {
username: 'itheima007',
password: '7654321'
}
});
});

小结

  • 常用请求方法POST(提交数据)、GET(查询数据)。
  • axios 核心配置项urlmethodparamsdata

1.6 axios 错误处理

目标

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

讲解

1. 错误处理

  • 使用 catch 方法捕获请求响应错误:
 

javascript

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

2. 示例代码

 

javascript

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.response.data.message);
alert(error.response.data.message);
});
});

小结

  • 错误处理:通过 .catch 方法捕获错误信息。

1.7 HTTP 协议-请求报文

目标

  • 了解 HTTP 协议中请求报文的组成和作用

讲解

1. 请求报文组成

  • 请求行:请求方法、URL、协议。
  • 请求头:附加信息(如 Content-Type)。
  • 空行:分割请求头和请求体。
  • 请求体:发送的资源。

小结

  • 请求报文组成:请求行、请求头、空行、请求体。

1.8 请求报文-错误排查

目标

  • 了解查看请求报文的作用,辅助错误排查

讲解

  • 通过查看请求报文确认发送的数据是否正确。

小结

  • 作用:快速确认发送内容是否正确。

1.9 HTTP 协议-响应报文

目标

  • 了解响应报文的组成

讲解

1. 响应报文组成

  • 响应行:协议、状态码、状态信息。
  • 响应头:附加信息(如 Content-Type)。
  • 空行:分割响应头和响应体。
  • 响应体:返回的资源。

2. HTTP 响应状态码

  • 如 404 表示资源不存在。

小结

  • 响应报文组成:响应行、响应头、空行、响应体。
  • 状态码作用:表明请求是否成功完成。

1.10 接口文档

目标

  • 掌握接口文档的使用,配合 axios 与服务器进行数据交互

讲解

1. 接口文档

  • 描述接口的文章(由后端提供)。
  • 包含请求的 URL、方法、参数等信息。

2. 示例需求

  • 查看登录接口文档,编写登录代码。

3. 示例代码

 

javascript

document.querySelector('.btn').addEventListener('click', () => {
axios({
url: 'http://hmajax.itheima.net/api/login',
method: 'post',
data: {
username: 'itheima007',
password: '7654321'
}
});
});

小结

  • 接口文档:描述接口的文章。
  • 包含内容:URL、请求方法、参数。

1.11 案例:用户登录-主要业务

目标

  • 尝试通过页面获取用户名和密码,进行登录

讲解

1. 实现步骤

  1. 点击登录,获取并判断用户名和密码长度。
  2. 提交数据与服务器通信。

2. 示例代码

 

javascript

document.querySelector('.btn-login').addEventListener('click', () => {
const username = document.querySelector('.username').value;
const password = document.querySelector('.password').value;
if (username.length < 8) {
console.log('用户名必须大于等于8位');
return;
}
if (password.length < 6) {
console.log('密码必须大于等于6位');
return;
}
axios({
url: 'http://hmajax.itheima.net/api/login',
method: 'POST',
data: {
username,
password
}
}).then(result => {
console.log(result.data.message);
}).catch(error => {
console.log(error.response.data.message);
});
});

小结

  • 实现思路:绑定点击事件、获取输入值、判断长度、提交数据。

1.12 案例:用户登录-提示信息

目标

  • 根据提示标签和样式,给用户反馈提示

讲解

1. 封装提示框函数

 

javascript

function alertFn(msg, isSuccess) {
myAlert.classList.add('show');
myAlert.innerText = msg;
const bgStyle = isSuccess ? 'alert-success' : 'alert-danger';
myAlert.classList.add(bgStyle);
setTimeout(() => {
myAlert.classList.remove('show');
myAlert.classList.remove(bgStyle);
}, 2000);
}

小结

  • 封装函数:遇到重复逻辑时封装为函数。
  • 提示框控制:通过添加或移除类名控制显示/隐藏。

1.13 form-serialize 插件

目标

  • 使用 form-serialize 插件快速收集表单元素的值

讲解

1. 插件使用

  • 引入插件文件。
  • 使用 serialize 函数:
 

javascript

const form = document.querySelector('.example-form');
const data = serialize(form, { hash: true, empty: true });
console.log(data);

小结

  • 使用场景:快速收集表单元素的值。
  • 配置选项hash(对象/查询字符串)、empty(是否收集空值)。

1.14 案例:用户登录-form-serialize

目标

  • 使用 form-serialize 插件重新修改用户登录案例

讲解

1. 修改代码

 

javascript

// 引入插件
<script src="./lib/form-serialize.js"></script>
// 使用 serialize 函数
const form = document.querySelector('.login-form');
const data = serialize(form, { hash: true, empty: true });
const { username, password } = data;

相关文章:

前端技术Ajax入门

1.1 AJAX 概念和 axios 使用 目标 了解 AJAX 概念并掌握 axios 库基本使用 讲解 1. 什么是 AJAX&#xff1f; 使用浏览器的 XMLHttpRequest 对象与服务器通信。在浏览器网页中&#xff0c;通过 AJAX 技术&#xff08;XHR 对象&#xff09;发起获取省份列表数据的请求&…...

【沉浸式求职学习day25】【部分网络编程知识分享】【基础概念以及简单代码】

不知道大家一直高强度学习自己是什么样的感觉&#xff0c;反正我现在逐渐变得麻木了&#xff0c;马上又要实习笔试了&#xff0c;每次笔试都要突击&#xff0c;每次突击都意识到自己有太多不会的&#xff0c;主打一个心累&#xff0c;但是又能怎样呢&#xff0c;自己选的路就是…...

聊聊Spring AI Alibaba的YoutubeDocumentReader

序 本文主要研究一下Spring AI Alibaba的YoutubeDocumentReader YoutubeDocumentReader community/document-readers/spring-ai-alibaba-starter-document-reader-youtube/src/main/java/com/alibaba/cloud/ai/reader/youtube/YoutubeDocumentReader.java public class You…...

常用第三方库:flutter_boost混合开发

常用第三方库&#xff1a;flutter_boost混合开发 前言 在移动应用开发中&#xff0c;混合开发是一个非常重要的话题。特别是对于已有原生应用想要引入Flutter的团队来说&#xff0c;如何实现Flutter页面和原生页面的无缝整合就显得尤为关键。本文将深入介绍flutter_boost这个…...

什么是 JSON?学习JSON有什么用?在springboot项目里如何实现JSON的序列化和反序列化?

作为一个学习Javaweb的新手&#xff0c;理解JSON的序列化和反序列化非常重要&#xff0c;因为它在现代Web开发&#xff0c;特别是Spring Boot中无处不在。 什么是 JSON&#xff1f; 首先&#xff0c;我们简单了解一下JSON (JavaScript Object Notation)。 JSON 是一种轻量级的…...

[mysql]数据类型精讲

目录 数据类型精讲: 整数类型 浮点类型 日期和时间类型 文本字符串类型 数据类型精讲: 精度问题:不能损失数据 性能问题:表的设计,范式的讲解. 表设计的时候需要设置字段,我们现在要把字段类型讲完.,细节点一点点给大家拆解. Float和double是有精度的损失的,这边推荐使用…...

WordPress AI插件能自动写高质量文章吗,如何用AI提升网站流量

WordPress AI插件能自动写高质量文章吗&#xff1f; 最近很多站长都在问&#xff0c;用wordpress AI插件真的能写出搜索引擎喜欢的好文章吗&#xff1f;作为一个用过10款AI写作工具的老站长&#xff0c;今天我就来分享真实使用体验&#xff0c;告诉你哪些插件好用、怎么用才能…...

【中级软件设计师】函数调用 —— 传值调用和传地址调用 (附软考真题)

【中级软件设计师】函数调用 —— 传值调用和传地址调用 (附软考真题) 目录 【中级软件设计师】函数调用 —— 传值调用和传地址调用 (附软考真题)一、历年真题二、考点&#xff1a;函数调用 —— 传值调用和传地址调用&#x1f53a;1、传值调用&#x1f53a;2、传引用(地址)调…...

ECMAScript 1(ES1):JavaScript 的开端

1. 版本背景与发布 ●发布时间&#xff1a;1997 年 6 月&#xff0c;由 ECMA International 正式发布&#xff0c;标准编号为 ECMA-262。 ●历史意义&#xff1a;ES1 是 JavaScript 的首个标准化版本&#xff0c;结束了 Netscape Navigator 与 Internet Explorer 浏览器间脚本语…...

C++入侵检测与网络攻防之暴力破解

目录 1.nessus扫描任务 2.漏洞信息共享平台 3.nessus扫描结果 4.漏扫报告的查看 5.暴力破解以及hydra的使用 6.crunch命令生成字典 7.其他方式获取字典 8.复习 9.关于暴力破解的防御的讨论 10.pam配置的讲解 11.pam弱密码保护 12.pam锁定账户 13.shadow文件的解析 …...

基于ssm的同城上门维修平台管理系统(源码+数据库)

54基于ssm的同城上门维修平台管理系统&#xff1a;前端jsp、jquery、bootstrap&#xff0c;后端 spring、mybatis&#xff0c;集成订单管理、商品管理、商品类型管理、商品浏览、购物车等功能于一体的系统。 ## 功能介绍 ### 用户 - 基本功能&#xff1a;登录、注册、退出、…...

力扣-hot100(和为k的子数组)

560. 和为 K 的子数组 中等 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2 示例 2&#xff1a; 输入…...

【计算机视觉】CV实战 - 基于YOLOv5的人脸检测与关键点定位系统深度解析

基于YOLOv5的人脸检测与关键点定位系统深度解析 1. 技术背景与项目意义传统方案的局限性YOLOv5多任务方案的优势 2. 核心算法原理网络架构改进关键点回归分支损失函数设计 3. 实战指南&#xff1a;从环境搭建到模型应用环境配置数据准备数据格式要求数据目录结构 模型训练配置文…...

HTML word属性

介绍 CSS word-spacing 属性&#xff0c;用于指定段字之间的空间&#xff0c;例如&#xff1a; p {word-spacing:30px; }word-spacing属性增加或减少字与字之间的空白。 注意&#xff1a; 负值是允许的。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属…...

Java—ThreadLocal底层实现原理

首先&#xff0c;ThreadLocal 本身并不提供存储数据的功能&#xff0c;当我们操作 ThreadLocal 的时候&#xff0c;实际上操作线程对象的一个名为 threadLocals 成员变量。这个成员变量的类型是 ThreadLocal 的一个内部类 ThreadLocalMap&#xff0c;它是真正用来存储数据的容器…...

GTSRB德国交通标志数据集下载以及训练集划分

GTSRB德国交通标志数据集下载以及训练集划分 一、数据集下载二、数据集划分 一、数据集下载 官网地址&#xff1a;附含数据集说明文档点击下载&#xff1a;训练数据集点击下载&#xff1a;测试数据集 二、数据集划分 在模型训练时&#xff0c;将训练数据集分成训练集和验证集&…...

python 实现客户端软件许可证书签名授权 cryptography

目录 1.需求 2.cryptography介绍 3.实际代码 4.结束语 1.需求 采用pyside6开发了一款客户端软件, 为保护核心算法源码, 采用Nuitka打包python代码&#xff0c;这仅仅保护了核心算法代码&#xff0c;不能限制用户使用软件&#xff0c;因此需要软件许可授权签名证书&#xff…...

明远智睿SD2351核心板:以48元撬动AI视觉产业革命的“硬核引擎”

在人工智能浪潮席卷全球的今天&#xff0c;AI视觉作为连接虚拟与现实的“智慧之眼”&#xff0c;正以惊人的速度重塑着产业格局。从智慧城市中的安防监控到自动驾驶汽车的“视觉神经”&#xff0c;从工业产线的缺陷检测到家庭场景的智能管家&#xff0c;AI视觉技术的每一次突破…...

【C语言】全局变量、静态本地变量

在C语言中&#xff0c;变量是存储数据的基本单元。 不同类型的变量有着不同的特性和用途&#xff0c;其中全局变量和本地变量是比较特殊且重要的两类变量。 一、全部变量 1.1 全局变量的作用域和生存期 全局变量是在函数外部定义的变量&#xff0c;其作用域从定义的位置开始&…...

32.768kHz晶振详解:作用、特性及与其他晶振的区别

一、32.768kHz晶振的核心作用 实时时钟&#xff08;RTC&#xff09;驱动&#xff1a; 提供精确的1Hz时钟信号&#xff0c;用于计时功能&#xff08;如电子表、计算机CMOS时钟&#xff09;。 分频公式&#xff1a; 1Hz 32.768kHz / 2^15&#xff08;通过15级二分频实现&#x…...

classfinal 修改过源码,支持jdk17 + spring boot 3.2.8

先贴图 使用 classfinal 修改过源码 支持jdk17 spring boot 3.3.0 使用方式&#xff1a; 1、springboot的jar加密 java -jar classfinal-fatjar-1.2.1.jar -file MySpringBoot.jar -libjars my-common.jar -packages cn.com.cmd -pwd 123456 -Y 得到&#xff1a; MySpri…...

算法训练营 Day1

努力追上那个曾经被寄予厚望的自己 —— 25.4.25 一、LeetCode_26 删除有序数组中的重复项 给你⼀个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现⼀次 &#xff0c;返回删除后数组的 新⻓度。元素的 相对顺序 应该保持 ⼀致 …...

4/25 研0学习日志

Python学习 python 4个常用的数据容器 list dict tuple set list 列表中数据类型可以不一样 构造方式 mylist["xxx","xxxx"] 获取数据方式 mylist[1] mylist[:4] mylist[-1:] 添加数据 mylist.append() mylist.extern(["aaa","aaaa&…...

手机打电话时电脑坐席同时收听对方说话并插入IVR预录声音片段

手机打电话时电脑坐席同时收听对方说话并插入IVR预录声音片段 --本地AI电话机器人 前言 书接上一篇&#xff0c;《手机打电话通话时如何向对方播放录制的IVR引导词声音》中介绍了【蓝牙电话SDK示例App】可以实现手机app在电话通话过程中插播预先录制的开场白等语音片段的功能。…...

汽车零配件供应商如何通过EDI与主机厂生产采购流程结合

当前&#xff0c;全球汽车产业正经历深刻的数字化转型&#xff0c;供应链协同模式迎来全新变革。作为产业链核心环节&#xff0c;汽车零部件供应商与主机厂的高效对接已成为企业发展的战略要务。然而&#xff0c;面对主机厂日益严格的数字化采购要求&#xff0c;许多供应商在ED…...

sql server 开启cdc报事务正在执行

今天开启数据库cdc 功能的时候提示&#xff1a;一个dbrole 的存储过程&#xff0c;rolemember cdc db_ower, &#xff0c;有事务正在进行&#xff0c;执行失败。 执行多次仍然如此&#xff0c;开启cdc的存储过程是sys.sp_cdc_enable_db;查询了一下网络&#xff0c;给出的方…...

03实战篇Redis02(优惠卷秒杀、分布式锁)

3、优惠卷秒杀 3.1 -全局唯一ID 每个店铺都可以发布优惠券&#xff1a; 当用户抢购时&#xff0c;就会生成订单并保存到tb_voucher_order这张表中&#xff0c;而订单表如果使用数据库自增ID就存在一些问题&#xff1a; id的规律性太明显 受单表数据量的限制 场景分析&…...

ECharts 地图开发入门

一、准备工作&#xff1a;环境搭建与数据准备​ 1. 引入 ECharts 库​ ​ TypeScript 取消自动换行复制 <!-- 引入 ECharts 核心库 -->​ <script src"https://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js"></script>​ <!-…...

机器学习基础 - 回归模型之线性回归

机器学习: 线性回归 文章目录 机器学习: 线性回归1. 线性回归1. 简介2. 线性回归如何训练?1. 损失函数2. 正规方程3. 梯度下降法4. 两种方法的比较2. 岭回归岭回归与线性回归3. Lasso 回归4. ElasticNet 回归LWR - 局部加权回归QA1. 最小二乘法估计2. 最小二乘法的几何解释3…...

《解锁LLMs from scratch:开启大语言模型的探索之旅》

《解锁LLMs from scratch:开启大语言模型的探索之旅》 GitHub - datawhalechina/llms-from-scratch-cn: 仅需Python基础,从0构建大语言模型;从0逐步构建GLM4\Llama3\RWKV6, 深入理解大模型原理 项目首页 - LLMs-from-scratch:从零开始逐步指导开发者构建自己的大型语言模型…...

嵌入式 C 语言面试核心知识点全面解析:基础语法、运算符与实战技巧

在嵌入式面试中&#xff0c;C 语言基础是重中之重。本文针对经典面试题进行详细解析&#xff0c;帮助新手系统掌握知识点&#xff0c;提升面试应对能力。 一、数据结构逻辑分类 题目 在数据结构中&#xff0c;从逻辑上可以把数据结构分为&#xff08; &#xff09;。 A、动态…...

pyqt中以鼠标所在位置为锚点缩放图片

在编写涉及到图片缩放的pyqt程序时&#xff0c;如果以鼠标为锚点缩放图片&#xff0c;图片上处于鼠标所在位置的点&#xff08;通常也是用户关注的图片上的点&#xff09;不会移动&#xff0c;更不会消失在图片显示区域之外&#xff0c;可以提高用户体验&#xff0c;是一个值得…...

登高架设作业证考试的实操项目有哪些?

登高架设作业证考试的实操项目分为 4 个科目&#xff0c;包括安全防护用品使用、作业现场安全隐患排除、安全操作技术、作业现场应急处置&#xff0c;具体内容如下&#xff1a; 科目一&#xff1a;安全防护用品使用&#xff08;K1&#xff09; 考试项目&#xff1a;安全帽、安全…...

闻性与空性:从耳根圆通到究竟解脱的禅修路径

一、闻性之不动&#xff1a;超越动静的觉性本质 在《楞严经》中&#xff0c;佛陀以钟声为喻揭示闻性的奥秘&#xff1a;钟声起时&#xff0c;闻性显现&#xff1b;钟声歇时&#xff0c;闻性不灭。此“不动”并非如磐石般凝固&#xff0c;而是指觉性本身超越生灭、来去的绝对性…...

404了怎么办快把路由给我断掉(React配置路由)

路由基础概念 什么是前端路由&#xff1f; 核心作用&#xff1a;管理单页面应用的页面切换主要功能&#xff1a; 根据URL显示对应组件 保持浏览器历史记录 实现页面间导航不刷新 React Router 包含三个主要包&#xff1a; react-router&#xff1a;核心逻辑react-router-d…...

React类组件与React Hooks写法对比

React 类组件 vs Hooks 写法对比 分类类组件&#xff08;Class Components&#xff09;函数组件 Hooks组件定义class Component extends React.Componentconst Component () > {}状态管理this.state this.setState()useState()生命周期componentDidMount, componentDidU…...

Tailwind CSS实战:快速构建定制化UI的新思路

引言 在当今快节奏的前端开发环境中&#xff0c;开发者不断寻找能够提高效率并保持灵活性的工具。Tailwind CSS作为一个功能型优先的CSS框架&#xff0c;正在改变开发者构建用户界面的方式。与Bootstrap和Material UI等传统组件库不同&#xff0c;Tailwind不提供预设组件&…...

告别手动映射:在 Spring Boot 3 中优雅集成 MapStruct

在日常的后端开发中&#xff0c;我们经常需要在不同的对象之间进行数据转换&#xff0c;例如将数据库实体&#xff08;Entity&#xff09;转换为数据传输对象&#xff08;DTO&#xff09;发送给前端&#xff0c;或者将接收到的 DTO 转换为实体进行业务处理或持久化。手动进行这…...

JavaScript学习教程,从入门到精通,Ajax数据交换格式与跨域处理(26)

Ajax数据交换格式与跨域处理 一、Ajax数据交换格式 1. XML (eXtensible Markup Language) XML是一种标记语言&#xff0c;类似于HTML但更加灵活&#xff0c;允许用户自定义标签。 特点&#xff1a; 可扩展性强结构清晰数据与表现分离文件体积相对较大 示例代码&#xff1…...

抖音IP属地跟无线网有关系吗?一文解析

在抖音等社交平台上&#xff0c;IP属地显示功能让许多用户感到好奇——为什么自己的位置信息有时准确&#xff0c;有时却显示在其他城市&#xff1f;这时&#xff0c;用户会疑惑&#xff1a;抖音IP属地跟无线网有关系吗&#xff1f;本文将详细解析‌IP属地‌和‌无线网‌的概念…...

RDK X3新玩法:超沉浸下棋机器人开发日记

一、项目介绍 产品中文名&#xff1a;超沉浸式智能移动下棋机器人 产品英文名&#xff1a;Hackathon-TTT 产品概念&#xff1a;本项目研发的下棋机器人&#xff0c;是一款能自主移动、具备语音交互并能和玩家在真实的棋盘上进行“人机博弈”的移动下棋平台&#xff0c;能够带给…...

Trae 实测:AI 助力前端开发,替代工具还远吗?

Trae 实测&#xff1a;AI 助力前端开发&#xff0c;替代工具还远吗&#xff1f; 字节上线了一款 AI 新产品&#xff0c;名叫 Trae 。这是一款 IDE 工具&#xff0c;中文意思是「集成开发环境」&#xff0c;做技术的读者对此应该很熟悉。简单理解&#xff0c;就是程序员用来写代…...

SpringCloud基于Eureka和Feign实现一个微服务系统

Spring Cloud 是基于 Spring Boot 的 ‌微服务开发全栈解决方案‌,通过集成多种开源组件,提供分布式系统构建所需的服务治理、配置管理、容错机制‌等核心能力,简化微服务架构的复杂性。其核心目标是实现服务间的高效协同与弹性伸缩,支撑企业级云原生应用开发。Spring Clou…...

nacos设置权重进行负载均衡不生效

nacos设置权重进行负载均衡不生效&#xff0c;必须在启动类下加上这个bean Beanpublic IRule nacosRule(){return new NacosRule();}如下图所示...

Flowable7.x学习笔记(十四)查看部署流程Bpmn2.0-xml

前言 Flowable 在其前端 Modeler 中&#xff0c;采用 BPMN 2.0 标准将流程中的任务、网关、事件等元素以 XML 形式存储&#xff0c;并附带图形互换&#xff08;Diagram Interchange&#xff0c;DI&#xff09;数据&#xff0c;以保证在前端与后端都能精准重建可视化流程图。 生…...

大模型应用中Agent2Agent(A2A)的应用场景,以及A2A与MCP的区别和适用场景

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下大模型应用中Agent2Agent&#xff08;A2A&#xff09;的应用场景&#xff0c;以及A2A与MCP的区别和适用场景。 文章目录 一、引言二、Agent2Agent&#xff08;A2A&#xff09;协议原理2.1 核心架构2.2 基础框架与依…...

Windows server:

企鹅裙&#xff1a;429603659 域搭建 (细节上的问题) 1.将IP地址修改为静态IP&#xff0c;搭建完后设置DNS为本身(在搭建完域服务器后设置DNS) 2.配置之前需将计算机名更改为后面题目中所要求的. 3&#xff0e;一些版本之中比如Windows Server2012之中搭建域之后重启会显示…...

Python 3.14:探索新版本的魅力与革新

在Python编程语言的不断演进中&#xff0c;Python 3.14作为又一重要里程碑&#xff0c;承载着开发者们的期待与热情&#xff0c;悄然走进了我们的视野。尽管在撰写本文时&#xff0c;Python 3.14可能尚未正式成为主流版本&#xff08;注&#xff1a;实际发布情况需根据最新信息…...

LabVIEW基于VI Server的控件引用操作

本 VI 通过展示控件引用&#xff08;Control References&#xff09;的使用&#xff0c;借助 VI Server 实现对前面板对象的编程操作。 ​ 详细说明 隐式属性节点&#xff08;Implicitly Linked Property Node&#xff09;&#xff1a;通过右键单击控件&#xff08;或其控件终…...

【不同名字的yolo的yaml文件名是什么意思】

以下是这些 YOLO 系列配置文件的详细解析&#xff0c;按版本和功能分类说明&#xff1a; 一、YOLOv3 系列 文件名核心特性适用场景yolov3.yaml原始 YOLOv3 结构&#xff0c;3 尺度预测&#xff08;13x13,26x26,52x52&#xff09;通用目标检测yolov3-spp.yaml增加 SPP&#xff…...