javascrip页面交互
元素的三大系列
offset系列
offset初相识
| offset系列属性 | 作用 |
| element.offsetParent | 返回作为该元素带有定位的父级元素，如果父级没有定位，则返回body |
| element.offsetTop | 返回元素相对于有定位父元素上方的偏移量 |
| element.offsetLeft | 返回元素相对于有定位父元素左方的偏移量 |
| element.offsetWidth | 返回自身包括padding、边框、内容区的宽度、返回数值不带单位 |
| element.offsetHeight | 返回自身包括padding、边框、内容区的高度、返回数值不带单位 |
| client系列属性 | 作用 |
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding，内容区宽度，不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding，内容区高度，不含边框，返回数值不带单位 |
| scroll系列属性 | 作用 |
| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度（实际内容的宽度），不含边框，返回数值不带单位 |
| element.scrollHeight | 返回自身实际的高度（实际内容的宽度），不含边框，返回数值不带单位 |
| 三大系列大小对比 | 作用 |
| element.offsetWidth | 返回自身包括padding，边框，内容区的宽度，返回数值不带单位 |
| element.clientWidth | 返回自身包括padding，内容区宽度，不含边框，返回数值不带单位 |
| element.scrollWidth | 返回自身实际宽度，不含边框，返回数值不带单位 |
使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等
获得元素距离带有定位祖先元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位
offset系列常用属性
offset与style区别
| offset | style |
| offset可以得到任意样式表中的样式值(行内，内部) | style只能得到行内样式表中的样式值 |
| offset系列获得的数值时没有单位的 | style.width获得的是带有单位的字符串 |
| offsetWidth包含padding+border+width | style.width获得不包含padding和border的值 |
| offsetWidth等属性时只读属性，只能获取不能赋值 | style.width是可读写属性，可以获取也可以赋值 |
| 我们想要获取元素大小为止，用offset更合适 | 要给元素更改值，则需要用style改变 |
<style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;border: 1px solid red;margin: 50px auto;position: relative;}.box1 {width: 100px;height: 100px;background-color: orange;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style></head><body><div class="box"><div class="box1"></div></div><div class="box2" style="width: 50px; height: 50px; background-color: red; border: 10px solid green"></div><script>var box = document.querySelector(".box");var box1 = document.querySelector(".box1");var box2 = document.querySelector(".box2");// 一、 通过offset获取值// 1、获取该元素带有定位的父级元素，如果父级没有定位，则返回body// console.log(box1.offsetParent, "offsetParent");// 2、返回元素相对于定位父元素上方的偏移量// console.log(box1.offsetTop, "offsetTop");// 3、返回元素相对于定位父元素左方的偏移量// console.log(box1.offsetLeft, "offsetLeft");// 4、返回自身的宽度（包括内容区，边框，padding）// console.log(box.offsetWidth, "offsetWidth");// 5、返回自身的高度（包括内容区，边框，padding）// console.log(box.offsetHeight, "offsetHeight");// 二、通过style获取值// 1、style只能获取行内样式表中的样式值// 不包括padding和border// console.log(box2.style.width); //50px//2、 可读可写// box2.style.width = "200px";</script>client系列
client初相识
使用client系列的相关属性来获取元素可视区的相关信息，可以动态的得到该元素的边框大小，元素大小等
| client系列属性 | 作用 |
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding，内容区宽度，不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding，内容区高度，不含边框，返回数值不带单位 |
<head><meta charset="UTF-8" /><title>client</title><style>.box {width: 100px;height: 100px;background-color: red;border: 10px solid orange;padding: 20px;margin: 100px auto;}</style></head><body><div class="box"></div><script>var box = document.querySelector(".box");// 1、返回元素上边框大小//console.log(box.clientTop); //10// 2、返回元素左边框大小//console.log(box.clientLeft); //10// 3、返回自身的宽度，包括padding，内容区，不含边框// console.log(box.clientWidth); //140// 3、返回自身的高度，包括padding，内容区，不含边框// console.log(box.clientHeight); //140</script></body>client的应用-flexible.js解析
// 立即执行函数 传入window，document参数
(function flexible(window, document) {// 获取html根标签 我们是通过更改html根标签的大小来改变页面大小的var docEl = document.documentElement;// 获取物理像素比，window.devicePixelRatio获取当前的dpr值，如果没有就是1var dpr = window.devicePixelRatio || 1;// adjust body font size//设置body字体大小function setBodyFontSize() {// 如果页面中有body这个元素，就设置body的字体大小if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {// 如果页面中没有body这个元素，则等着我们页面主要dom元素加载完后，设置页面字体大小document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10// 设置html元素的文字大小function setRemUnit() {// 将页面的大小平均划分为10等份，为整个页面的大小// 设置html根字体大小的变化var rem = docEl.clientWidth / 10;docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resize// 如果页面尺寸大小发生了变化，要重新设置rem大小window.addEventListener("resize", setRemUnit);// pageshow 是我们重新加载页面触发的事件window.addEventListener("pageshow", function (e) {// 如果是从缓存取过来的页面，也需要重新计算rem大小，为了兼容浏览器的if (e.persisted) {setRemUnit();}});// detect 0.5px supports// 有些移动端浏览器不支持0.5像素的写法， 通过一下代码，进行兼容if (dpr >= 2) {// 创建一个假的body元素，用于临时添加测试元素以检测某些样式效果var fakeBody = document.createElement("body");// 创建一个测试用的div元素var testElement = document.createElement("div");// 设置测试元素的边框样式，目的是检测在当前环境下边框的实际渲染高度testElement.style.border = ".5px solid transparent";// 将测试元素添加到假body中fakeBody.appendChild(testElement);// 将假body添加到文档的body元素中，以便在当前页面环境中渲染测试元素docEl.appendChild(fakeBody);// 检测测试元素的渲染高度是否为1，这可以用来判断设备的像素比或浏览器的渲染特性if (testElement.offsetHeight === 1) {// 如果测试元素的高度为1，表明可能存在高像素比屏幕或其他渲染特性// 在这种情况下，为docEl添加类名"hairlines"，以便通过CSS提供更合适的样式docEl.classList.add("hairlines");}// 清理测试元素，移除假body，以避免对页面其他部分造成潜在影响docEl.removeChild(fakeBody);}
})(window, document);scroll系列
scroll初相识
利用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等
小结
offset系列进行用于获得元素位置 offsetLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
sroll经常用于获取滚动距离 scrollTop
事件对象的相关大小：
动画函数封装
简单动画实现
核心原理：通过定时器setInterval()不断移动盒子位置
实现步骤：
获得盒子当前位置、
让盒子在当前位置上加上1个移动距离、
利用定时器不断重复这个操作、
加一个结束定时器的条件
需要给元素加定位，利用left值变化改变元素的位置
<!-- 需求：小盒子从左向右移动，移动到500px的地方，停下 -->
<script>var box = document.querySelector("div");var timer = setInterval(function () {if (box.offsetLeft === 500) {clearInterval(timer);return;}box.style.left = box.offsetLeft + 10 + "px";}, 30);</script>简单动画函数封装
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>02.封装简单动画函数</title><style>* {margin: 0;padding: 0;}div {width: 100px;height: 100px;background-color: #bfa;position: relative;left: 0;}span {background-color: pink;position: relative;left: 0;}</style></head><body><div>动画1</div><span>动画2</span><!-- 封装函数，传入不同的对象，目标停止值，都可以调用动画 --><script>function animation(obj, target) {var timer = setInterval(function () {if (obj.offsetLeft === target) {clearInterval(timer);return;}obj.style.left = obj.offsetLeft + 10 + "px";}, 30);}var box = document.querySelector("div");var s1 = document.querySelector("span");animation(box, 500);animation(s1, 300);</script></body>
</html>
优化动画函数
动画函数给不同的元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要var 声明定时器，我们可以给不同元素使用不同的定时器（自己用自己的定时器）
核心原理：利用js是一门动态语言，可以很方便的给当前对象添加属性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>03.优化动画函数</title><style>* {padding: 0;margin: 0;}div {width: 100px;height: 100px;background-color: #bfa;position: relative;left: 0;}span {background-color: pink;position: relative;left: 0;}</style></head><body><div>动画1</div><br /><button>点击按钮，执行动画函数</button><br /><span>动画2</span><!-- 优化1:根据传入的不同对象，将timer作为属性添加给不同的对象，减少开辟的空间 --><!-- 优化2:保证只有一个定时器在执行 --><script>function animation(obj, target) {//在开启动画前，先关闭前一个定时器，保证只有一个定时器在执行clearInterval(obj.timer);obj.timer = setInterval(function () {if (obj.offsetLeft >= target) {clearInterval(obj.timer);//优化3:当达到目标值后，再点击也不会执行了return;}obj.style.left = obj.offsetLeft + 10 + "px";}, 30);}var box = document.querySelector("div");var s1 = document.querySelector("span");var btn = document.querySelector("button");btn.addEventListener("click", function () {animation(s1, 300);});animation(box, 500);</script></body>
</html>缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
停止的条件是：让当前盒子位置等于目标位置就停止定时器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>04.缓动画实现</title><style>* {padding: 0;margin: 0;}div {width: 100px;height: 100px;background-color: pink;position: relative;left: 0;}</style></head><body><button>点击按钮，执行动画函数</button><br /><div>动画2</div><script>function animation(obj, target) {clearInterval(obj.timer);obj.timer = setInterval(function () {// 定义step，来代表每次移动的距离值，（目标值-现在的位置）/10var step = (target - obj.offsetLeft) / 10;if (obj.offsetLeft == target) {clearInterval(obj.timer);return;}obj.style.left = obj.offsetLeft + step + "px";}, 30);}var s1 = document.querySelector("div");var btn = document.querySelector("button");btn.addEventListener("click", function () {animation(s1, 500);});</script></body>
</html>
动画函数优化
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>05.优化缓动动画动画函数</title><style>* {padding: 0;margin: 0;}div {width: 100px;height: 100px;background-color: pink;position: absolute;left: 0;}</style></head><body><button id="btn01">点击按钮，执行动画函数 500</button><br /><button id="btn02">点击按钮，执行动画函数 800</button><br /><div>丹洋其</div><script>//优化三 加回调函数，可以在执行动画后，再执行其他内容function animation(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function () {// 定义step，来代表每次移动的距离值// 优化一：对于step会涉及到小数，将小数向上取整// var step = Math.ceil((target - obj.offsetLeft) / 10);// 优化二：动画还是会涉及到往回走，如果往回走，则step会是负值，要向小取整var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {clearInterval(obj.timer);// 如果传入了回调，则执行回调，否则，就不执行if (callback) {callback();}} else {// console.log(222);obj.style.left = obj.offsetLeft + step + "px";}}, 15);}var s1 = document.querySelector("div");var btn01 = document.querySelector("#btn01");var btn02 = document.querySelector("#btn02");btn01.addEventListener("click", function () {animation(s1, 500);});btn02.addEventListener("click", function () {animation(s1, 800, function () {alert("111");});});</script></body>
</html>
animation.js文件并使用
animation.js
简单使用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>.nav {width: 30px;height: 30px;background-color: blueviolet;position: fixed;text-align: center;line-height: 30px;right: 0px;top: 40%;}.con {position: absolute;left: 0px;top: 0;width: 200px;height: 30px;background-color: blueviolet;z-index: -1;}</style><script src="./animation.js"></script></head><body><div class="nav"><span>⬅️</span><div class="con">移入弹出</div></div><script>var s1 = document.querySelector("span");var nav = document.querySelector(".nav");var con = document.querySelector(".con");nav.addEventListener("mouseenter", function () {animation(con, -170, function () {s1.innerHTML = "➡️";});});nav.addEventListener("mouseleave", function () {animation(con, 0, function () {s1.innerHTML = "⬅️";});});</script></body>
</html>JSON数据
本地存储
localstorage、Sessionstorage是Web Storage，H5的本地存储机制。是本地存储，存储在客户端，以键/值对的形式存储的，通常以字符串存储。
是针对HTML4中 Cookie 存储机制的一个改善，由于Cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的 Web Storage 存储机制。
Cookie
（1）、定义
Cookie实际上是一小段的文本信息，是服务器发送到用户浏览器并保存在本地的一小块数据。
客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。当浏览器下次向同一服务器再发起请求时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。
（2）、作用
保存用户登录状态
跟踪用户行为
定制页面
创建购物车：使用cookie来记录用户需要购买的商品，再结帐的时候可以统一提交。(淘宝网就是使用cookie记录了用户曾经浏览过的商品，方便随时进行比较)
window.sessionStorage
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
存储空间相对较小
以键值对的形式存储使用
sessionStorage.setItem(key,value); //存储数据sessionStorage.getItem(key);//获取数据sessionStorage.removeItem(key);//删除数据sessionStorage.clear();//清除数据window.localStorage
生命周期永久生效，除非手动删除，否则关闭页面也会存在
可以多窗口（页面）共享（同一个浏览器可以共享）
存储空间较大
以健值对的形式存储使用
localStorage.setItem(key,value); //存储数据localStorage.getItem(key);//获取数据localStorage.removeItem(key);//删除数据localStorage.clear();//清除数据记住用户名案例
如果勾选记住用户名，下次用户打开浏览器，就在文本框里自动显示上次登录的用户名
<body><input type="text" id="username" /><input type="checkbox" id="checkbox" />记住用户名<script>var userInt = document.getElementById("username");var checkbox = document.getElementById("checkbox");// 判断本地是否存储了username，存了就取出来赋值给input，并勾选复选框if (localStorage.getItem("username")) {userInt.value = localStorage.getItem("username");checkbox.checked = true;}checkbox.addEventListener("change", function () {if (this.checked) {localStorage.setItem("username", userInt.value);} else {localStorage.removeItem("username");}});</script></body>相关文章：
javascrip页面交互
元素的三大系列 offset系列 offset初相识 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素，如果父级没有定位，则返回body element.offsetTop 返回元素相对于有定位父元素上方的偏移量 element.offsetLeft 返回元素…...
PAL（Program-Aided Language Model）
PAL（Program-Aided Language Model）是一种结合生成式语言模型（如 GPT）和程序执行能力的技术框架。它的核心思想是通过让语言模型生成代码或程序来解决复杂任务，程序执行的结果反过来增强语言模型的输出准确性和逻辑性。…...
Altium Designer学习笔记 6-10 异性元件库创建_原理图绘制
基于Altium Designer 23学习版，四层板智能小车PCB 更多AD学习笔记：Altium Designer学习笔记 1-5 工程创建_元件库创建 目录 6、光耦及二极管元件库模型创建 7、元件库模型的调用 二、原理图绘制及编译检查 8、元件的放置 9、器件的复制及对齐 10、…...
Qt-多元素控件
Qt中的多元素控件 Qt提供的多元素控件有： 这里的多元素控件都是两两一对的。 xxWidget和xxView的一个比较简单的理解就是： xxView是更底层的实现， xxWidget是基于xxView封装来的。 可以说，xxView使用起来比较麻烦，但…...
网络安全-web架构-nginx配置
1. nginx访问： 访问的是index.html， 访问ip访问的资源就是在/usr/share/nginx/html中； 当nginx不认识，浏览器认识的话，浏览器会自动渲染。 当nginx认识，浏览器不认识的话，浏览器会把它加载成…...
CPU性能优化--微操作
x86 架构处理器吧复杂的CISC指令转为简单的RISC微操作。这样做最大的优势是微操作可以乱序执行，一条简单的相加指令--比如ADD，EAX, EBX，只产生一个微操作，而很多复杂指令--比如ADD, EAX 可能会产生两个微操作，一个将数…...
开源许可协议
何同学推动了开源协议的认识，功不可没，第一次对开源有了清晰的认识，最宽松的MIT开源协议 源自OSC开源社区：何同学使用开源软件“翻车”，都别吵了！扯什么违反MIT...
React核心功能详解（一）
React是一个流行的JavaScript库，用于构建用户界面。其高级核心功能涵盖了多个方面，以下是对这些功能的详解： 一、组件化与模块化 组件化开发：React提倡将用户界面拆分成多个独立的组件，每个组件负责管理自己的状态和…...
在vue中，根据后端接口返回的文件流实现word文件弹窗预览
需求 弹窗预览word文件，因浏览器无法直接根据blob路径直接预览word文件，所以需要利用插件实现。 解决方案 利用docx-preview实现word文件弹窗预览，以node版本16.21.3和docx-preview版本0.1.8为例 具体实现步骤 1、安装docx-preview插件 …...
基于Spring Boot的同城宠物照看系统的设计与实现
摘 要 科学技术日新月异，人们的生活都发生了翻天覆地的变化，同城宠物照看系统当然也不例外。过去的信息管理都使用传统的方式实行，既花费了时间，又浪费了精力。在信息如此发达的今天，我们可以通过网络这个媒介&#x…...
Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作（三）
Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作（三） py2neo 删除 1、连接数据库 from py2neo import Graph graph Graph("bolt://xx.xx.xx.xx:7687", auth(user, pwd), nameneo4j)2、删除节点 # 删除单个节点 node graph.node…...
二分基本实现
模板 一般题目看到，最大，最小时优先考虑二分 //将区间分为 [l,mid-1] int erfen1(int l,int r) {while(l<r){int mid(lr1)/2;if(check())lmid;elsermid-1;}return l; }//将区间分为 [mid1,r] int erfen2(int l,int r) {while(l<r){int mid(lr)/2…...
数据结构中的随机抽取和顺序存取
在数据结构领域，随机存取与顺序存取是两种基本的存储模式。这两种模式在很大程度上决定了数据的组织与访问方式，从而对数据处理效率和存储空间的利用效果产生重要影响。本文将进一步探讨这两种存储模式的特点及其差异。 随机存取 随机存取，…...
大数据新视界 -- 大数据大厂之 Impala 性能优化：跨数据中心环境下的挑战与对策（上）（27 / 30）
💖💖💖亲爱的朋友们，热烈欢迎你们来到 青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...
GPT中转站技术架构
本文介绍阿波罗AI中转站（https://api.ablai.top/）的技术架构，该中转API的技术架构采用了分布式架构、智能调度和API中转等技术，确保了全球范围内的高效访问和稳定运行。以下是对该技术架构的详细分析： 分布式架构 分…...
忽然就卷起来的AI Coding 赛道
忽然就卷起来的AI Coding 赛道 原创 松子 松子聊数据 2024年11月22日 17:03 2023年，大模型的爆发让整个行业经历了一场“拼尽一切”的竞赛——拼算力、拼参数、拼语料，再到今天开始拼智能体。 每一步都是技术的跃迁，也让市场竞争愈发白热化…...
十大网络安全事件
一、私有云平台遭攻击，美国数千家公司工资难以发放 1月，专门提供劳动力与人力资本管理解决方案的美国克罗诺斯（Kronos）公司私有云平台遭勒索软件攻击，事件造成的混乱在数百万人中蔓延。 克罗诺斯母公司UKG集团…...
1+X应急响应（网络）病毒与木马的处置：
病毒与木马的处置： 病毒与木马的简介： 病毒和木马的排查与恢复：...
nohup java -jar supporterSys.jar --spring.profiles.active=prod
文章目录 1、ps -ef | grep java2、kill 13713、ps -ef | grep java4、nohup java -jar supporterSys.jar --spring.profiles.activeprod &5、ps -ef | grep java1. 启动方式进程 1371进程 19994 2. 主要区别3. 可能的原因4. 建议 1、ps -ef | grep java rootshipper:~# p…...
二进制 分析工具：Radare2、r2frida、Binutils、file、string、as、nm、ldd、objdump、readelf、strip
1、二进制 分析工具 工欲善其事，必先利其器，在二进制安全的学习中，使用工具尤为重要。遇到一个不熟悉的文件时， 首先要确定 "这是什么类型的文件"，回答这个问题的首要原则是，绝不要根据文件的扩…...
【Linux】基本指令
一、基本指令 1、pwd 语法：pwd 功能：显示用户当前所在的目录。 2.ls 语法：ls [命令行选项][目录或文件](对于选项可以是0个或多个) 功能：对于目录，该命令该目录下的目录和文件。对于文件，将列出文件名…...
Failed to start Docker Application Container Engine
说明： 1）访问应用业务，读取不到数据，show databases;查看数据库报错 2）重启docker服务，服务启动失败，查看日志报错如下图所示 3）报错信息：chmod /data/docker: read-only…...
043 商品详情
文章目录 详情页数据表结构voSkuItemVo.javaSkuItemSaleAttrVo.javaAttrValueAndSkuIdVo.javaSpuAttrGroupVo.javaGroupAttrParamVo.java pom.xmlSkuSaleAttrValueDao.xmlSkuSaleAttrValueDao.javaAttrGroupDao.xmlAttrGroupServiceImpl.javaSkuInfoServiceImpl.javaSkuSaleAtt…...
股指期货的套保策略如何精准选择和规避风险？
在金融市场中，股指期货作为一种重要的风险管理工具，常被投资者用来规避投资风险。其原理在于，股指期货与现货股指的走势高度相关，因此可以通过在期货市场上建立与现货头寸相反的头寸，来对冲掉现货市场的价格波动风险。…...
_253)
基于物联网设计的人工淡水湖养殖系统(华为云IOT)_253
文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成【4】设计意义【5】国内外研究现状【6】摘要1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发1.5 参考文献1.6 系统框架图1.7 系统原理图1.8 实物图1.9…...
【动手学深度学习Pytorch】4. 神经网络基础
模型构造 回顾一下感知机。 nn.Sequential()：定义了一种特殊的module。 torch.rand()：用于生成具有均匀分布的随机数，这些随机数的范围在[0, 1)之间。它接受一个形状参数（shape），返回一个指定形状的张量&am…...
python高阶技巧一
闭包 简单认识一下闭包 以下代码，内层inner函数不仅依赖于自身的参数b，还依赖于外层outer函数的参数a。inner就是一个闭包函数，既能访问外部变量，又保证外部变量不是全局的，不会被篡改掉，确保了外部变量的…...
智慧环保生态文明信息化解决方案
1. 生态文明建设背景 随着国家对生态文明建设的重视，一系列政策文件相继出台，将生态文明建设纳入国家发展总体布局，加大资源消耗、环境保护等指标权重，推动生态文明体制改革。 2. 智慧环保的定义与发展 智慧环保作为数字环保的…...
【Linux】权限
🌻个人主页：路飞雪吖~ 🌠专栏：Linux 目录 ⭐Linux权限的概念 🌟权限管理 <1>文件访问者的分类 <2>文件类型和访问权限 <3>文件权限值的表示方法 <4>文件访问权限的相关设置方法 ✨chmod…...
docker 部署 kvm 图形化管理工具 WebVirtMgr
镜像构建 官方最后一次更新已经是 2015年6月22日 了，官方也没有 docker 镜像，这边选择咱们自己构建如果你的服务器有魔法，可以直接 git clone 一下 webvirtmgr 的包，没有的话，可以和我一样，提前从 github 上…...
Next.js- 链接和导航
#题引：我认为跟着官方文档学习不会走歪路 在介绍路由导航之前先了解下客户端组件和服务端组件 服务端组件（Server Components） （1） 渲染方式： 在服务器上渲染，生成 HTML 后发送到客户端。适…...
主机管理工具 WGCLOUD v3.5.6 更新了哪些特性
WGCLOUD-v3.5.6 更新说明，2024-11-20发布 1. 新增，个性化采集，查看 2. 新增，支持达梦数据库做数据源来存贮监控数据，查看说明(8) 3. 新增，日志监控支持配置自动处理指令，当发现日志出现告警关键…...
空间数据存储格式GeoJSON
GeoJSON 是一种用于表示地理信息的开放标准格式，广泛用于存储和交换地理空间数据。它基于 JSON 格式，因此易于理解和处理，尤其适用于 Web 和 JavaScript 环境中的地图应用。GeoJSON 支持多种地理信息类型，如点、线、面、坐标系统等…...
【SQL Server】华中农业大学空间数据库实验报告 实验九 触发器
1.实验目的 通过实验课程与理论课的学习深入理解掌握的触发器的原理、创建、修改、删除、基本的使用方法、主要用途，并且可以在练习的基础上，熟练使用触发器来进行数据库的应用程序的设计；深入学习深刻理解与触发器相关的T-SQL语句的编写的基…...
Linux 中的 zoxide 命令详解与示例
文章目录 Linux 中的 zoxide 命令详解与示例zoxide 简介安装 zoxide使用包管理器Ubuntu/DebianArch LinuxFedoramacOS（Homebrew）Windows（Scoop） 使用脚本安装（linux、Centos）安装流程 集成到 ShellBashZshF…...
Etcd 框架
基本了解 客户端、长连接与租约的关系 客户端对象 etcd的客户端对象是用户与etcd服务进行交互的主要接口，主要功能就是存储、通知和事务等功能访问 键值存储：客户端通过put 和 get操作存储数据；数据存储在etcd的层级化键值数据库中监听器&a…...
在 CentOS 7 上安装 MinIO 的步骤
在 CentOS 7 上安装 MinIO 的步骤 在 CentOS 7 上安装 MinIO 的步骤1. 更新系统2. 安装依赖3. 下载 MinIO4. 赋予执行权限5. 移动 MinIO 到系统路径6. 创建 MinIO 用户7. 创建数据目录8. 创建 MinIO 服务文件9. 启动 MinIO 服务10. 设置开机自启11. 访问 MinIO12. 配置防火墙&a…...
【Linux】进程地址空间
目录 一、引入问题： 二、进程地址空间： 地址和数据总线： 三、页表： 权限： 缺页中断： 四、回到问题： 五、总结： 重新理解进程： 一、引入问题： 在C中&a…...
快速图像识别：落叶植物叶片分类
1.背景意义 研究背景与意义 随着全球生态环境的变化，植物的多样性及其在生态系统中的重要性日益受到关注。植物叶片的分类不仅是植物学研究的基础，也是生态监测、农业管理和生物多样性保护的重要环节。传统的植物分类方法依赖于人工观察和专家知识&…...
第 22 章 - Go语言 测试与基准测试
在Go语言中，测试是一个非常重要的部分，它帮助开发者确保代码的正确性、性能以及可维护性。Go语言提供了一套标准的测试工具，这些工具可以帮助开发者编写单元测试、表达式测试（通常也是指单元测试中的断言）、基准测试等…...
K8S + Jenkins 做CICD
前言 这里会做整体CICD的思路和流程的介绍，会给出核心的Jenkins pipeline脚本，最后会演示一下 实验/实操 结果 由于整体内容较多，所以不打算在这里做每一步的详细演示 - 本文仅作自己的实操记录和日后回顾用 要看保姆式教学的可以划走了&…...
http/https
1、http与https HTTPHTTPS信息明文传输加入ssl加密传输协议，可以使得报文加密传输默认端口80默认端口443连接简单TCP三次握手通信TCP三次握手后还要SSL/TLS握手过程，才可以加密报文传输无状态不安全需要到CA申请证书，身份认证，自…...
腾讯云 AI 代码助手：产品研发过程的思考和方法论
一、文章摘要 本文将详细阐述 腾讯云 AI 代码助手的历史发展形态与产品整体架构，并从技术、研发方法论的角度分别阐述了产品的研发过程。 全文阅读约 5～8 分钟。 二、产品布局 AI 代码助手产品经历了三个时代的发展 第一代诸如 Eclipse、Jetbrains、V…...
淘宝商品评论爬虫：Java实现指南
在当今的互联网时代，数据的价值日益凸显，尤其是用户生成的内容，如商品评论，对于理解消费者行为和市场趋势具有重要意义。淘宝作为中国最大的电商平台之一，拥有海量的商品评论数据。本文将介绍如何使用Java编写一个简单…...
 —— 筑梦之路)
银河麒麟v10 x86架构二进制方式kubeadm+docker+cri-docker搭建k8s集群(证书有效期100年) —— 筑梦之路
环境说明 master：192.168.100.100 node: 192.168.100.101 kubeadm 1.31.2 （自编译二进制文件，证书有效期100年） 银河麒麟v10 sp2 x86架构 内核版本：5.4.x 编译安装 cgroup v2启用 docker版本：27.x …...
【Linux】详解shell代码实现（上）
🪐🪐🪐欢迎来到程序员餐厅💫💫💫 主厨：邪王真眼 主厨的主页：Chef‘s blog 所属专栏：青果大战linux 总有光环在陨落，总有新星在闪烁 学校开始搞蓝桥的校选…...
Ruby 模块（Module）
Ruby 模块（Module） 概述 Ruby 是一种动态、开放源代码的编程语言，以其简洁明了的语法和强大的功能而闻名。在 Ruby 中，模块（Module）是一个重要的概念，它用于封装一组相关的方法和常量。模块提…...
成都睿明智科技有限公司怎么样可靠不？
在这个日新月异的数字时代，电商行业如同一股不可阻挡的洪流，席卷着每一个消费者的生活。而抖音，作为短视频与电商完美融合的典范，更是为无数商家开辟了一片全新的蓝海。在这片充满机遇与挑战的海洋中，成都睿明智科技有…...
内网安全隧道搭建-ngrok-frp-nps-sapp
1.ngrok 建立内网主机与公网跳板机的连接： 内网主机为客户机： 下载客户端执行 2.frp （1）以下为内网穿透端口转发 frp服务端配置： bindPort 为frp运行端口 服务端运行 ./frps -c frps.ini frp客户端配置…...
k8s 对外服务之 Ingress
LB ingress //Ingress 简介 service的作用体现在两个方面，对集群内部，它不断跟踪pod的变化，更新endpoint中对应pod的对象，提供了ip不断变化的pod的服务发现机制；对集群外部，他类似负载均衡器，…...