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

【HTML】动态背景效果前端页面

news 来源：原创 2025/9/17 9:51:05

下面是一个带有多种动态背景效果的现代化前端页面，包含粒子效果、渐变波浪和星空背景三种可选动态背景。直接上代码！!

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态背景效果展示</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Arial', sans-serif;color: white;overflow: hidden;height: 100vh;background-color: #0a192f; /* 默认背景色 */}.background-selector {position: fixed;top: 20px;right: 20px;z-index: 100;display: flex;gap: 10px;}.bg-btn {padding: 8px 15px;background: rgba(255, 255, 255, 0.2);border: 1px solid rgba(255, 255, 255, 0.3);color: white;border-radius: 20px;cursor: pointer;backdrop-filter: blur(5px);transition: all 0.3s ease;font-size: 14px;}.bg-btn:hover {background: rgba(255, 255, 255, 0.3);}.bg-btn.active {background: rgba(255, 255, 255, 0.4);font-weight: bold;}.content {position: relative;z-index: 10;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;padding: 20px;}h1 {font-size: 3rem;margin-bottom: 20px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}p {font-size: 1.2rem;max-width: 600px;margin-bottom: 30px;line-height: 1.6;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}/* 粒子背景容器 */#particles-js {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;display: block;}/* 渐变波浪背景 */.wave-container {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;display: none;overflow: hidden;}.wave {position: absolute;bottom: 0;left: 0;width: 200%;height: 100%;background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;animation: gradient 15s ease infinite;}.wave::before,.wave::after {content: '';position: absolute;width: 300%;height: 300%;top: -50%;left: 50%;transform: translate(-50%, -75%);}.wave::before {border-radius: 45%;background: rgba(255, 255, 255, 0.1);animation: wave 15s linear infinite;}.wave::after {border-radius: 40%;background: rgba(255, 255, 255, 0.05);animation: wave 20s linear infinite;}/* 星空背景 */.stars {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;display: none;background-color: #000;}.star {position: absolute;background-color: white;border-radius: 50%;animation: twinkle var(--duration) infinite ease-in-out;}/* 动画效果 */@keyframes gradient {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}@keyframes wave {0% { transform: translate(-50%, -75%) rotate(0deg); }100% { transform: translate(-50%, -75%) rotate(360deg); }}@keyframes twinkle {0%, 100% { opacity: 0.2; }50% { opacity: 1; }}/* 移动设备适配 */@media (max-width: 768px) {h1 {font-size: 2rem;}p {font-size: 1rem;padding: 0 15px;}.background-selector {top: 10px;right: 10px;flex-direction: column;align-items: flex-end;}.bg-btn {padding: 6px 12px;font-size: 12px;}}</style>
</head>
<body><!-- 背景选择器 --><div class="background-selector"><button class="bg-btn active" data-bg="particles">粒子效果</button><button class="bg-btn" data-bg="wave">渐变波浪</button><button class="bg-btn" data-bg="stars">星空背景</button></div><!-- 页面内容 --><div class="content"><h1>动态背景效果展示</h1><p>这是一个展示不同动态背景效果的页面。点击右上角的按钮可以切换不同的背景风格。</p></div><!-- 粒子背景 --><div id="particles-js"></div><!-- 渐变波浪背景 --><div class="wave-container"><div class="wave"></div></div><!-- 星空背景 --><div class="stars"></div><!-- 粒子效果库 --><script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script><script>// 背景切换功能const bgButtons = document.querySelectorAll('.bg-btn');const backgrounds = {particles: document.getElementById('particles-js'),wave: document.querySelector('.wave-container'),stars: document.querySelector('.stars')};// 显示默认背景backgrounds.particles.style.display = 'block';// 初始化粒子效果function initParticles() {particlesJS('particles-js', {particles: {number: { value: window.innerWidth < 768 ? 40 : 80, // 移动设备减少粒子数量density: { enable: true, value_area: window.innerWidth < 768 ? 600 : 800 } },color: { value: "#ffffff" },shape: { type: "circle" },opacity: { value: 0.5, random: true,anim: { enable: true, speed: 1, opacity_min: 0.1 }},size: { value: 3, random: true,anim: { enable: true, speed: 2, size_min: 0.3 }},line_linked: { enable: true, distance: window.innerWidth < 768 ? 100 : 150, color: "#ffffff", opacity: 0.4, width: 1 },move: { enable: true, speed: window.innerWidth < 768 ? 1 : 2, // 移动设备降低速度direction: "none", random: true, straight: false, out_mode: "bounce",bounce: true}},interactivity: {detect_on: "window",events: {onhover: { enable: true, mode: "repulse",parallax: { enable: true, force: 30, smooth: 10 }},onclick: { enable: true, mode: "push",push: { particles_nb: 4 }},resize: true},modes: {repulse: { distance: window.innerWidth < 768 ? 50 : 100,duration: 0.4},push: { particles_nb: 4 }}},retina_detect: true});}// 创建星空function createStars() {const starsContainer = document.querySelector('.stars');starsContainer.innerHTML = '';const starCount = window.innerWidth < 768 ? 100 : 200; // 移动设备减少星星数量for (let i = 0; i < starCount; i++) {const star = document.createElement('div');star.classList.add('star');// 随机大小 (1-3px)const size = Math.random() * 2 + 1;star.style.width = `${size}px`;star.style.height = `${size}px`;// 随机位置star.style.left = `${Math.random() * 100}%`;star.style.top = `${Math.random() * 100}%`;// 随机闪烁时间star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);starsContainer.appendChild(star);}}// 初始化星空createStars();// 背景切换事件bgButtons.forEach(button => {button.addEventListener('click', () => {// 更新按钮状态bgButtons.forEach(btn => btn.classList.remove('active'));button.classList.add('active');// 隐藏所有背景Object.values(backgrounds).forEach(bg => bg.style.display = 'none');// 显示选中的背景const selectedBg = button.getAttribute('data-bg');backgrounds[selectedBg].style.display = 'block';// 如果是星空背景，重新生成星星if (selectedBg === 'stars') {createStars();}// 如果是粒子背景，重新初始化if (selectedBg === 'particles') {// 先销毁现有粒子if (window.pJSDom && window.pJSDom.length > 0) {window.pJSDom[0].pJS.fn.vendors.destroy();}// 重新初始化initParticles();}});});// 页面加载时初始化粒子document.addEventListener('DOMContentLoaded', initParticles);// 窗口大小改变时重新调整window.addEventListener('resize', function() {// 如果是粒子背景当前显示，则重新初始化if (backgrounds.particles.style.display === 'block') {if (window.pJSDom && window.pJSDom.length > 0) {window.pJSDom[0].pJS.fn.vendors.destroy();}initParticles();}// 如果是星空背景当前显示，则重新生成星星if (backgrounds.stars.style.display === 'block') {createStars();}});</script>
</body>
</html>

页面特点

  1. 三种动态背景效果：

    • 粒子效果：可交互的粒子网络，鼠标悬停会排斥粒子，点击会添加粒子

    • 渐变波浪：彩色渐变背景加上动态波浪效果

    • 星空背景：随机生成的闪烁星星

  2. 响应式设计：

    • 适配各种屏幕尺寸

    • 在移动设备上自动调整布局

  3. 用户交互：

    • 可以随时切换不同的背景效果

    • 粒子效果支持鼠标交互

  4. 视觉效果：

    • 平滑的动画过渡

    • 精美的色彩搭配

    • 动态生成的随机元素

如何使用

  1. 将代码保存为HTML文件

  2. 在浏览器中打开即可看到效果

  3. 点击右上角的按钮可以切换不同的背景风格

  4. 可以自定义修改内容文字、颜色和动画参数

扩展建议

  1. 添加更多背景效果选项

  2. 实现背景效果的参数自定义

  3. 添加背景音乐配合视觉效果

  4. 保存用户选择的背景偏好到本地存储

这个页面可以直接使用，也可以作为基础集成到你的网站中，为网站增添动态视觉效果。

相关文章：

【HTML】动态背景效果前端页面

下面是一个带有多种动态背景效果的现代化前端页面&#xff0c;包含粒子效果、渐变波浪和星空背景三种可选动态背景。直接上代码&#xff01;! <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name&quo…...

编程日记 2025/9/17 9:51:05

前端面试宝典---创建对象的配置

Object.create 对整个对象的多个属性值进行配置 创建对象 不可更改属性值 // 创建对象 不可更改属性值 let obj Object.create({}, {name: {value: lisi,writable: false,},age: {value: 20,writable: true,} })console.log(初始化obj, obj) obj.name wangwu console.log(…...

编程日记 2025/9/16 20:20:55

Linux重启命令（Linux Restart Command）

Linux重启命令&#xff1a;深入了解reboot、shutdown、init和systemctl 在Linux系统中&#xff0c;重启系统是一个常见的操作&#xff0c;可以通过多种命令来实现。以下是一些常用的重启命令及其区别&#xff1a; reboot 这是一个非常通用的命令&#xff0c;用于重启系统。 它…...

编程日记 2025/9/16 5:48:31

UML-饮料自助销售系统（饮料已售完）序列图

一、题目&#xff1a; 在饮料自动销售系统中&#xff0c;顾客选择想要的饮料。系统提示需要投入的金额&#xff0c;顾客从机器的前端钱币口投入钱币&#xff0c;钱币到达钱币记录仪&#xff0c;记录仪更新自己的选择。正常时记录仪通知分配器分发饮料到机器前端&#xff0c;但可…...

编程日记 2025/9/16 21:12:38

第7课：智能体安全与可靠性保障

智能体安全与可靠性保障&#xff1a;从攻击防御到隐私保护的全栈实践 一、引言&#xff1a;当智能体走向开放世界&#xff1a;安全为何成为协作的“生命线” 随着多智能体系统&#xff08;MAS&#xff09;在金融、医疗、自动驾驶等关键领域的落地&#xff0c;安全风险呈指数级…...

编程日记 2025/9/16 19:45:09

前端性能优化核弹级方案：CSS分层渲染+Wasm，首屏提速300%！

前端性能优化核弹级方案&#xff1a;CSS分层渲染Wasm实现首屏提速300%的终极指南 在当今Web应用日益复杂的背景下&#xff0c;性能优化已成为前端开发的核心竞争力。本文将深入剖析两种革命性的前端性能优化技术——CSS分层渲染与WebAssembly(Wasm)的协同应用&#xff0c;揭示…...

编程日记 2025/9/16 12:30:37

有一个服务器能做什么？

服务器对于程序员来说就是一个超级便利的机器&#xff0c;可以用自己的知识来做出许多的使用场景。 搭建网站和应用程序 个人网站&#xff1a;可以创建个人博客、作品集网站或简历网站等&#xff0c;用于展示个人才华、分享经验和知识。 企业网站&#xff1a;为企业搭建官方…...

编程日记 2025/9/16 22:08:14

华为RH2288H V3服务器极速重装：从RedHat到openEuler 24超详细重装指南

1 登录iBMC口 2 配置启动项 点击&#xff1a;配置&#xff0c;点击&#xff1a;系统启动项 点击&#xff1a;单次有效&#xff0c;选择&#xff1a;光驱&#xff0c;点击&#xff1a;保存 3 进Remote Contro 点击&#xff1a;远程控制&#xff0c;进入如下界面 点击&#xff1…...

编程日记 2025/9/16 18:03:19

AI集群设计

关键要素 硬件选型 计算节点&#xff1a;通常选用配备高性能 GPU&#xff08;如 NVIDIA A100、H100 等&#xff09;的服务器&#xff0c;以提供强大的并行计算能力&#xff0c;加速深度学习模型的训练和推理过程。网络设备&#xff1a;采用高速网络&#xff0c;如 InfiniBand …...

编程日记 2025/9/16 13:09:00

NginxWebUI：可视化 Nginx 配置管理工具，告别繁琐命令行！

文章目录 &#x1f4cc;前言1. NginxWebUI 是什么&#xff1f;2. NginxWebUI 核心功能3. 如何安装 NginxWebUI&#xff1f;3.1 Docker 安装&#xff08;推荐&#xff09;3.2 Java Jar 运行 4. NginxWebUI 基本使用教程4.1 登录与初始化4.2 配置反向代理4.3 管理 SSL 证书4.4 查…...

编程日记 2025/9/16 16:07:42

深入理解 GLOG_minloglevel 与 GLOG_v：原理与使用示例

文章目录 深入理解 GLOG_minloglevel 与 GLOG_v&#xff1a;原理与使用示例1. GLOG_minloglevel&#xff1a;最低日志等级控制2. GLOG_v&#xff1a;控制 VLOG() 的详细输出等级3. GLOG_minloglevel 与 GLOG_v 的优先级关系4. 使用示例4.1 基础示例&#xff1a;不同日志等级4.2…...

编程日记 2025/9/16 16:03:57

移动端六大语言速记：第12部分 - 测试与优化

移动端六大语言速记：第12部分 - 测试与优化 本文将对比Java、Kotlin、Flutter(Dart)、Python、ArkTS和Swift这六种移动端开发语言在测试与优化方面的特性，帮助开发者理解和掌握各语言的测试框架和性能优化技巧。 12. 测试与优化 12.1 单元测试框架对比 各语言单元测试框架…...

编程日记 2025/9/17 9:50:40

ubuntu2204安装显卡驱动+多版本的cuda+cudnn+多版本tensorRT

cuda的版本更新速度很快&#xff0c;这也带动TensorRT的更新速度。TensorRT SDK的更新直接从版本8升级到版本10(其实有版本9&#xff0c;和8相比没有大的改变)。tensorRT部署模型的很多接口都发生了较大的改变。为了体验不同版本的cuda和tensorRT的推理&#xff0c;本文考虑在u…...

编程日记 2025/9/16 3:08:48

从One-Hot到TF-IDF：NLP词向量演进解析与业务实战指南

从One-Hot到TF-IDF&#xff1a;词向量演进之路 开场白&#xff1a; 想象一下&#xff0c;你试图用Excel表格分析《红楼梦》的情感倾向——每个字词都是孤立的单元格&#xff0c;计算机看到的只有冰冷的0和1&#xff0c;而“黛玉葬花”的凄美意境却消失得无影无踪。这就是NLP工…...

编程日记 2025/9/16 20:17:34

Ubuntu下载火狐浏览器

在 Ubuntu 中卸载 Firefox 浏览器的方法取决于其安装方式&#xff08;通过 APT 包管理器 或 Snap&#xff09;。以下是详细的步骤&#xff1a; 1. 确认 Firefox 的安装方式 首先检查 Firefox 是通过哪种方式安装的&#xff1a; # 检查 Snap 版本 snap list | grep firefox# 检…...

编程日记 2025/9/16 23:54:40

C++ - 数据容器之 unordered_map（声明与初始化、插入元素、访问元素、遍历元素、删除元素、查找元素）

一、unordered_map unordered_map 是 C STL 中的一个关联容器&#xff0c;它有如下特点 unordered_map 存储键值对&#xff0c;使用哈希表实现 unordered_map 的每个键在容器中只能出现一次 unordered_map 的存储的键值对是无序的 平均情况下&#xff0c;查找、插入、删除都…...

编程日记 2025/9/16 1:31:44

什么是具身智能？其发展五大趋势预测

3月29-30日&#xff0c;由中国人工智能学会主办的第二届中国具身智能大会&#xff08;CEAI 2025&#xff09;在北京海淀成功召开。中国科学院院士、南京大学党委书记谭铁牛在大会作题为“具身智能&#xff1a;学科交叉的新前站”的主题演讲。他表示&#xff0c;具身智能是发展人…...

编程日记 2025/9/16 4:23:16

智能指针的使用及其原理（C++）

1. 智能指针的使用场景分析 通过下面的例子来分析&#xff1a; double Divide(int a, int b) {// 当b 0时抛出异常if (b 0){throw "Divide by zero condition!";}else{return (double)a / (double)b;} }void Func() {int* array1 new int[10];int* array2 new …...

编程日记 2025/9/16 22:05:43

使用 react-three-fiber 快速重构 Three.js 场景⚛️

不明白的知识先放在一边&#xff0c;激发兴趣是第一步&#xff0c;所以不必纠结代码的细节&#xff0c;相信我你很快就会爱上这种感觉&#xff01;&#xff01;&#xff01; 今天&#xff0c;我们将更进一步&#xff0c;将上一篇中vite npm传统 Three.js 原生代码完整 重构为 …...

编程日记 2025/9/16 20:42:23

索尼相机视频文件格式规格

XAVC&#xff0c;作为Sony所独有的一种视频编码格式&#xff0c;具有其独特的压缩技术。其中&#xff0c;L代表的是Long GOP压缩方式&#xff0c;这种方式在视频编码中&#xff0c;侧重于实现帧间的高效压缩&#xff0c;以提升整体的编码效率。而I则对应着Intra压缩方式&#x…...

编程日记 2025/9/16 22:03:13

Audacity命令：“文件”菜单相关命令

1 Audacity命令&#xff1a;“文件”菜单相关命令 文件菜单提供用于创建、打开和保存 Audacity 项目以及导入和导出音频文件的命令。 1.1 文件菜单命令列表 文件菜单一级菜单的命令列表 Scripting IdActionParameters描述New:New无创建一个新的空白项目窗口&#xff0c;用于处…...

编程日记 2025/9/16 21:59:17

chrome提示https不安全, 不能记住账号密码怎么办? 可以利用js输入账号

背景: 在内网搭建的服务, 由于https证书问题, 可能会被chrome浏览器提示不安全 此时, 默认的记住账号密码功能就无法使用, 那么此时只能手动输入了吗? 想到了几种方案 1.利用外置软件, 模拟按键输入(比如按键精灵, 缺点是依赖外部软件, 运行速度也慢, 且执行时占用了输入焦…...

编程日记 2025/9/16 2:34:54

ubuntu18.04安装miniforge3

1.下载安装文件 略&#xff08;注&#xff1a;从同事哪里拖来的安装包&#xff09; 2.修改安装文件权限 chmod x Miniforge3-Linux-x86_64.sh 3.将它安装到指定位置 micromamba activate /home/xxx/fxp/fromDukto/miniforge3 4.激活 /home/xxx/fxp/fromDukto/miniforge3…...

编程日记 2025/9/16 9:23:01

Flutter容器组件深度解析

引言 在 Flutter 开发中&#xff0c;容器组件是构建用户界面的基石。它们为开发者提供了强大而灵活的方式来组织和布局界面元素。通过使用容器组件&#xff0c;开发者可以轻松地控制子组件的大小、位置、边距、背景等属性&#xff0c;从而创建出美观、易用且响应式的界面。本文…...

编程日记 2025/9/16 19:42:18

Java 实现 List＜String＞ 与 String 互转

在 Java 开发过程中&#xff0c;有时需要将 List<String> 转为 String 存储&#xff0c;后续使用时再还原回去。此时就需要 Java 实现 List<String> 与 String 互转。以下是一种互转方式。 采用如下工具包实现。 <dependency><groupId>org.apache.com…...

编程日记 2025/9/16 10:35:51

无人设备遥控器之数据分析与处理篇

无人设备遥控器的数据分析与处理是提升设备智能化水平和操作效率的关键环节。以下从数据采集、预处理、分析方法、处理技术、应用场景五个方面展开分析&#xff1a; 一、数据采集 无人设备遥控器通过多种方式采集数据&#xff0c;主要包括&#xff1a; 控制信号数据&#xf…...

编程日记 2025/9/16 4:53:41

【Django】教程-14-验证码+登录页

【Django】教程-1-安装创建项目目录结构介绍 【Django】教程-2-前端-目录结构介绍 【Django】教程-3-数据库相关介绍 【Django】教程-4-一个增删改查的Demo 【Django】教程-5-ModelForm增删改查规则校验【正则钩子函数】 【Django】教程-6-搜索框-条件查询前后端 【Django】教程…...

编程日记 2025/9/16 21:52:38

flask实现上传文件与下载文件

以下是一个使用Python Flask实现的文件上传和下载服务的完整步骤及代码示例：供参 功能说明： 上传文件： POST请求到/upload端点 需要包含一个名为file的文件参数 支持的文件类型包括：txt, pdf, png, jpg, jpeg, gif, doc, docx, xlsx, zip 返回上传成功信息和下载链接 下载…...

编程日记 2025/9/13 1:25:24

用Java写一个MVCC例子

MVCC&#xff08;Multi-Version Concurrency Control&#xff0c;多版本并发控制&#xff09;是一种用于数据库管理系统中处理并发访问数据的技术。它允许事务在查询时看到数据的一个快照版本&#xff0c;而不是直接查看最新的提交数据。这种方法不仅提高了并发性能&#xff0c…...

编程日记 2025/9/16 2:31:09

【遥感科普】卫星影像产品处理等级有哪些？

遥感数据等级划分是指将卫星遥感原始数据按处理深度分为不同等级&#xff0c;用户可快速匹配需求&#xff1a;初级数据适合算法开发&#xff0c;高级产品可直接用于分析。分级体系促进数据标准化&#xff0c;降低使用门槛&#xff0c;提升跨机构协作效率&#xff1b;同时便于质…...

编程日记 2025/9/16 6:04:38

第十二天 - Flask/Django基础 - REST API开发 - 练习：运维管理后台API

从零开始用Flask/Django构建运维管理后台API&#xff08;实战指南&#xff09; 前言&#xff1a;为什么选择Python Web框架&#xff1f; 在运维自动化领域&#xff0c;构建管理后台是每个运维工程师的必修课。本文将通过Flask和Django两个主流框架&#xff0c;手把手教你构建…...

编程日记 2025/9/16 9:18:02

计算机视觉与深度学习 ｜ 视觉里程计（Visual Odometry, VO）学习思路总结

视觉里程计（Visual Odometry, VO）学习思路总结 视觉里程计（VO）是通过摄像头捕获的图像序列估计相机运动轨迹的技术，广泛应用于机器人、自动驾驶和增强现实等领域。以下是一个系统的学习路径，涵盖基础理论、核心算法、工具及实践建议：一、基础理论与数学准备 核心数学工具…...

编程日记 2025/9/16 11:02:48

解决vite.config.ts 引入scss 预处理报错

版本号&#xff1a; "sass": "^1.86.3","sass-loader": "^16.0.5","vite": "^6.2.0" 报错图片&#xff1a; vite.config.ts 一开始文件错误 修改之后&#xff1a;完美解决报错&#xff08;不过我还没搞懂为什么…...

编程日记 2025/9/16 22:00:44

Design Compiler：中断命令/脚本的执行

相关阅读 Design Compilerhttps://blog.csdn.net/weixin_45791458/category_12738116.html?spm1001.2014.3001.5482 中断命令的执行 如果在使用命令时输入了错误的选项或输入了错误的命令&#xff0c;可以使用CtrlC手动中断命令的执行并返回到dc_shell中&#xff0c;此时终端…...

编程日记 2025/9/16 0:57:00

图灵逆向——题十七-字体加密

十七题是一个很经典的字体加密案例&#xff0c;很适合新手入门~ 目录列表 过程分析代码实现 过程分析 打开开发者工具直接看请求&#xff0c;发现它请求的没有加密参数&#xff0c;以为万事大吉的你迫不及待的点击了响应&#xff0c;然后就会发现依托。。。 返回的数据中字体…...

编程日记 2025/9/16 6:01:08

uniapp微信小程序图片生成水印

整体思路&#xff1a; 用户通过uni.chooseImage选择图片后&#xff0c;获得图片文件的path和size。通过path调用uni.getImageInfo获取图片信息&#xff0c;也就是图片宽高。图片宽高等比缩放至指定大小&#xff0c;不然手机处理起来非常久&#xff0c;因为手机随便拍拍就很大。…...

编程日记 2025/9/16 3:04:31

【MySQL】001.MySQL安装

文章目录 一. MySQL在Ubuntu 20.04 环境安装1.1 更新软件包列表1.2 安装MySQL服务器1.3 配置安全设置1.4 检查mysql server是否正在运行1.5 进行连接1.6 查询自带的数据库 二. 配置文件的修改三. MySQL连接TCP/IP时的登陆问题四. MySQL中的命令 一. MySQL在Ubuntu 20.04 环境安…...

编程日记 2025/9/16 13:01:59

《深度剖析 Linux 权限管理：从基础到进阶，解锁系统安全密钥》

一、权限管理 1.1 普通权限&#xff08;普通文件和目录&#xff09; [rootmd ~]# ll total 124 drwxr-xr-x. 2 root root 28 Feb 16 15:48 : drwxr-xr-x. 3 root root 64 Mar 9 00:22 111 -rw-r--r--. 1 root root 43 Feb 17 22:44 1.txt 1 2 …...

编程日记 2025/9/16 19:36:36

2025年4月9日-华为暑期实习-第一题-100分

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 01. 软件依赖链分析系统 问题描述 LYA 是某软件公司的工程师，负责管理公司的软件依赖关系。每个软件组件都有可能依赖于其他组件，形成一个依赖链。为了确保系统的稳定性，LYA 需要…...

编程日记 2025/9/16 9:13:01

leetcode 377. Combination Sum IV

这道题也是完全背包问题。这道题和第518题几乎一摸一样&#xff0c;所不同的是&#xff0c;第518题要求的是组合数&#xff0c;而第377题要求的是排列数。虽然本题题目描述中说求的是组合数&#xff0c;但从例子1中&#xff08;1&#xff0c;1&#xff0c;2&#xff09;和&…...

编程日记 2025/9/16 1:57:54

【TS学习】（22）什么是混入

在 TypeScript 中&#xff0c;混入&#xff08;Mixins&#xff09; 是一种设计模式&#xff0c;用于将多个类的功能组合到一个类中。它是一种实现代码复用的方式&#xff0c;尤其适用于需要从多个来源继承功能的场景。TypeScript 不直接支持多继承&#xff0c;但可以通过混入模…...

编程日记 2025/9/16 7:50:26

Firebase Studio，谷歌推出的云端AI 开发环境

Firebase Studio 是谷歌推出的一款基于云的全栈应用开发环境&#xff0c;旨在帮助开发者高效构建和交付集成 AI 功能的高质量应用。该平台结合了 Project IDX 和专用的 Firebase AI 代理&#xff0c;提供从后端到前端、移动应用等多维度的开发支持。 Firebase Studio是什么 F…...

编程日记 2025/9/16 12:27:29

电能质量在线监测分析装置支持实时监测、数据存储及远程传输，适用于电网、工业等场景

电能质量在线监测分析装置主要技术指标 2.1工作电源 交流&#xff1a;220V10% &#xff1b;50Hz0.5Hz&#xff1b;谐波畸变率不大于15&#xff05; 直流&#xff1a;220V10%&#xff0c;纹波系数不大于5% 2.2电流信号输入 输入方式&#xff1a;电流互感器输入&#xff1b; …...

编程日记 2025/9/16 10:32:31

线代[13]｜线性代数题37道以及数学分析题3道（多图预警）

博主首次发布于CSDN&#xff0c;禁止转载&#xff01;&#xff08;CSDN&#xff1a;汉密士2025&#xff09; 文章目录 一、缘起&#xff5c;《俗说矩阵》课程目录照片存档&#xff5c;线性代数学习脉络&#xff5c;线代习题集封面存档&#xff5c;未来——我与线性代数的纠缠 二…...

编程日记 2025/9/16 13:58:28

gitlab内置pgsql数据库迁移

gitlab内置pgsql数据库迁移 创建gitlab备份方法一&#xff0c;使用pg_dump备份方法二 使用gitlab工具 gitlab-backup 备份 运行sql文件注意事项ERROR: extension "btree_gist" has no installation script nor update path for version "1.7"btree_gist 找…...

编程日记 2025/9/16 5:44:46

IDEA、Webstorm使用账号密码登录Gitlab

在开发过程中&#xff0c;为了保证代码安全&#xff0c;更改了gitlab司库的密码&#xff0c;当更新项目时&#xff0c;发现更新失败了。让填入access_token&#xff0c;gitlab网页设置中虽然generate了token&#xff0c;也填入了它&#xff0c;但是还是报错401unauthorized&…...

编程日记 2025/9/17 4:53:41

水利水电安全员ABC适合哪些人考？

水利水电安全员证是水利工程建设领域的重要职业资格证书&#xff0c;主要涉及水利水电工程施工安全管理、风险防控和应急处理等工作。那么&#xff0c;哪些人适合考取&#xff1f; 哪些人适合考水利水电安全员&#xff1f; 1. 水利水电工程从业人员 ✅ 施工管理人员&#xf…...

编程日记 2025/9/15 1:09:43

Service Mesh 深度解析与 Istio+Envoy 实现方案

Service Mesh 深度解析与 IstioEnvoy 实现方案 一、Service Mesh 技术全景 核心架构演进 第一代架构&#xff1a;以库形式集成&#xff08;如 Netflix OSS&#xff09;第二代架构&#xff1a;Sidecar 代理模式&#xff08;如 Linkerd&#xff09;第三代架构&#xff1a;全功…...

编程日记 2025/9/14 8:30:53

使用uv管理python项目环境

安装uv 使用默认python环境安装uv&#xff08;把uv安装到默认python环境&#xff09;&#xff1a;pip install uv 创建python项目虚拟环境 如果是已有项目并且项目中有uv.lock文件&#xff0c;直接运行 uv run main.py&#xff0c;这会默认使用uv.lock文件创建虚拟环境如果是新…...

编程日记 2025/9/16 20:58:17

【Code】《代码整洁之道》笔记-Chapter9-单元测试

第9章　单元测试 过去十年以来&#xff0c;编程专业领域进步很大。1997年时&#xff0c;没人听说过测试驱动开发。对于我们之中的大多数人来说&#xff0c;单元测试是那种用来确保程序“可运行”的用过即扔的短代码。我们辛勤地编写类和方法&#xff0c;再弄出一些特殊代码来测…...

编程日记 2025/9/15 0:03:36