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

如何实现一个充满科技感的官网(二)

背景

在上一篇文章 《如何实现一个充满科技感的官网(一)》 中,我们初步了解了该官网的整体设计,并与大家探讨了它的视觉呈现和用户体验。

我们前期的内部设计偏向简洁,所以开始思考如何提升网站的整体设计感。这些尝试便由此展开。

网站地址:https://infinilabs.com/

如果你对动态背景的实现感兴趣,这篇文章将带你深入探索,揭秘如何从零打造一个兼具美感与功能性的企业官网!

技术选型

  • 前端框架:Next.js
  • UI 框架:基于 Tailwind CSS
  • CSS 样式:Tailwind CSS(快速开发、内置响应式、丰富工具类)

为什么选择 Next.js?

  1. 兼容团队技术栈:基于 React,便于团队协作。
  2. SEO 和性能优化:支持服务端渲染(SSR)和静态站点生成(SSG)。
  3. 路由强大:支持动态路由和文件路由,灵活易用。
  4. 内置优化:图片优化、国际化、多种性能提升。
  5. 动态内容支持:博客、新闻等动态场景轻松应对。
  6. 加载体验佳:用户体验和页面加载速度表现优秀。

动态的背景方案

动态背景可以显著提升视觉吸引力,以下是常用实现方案:

  1. CSS 动画背景:使用纯 CSS 实现动态背景,通过 @keyframes 配合渐变色、位置移动等属性。
  2. 动态 Canvas 背景:使用 <canvas> 元素,结合 JavaScript 绘制动态效果,比如粒子系统、波浪效果等。
  3. 动态视频背景:使用 <video> 元素播放循环视频作为背景。
  4. WebGL 动态背景:使用 WebGL 库(如 Three.js)渲染 3D 动态背景。
  5. 动态粒子背景:使用现有的粒子背景库快速实现动态粒子效果。(particles.js 或 tsparticles)

如何选择?

  1. 简单需求: 纯 CSS 动画、动态视频背景。
  2. 复杂交互:Canvas 动画、WebGL 动画(Three.js)。
  3. 快速实现:使用粒子背景库(particles.js / tsparticles)。

动态背景代码实现

以下示例通过 WebGL 创建了一个动态背景组件,支持 React 和 Tailwind CSS。

  1. 创建 GlobalBackground.tsx 文件:
"use client";import dynamic from "next/dynamic";
import { Suspense, useEffect, useState } from "react";
import { Layout } from "./Layout";const ShaderGradient = dynamic(() => import("shadergradient").then((mod) => mod.ShaderGradient),{ ssr: false }
);
const View = dynamic(() => import("./View").then((mod) => mod.View), {ssr: false,loading: () => (<divclassName="w-full h-full bg-cover bg-center"style={{ backgroundImage: "url(/images/loading-bg.png)" }}></div>),
});export default function GlobalBackground() {const defaultProps: any = {control: "props",animate: "on",brightness: 1.2,cDistance: 3.6,cameraZoom: 1,color1: "#0600B8",color2: "#9000E3",color3: "#0B004F",// embedMode: "off",envPreset: "city",// gizmoHelper: "hide",grain: "off",lightType: "3d",reflection: 0.1,shader: "defaults",type: "waterPlane",uSpeed: 0.2,uTime: 0,wireframe: false,zoomOut: false,toggleAxis: false,};const [suspenseWebgl, setSuspenseWebgl] = useState(false);useEffect(() => {const canvas = document.createElement("canvas");const gl =canvas.getContext("webgl") || canvas.getContext("experimental-webgl");if (gl) {// 浏览器支持 WebGLconsole.log("The browser does support WebGL");setSuspenseWebgl(true);} else {console.log("The browser does not support WebGL");// 浏览器不支持 WebGL}}, []);return (<>{suspenseWebgl ? (<Layout><View className="w-full h-full"><Suspense fallback={null}><ShaderGradient {...defaultProps} /></Suspense></View></Layout>) : null}</>);
}
  1. 创建 Layout.tsx 文件:
"use client";import { useRef } from "react";
import dynamic from "next/dynamic";
const Scene = dynamic(() => import("./Scene"), { ssr: false });const Layout = ({ children }: any) => {const ref = useRef<any>();return (<divref={ref}className="fade-in"style={{position: "fixed",top: 0,left: 0,width: "100%",height: "100%",zIndex: -1,overflow: "auto",touchAction: "auto",}}>{children}<Scenestyle={{position: "fixed",top: 0,left: 0,width: "100%",height: "100%",pointerEvents: "none",}}eventSource={ref}eventPrefix="client"pixelDensity={1}pointerEvents="none"/></div>);
};export { Layout };
  1. 创建 Scene.tsx 文件:
"use client";import { ShaderGradientCanvas } from "shadergradient";
import { Canvas } from "@react-three/fiber";
import { Preload } from "@react-three/drei";
import tunnel from "tunnel-rat";const r3f = tunnel();export default function Scene({ ...props }) {// Everything defined in here will persist between route changes, only children are swappedreturn (<ShaderGradientCanvas {...props}>{/* @ts-ignore */}<r3f.Out /><Preload all /></ShaderGradientCanvas>);
}
  1. 创建 View.tsx 文件:
"use client";import { forwardRef, Suspense, useImperativeHandle, useRef } from "react";
import {OrbitControls,PerspectiveCamera,View as ViewImpl,
} from "@react-three/drei";
import tunnel from "tunnel-rat";const r3f = tunnel();const Three = ({ children }: any) => {return <r3f.In>{children}</r3f.In>;
};export const Common = ({ color }: any) => (<Suspense fallback={null}>{color && <color attach="background" args={[color]} />}<ambientLight intensity={0.5} /><pointLight position={[20, 30, 10]} intensity={1} /><pointLight position={[-10, -10, -10]} color="blue" /><PerspectiveCamera makeDefault fov={40} position={[0, 0, 6]} /></Suspense>
);const View = forwardRef(({ children, orbit, ...props }: any, ref) => {const localRef = useRef<any>(null);useImperativeHandle(ref, () => localRef.current);return (<><div ref={localRef} {...props} /><Three><ViewImpl track={localRef}>{children}{orbit && <OrbitControls />}</ViewImpl></Three></>);
});
View.displayName = "View";export { View };
  1. 直接在 app/page.tsx 使用背景组件:
import GlobalBackground from "@/components/GlobalBackground";export default function Home() {return (<><GlobalBackground></GlobalBackground><divclassName="min-h-screen bg-cover bg-center"style={{ backgroundImage: "url(/svg/bg_n.svg)" }}>....</div></>);
}
  1. 当然,代码弄好了,要想让代码运行起来,还需要安装一下依赖:
pnpm add @react-three/drei @react-three/fiber shadergradient tunnel-rat

通过这些步骤,你将能够为网站实现高性能、响应式的动态背景效果。根据具体需求调整背景类型和交互复杂度,让你的官网更具吸引力!

效果

具体效果,可以直接在网站上浏览,效果更真实。网站地址:https://infinilabs.com/

分享

如果你也想配置自己的动态效果图,可以前往 shadergradient.co 网站进行自定义设置。完成后,将生成的配置参数复制到 GlobalBackground.tsx 文件的 defaultProps 中,即可实现属于你自己的动态背景效果。

参考

  • https://github.com/ruucm/shadergradient
  • https://www.shadergradient.co/
  • https://infinilabs.com/

福利

INFINI Labs 一直致力于为开发者和企业提供优质的开源工具,提升整个技术生态的活力。除了维护国内最流行的分词器 analysis-ikanalysis-pinyin,也在不断推动更多高质量开源产品的诞生。

最近新开源的产品和工具:

  • INFINI Framework https://github.com/infinilabs/framework
  • INFINI Gateway https://github.com/infinilabs/gateway
  • INFINI Console https://github.com/infinilabs/console
  • INFINI Agent https://github.com/infinilabs/agent
  • INFINI Loadgen https://github.com/infinilabs/loadgen
  • INFINI Coco AI https://github.com/infinilabs/coco-app

以上开源软件都可以在 Github 上面找到: https://github.com/infinilabs

希望大家都能给个免费的 Star🌟 支持一下!!!

作者:Rain9,极限科技(INFINI Labs) 高级前端开发工程师。

相关文章:

如何实现一个充满科技感的官网(二)

背景 在上一篇文章 《如何实现一个充满科技感的官网&#xff08;一&#xff09;》 中&#xff0c;我们初步了解了该官网的整体设计&#xff0c;并与大家探讨了它的视觉呈现和用户体验。 我们前期的内部设计偏向简洁&#xff0c;所以开始思考如何提升网站的整体设计感。这些尝…...

深度学习算法:从基础到实践

简介 深度学习作为人工智能领域的一个重要分支&#xff0c;近年来在多个领域取得了显著的成就。本文将从基础概念出发&#xff0c;探讨深度学习算法的核心原理&#xff0c;并介绍一些实际应用案例。 深度学习算法的核心概念 深度学习算法基于人工神经网络&#xff0c;通过构…...

等价和划分

例子&#xff1a;学生分组 假设我们有一个班级&#xff0c;班级里有10名学生&#xff0c;我们想要根据他们的年龄来分组。我们可以定义一个关系 ( R ) 在学生集合 ( A ) 上&#xff0c;其中 ( A {s_1, s_2, …, s_{10}} )&#xff0c;并且 ( s_i ) 和 ( s_j ) 之间有关系 ( R…...

电商项目-数据同步解决方案(三)商品上架同步更新ES索引库

一、 需求分析和业务逻辑 主要应用技术有&#xff1a;Feign远程调用&#xff0c; 消息队列-RabbitMQ &#xff0c;分布式搜索引擎-ElasticSearch&#xff0c;Eureka&#xff0c;Canal 商品上架将商品的sku列表导入或者更新索引库。 数据监控微服务需要定义canal监听器&#x…...

MySQL数据库笔记——多版本并发控制MVCC

大家好&#xff0c;这里是Good Note&#xff0c;关注 公主号&#xff1a;Goodnote&#xff0c;本文详细介绍MySQL的并发控制&#xff1a;多版本并发控制MVCC。 文章目录 背景介绍数据库并发控制——锁机制悲观锁和乐观锁悲观锁乐观锁 数据库并发控制——MVCC 的引入MVCC 和锁机…...

【LLM综述】29种大模型Prompt Engineering技术

note 从零样本&#xff08;Zero-shot&#xff09;提示到最新进展的各种提示技术&#xff0c;包括推理和逻辑链&#xff08;Chain-of-Thought, CoT&#xff09;提示、自动链式思考&#xff08;Auto-CoT&#xff09;提示、自我一致性&#xff08;Self-Consistency&#xff09;提…...

MySQL高级关联查询与复杂关系的处理

在关系型数据库的操作中,复杂关联查询和多层次关系建模是非常重要的技能。无论是在数据分析、业务数据处理,还是在数据可视化等各个方面,处理多表数据关联都是不可或缺的部分。通过高效的关联查询,可以在不同表之间建立关系,查询并整合多张表的数据,避免数据冗余并提升查…...

URL Moniker API

1. urlmon 介绍 urlmon 是指 URL Moniker API&#xff0c;它是 Microsoft Windows 操作系统中的一部分&#xff0c;通常用于处理 URL 和相关的任务。urlmon.dll 是其动态链接库&#xff0c;提供了一系列函数和接口&#xff0c;主要用于以下目的&#xff1a; URL 分析和处理&a…...

单元测试3.0+ @RunWith(JMockit.class)+mock+Expectations

Jmockit使用笔记_基本功能使用Tested_Injectable_Mocked_Expectations_jmockit.class-CSDN博客 测试框架Jmockit集合junit使用 RunWith(JMockit.class) 写在测试案例类上的注解 Tested 在测试案例中,写在我们要测试的类上面, 一般用实现类 Injectable 在测试案例中声明…...

halcon中图像滤波分为空间域和频域两种方法

均值滤波是一种线性平滑滤波。基本思想是用某像素邻域几个像素的平均值代替此像素原来的灰度值。 高斯滤波是用某像素邻域几个像素的加权平均值代替此像素的原有灰度值。 总结&#xff1a;图像滤波分为空间域和频域两种方法。 空间域滤波主要是对像素的直接处理&#xff0c;它将…...

maxminddb地理信息库–C语言

原文地址&#xff1a;maxminddb地理信息库–C语言 – 无敌牛 欢迎参观我的个人博客&#xff1a;无敌牛 – 技术/著作/典籍/分享等 maxminddb 是一个 IP 的地理信息库&#xff0c;可以根据 IP 地址给出对应的地理位置信息。 下载离线库 maxminddb提供在线查询&#xff0c;也…...

Keil中的gcc

文章目录 一、IDE背后的命令1.1 IDE是什么1.2 IDE的背后是命令1.3 有两套主要的编译器 二、准备工作2.1 arm-linux-gcc和gcc是类似的2.2 Code::Blocks2.2.1 设置windows环境变量2.2.2 命令行示例 三、gcc编译过程详解3.1 程序编译4步骤3.2 gcc的使用方法3.2.1 gcc使用示例3.2.2…...

【Java数据结构】栈和队列相关算法

第一题&#xff1a;改变元素的序列 例1&#xff1a;若进栈序列为1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;进栈过程中可以出栈&#xff0c;则下列不可能一个出栈序列&#xff08;&#xff09;&#xff1b; A&#xff1a;1&#xff0c;4&#xff0c;3&#xff0c…...

LoRA微调系列笔记

系列文章目录 第一章&#xff1a;LoRA微调系列笔记 第二章&#xff1a;Llama系列关键知识总结 第三章&#xff1a;LLaVA模型讲解与总结 文章目录 系列文章目录LoRA&#xff1a;Low-Rank Adaptation of Large Language Models目的&#xff1a;依据&#xff1a;优势&#xff1a;…...

Linux(Ubuntu)下ESP-IDF下载与安装完整流程(3)

接前一篇文章:Linux(Ubuntu)下ESP-IDF下载与安装完整流程(2) 本文主要看参考官网说明,如下: 快速入门 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档 Linux 和 macOS 平台工具链的标准设置 - ESP32-S3 - — ESP-IDF 编程指南 latest 文档 一、安装准备 1. Linux用...

【C++】22___STL常用算法

目录 一、常用遍历算法 二、常用查找算法 2.1 find 2.2 其它查找算法 三、常用排序算法 3.1 sort 3.2 其它排序算法 四、拷贝 & 替换 4.1 copy 4.2 其它算法 五、常用的算数生成算法 5.1 accumulate 5.2 fill 六、常用集合算法 6.1 set_intersection 6…...

linux 批量替换文件指定字符串

启发&#xff1a;数据库连接串的用户名需要从sa修改为sasa find . -type f -name mssql.json -exec sed -i s/IDsa;/IDsasa;/g {}...

List接口(源码阅读)

文章目录 1.List接口常用方法1.代码2.结果 2.ArrayList底层机制1.结论2.ArrayList底层源码1.代码2.debug添加第一个元素1.进入2.elementData数组存储ArrayList的数据3.初始化为空数组4.首先确保使用size1来计算最小容量5.如果elementData为空&#xff0c;最小容量就是106.modCo…...

股市学习 seekingalpha tradingview

EMA EMA&#xff08;Exponential Moving Average&#xff09;是一种技术分析中常用的指标&#xff0c;用于平滑股价或其他资产价格的波动&#xff0c;以帮助分析价格走势的趋势和方向。EMA与简单移动平均&#xff08;SMA&#xff09;类似&#xff0c;但对最新价格的权重更大&a…...

用再生龙备份和还原操作系统(三)

续上篇《用再生龙备份和还原操作系统&#xff08;二&#xff09;》 三&#xff0c;用再生龙将镜像文件还原到硬盘 将再生龙工具盘、待还原系统的硬盘&#xff08;与源盘一样大或更大&#xff09;、镜像文件所在磁盘&#xff08;如果是U盘&#xff0c;也可以后插&#xff09;安…...

FaceFusion 从0开始本地部署,RTX4060

FaceFusion 从0开始本地部署指南 一、环境准备 1. 基础工具安装 1.1 Git 安装 使用管理员权限打开 PowerShell执行安装命令&#xff1a; winget install -e --id Git.Git验证安装&#xff1a; git --version1.2 FFmpeg 安装 使用管理员权限打开 PowerShell执行安装命令&…...

Swift Combine 学习(六):自定义 Publisher 和 Subscriber

Swift Combine 学习&#xff08;一&#xff09;&#xff1a;Combine 初印象Swift Combine 学习&#xff08;二&#xff09;&#xff1a;发布者 PublisherSwift Combine 学习&#xff08;三&#xff09;&#xff1a;Subscription和 SubscriberSwift Combine 学习&#xff08;四&…...

服务器网卡绑定mode和交换机的对应关系

互联网各领域资料分享专区(不定期更新)&#xff1a; Sheet 模式类别 网卡绑定mode共有七种(0~6): bond0、bond1、bond2、bond3、bond4、bond5、bond6 mode详解 mode0 &#xff0c;即:(balance-rr) Round-robin policy(平衡轮循环策略&#xff0c;需要配置交换机静态聚合) mode…...

【动手学轨迹预测】2.4 考虑地图拓扑关系的表征方法

上一节我们介绍了VectorNet提出了矢量化场景表征方法, 大幅提高了预测网络编码性能. 但是VectorNet对地图数据的编码是基于无向无权图的, 并没有考虑到地图的拓扑关系. 显然在预测中, 地图的拓扑关系应该被考虑到. 于是在VectorNet的基础上, LaneGCN提出一种将地图车道作为节点…...

ChatGLM3模型搭建(踩坑记录版)

参考 魔搭社区 https://zhuanlan.zhihu.com/p/720148240 智谱AI通用大模型&#xff1a;本地部署ChatGLM3-6B开源大模型 - 编程库 说明 搭建方式多篇文章结合着看&#xff1b; 模型下载强烈推荐魔塔社区下载ZhipuAI/chatglm3-6b&#xff1b; 官方github指定清华的模型没有…...

基于 Python Django 的花卉商城系统的研究与实现

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

Spring Boot 3 文件下载、多文件下载以及大文件分片下载、文件流处理、批量操作 和 分片技术

在 Spring Boot 3 中&#xff0c;实现文件下载、多文件下载以及大文件分片下载需要结合以下功能&#xff1a;文件流处理、批量操作 和 分片技术。以下是详细实现方案&#xff1a; 1. 单文件下载 基础的单文件下载实现&#xff0c;可以参考以下代码&#xff1a; GetMapping(&…...

什么是事件循环(Event Loop)?请谈谈它在 JavaScript 中的作用?

事件循环&#xff08;Event Loop&#xff09;是什么&#xff1f; 事件循环&#xff08;Event Loop&#xff09;是JavaScript运行时环境&#xff08;如浏览器或Node.js&#xff09;中的一个核心机制&#xff0c;用于处理异步操作和事件。 它负责协调代码的执行、事件的处理、以…...

Lua : Coroutine(协程)

Lua 协程&#xff08;coroutines&#xff09;是一种强大的控制结构&#xff0c;允许函数在执行过程中暂停并在稍后恢复。与线程不同&#xff0c;协程是非抢占式的&#xff0c;这意味着它们不会被操作系统调度&#xff0c;而是由程序显式地切换。协程在 Lua 中非常有用&#xff…...

【2024华为OD-E卷-200分-跳格子2】(题目+思路+JavaC++Python解析)

题目描述 在一个二维平面上&#xff0c;有一个 n x m 的网格&#xff0c;每个格子有一个非负整数。你从左上角 (0, 0) 开始&#xff0c;每次只能向右或向下移动&#xff0c;目标是到达右下角 (n-1, m-1)。 在移动过程中&#xff0c;你需要记录经过的格子中&#xff0c;最大数…...

【仓颉语言基础】语言概念、环境配置与语法解析

华为仓颉语言是一门专为分布式系统设计的现代编程语言&#xff0c;以简洁的语法和强大的分布式能力为核心&#xff0c;提供高效的资源管理和任务调度方案。本篇文章将带您从概念入手&#xff0c;逐步掌握环境配置与语法基础&#xff0c;为分布式开发奠定坚实基础。 文章目录 一…...

LeetCode - 初级算法 数组(删除排序数组中的重复项)

免责声明:本文来源于个人知识与公开资料,仅用于学术交流。 删除排序数组中的重复项 这篇文章讨论如何从一个非严格递增的数组 nums 中删除重复的元素,使每个元素只出现一次,并返回新数组的长度。因为数组是排序的,只要是相同的肯定是挨着的,所以我们需要遍历所有数组,然…...

SpringMVC进阶(自定义拦截器以及异常处理)

文章目录 1.自定义拦截器 1.基本介绍 1.说明2.自定义拦截器的三个方法3.流程图 2.快速入门 1.Myinterceptor01.java2.FurnHandler.java3.springDispatcherServlet-servlet.xml配置拦截器4.单元测试 3.拦截特定路径 1.拦截指定路径2.通配符配置路径 4.细节说明5.多个拦截器 1.执…...

2 秒杀系统架构

第一步 思考面临的问题和业务场景 秒杀系统面临的问题: 短时间内并发非常高&#xff0c;如果按照秒杀的并发做相应的承载会造成大量资源的浪费。第二解决超卖的问题。 第二步 思考目前的处境和解决方案 因为秒杀系统属于短时间内的高并发问题&#xff0c;我们不可能使用那么…...

C++如何遍历数组vector

在C中&#xff0c;vector是一个可变数组。那么怎么遍历它呢&#xff1f;我们以for循环为例&#xff08;while循环&#xff0c;大家自己脑补&#xff09;。 方法一&#xff1a; 基于范围的for循环&#xff0c;这是C11新引入的。 std::vector<int> v {1, 2, 3, 4, 5, 6…...

ubuntu非root用户操作root权限问题-virbox挂在共享文件夹

首先讲一下&#xff0c;virtuallbox 挂在文件夹&#xff0c;操作的时候总是需要root权限&#xff0c;比较费劲。 这一操作其实也正对着我们在Ubuntu上的操作。 前段时间我想在ubuntu正常用户下去操作i2c&#xff0c;也出现了类似的问题。 后来把正常的操作加到组里面也解决了类…...

大模型推理:vllm多机多卡分布式本地部署

文章目录 1、vLLM分布式部署 docker镜像构建通信环境配置 2、其他大模型部署工具3、问题记录参考文献 单台机器GPU资源不足以执行推理任务时&#xff0c;一个方法是模型蒸馏量化&#xff0c;结果就是会牺牲些效果。另一种方式是采用多台机器多个GPU进行推理&#xff0c;资源不…...

WFP Listbox绑定数据后,数据变化的刷新

Listbox绑定数据通过ItemsSource来的&#xff0c;如果绑定的是普通的List<数据>&#xff0c;不会自己刷新。 使用ObservableCollection集合 解决问题的方法: 将数组替换为 ObservableCollection ObservableCollection 是专为绑定设计的集合类型&#xff0c;可以通知 W…...

AI + 爬虫:智能化数据采集的未来

随着人工智能&#xff08;AI&#xff09;技术的不断进步&#xff0c;传统的网络爬虫正经历一场前所未有的变革。从规则驱动到智能化演变&#xff0c;AI 的引入不仅提高了爬虫的效率和适应性&#xff0c;更为大规模数据采集提供了全新思路。本文将深入探讨 AI 与爬虫的结合&…...

人工智能知识分享第五天-正则化.损失函数案例

正则化 欠拟合与过拟合 过拟合&#xff1a;一个假设 在训练数据上能够获得比其他假设更好的拟合&#xff0c; 但是在测试数据集上却不能很好地拟合数据 (体现在准确率下降)&#xff0c;此时认为这个假设出现了过拟合的现象。(模型过于复杂) 欠拟合&#xff1a;一个假设 在训…...

WebRTC的线程事件处理

1. 不同平台下处理事件的API&#xff1a; Linux系统下&#xff0c;处理事件的API是epoll或者select&#xff1b;Windows系统下&#xff0c;处理事件的API是WSAEventSelect&#xff0c;完全端口&#xff1b;Mac系统下&#xff0c;kqueue 2. WebRTC下的事件处理类&#xff1a; …...

C++软件设计模式之迭代器模式

迭代器模式是一种行为设计模式&#xff0c;它允许你顺序访问一个聚合对象的元素&#xff0c;而不暴露其底层表示。在C软件设计中&#xff0c;迭代器模式的主要目的是将数据的遍历行为与数据结构本身分离&#xff0c;使得数据结构的修改不会影响到遍历代码。 目的和意图 解耦遍…...

git reset --hard(重置到当前提交,所有未提交的更改都会被永久丢弃)

git reset --hard 是一个强大的命令&#xff0c;它会将你的工作目录、暂存区和当前分支的 HEAD 指针重置到指定的提交状态&#xff0c;所有未提交的更改都会被永久丢弃。因此&#xff0c;使用这个命令时需要非常小心。 基本用法 重置到当前提交&#xff08;丢弃所有未提交的更…...

三分钟在你的react项目中引入tailwindcss

前言&#xff1a;在vite搭建的react项目中引入并使用tailwindcss 一、初始化react项目 1、创建项目 在文件夹下右键打开终端并输入命令使用vite创建项目 pnpm create vite react-tailwind选择reactjavascript&#xff0c;并输入命令安装依赖并启动 2、安装tailwind pnpm …...

Android Studio学习笔记

01-课程前面的话 02-Android 发展历程 03-Android 开发机器配置要求 04-Android Studio与SDK下载安装 05-创建工程与创建模拟器...

19712 数字接龙

/*我觉得重要的理解点&#xff1a;1.四维数组白表示一个点从另一个点沿对角线的方式进行移动&#xff0c;如果这个元素的值为真则表示这样的移动存在。 2.按照0->k-1的顺序移动。这个要求的实现方法也值得学习 3.count和index的含义&#xff1a; index表示索引&#xff0c;表…...

【图像去噪】论文复现:大道至简!ZS-N2N的Pytorch源码复现,跑通源码,获得指标计算结果,补充保存去噪结果图像代码,代码实现与论文理论对应!

请先看【专栏介绍文章】:【图像去噪(Image Denoising)】关于【图像去噪】专栏的相关说明,包含适配人群、专栏简介、专栏亮点、阅读方法、定价理由、品质承诺、关于更新、去噪概述、文章目录、资料汇总、问题汇总(更新中) 完整代码和训练好的模型权重文件下载链接见本文底…...

Linux-mac地址

mac地址 由6位16进制数组成。最高字节的最低位&#xff0c;0表示单播地址&#xff0c;1表示多播地址。最高字节的第二位&#xff0c;0表示全局地址&#xff0c;1表示本地地址。 单播地址&#xff1a;单播MAC地址用于一对一的通信模式&#xff0c;即从单一的源端发送到单一的目…...

旷视科技Java面试题及参考答案

讲一下进程间的通讯方式(如管道、消息队列、共享内存、Socket 等),各有什么特点? 管道(Pipe) 管道是最早出现的进程间通信方式之一,主要用于具有亲缘关系(父子进程)的进程之间通信。 特点: 半双工通信,数据只能单向流动。例如,在一个简单的父子进程通信场景中,父进…...

【无线传感网】WSN数据管理技术

文章目录 WSN数据管理的基本概念以数据为中心的WSN数据库与分布式数据库相比具有的特殊性WSN数据管理技术的研究热点 WSN数据管理的关键技术无线传感器网络数据存储结构网外集中式存储方案网内分层存储方案网内本地存储方案以数据为中心的网内存储方案 数据查询处理技术查询类型…...