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

webAPI -DOM 相关知识点总结（非常细）

news 来源：原创 2025/7/5 4:19:00

title: WebAPI语法
date: 2025-01-28 12:00:00
tags:- 前端
categories:- 前端

WEB API

了解DOM的结构并掌握其基本的操作，体验 DOM 在开发中的作用

API简介

就是使用js来操作html和浏览器

什么是DOM?

就是一个文档对象模型，是用来呈现预计于任意html交互的API.

一句话：是浏览器提供的一套专门来操作网页内容的功能。

DOM :开发网页内容特效和实现用户交互。

DOM树

将html文档以树状结构直观的呈现出来，我们称之为文档树,DOm树

描述网页内容关系的名词。

作用：文档树直观的体现了标签与标签的关系

DOM对象（重要）

对象：浏览器根据html标签生成的Js对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上。

核心思想：把网页内容当作对象来处理。

Document :是DOM里面提供的一个对象

所以他提供的属性和方法都是用来访问和操作网页内容的
网页内容都在document里面

获取一个DOM 元素我们使用谁？能直接操作修改吗？

一般我们用的谁querySelector() 可以直接操作修改

获取多个DOM 元素我们使用querySelctorAll(),不可以直接进行修改，只能通过遍历的方式一次给里面的元素做修改。

根据CSS选择器来获取DOM元素（重点）

document.querySelctorAll('css选择器')

得到的是一个伪数组

有长度有索引号的数组
但是没有pop(),push()等数组的方法

想要得到里面的每一个对象，则需要遍历(for)来实现。

那么我应该怎么做呢？

//获取元素
const lis = document,querySelectorAll('.nav li')
//console.log(lis)
for(let i = 0;i<lis.length;i++)
{console.log(lis[i]); //每一个小li对象
}

小括号里面的参数必须是字符串，也就是必须加引号。

其他获取DOM元素的方法

document.getElementById('nav')
//根据id获取一个元素

操作元素内容

目标：能够修改元素的文本更换内容

DOM对象就是根据标签生成的，所以操作标签，本质上就是操作DOM对象

就是操作对象使用的点语法

如果想要修改标签元素的里面的内容，那么可以使用如下的几种方式

对象.innerText属性

那么具体上是怎么要的呢

<div class="box">我是文字的内容</div>
<script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容。对象.innerText 属性
console.log(box.innerText)  //获取文字内容
box.innerText = '我是一个盒子'
</script>

innerText 属性显示纯文本，不解析标签

可以将文本内容添加/更新到任意标签位置

对象.innerHTML属性

<div class="box">我是文字的内容</div>
<script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容。对象.innerText 属性
console.log(box.innerText)  //获取文字内容
box.innerHTML = '<strong>我要更换</strong>'
</script>

一个具体例子

<script>
//线声明一下数组
const personArr = ['周杰伦'，'sw','qd','wdw']
//随机数数组下标
const random = Math.floor(Math.random() * personArr.length)
//获取one 元素
const one = doucument.querySelctor('#one')
</script>

操作元素属性

对象.属性 = 值

<!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>Document</title>
</head>
<body><img src="./images/1.webp" alt=""><script>// 1. 获取图片元素const img = document.querySelector('img');// 2. 修改图片对象的属性img.src = './images/2.webp';img.title = 'pink老师的艺术照';</script>
</body>
</html>

然后再写一个生成随机照片的程序

<!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><img src="./images/1.webp" alt=""><script>// 获取 N ~ M 的随机整数function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N;}
// 1. 获取图片对象const img = document.querySelector('img');
// 2. 随机得到序号const random = getRandom(1, 6);
// 3. 更换路径img.src = `./images/${random}.webp`;</script>
</body>
</html>

这个得记住，当模版来记忆

操作对象的样式属性

img.src = ./images/${random}.webp; 这里是重点，也是精髓所在

小驼峰命名法（Camel Case）是一种命名约定，通常用于编程中变量、函数、对象等的命名。

特点：

1. 首字母小写：小驼峰命名法的第一个单词以小写字母开头。

2. 后续单词首字母大写：从第二个单词开始，每个单词的首字母大写，其余字母小写。

3.  **不使用分隔符**：单词之间不使用下划线、连字符等，仅通过字母大小写区分单词边界。

<!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><div class="box"></div><script>// 1. 获取元素const box = document.querySelector('.box');
// 2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位box.style.width = '300px';box.style.backgroundColor = 'hotpink';box.style.border = '2px solid blue';box.style.borderTop = '2px solid red';</script>
</body>
</html>

注意这个格式

小驼峰形式

<!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><style>.box {width: 300px;height: 200px;background-color: hotpink;border: 1px solid #000;}</style>
</head>
<body><div></div><script>// 1. 获取元素const div = document.querySelector('div');// 2. 添加类名 class 是个关键字 我们用 classNamediv.className = 'box';</script>
</body>
</html>

如果你想更换的是nav 的话，可以在添加类名也就是第2步鞋

Div.className = 'nav box'

操作元素样式属性

通过classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList 方式追加和删除类名

通过classList修改样式

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>classList.add 示例</title><style>.box {width: 100px;height: 100px;background-color: lightgray;}.active {background-color: lightblue;border: 2px solid blue;}</style>
</head>
<body><div class="box">文字</div><script>//获取元素const box = document.querySelector('.box')// 添加类名 activebox.classList.add('active')//删除一个类box.claaList.remove('active')//切换一个类box.classList.togglē('active')</script>
</body>
</html>

轮播图

首先随机数

随机数（记住）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机内容更新</title><style>.slider-wrapper img {width: 300px;height: 200px;}.slider-footer {padding: 10px;text-align: center;}</style>
</head>
<body><div class="slider-wrapper"><img src="placeholder.jpg" alt="随机图片" /></div><div class="slider-footer"><p>占位文字</p></div>
<script>const sliderData = [{ url: 'image1.jpg', title: '图片一标题', color: '#ffcccc' },{ url: 'image2.jpg', title: '图片二标题', color: '#ccffcc' },{ url: 'image3.jpg', title: '图片三标题', color: '#ccccff' }]
const random = parseInt(Math.random() * sliderData.length)
const img = document.querySelector('.slider-wrapper img')img.src = sliderData[random].url
const p = document.querySelector('.slider-footer p')p.innerHTML = sliderData[random].title
const footer = document.querySelector('.slider-footer')footer.style.backgroundColor = sliderData[random].color</script>
</body>
</html>

加小点

的具体实现

<div class="slider-wrapper"><img src="placeholder.jpg" alt="图片"><ul class="slider-indicator"><li></li><li></li><li></li></ul>
</div>

.slider-wrapper {position: relative;width: 300px;height: 200px;
}

.slider-wrapper img {width: 100%;height: 100%;
}

.slider-indicator {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;justify-content: center;list-style: none;padding: 0;
}

.slider-indicator li {width: 10px;height: 10px;background-color: lightgray;border-radius: 50%;margin: 0 5px;cursor: pointer;
}

.slider-indicator li.active {background-color: blue; /* 当前选中小圆点的颜色 */
}

const sliderData = [{ url: 'image1.jpg', title: '图片一标题', color: '#ffcccc' },{ url: 'image2.jpg', title: '图片二标题', color: '#ccffcc' },{ url: 'image3.jpg', title: '图片三标题', color: '#ccccff' }
];

// 随机选择一个图片和对应的小圆点
const random = parseInt(Math.random() * sliderData.length);

// 更新图片
const img = document.querySelector('.slider-wrapper img');
img.src = sliderData[random].url;

// 更新标题
const p = document.querySelector('.slider-footer p');
p.innerHTML = sliderData[random].title;

// 更新背景颜色
const footer = document.querySelector('.slider-footer');
footer.style.backgroundColor = sliderData[random].color;

// 选中小圆点并添加 active 类
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`);
li.classList.add('active');

操作表单元素属性

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单值操作</title>
</head>
<body><input type="text" value="电脑" id="uname">
<script>// 1. 获取元素const uname = document.querySelector('input');
// 2. 获取值// 获取表单里当前的值，用 uname.valueconsole.log(uname.value); // 输出：电脑
// innerHTML 无法获取表单值console.log(uname.innerHTML); // 输出：undefined 或空字符串
// 3. 设置表单的值uname.value = '我要买电脑';console.log(uname.value); // 输出：我要买电脑
// 4. 获取和设置表单类型console.log(uname.type); // 输出：textuname.type = 'password'; // 将表单类型改为密码输入框</script>
</body>
</html>

操作表属性（实现勾选）

自定义属性

这样就会出现5个<div>

自定义属性。在html5中推出来了专门的data-自定义属性

在标签上一律是以data-开头

在DOM对象上一律是以dataset对象方式获取

<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
const one = document.querySelector('div');
console.log(one.dataset.id);  // 输出：1
console.log(one.dataset.spm); // 输出：不知道

定时器

间歇函数

<body><script>第一种方法setInterval(fuction(){console.log('1111')},1000)第二种方法setInterval(fn,3000)关闭定时器fuction fn(){console.log('1111')}let n = setInterval(fn,1000)console.log(n)clearInterval(n)</script>
</body>

实现用户倒计时效果

let i = 1
setInterval(fuction (){
i++
document.write(i)
},200)

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时启用按钮</title><style>.btn {padding: 10px 20px;font-size: 16px;cursor: not-allowed;}.btn:enabled {cursor: pointer;}</style>
</head>
<body><button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>// 1. 获取元素const btn = document.querySelector('.btn');// console.log(btn.innerHTML); // 按钮的初始内容
// 2. 倒计时let i = 5; // 倒计时初始值// 2.1 开启定时器let n = setInterval(function () {i--; // 倒计时减少// 更新按钮文字btn.innerHTML = `我已经阅读用户协议(${i})`;// 判断倒计时是否结束if (i === 0) {clearInterval(n); // 关闭定时器// 定时器停止后，按钮可用，文字更新为“同意”btn.disabled = false;btn.innerHTML = '同意';}}, 1000); // 每秒执行一次</script>
</body>
</html>

轮播图定时器版本

论比

事件监听

程序检测是否有事件发生。

关闭广告

日期对象

const date = new

const date =  new Date()
console.log(data)
console.log(date.getFullYear());
const date1 = new Date('')
console.log(date1)

时间戳

在 JavaScript 中，时间戳（Timestamp） 是指从 1970 年 1 月 1 日 00:00:00 UTC 开始的毫秒数，用于表示一个具体的时间点。以下是关于时间戳的相关知识和常用方法。

这是获得时间的三种方式

查找DOM节点

在前端开发中，DOM（Document Object Model）节点是 HTML 文档的基础组成部分。DOM 是一种用于表示和操作 HTML 和 XML 文档的编程接口。

什么是 DOM 节点？

• 节点（Node） 是 DOM 树中的基本单元。

• 每个节点代表 HTML 文档中的一部分，比如标签、属性、文本等。

• 整个 HTML 文档被解析后，会被表示为一个由节点组成的树状结构，称为 DOM 树。元素节点 表示 HTML 标签，比如

查找节点

通过 ID 查找

const node = document.getElementById("myID");

通过类名查找：

const nodes = document.getElementsByClassName("myClass");

通过标签名查找：

const nodes = document.getElementsByTagName("div");

使用 querySelector：

const node = document.querySelector(".myClass"); // 选择第一个符合条件的节点
const nodes = document.querySelectorAll(".myClass"); // 选择所有符合条件的节点

父子节点

增加节点

创造节点

const newDiv = document.createElement("div");

添加子节点：

const parent = document.getElementById("parent");
const child = document.createElement("div");
parent.appendChild(child);

在指定位置插入节点

const parent = document.getElementById("parent");
const newNode = document.createElement("p");
const referenceNode = document.getElementById("child");
parent.insertBefore(newNode, referenceNode);

删除节点：

const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.removeChild(child);

修改节点内容

const node = document.getElementById("myID");
node.textContent = "New Content";

修改节点属性

const node = document.getElementById("myID");
node.setAttribute("class", "newClass");

DOM 节点关系

在 DOM 树中，节点之间存在层级关系：

• 父节点（Parent Node）： 使用 parentNode 属性访问。

const parent = childNode.parentNode;

• 子节点（Child Nodes）： 使用 childNodes 属性访问（包括文本节点）。

const children = parentNode.childNodes;

• 第一个子节点/最后一个子节点：

const firstChild = parentNode.firstChild;
const lastChild = parentNode.lastChild;

• 兄弟节点（Sibling Nodes）：

const nextSibling = currentNode.nextSibling; // 下一个节点
const previousSibling = currentNode.previousSibling; // 上一个节点

M端事件

swipper插件

在swipper插件这里

BOM

在前端开发中，BOM（Browser Object Model，浏览器对象模型）是一个用于操作浏览器窗口和浏览器相关功能的接口。BOM 提供了 JavaScript 与浏览器交互的能力，比如控制窗口、导航、获取浏览器信息等。

console.log(window.innerWidth);  // 浏览器窗口的宽度
console.log(window.innerHeight); // 浏览器窗口的高度
window.alert("这是一个弹窗!");  // 显示警告框
window.open("https://www.example.com"); // 打开新窗口

2. navigator 对象

• 提供浏览器和用户设备的信息，比如浏览器的名称、版本、操作系统等。

console.log(navigator.userAgent);      // 用户代理字符串，包含浏览器信息
console.log(navigator.platform);      // 操作系统类型
console.log(navigator.language);      // 当前使用的语言
console.log(navigator.onLine);        // 检测是否联网

3. location 对象

• 提供当前页面的 URL 信息，并可以通过它操作浏览器跳转。

console.log(location.href);           // 当前页面的完整 URL
console.log(location.hostname);       // 主机名
console.log(location.pathname);       // 路径部分
console.log(location.search);         // 查询字符串部分
location.assign("https://www.example.com"); // 跳转到指定 URL
location.reload();                    // 重新加载当前页面

4. history 对象

• 提供对浏览器历史记录的操作能力。

history.back();  // 返回上一页
history.forward(); // 前进到下一页
history.go(-2);   // 跳转到历史记录中的指定位置，负数表示后退

5. screen 对象

• 提供与用户屏幕相关的信息，比如分辨率。

console.log(screen.width);    // 屏幕宽度
console.log(screen.height);   // 屏幕高度
console.log(screen.availWidth);  // 可用宽度（减去任务栏等）
console.log(screen.availHeight); // 可用高度

定时器

JS执行机制

本地存储

在前端开发中，本地存储（Local Storage） 是 HTML5 提供的一种持久化存储方式，用于在浏览器中以键值对的形式保存数据。这些数据保存在用户的浏览器中，即使刷新页面或关闭浏览器后数据仍然存在。

1. 本地存储的特点

• 容量大：一般为 5MB，比传统的 cookie 容量大。

• 持久性：数据会一直保存在浏览器中，直到手动清除。

• 键值对存储：以字符串形式存储键值对。

• 仅在同一域名下共享：同一域名下的页面可以访问相同的本地存储。

(1) 保存数据

使用 localStorage.setItem(key, value) 方法。

localStorage.setItem('username', 'Alice');

• 参数说明：

• key：键名（字符串）。

• value：键值（必须是字符串）。

(2) 读取数据

使用 localStorage.getItem(key) 方法。

const username = localStorage.getItem('username');
console.log(username); // 输出：Alice

(3) 删除某个键值对

使用 localStorage.removeItem(key) 方法。

localStorage.removeItem('username');

(4) 清除所有数据

使用 localStorage.clear() 方法。

localStorage.clear();

(5) 获取所有键

使用 localStorage.key(index) 方法获取指定索引的键名。

for (let i = 0; i < localStorage.length; i++) {console.log(localStorage.key(i)); // 遍历所有键名
}

只能存储字符串

存储复杂数据类型

1. 存储对象

存储方法

将对象通过 JSON.stringify() 转换为字符串后存储：

const user = { name: 'Alice', age: 25, hobbies: ['reading', 'coding'] };
localStorage.setItem('user', JSON.stringify(user)); // 转为字符串存储

读取方法

从本地存储中获取字符串后，用 JSON.parse() 转换回对象：

const userStr = localStorage.getItem('user'); // 获取字符串
if (userStr) {const user = JSON.parse(userStr); // 转为对象console.log(user.name); // 输出：Aliceconsole.log(user.hobbies); // 输出：['reading', 'coding']
}

Map

map也称之为映射

join 把数组转换为字符串

正则表达式

正则表达式（Regular Expression）是用来匹配字符串中字符模式的工具，广泛应用于文本处理，比如验证输入格式、查找替换字符串、数据提取等。

1. 正则表达式的基础

正则表达式由普通字符和元字符（特殊字符）组成，具有灵活且强大的匹配能力。

正则表达式中的一些特殊字符需要通过反斜杠 \ 转义才能匹配本身：

• . 匹配 .，* 匹配 *。

• 如果要匹配反斜杠本身，写成 \。

常见正则表达式作用

表单验证
过滤敏感词
字符串中提取我们想要的部分

三组词语

匹配，替换，提取

const regex = /abc/;

const regex = /hello/i;
console.log(regex.test("Hello")); // true

定义-检测是否匹配

元字符（Metacharacters） 是正则表达式中具有特殊含义的字符，用于定义匹配规则，而不是直接匹配它们的字面值。元字符赋予了正则表达式强大的功能，使其可以灵活处理字符串模式匹配。

const regex = /a.b/;
console.log(regex.test("acb")); // true
console.log(regex.test("a_b")); // true
console.log(regex.test("ab"));  // false

const regex1 = /^hello/; // 必须以 "hello" 开头
console.log(regex1.test("hello world")); // true
console.log(regex1.test("world hello")); // false

const regex2 = /world$/; // 必须以 "world" 结尾
console.log(regex2.test("hello world")); // true
console.log(regex2.test("world hello")); // false

边界符

const regex1 = /^hello/; // 必须以 "hello" 开头
console.log(regex1.test("hello world")); // true
console.log(regex1.test("world hello")); // false

const regex2 = /world$/; // 必须以 "world" 结尾
console.log(regex2.test("hello world")); // true
console.log(regex2.test("world hello")); // false

(4) {}（量词）

• {n}：匹配前面的字符恰好 n 次。

• {n,}：匹配前面的字符至少 n 次。

• {n,m}：匹配前面的字符 n 到 m 次。

const regex1 = /a{2}/; // 匹配两个连续的 "a"
console.log(regex1.test("aa")); // true
console.log(regex1.test("a"));  // false

const regex2 = /a{2,}/; // 匹配至少两个连续的 "a"
console.log(regex2.test("aaa")); // true
console.log(regex2.test("a"));   // false

const regex3 = /a{2,4}/; // 匹配 2 到 4 个连续的 "a"
console.log(regex3.test("aaa"));  // true
console.log(regex3.test("aaaaa"));// true（只匹配前 4 个 "a"）

const regex1 = /a{2}/; // 匹配两个连续的 "a"
console.log(regex1.test("aa")); // true
console.log(regex1.test("a"));  // false

const regex2 = /a{2,}/; // 匹配至少两个连续的 "a"
console.log(regex2.test("aaa")); // true
console.log(regex2.test("a"));   // false

const regex3 = /a{2,4}/; // 匹配 2 到 4 个连续的 "a"
console.log(regex3.test("aaa"));  // true
console.log(regex3.test("aaaaa"));// true（只匹配前 4 个 "a"）

3. 特殊的字符类

正则表达式还提供了一些预定义的字符类，可以快速匹配特定类型的字符：

webAPI -DOM 相关知识点总结（非常细）

title: WebAPI语法 date: 2025-01-28 12:00:00 tags:- 前端 categories:- 前端WEB API 了解DOM的结构并掌握其基本的操作，体验 DOM 在开发中的作用 API简介就是使用js来操作html和浏览器什么是DOM? 就是一个文档对象模型，是用来呈现预计于任意htm…...

编程日记 2025/7/5 4:19:00

Deepseek的RL算法GRPO解读

在本文中，我们将深入探讨Deepseek采用的策略优化方法GRPO，并顺带介绍一些强化学习（Reinforcement Learning, RL）的基础知识，包括PPO等关键概念。策略函数（policy） 在强化学习中， a…...

编程日记 2025/7/5 3:46:04

设计模式的艺术-策略模式

行为型模式的名称、定义、学习难度和使用频率如下表所示： 1.如何理解策略模式在策略模式中，可以定义一些独立的类来封装不同的算法，每个类封装一种具体的算法。在这里，每个封装算法的类都可以称之为一种策略（Strategy…...

编程日记 2025/7/2 10:45:21

MyBatis 写法

MyBatis 高效使用技巧常见 MyBatis 使用技巧，这些技巧有助于简化数据库操作，提高开发效率，并增强系统的性能。 1. 动态 SQL 动态 SQL 让开发者能够依据参数灵活地构建 SQL 语句，避免了手动拼接字符串带来的复杂性和错误风险。…...

编程日记 2025/7/5 3:49:35

Git图形化工具【lazygit】

简要介绍一下偶然发现的Git图形化工具——「lazygit」概述 Lazygit 是一个用 Go 语言编写的 Git 命令行界面（TUI）工具，它让 Git 操作变得更加直观和高效。 Github地址：https://github.com/jesseduffield/lazygit 主要特点主要…...

编程日记 2025/7/5 4:08:46

K8s运维管理平台 - xkube体验：功能较多

目录简介Lic安装1、需要手动安装MySQL，**建库**2、启动命令3、[ERROR] GetNodeMetric Fail:the server is currently unable to handle the request (get nodes.metrics.k8s.io qfusion-1) 使用总结优点优化补充1：layui、layuimini和beego的详细介绍1.…...

编程日记 2025/6/29 10:37:08

5.3.1 软件设计的基本任务

文章目录软件设计解决的问题概要设计基本任务详细设计基本任务软件设计解决的问题需求分析解决“做什么”的问题，软件设计解决“如何做”的问题。软件设计分为概要设计、详细设计两块。概要设计是设计软件和数据的总体框架，比详细设计的颗粒度更大。详…...

编程日记 2025/7/2 23:28:33

Go学习：字符、字符串需注意的点

Go语言与C/C语言编程有很多相似之处，但是Go语言中在声明一个字符时，数据类型与其他语言声明一个字符数据时有一点不同之处。通常，字符的数据类型为 char，例如 ：声明一个字符 (字符名称为 ch) 的语句格式为 char ch&am…...

编程日记 2025/7/2 15:20:05

LabVIEW无线齿轮监测系统

本案例介绍了基于LabVIEW的无线齿轮监测系统设计。该系统利用LabVIEW编程语言和改进的天牛须算法优化支持向量机，实现了无线齿轮故障监测。通过LabVIEW软件和相关硬件，可以实现对齿轮箱振动信号的采集、传输和故障识别，集远程采集、数据库存储…...

编程日记 2025/7/1 4:15:16

基于SpringBoot的租房管理系统（含论文）

基于SpringBoot的租房管理系统是一个集订单管理、房源信息管理、屋主申诉处理、用户反馈等多项功能于一体的系统。该系统通过SpringBoot框架开发，拥有完善的管理员后台、屋主管理模块、用户功能模块等，适用于房地产租赁平台或中介公司进行日常管理与运营…...

编程日记 2025/7/1 5:24:53

剑指 Offer II 008. 和大于等于 target 的最短子数组

comments: true edit_url: https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20008.%20%E5%92%8C%E5%A4%A7%E4%BA%8E%E7%AD%89%E4%BA%8E%20target%20%E7%9A%84%E6%9C%80%E7%9F%AD%E5%AD%90%E6%95%B0%E7%BB%84/README.md 剑指 Offer II 008.…...

编程日记 2025/7/5 3:56:14

【微服务与分布式实践】探索 Eureka

服务注册中心心跳检测机制：剔除失效服务自我保护机制统计心跳失败的比例在15分钟之内是否低于85%，如果出现低于的情况，Eureka Server会将当前的实例注册信息保护起来，让这些实例不会过期。当节点在短时间内丢失过多的心跳时&am…...

编程日记 2025/7/1 23:01:29

关于opencv环境搭建问题：由于找不到opencv_worldXXX.dll,无法执行代码，重新安装程序可能会解决此问题

方法一：利用复制黏贴方法打开opencv文件夹目录找到\opencv\build\x64\vc15\bin 复制该目录下所有文件，找到C:\Windows\System32文件夹（注意一定是C盘）黏贴至该文件夹重新打开VS。方法二：直接配置环境打开opencv文…...

编程日记 2025/7/2 4:20:17

重构字符串（767）

767. 重构字符串 - 力扣（LeetCode） 解法： class Solution { public:string reorganizeString(string s){string res;//因为1 < s.length < 500 ， uint64_t 类型足够uint16_t n s.size();if (n 0) {return res;}unordere…...

编程日记 2025/7/5 4:17:13

【MQ】如何保证消息队列的高性能？

零拷贝 Kafka 使用到了 mmap 和 sendfile 的方式来实现零拷贝。分别对应 Java 的 MappedByteBuffer 和 FileChannel.transferTo 顺序写磁盘 Kafka 采用顺序写文件的方式来提高磁盘写入性能。顺序写文件，基本减少了磁盘寻道和旋转的次数完成一次磁盘 IO&#xff0…...

编程日记 2025/7/1 16:34:38

通义灵码插件保姆级教学-IDEA(安装及使用)

一、JetBrains IDEA 中安装指南官方下载指南：通义灵码安装教程-阿里云步骤 1：准备工作操作系统：Windows 7 及以上、macOS、Linux； 下载并安装兼容的 JetBrains IDEs 2020.3 及以上版本，通义灵码与以下 IDE 兼容&…...

编程日记 2025/7/4 18:13:24

babylon.js-3：了解STL网格模型

网格模型上色本篇文章主要介绍如何在 BabylonJS 中实现STL网格模型上色。文章目录网格模型上色运用场景概要延申正文加载器库的支持认识 OBJ 和 STL 文件GUI 色板选择器网格模型异步加载加载动画网格模型上色官方即将弃用 ImportMesh 而推荐使用 ImportMeshAsync 说明OBJ …...

编程日记 2025/7/1 4:14:17

面向对象设计（大三上）--往年试卷题+答案

目录 1. UML以及相关概念 1.1 动态图&静态图 1.2 交互图 1.3 序列图 1.4 类图以及关联关系 1.4.1类图 1.4.2 关系类型 (1) 用例图中的包含、扩展关系（include & extend） (2) 类图中的聚合、组合关系（aggragation & composition） 1.5 图对象以及职责划…...

编程日记 2025/7/4 6:10:23

Java基础知识总结（二十四）--Collections

它的出现给集合操作提供了更多的功能。这个类不需要创建对象，内部提供的都是静态方法。静态方法： Collections.sort(list);//list集合进行元素的自然顺序排序。 Collections.sort(list,new ComparatorByLen());//按指定的比较器方法排序。 class Co…...

编程日记 2025/7/2 18:28:49

大语言模型的API接口如何操作

选择大语言模型根据自身需求和应用场景选择合适的大语言模型，如 OpenAI 的 GPT 系列、百度的文心一言、智谱的 GLM 等。需要考虑模型的性能、功能特点、适用领域、成本等因素。获取 API 密钥和凭证注册账号：访问所选大语言模型的官方平台或相关开发…...

编程日记 2025/7/1 8:13:21

【漫话机器学习系列】067.希腊字母（greek letters）-写法、名称、读法和常见用途

希腊字母（Greek Letters） 希腊字母在数学、科学、工程学和编程中广泛使用，常用于表示变量、常量、参数、角度等。以下是希腊字母的完整列表及其常见用途。大写与小写希腊字母表大写小写名称（英文）名称（…...

编程日记 2025/7/4 13:54:28

Kotlin判空辅助工具

1）?.操作符 //执行逻辑 if (person ! null) {person.doSomething() } //表达式 person?.doSomething() 2）?:操作符 //执行逻辑 val c if (a ! null) {a } else {b } //表达式 val c a ?: b 3）!!表达式 var message: String? &qu…...

编程日记 2025/7/2 9:40:33

【Python-办公自动化】实现自动化输出json数据类型的分析报告和正逆转换

分析报告 import json from pprint import pprint, PrettyPrinterdef analyze_energy_data(file_path):"""能源数据分析与结构查看函数参数：file_path (str): JSON文件路径功能：1. 加载并解析JSON数据2. 显示数据结构概览3. 交互式结构探索"""…...

编程日记 2025/7/2 7:18:28

深入理解指针（2）

数组名的理解什么是数组名？在计算机编程中，数组名是用于标识一个数组的名称。那应当如何来理解数组名呢？事实上，在数组中数组名就是数组首元素的地址。示例1： #include<stdio.h> int main() {int arr[10] …...

编程日记 2025/7/1 22:06:23

SOME/IP--协议英文原文讲解3

前言 SOME/IP协议越来越多的用于汽车电子行业中，关于协议详细完全的中文资料却没有，所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块： 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 Note: Thi…...

编程日记 2025/6/28 6:40:13

计算机网络之计算机网络主要性能

一、速率与带宽速率： 定义：数据的传送速率，也称数据率或比特率，表示单位时间内传输的比特数。单位：比特/秒（bit/s），常用单位有千比特/秒（kb/s）、兆比特/秒…...

编程日记 2025/7/1 18:28:55

家居 EDI：Haverty‘s EDI 需求分析

Havertys 成立于 1885 年，是一家历史悠久的美国家具零售商。公司致力于为客户提供高品质的家具和家居饰品，其产品线涵盖客厅、卧室、餐厅及办公家具等多个领域。电子数据交换（EDI）是一种通过标准化电子格式在商业伙伴之间进行数据…...

编程日记 2025/7/3 10:48:55

JavaScript - Web APIs（上）

Web API 介绍严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECM…...

编程日记 2025/7/3 1:25:04

【漫话机器学习系列】068.网格搜索（GridSearch）

网格搜索（Grid Search） 网格搜索（Grid Search）是一种用于优化机器学习模型超参数的技术。它通过系统地遍历给定的参数组合，找出使模型性能达到最优的参数配置。网格搜索的核心思想定义参数网格创建一个包含超参数值…...

编程日记 2025/7/2 17:43:05

MySQL 的索引类型【图文并茂】

基本分类文本生成MindMap:https://app.pollyoyo.com/planttext <style> mindmapDiagram {node {BackgroundColor yellow}:depth(0) {BackGroundColor SkyBlue}:depth(1) {BackGroundColor lightGreen} } </style> * MySQL 索引** 数据结构角度 *** B树索引*** 哈…...

编程日记 2025/7/2 21:12:17

OSCP：发送钓鱼电子邮件执行客户端攻击

概述在渗透测试领域，钓鱼攻击是一种有效的客户端攻击手段，尤其在目标用户缺乏安全意识或系统存在未修复漏洞时，成功率较高。针对Windows平台，滥用Windows库文件（.Library-ms）是一种技术性较强但易于实施的…...

编程日记 2025/7/2 13:06:12

Oracle 普通用户连接hang住处理方法

一、现象说明 $ sqlplus / as sysdbaSQL*Plus: Release 19.0.0.0.0 - Production on Wed Dec 18 16:49:19 2024 Version 19.11.0.0.0Copyright (c) 1982, 2020, Oracle. All rights reserved.Connected to: Oracle Database 19c Enterprise Edition Release 19.0.0.0.0 - Pro…...

编程日记 2025/6/29 18:07:30