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

前端技术Ajax实战

news 来源：原创 2025/6/25 2:34:15

1.1 案例_图书管理-介绍

目标

  • 掌握图书管理案例的增删改查业务和 Bootstrap 弹框的使用。

讲解

1. 运行图书管理案例效果

  • 展示增删改查业务效果，并使用 Bootstrap 弹框承载表单。

2. 分析步骤

  1. 学习 Bootstrap 弹框（用于添加和编辑图书）。
  2. 渲染图书列表（先渲染数据，方便后续操作）。
  3. 新增图书功能。
  4. 删除图书功能。
  5. 编辑图书功能（注意：新增和编辑使用不同弹框）。

小结

  • 收获：掌握前端经典增删改查业务和思路，对后续开发很有帮助。

1.2 Bootstrap 弹框_属性控制

目标

  • 使用属性方式控制 Bootstrap 弹框的显示和隐藏。

讲解

1. 什么是 Bootstrap 弹框？

  • 在当前页面显示单独内容，供用户操作。

2. 需求

  • 点击按钮显示弹框，点击关闭按钮隐藏弹框。

3. 使用步骤

  1. 引入 bootstrap.css 和 bootstrap.js。
  2. 准备弹框标签结构（从官方文档复制）。
  3. 通过自定义属性控制弹框： 
     
    html
     
    <button data-bs-toggle="modal" data-bs-target=".my-box">显示弹框</button>
    <button data-bs-dismiss="modal">Close</button>
     
 

4. 示例代码
 

 

html
 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 弹框</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">
显示弹框
</button>
<div class="modal my-box" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
</body>
</html>
 

小结
 

  • 控制显示属性：data-bs-toggle 和 data-bs-target。
  • 控制隐藏属性：data-bs-dismiss。
 

 

1.3 Bootstrap 弹框_JS控制
 

目标
 

  • 使用 JS 方式控制 Bootstrap 弹框的显示和隐藏。
 

讲解
 

1. 为什么需要 JS 控制？
 

  • 在显示/隐藏前需要执行 JS 逻辑（如填充默认值或获取用户输入）。
 

2. JS 控制语法
 

 

javascript
 

const modalDom = document.querySelector('css选择器');
const modal = new bootstrap.Modal(modalDom);
// 显示弹框
modal.show();
// 隐藏弹框
modal.hide();
 

3. 示例代码
 

 

javascript
 

const modalDom = document.querySelector('.name-box');
const modal = new bootstrap.Modal(modalDom);
document.querySelector('.edit-btn').addEventListener('click', () => {
document.querySelector('.username').value = '默认姓名';
modal.show();
});
document.querySelector('.save-btn').addEventListener('click', () => {
const username = document.querySelector('.username').value;
console.log('模拟把姓名保存到服务器上', username);
modal.hide();
});
 

小结
 

  • 使用场景：直接显示/隐藏用属性控制，需执行 JS 逻辑时用 JS 控制。
 

 

1.4 案例_图书管理_渲染列表
 

目标
 

  • 完成图书管理案例的图书列表数据渲染。
 

讲解
 

1. 需求
 

  • 使用 axios 获取图书列表数据，并渲染到页面。
 

2. 步骤
 

  1. 获取数据。
  2. 渲染数据到页面。
 

3. 核心代码
 

 

javascript
 

const creator = '老张';
function getBooksList() {
axios({
url: 'http://hmajax.itheima.net/api/books',
params: { creator }
}).then(result => {
const bookList = result.data.data;
const htmlStr = bookList.map((item, index) => {
return `<tr>
<td>${index + 1}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td data-id=${item.id}>
<span class="del">删除</span>
<span class="edit">编辑</span>
</td>
</tr>`;
}).join('');
document.querySelector('.list').innerHTML = htmlStr;
});
}
getBooksList();
 

小结
 

  • 渲染步骤：获取数据，渲染到页面。
 

 

1.5 案例_图书管理_新增图书
 

目标
 

  • 完成图书管理案例的新增图书功能。
 

讲解
 

1. 需求
 

  • 点击添加按钮显示弹框，填写图书信息并提交到服务器，刷新列表。
 

2. 步骤
 

  1. 控制弹框显示/隐藏。
  2. 收集表单数据并提交。
  3. 刷新图书列表。
 

3. 核心代码
 

 

javascript
 

const addModalDom = document.querySelector('.add-modal');
const addModal = new bootstrap.Modal(addModalDom);
document.querySelector('.add-btn').addEventListener('click', () => {
const addForm = document.querySelector('.add-form');
const bookObj = serialize(addForm, { hash: true, empty: true });
axios({
url: 'http://hmajax.itheima.net/api/books',
method: 'POST',
data: { ...bookObj, creator }
}).then(result => {
getBooksList();
addForm.reset();
addModal.hide();
});
});
 

小结
 

  • 新增步骤：准备表单，收集数据提交，刷新列表。
 

 

1.6 案例_图书管理_删除图书
 

目标
 

  • 完成图书管理案例的删除图书功能。
 

讲解
 

1. 需求
 

  • 点击删除按钮，删除对应图书数据并刷新列表。
 

2. 步骤
 

  1. 绑定删除按钮点击事件。
  2. 调用删除接口。
  3. 刷新图书列表。
 

3. 核心代码
 

 

javascript
 

document.querySelector('.list').addEventListener('click', e => {
if (e.target.classList.contains('del')) {
const theId = e.target.parentNode.dataset.id;
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`,
method: 'DELETE'
}).then(() => {
getBooksList();
});
}
});
 

小结
 

  • 删除步骤：获取 ID，调用接口，刷新列表。
 

 

1.7 案例_图书管理_编辑图书
 

目标
 

  • 完成图书管理案例的编辑图书功能。
 

讲解
 

1. 需求
 

  • 编辑图书数据并回显到表单，提交保存后刷新列表。
 

2. 步骤
 

  1. 绑定编辑按钮点击事件。
  2. 获取图书详情并回显到表单。
  3. 提交修改并刷新列表。
 

3. 核心代码
 

 

javascript
 

const editDom = document.querySelector('.edit-modal');
const editModal = new bootstrap.Modal(editDom);
document.querySelector('.list').addEventListener('click', e => {
if (e.target.classList.contains('edit')) {
const theId = e.target.parentNode.dataset.id;
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`
}).then(result => {
const bookObj = result.data.data;
Object.keys(bookObj).forEach(key => {
document.querySelector(`.edit-form .${key}`).value = bookObj[key];
});
});
editModal.show();
}
});
document.querySelector('.edit-btn').addEventListener('click', () => {
const editForm = document.querySelector('.edit-form');
const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true });
axios({
url: `http://hmajax.itheima.net/api/books/${id}`,
method: 'PUT',
data: { bookname, author, publisher, creator }
}).then(() => {
getBooksList();
editModal.hide();
});
});
 

小结
 

  • 编辑步骤：获取数据并回显，收集数据提交，刷新列表。
 

 

1.8 案例_图书管理_总结
 

目标
 

  • 总结增删改查的核心思路。
 

讲解
 

1. 增删改查核心思路
 

  1. 渲染列表：获取数据 → 渲染数据。
  2. 新增数据：准备表单 → 收集数据提交 → 刷新列表。
  3. 删除数据：绑定点击事件 → 调用接口 → 刷新列表。
  4. 编辑数据：回显数据 → 收集修改数据 → 提交保存 → 刷新列表。
 

小结
 

  • 收获：掌握增删改查通用思路，可应用于其他数据管理。
 

 

1.9 图片上传
 

目标
 

  • 实现本地图片上传并显示到网页。
 

讲解
 

1. 需求
 

  • 上传本地图片到服务器，获取 URL 并显示到 img 标签。
 

2. 步骤
 

  1. 获取图片文件对象。
  2. 使用 FormData 提交文件。
  3. 提交到服务器并显示图片。
 

3. 核心代码
 

 

html
 

<input type="file" class="upload">
<img src="" alt="" class="my-img">
<script>
document.querySelector('.upload').addEventListener('change', e => {
const fd = new FormData();
fd.append('img', e.target.files[0]);
axios({
url: 'http://hmajax.itheima.net/api/uploadimg',
method: 'POST',
data: fd
}).then(result => {
const imgUrl = result.data.data.url;
document.querySelector('.my-img').src = imgUrl;
});
});
</script>
 

小结
 

  • 思路：获取文件 → 装入 FormData → 提交服务器 → 获取 URL 显示。
 

 

1.10 案例_网站-更换背景图
 

目标
 

  • 实现网站背景图更换效果。
 

讲解
 

1. 需求
 

  • 上传图片并设置为网页背景，刷新后保留背景图。
 

2. 步骤
 

  1. 上传图片并设置背景。
  2. 保存图片 URL 到 localStorage。
  3. 网页加载时从 localStorage 获取 URL 并设置背景。
 

3. 核心代码
 

 

javascript
 

document.querySelector('.bg-ipt').addEventListener('change', e => {
const fd = new FormData();
fd.append('img', e.target.files[0]);
axios({
url: 'http://hmajax.itheima.net/api/uploadimg',
method: 'POST',
data: fd
}).then(result => {
const imgUrl = result.data.data.url;
document.body.style.backgroundImage = `url(${imgUrl})`;
localStorage.setItem('bgImg', imgUrl);
});
});
const bgUrl = localStorage.getItem('bgImg');
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`);
 

小结
 

  • localStorage：getItem 取值，setItem 赋值。
 

 

1.11 案例_个人信息设置-介绍
 

目标
 

  • 介绍个人信息设置案例的功能和实现步骤。
 

讲解
 

1. 需求
 

  • 实现信息回显、头像修改、信息修改和提示框反馈。
 

2. 步骤
 

  1. 信息回显。
  2. 头像修改。
  3. 信息修改。
  4. 提示框反馈。
 

 

1.12 案例_个人信息设置-信息渲染
 

目标
 

  • 渲染用户信息到页面。
 

讲解
 

1. 需求
 

  • 根据外号获取用户信息并渲染到页面。
 

2. 核心代码
 

 

javascript
 

const creator = '播仔';
axios({
url: 'http://hmajax.itheima.net/api/settings',
params: { creator }
}).then(result => {
const userObj = result.data.data;
Object.keys(userObj).forEach(key => {
if (key === 'avatar') {
document.querySelector('.prew').src = userObj[key];
} else if (key === 'gender') {
const gRadioList = document.querySelectorAll('.gender');
const gNum = userObj[key];
gRadioList[gNum].checked = true;
} else {
document.querySelector(`.${key}`).value = userObj[key];
}
});
});
 

小结
 

  • 思路：获取数据 → 渲染到页面。
 

 

1.13 案例_个人信息设置-头像修改
 

目标
 

  • 修改用户头像并立即生效。
 

讲解
 

1. 需求
 

  • 上传头像文件并更新页面显示。
 

2. 核心代码
 

 

javascript
 

document.querySelector('.upload').addEventListener('change', e => {
const fd = new FormData();
fd.append('avatar', e.target.files[0]);
fd.append('creator', creator);
axios({
url: 'http://hmajax.itheima.net/api/avatar',
method: 'PUT',
data: fd
}).then(result => {
const imgUrl = result.data.data.avatar;
document.querySelector('.prew').src = imgUrl;
});
});
 

小结
 

  • 原因：需要携带外号以保存到对应用户。
 

 

1.14 案例_个人信息设置-信息修改
 

目标
 

  • 提交用户修改的信息到服务器。
 

讲解
 

1. 需求
 

  • 收集表单数据并提交到服务器保存。
 

2. 核心代码
 

 

javascript
 

document.querySelector('.submit').addEventListener('click', () => {
const userForm = document.querySelector('.user-form');
const userObj = serialize(userForm, { hash: true, empty: true });
userObj.creator = creator;
userObj.gender = +userObj.gender;
axios({
url: 'http://hmajax.itheima.net/api/settings',
method: 'PUT',
data: userObj
}).then(result => {
});
});
 

小结
 

  • 思路：收集数据 → 提交保存。
 

 

1.15 案例_个人信息设置-提示框
 

目标
 

  • 使用提示框反馈用户操作结果。
 

讲解
 

1. 需求
 

  • 使用 Bootstrap 的 toast 提示框显示操作结果。
 

2. 核心代码
 

 

javascript
 

document.querySelector('.submit').addEventListener('click', () => {
// ...提交数据代码...
axios({
url: 'http://hmajax.itheima.net/api/settings',
method: 'PUT',
data: userObj
}).then(result => {
const toastDom = document.querySelector('.my-toast');
const toast = new bootstrap.Toast(toastDom);
toast.show();
});
});
 

小结
 

  • 使用场景：需执行 JS 逻辑后显示/隐藏弹框时。
 

 















相关文章：
















前端技术Ajax实战




1.1 案例_图书管理-介绍 
目标 
掌握图书管理案例的增删改查业务和 Bootstrap 弹框的使用。 
讲解 
1. 运行图书管理案例效果 
展示增删改查业务效果&#xff0c;并使用 Bootstrap 弹框承载表单。 
2. 分析步骤 
学习 Bootstrap 弹框&#xff08;用于添加和编辑图书&#xff09…...






编程日记
2025/6/25 2:34:16



















ctfshow web入门 命令执行（29-77）




Web 命令执行是指攻击者借助Web应用程序里的漏洞&#xff0c;在服务器端执行任意系统命令的一种攻击手段。 原理&#xff1a; Web 应用程序在处理用户输入时&#xff0c;有时会调用系统命令。若开发人员没有对用户输入进行严格的过滤与验证&#xff0c;攻击者就能够通过构造恶意…...






编程日记
2025/6/25 1:12:00



















Mac「brew」快速安装Redis




安装Redis 步骤 1&#xff1a;安装 Redis 打开终端&#xff08;Terminal&#xff09;。  运行以下命令安装 Redis&#xff1a; brew install redis步骤 2&#xff1a;启动 Redis 安装完成后&#xff0c;可以使用以下命令启动 Redis 服务&#xff1a; brew services start redis…...






编程日记
2025/6/25 2:23:18



















非对称电容减重实验




加载高压的非对称电容在变压器油中的减重实验 早年国外流传飘升机&#xff08;Lifter&#xff09;的视频。爱好者们用简单的材料制作了非对称电容&#xff0c;通高压直流电&#xff0c;它就能飘起来。 所谓的飘升机&#xff0c;就是一种非对称电容。它由面积相差极大的两个极板…...






编程日记
2025/6/24 7:34:46



















day37图像处理OpenCV




文章目录 一、图像预处理19 霍夫变换19.1 理解霍夫变换19.2 (标准)霍夫直线变换19.3 统计概率霍夫直线变换19.4 霍夫圆变换 一、图像预处理 
19 霍夫变换 
19.1 理解霍夫变换 
霍夫变换是图像处理的一种技术&#xff0c;主要用于检测图像中的直线、圆等几何形状。基本思想就是将…...






编程日记
2025/6/21 5:29:45



















23种设计模式-行为型模式之责任链模式（Java版本）




Java 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;详解 
&#x1f9e0; 什么是责任链模式&#xff1f; 
责任链模式是一种行为型设计模式&#xff0c;它使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者与接收者之间的耦合关系。将这些对象…...






编程日记
2025/6/22 22:30:00



















机器学习的基本概念




机器学习是人工智能的一个重要研究领域。与计算机科学、心理学等多种学科都有密切的关系&#xff0c;牵涉的面比较宽&#xff0c;而且许多理论及技术上的问题尚处于研究之中&#xff0c;接下来对它的一些基本概念和方法作一简要讨论&#xff0c;以便对它有一个初步的认识。 
一…...






编程日记
2025/6/20 2:00:46



















【6】GD32 高级通信外设 CAN、USBD




高级通信外设&#xff1a;CAN、USBD CAN CAN简介、主要功能与相关API回环模式收发发送特定ID的数据帧实验CAN数据帧的接收实验使用过滤器接收特定的数据帧 USBD USB通信简介USBD设备固件库架构、分层文件与库函数说明USBD模拟键盘应用USBD虚拟串口应用USBD模拟U盘应用...






编程日记
2025/6/3 10:25:26



















手工收集统计信息




有时想对某些表收集统计信息 
CREATE OR REPLACE PROCEDURE GATHER_STATS
ASDECLAREV_SQL1 VARCHAR(1000);--表游标CURSOR C1 ISSELECT (SELECT USER) AS TABLE_OWNER,TABLE_NAMEFROM USER_TABLES;  --可以在这里加过滤条件--索引游标CURSOR C2 ISSELECT TABLE_OWNER,INDEX_NAM…...






编程日记
2025/6/24 5:03:05



















隧道调频广播覆盖的实现路径:隧道无线广播技术赋能行车安全升级,隧道汽车广播收音系统助力隧道安全管理升级




隧道调频广播覆盖的实现路径:隧道无线广播技术赋能行车安全升级,隧道汽车广播收音系统助力隧道安全管理升级 
北京海特伟业科技有限公司任洪卓发布于2025年4月23日 
在现代交通基础设施建设中&#xff0c;隧道作为公路、铁路等交通网络的重要组成部分&#xff0c;其内部通信系统…...






编程日记
2025/5/31 14:14:01



















深度强化学习（DRL）实战：从AlphaGo到自动驾驶




——从算法原理到产业落地的全链路解析 
摘要 
本文通过算法对比矩阵、训练流程图解、Python代码实战及产业应用解析&#xff0c;构建从理论创新到工程落地的完整技术栈。实验数据显示&#xff1a;采用PPO算法训练的7自由度机械臂抓取成功率达92%&#xff0c;基于改进型DQN的自…...






编程日记
2025/6/3 13:30:47



















【数据可视化-33】病毒式社交媒体潮流与用户参与度可视化分析




&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...






编程日记
2025/6/24 11:42:35



















ubuntu使用dify源码安装部署教程+避坑指南




很多人，包括我在最初使用dify的时候都习惯使用docker来部署安装环境，但在二次开发使用过程中，我们可能希望使用源码来安装，那么这篇文章我将给大家分享如何在ubuntu系统下使用源码安装，并提供大家遇到的疑难杂症如下： 
dify安装使用过程中报错：/console/api/workspaces/…...






编程日记
2025/6/3 13:31:14



















软件技术专业




软件技术专业是一个专注于软件开发、测试、维护及相关技术的学科专业。以下是其相关介绍&#xff1a; 专业概述 软件技术专业主要培养具备扎实的软件理论基础和较强的实践能力&#xff0c;能熟练掌握软件开发工具和技术&#xff0c;从事软件设计、开发、测试、维护等工作的高素…...






编程日记
2025/6/20 18:21:29



















AI数据分析的利器：解锁BI工具的无限潜力




在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业最宝贵的资产之一。如何高效、准确地分析这些数据&#xff0c;挖掘其中的价值&#xff0c;成为企业决策的关键。AI数据分析&#xff0c;作为新时代的数据分析利器&#xff0c;正逐渐改变着企业的决策方式。而BI&#xff0…...






编程日记
2025/6/22 1:33:30



















docker 代理配置冲突问题




问题描述 
执行 systemctl show --property=Environment docker 命令看到有如下代理配置 
sudo systemctl show --property=Environment docker
Environment=HTTP_PROXY=http://127.0.0.1:65001 HTTPS_PROXY=http://127.0.0.1:65001 NO_PROXY=127.0.0.1,docker.io,ghcr.io,uhub…...






编程日记
2025/6/3 13:32:42



















清理HiNas(海纳斯) Docker日志并限制日志大小




我在一个机顶盒的HiNas系统上跑Octoprint的docker版本&#xff0c;每隔一段时间盒子空间就被占完了&#xff0c;运行df -h之后&#xff0c;显示/dev/root Use 100%。 
Filesystem      Size  Used Avail Use% Mounted on
/dev/root       6.6G  6.6G     0 100% /
devtmpfs    …...






编程日记
2025/6/23 1:37:04



















kafka整合flume与DStream转换




一、Kafka整合flume 
cd /opt/software/flume/conf/ 
vi flume-kafka.conf a1.sourcesr1 
a1.sinksk1 
a1.channelsc1 
a1.sources.r1.typespooldirt 
a1.sources.r1.spoolDir/root/flume-kafka 
a1.sinks.k1.typeorg.apache.flume.sink.kafka.KafkaSink 
a1.sinks.k1.kafka.to…...






编程日记
2025/6/23 14:52:54



















第2讲：R语言中的色彩美学——科研图表配色指南




目录 
一、背景导引：科研图表为何需要“配色讲究”？ 
二、色彩基础认知：别让“红绿盲”错过你的科研成果 
三、R语言中的配色库全景图 
四、案例演示与代码实战 
🎨案例1：ggplot2 + viridis 配色的热图 
🎨案例2：MetBrewer 中的印象派色彩 
五、技巧点拨：如何为SCI图…...






编程日记
2025/6/22 13:11:49



















C++入门小馆: 深入了解STLlist




嘿&#xff0c;各位技术潮人&#xff01;好久不见甚是想念。生活就像一场奇妙冒险&#xff0c;而编程就是那把超酷的万能钥匙。此刻&#xff0c;阳光洒在键盘上&#xff0c;灵感在指尖跳跃&#xff0c;让我们抛开一切束缚&#xff0c;给平淡日子加点料&#xff0c;注入满满的pa…...






编程日记
2025/6/3 13:31:45



















Float32、Float16、BFloat16




我们先介绍 Float32、Float16、BFloat16 的 浮点数表示方法  然后根据浮点数表示&#xff0c;来分析总结他们是怎么控制 精度和 数值范围 的  最后再来对比的说明 Float32、Float16、BFloat16 的 应用场景 和 硬件支持  
1、浮点数的表示方法 Float32 &#xff1a; 单精度浮点数…...






编程日记
2025/6/24 1:31:36



















多模态深度学习: 从基础到实践




多模态深度学习: 从基础到实践 
多模态学习是人工智能领域的前沿方向&#xff0c;它允许模型同时处理和理解多种数据类型。本文将介绍多模态学习的核心概念&#xff0c;以及如何在实际项目中应用这些技术。 
什么是多模态学习&#xff1f; 
多模态学习涉及处理和整合来自不同来…...






编程日记
2025/6/21 1:07:02



















Java学习手册：时间戳、时区等相关概念




一、时间戳 
定义 &#xff1a;时间戳是指以秒或毫秒为单位&#xff0c;表示自 1970 年 1 月 1 日 00:00:00 UTC&#xff08;协调世界时&#xff09;以来的 elapsed time。它是衡量时间的一种方式&#xff0c;常用于系统开发中记录事件的发生顺序和具体时间。作用 &#xff1a;…...






编程日记
2025/6/3 13:30:44



















Axure全局变量的含义与基础应用




亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！ Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 
课程主题：全局变量 
主要内容：全局变量含义、基础应用 
应用场景：元件赋值 
案例展示： 
案例视频：...






编程日记
2025/6/25 2:13:23



















Java 24 深度解析：云原生时代的性能更新与安全重构




一、Java 24 核心特性全景图 
Java 24 于 2025 年 3 月正式发布&#xff0c;带来 24 项核心改进&#xff0c;覆盖性能优化、安全性增强、语言升级和云原生支持四大领域。以下是关键特性的全景式解析&#xff1a; 
1. 性能优化&#xff1a;从内存到并发的全方位突破 紧凑对象头&…...






编程日记
2025/6/22 9:11:22



















ubuntu(28):ubuntu系统多版本conda和多版本cuda共存




0. cuda(包括cudnn)、conda安装照常 
注意&#xff1a; &#xff08;1&#xff09;多个conda不要安装到一个目录了&#xff0c;可以见下面的示例目录&#xff1b; &#xff08;2&#xff09;cuda&#xff08;包括cudnn&#xff09;不用纠结是否添加超链接 
1. 需要修改环境配置…...






编程日记
2025/6/23 13:50:00



















28、.NET 中元数据是什么？




在.NET中&#xff0c;元数据&#xff08;Metadata&#xff09;是描述程序结构和类型信息的二进制数据集合&#xff0c;它是.NET运行时&#xff08;CLR&#xff09;的核心基础组件之一&#xff0c;用于支持程序加载、类型解析、反射、安全校验等关键功能。以下是其核心特性和作用…...






编程日记
2025/6/24 18:07:32



















插入html文件，让数据可视化彰显高端大气-Excel易用宝




我们老板整了个html文件的图表&#xff0c;说是html文件图表兼容性更好&#xff0c;现在让我将这个html文件的图表插入到Excel中。 
其实这事也简单哈&#xff0c;通过插入web控件&#xff0c;就可以将HTML文件插入到工作表中。 
单击【易用宝plus】→【插入Web控件】。 单击【…...






编程日记
2025/6/23 14:24:02



















基于HTML+CSS实现的动态导航引导页技术解析




基于HTMLCSS实现的动态导航引导页技术解析 
效果展示 核心技术实现 
1. 视差背景层 
#sence {position: fixed;width: 100vw;height: 100vh;z-index: -1;
}#background {width: 140%;height: 140%;position: absolute;background-size: cover;filter: brightness(0.6);animatio…...






编程日记
2025/5/8 11:15:02



















【编译原理】 第四章 自上而下语法分析




目录 
语法分析器的功能 
不确定的自上而下分析 
确定的自上而下分析 
LL(1)文法 
左递归的消除 
间接左递归的消除 
消除文法中全部左递归的算法 
消除回溯、提左因子 
FIRST集 
FOLLOW集 
预测分析法 
递归下降分析法 语法分析器的功能 
按照文法从源程序单词串&#xff08;符…...






编程日记
2025/6/3 13:32:42



















vue入门




Vue入门 
目录: 
导入快速入门 什么是Vue为什么要学Vue面试题&#xff1a;Vue的特定Vue要学习什么 Vue常用指令 指令介绍表单绑定文本插值绑定属性条件渲染列表渲染事件绑定总结  
0.导入 
0.1什么是Vue 
Vue.js&#xff0c;通常称为Vue&#xff0c;是一个用于构建用户界面的渐…...






编程日记
2025/6/24 4:57:22



















Unity开发者快速认识Unreal 的BluePrint（二）




前言 前一篇是通过UMG编辑器制作的一个简单ui功能&#xff0c;记录Unity开发者使用BluePrint需要特别注意的地方,这一篇是分析和理解对于场景中的3D物体交互的BluePrint怎么制作&#xff0c;以及需要注意的一些关键点&#xff01;个人觉得最快的学习方式就是对比&#xff0c;入…...






编程日记
2025/6/3 13:32:12



















APP和小程序需要注册域名吗？（国科云）




在移动互联网时代&#xff0c;APP和小程序已成为企业和个人提供服务、展示产品的重要渠道。那么APP和小程序的兴起是否对域名造成了冲击&#xff0c;APP和小程序是否需要注册域名呢&#xff1f; 
APP是否需要注册域名&#xff1f; 
从技术上讲&#xff0c;没有域名的APP仍然可以…...






编程日记
2025/6/21 1:42:10



















pandas读取MySQL中的数据




使用pandas读取MySQL中的数据 
1、导入库 
pip install pandas
pip install sqlalchemy2、示例代码 
# -*- coding: utf-8 -*-import pandas as pd
import re
from sqlalchemy import create_engine# 清洗文本
def clean_text(text):text...






编程日记
2025/6/24 7:05:16



















算法设计与分析6（动态规划）




最长公共子序列和最长公共子串 
动态规划的思路与字符串匹配的编辑距离问题相似&#xff0c;对字符串最尾端字符分类讨论 
最长公共子序列 
可以是不连续出现的&#xff0c;只要出现顺序是一样的 
状态转移方程&#xff1a; 最长公共字串 
要求连续出现&#xff0c;中断了就归0…...






编程日记
2025/6/22 22:29:39



















ubuntu 20.04 编译运行lio-sam,并保存为pcd




1.环境依赖 
ubuntu 20.04  ROS1 
gtsam 
sudo add-apt-repository ppa:borglab/gtsam-release-4.0
sudo apt install libgtsam-dev libgtsam-unstable-dev 
其他依赖 
sudo apt-get install ros-noetic-fake-localization
sudo apt-get install ros-noetic-robot-localization…...






编程日记
2025/6/22 7:02:48



















国标GB28181视频平台EasyGBS视频监控平台助力打造校园安防智能化




一、方案背景 
校园安全是教育管理中的重中之重。随着校园规模的不断扩大和安全管理要求的日益提高&#xff0c;传统的安防手段已难以满足现代校园的需求。EasyGBS作为一款基于国标GB/T28181协议的视频监控平台&#xff0c;能够实现对校园内各类视频监控设备的统一接入、管理和…...






编程日记
2025/6/21 13:48:46



















深度解析 Java 泛型通配符 `＜? super T＞` 和 `＜? extends T＞`




Java 泛型中的通配符 ? 与 super、extends 关键字组合形成的 <? super T> 和 <? extends T> 是泛型系统中最重要的概念之一&#xff0c;也是许多开发者感到困惑的地方。本文将全面剖析它们的语义、使用场景和设计原理。 
一、基础概念回顾 
1. 泛型通配符 ? 
?…...






编程日记
2025/6/22 10:48:17



















iphonex uniapp textarea标签兼容性处理过程梳理




嗨&#xff0c;我是小路。今天主要和大家分享的主题是“iphonex uniapp textarea标签兼容性处理过程梳理”。         
在uniapp项目中&#xff0c;经常会使用到uniapp原生的textarea标签&#xff0c;但在手机兼容性这块&#xff0c;textarea并不是很好用&#xff0c;会出现一些…...






编程日记
2025/6/24 9:09:07



















SiSi Coin全球共识社区开创Meme币新纪元，通缩机制与社区自治引领Web3未来




SiSi Coin是独家首创新型MeMe币, 通过独特的“黑洞销毁零撸空投”机制打造社交裂变与价值捕获的去中心化生态模式&#xff0c;作为SiSi WEB3 的社区代币&#xff0c;它旨在通过创新的经济模型设计实现长期价值增长。 
《采用"黑洞机制"永久销毁加权分配》 
核心创新&…...






编程日记
2025/6/22 13:28:29



















PCIe具体解释分析




参考文章 PCIe总线详解_STATEABC-GitCode 开源社区 https://zhuanlan.zhihu.com/p/652808759 PCI总线学习(一)&#xff1a;PCI总线结构-CSDN博客 PCI——第1章——PCI总线的基本知识-CSDN博客 计算机中register、cache、memory的区别 - Lines Blog 什么是内存管理单元&#xff…...






编程日记
2025/6/3 13:31:16



















OpenWrt 与 Docker：打造轻量级容器化应用平台技术分享




文章目录 前言一、OpenWrt 与 Docker 的集成前提1.1 硬件与内核要求1.2 软件依赖 二、Docker 环境部署与验证2.1 基础服务配置2.2 存储驱动适配 三、容器化应用部署实践3.1 资源限制策略3.2 Docker Compose 适配 四、性能优化与监控4.1 容器资源监控4.2 镜像精简策略 五、典型问…...






编程日记
2025/6/20 5:13:59



















sherpa-ncnn：Linux(x86/ARM32/ARM64)构建sherpa-ncnn --语音转文本大模型




更多内容&#xff1a;XiaoJ的知识星球 目录 1.构建sherpa-ncnn2.运行2.1 运行sherpa-ncnn2.2 运行sherpa-ncnn-alsa 1.构建sherpa-ncnn 
x86构建&#xff1a; 
git clone https://github.com/k2-fsa/sherpa-ncnn
cd sherpa-ncnn
mkdir build
cd build
cmake -DCMAKE_BUILD_TYPE…...






编程日记
2025/6/24 9:11:08



















nc工具！Netcat：TCP/IP瑞士军刀！全参数详细教程！Kali Linux教程！




简介 
Netcat 是一个简单的 Unix 实用程序&#xff0c;使用 TCP 或 UDP 协议跨网络连接读写数据。它被设计为一个可靠的“后端”工具&#xff0c;可以直接使用&#xff0c;也可以由其他程序和脚本轻松驱动。同时&#xff0c;它也是一个功能丰富的网络调试和探索工具&#xff0c…...






编程日记
2025/6/3 13:30:42



















【持续更新】 CDC 跨时钟域处理




在之前的专栏《硬件架构的艺术》里&#xff0c;有讲过亚稳态以及多个时钟的处理办法&#xff0c;但是感觉还是太宽泛了些&#xff0c;不太好理解。在这篇博客里&#xff0c;将主要参考《Clock Domain Crossing (CDC) Design & Verification Techniques Using SystemVerilog…...






编程日记
2025/5/20 11:59:43



















Mybatis-Plus，IDEA2024版本




目录 1、Mybatis-Plus介绍 2、Mybatis-Plus作用 
3、Mybatis-Plus使用 
1、引入依赖 
2、配置数据库 
3、生成代码 1、Mybatis-Plus介绍 
Mybatis-Plus是在Mybatis的基础上进行的功能拓展&#xff0c;也就是Mybatis有的功能&#xff0c;Plus也有&#xff0c;而且比Mybatis更好用…...






编程日记
2025/6/23 7:05:11



















LeNet5 神经网络的参数解析和图片尺寸解析




1.LeNet-5 神经网络 
以下是针对 LeNet-5 神经网络的详细参数解析和图片尺寸变化分析&#xff0c;和原始论文设计&#xff0c;通过分步计算说明各层的张量变换过程。 经典的 LeNet-5架构简化版&#xff08;原始论文输入为 32x32&#xff0c;MNIST 常用 28x28 需调整&#xff09…...






编程日记
2025/6/25 1:24:40



















hadoop-3.3.5.tar.gz 镜像




清华大学镜像站 wget https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/hadoop-3.3.5/hadoop-3.3.5.tar.gz 阿里云镜像站  wget https://mirrors.aliyun.com/apache/hadoop/common/hadoop-3.3.5/hadoop-3.3.5.tar.gz  华为云镜像站  wget https://mirrors.huaweiclo…...






编程日记
2025/6/21 1:32:33



















SD2351核心板：重构AI视觉产业价值链的“超级节点”




在AI视觉技术狂飙突进的当下&#xff0c;一个吊诡的现象正在浮现&#xff1a;一方面&#xff0c;学术界不断刷新着ImageNet等基准测试的精度纪录&#xff1b;另一方面&#xff0c;产业界却深陷“算法有、场景无&#xff0c;技术强、落地难”的怪圈。明远智睿SD2351核心板的问世…...






编程日记
2025/6/20 23:16:08



















C++23中if consteval / if not consteval (P1938R3) 详解




文章目录 引言基本概念consteval 回顾if consteval 和 if not consteval 的定义语法规则 设计目的解决现有问题增强代码的可读性和可维护性提高代码的性能和安全性 使用示例简单示例复杂示例 与其他特性的对比与 if constexpr 的对比与 std::is_constant_evaluated() 的对比 实…...






编程日记
2025/6/24 12:29:43