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

Nextjs App Router 开发指南

news 来源：原创 2025/7/10 10:38:28

Next.js是一个用于构建全栈web应用的React框架。App Router 是 nextjs 的基于文件系统的路由器，它使用了React的最新特性，比如 Server Components, Suspense, 和 Server Functions。

术语

  • 树(Tree): 一种用于可视化的层次结构。例如，包含父组件和子组件的组件树，文件夹结构等。
  • 子树(Subtree): 树的一部分，从新的根节点（第一个）开始，到叶子节点（最后一个）结束。
  • 根节点(Root): 树或子树中的第一个节点
  • 叶子节点(Leaf): 子树中没有子节点的节点，例如 URL 路径的最后一段。

在这里插入图片描述

  • URL 段(URL Segment): 用斜杠分隔的 URL 路径的一部分
  • URL 路径(URL Path): 域名之后的URL的一部分(由段组成)。

在这里插入图片描述

1. 路由段 Route Segments

在app目录中，嵌套的文件夹定义了路由结构，路由中的每个文件夹代表一个路由段。每个路由段都映射到 URL 路径中的对应段。文件（如page.jsx和布局layout.jsx）用于创建所在段的UI。

在这里插入图片描述

  • 嵌套路由 (Nested Routes), 如 /dashboard/settings 路由可以通过在 app 目录下添加两级目录实现。
  • 组件在嵌套路由中递归呈现，这意味着路由段的组件将嵌套在其父段的组件中。
  • 约定只有 page.js 或 route.js 的内容会被发送到客户端。这意味着其他文件可以安全地放在app目录的路由段中，但不会被路由。

2. 组件层次 Component Hierarchy

  1. 在同一路由段的文件中定义的组件会在特定的层次结构中呈现

在这里插入图片描述

  1. 在一个嵌套路由中，一个段的组件将被嵌套在它的父段的组件中

在这里插入图片描述

  1. 除了特殊文件之外，您还可以选择将自己的文件放在文件夹中。例如，样式、测试、组件等等。

可以按特性或路由拆分项目文件：
在这里插入图片描述

3. 文件夹和文件约定

顶级文件夹用于组织应用程序的代码和静态资产，顶级文件用于配置应用程序、管理依赖关系、运行中间件、集成监视工具和定义环境变量。

layout.jsx, 定义布局组件

  • 默认情况下，文件夹层次结构中的布局组件也是嵌套的。
  • 应用顶级布局必须包含<html>和<body>标签。
  • 不要直接添加<head>标签到 layout.jsx, 而是使用 Metadata APIs。定义并导出 Metadata 对象 、通过 generateMetadata 方法动态生成、或使用约定的文件如sitemap.xml、robots.txt等。
  • 可以使用 React的缓存函数 cache function 只获取一次数据。
  • 通过 ImageResponse 可以使用 JSX 和 CSS 动态生成 Open Graph 图像。

page.jsx, 定义一个具体路由的UI

  • 必须有一个 page.jsx 才能使路由段可公开访问。
  • 两个 Promise 类型的可选参数：params(动态路由)、searchParams(查询参数)
    • app/shop/[category]/[item]/page.js, 访问 /shop/1/2, 获得参数：Promise<{ category: '1', item: '2' }>
    • /shop?a=1&b=2, 获得参数：Promise<{ a: '1', b: '2' }>
    • 客户端组件中通过 React 的 use 方法获取 Promise 参数值

loading.jsx, 为路由段及其子段创建加载界面

  • loading.jsx 将被嵌套在 layout.jsx 中。它会自动将 page.jsx 文件及其下的所有子文件包装在 <Suspense> 中
  • <Suspense> 用于显示一个临时UI，直到它的子节点完成加载。在页面中使用Suspense可以让服务端渲染流式传输
  • Streaming 流允许您将页面的HTML分解为更小的块，并逐步将这些块从服务器发送到客户端

not-found.jsx, 抛出 notFound 异常时显示的界面

  • 顶级 app/not-found.jsx 文件可处理整个应用程序未捕获的 notFound 异常
  • 如果需要使用客户端钩子（比如usePathname）来显示基于路径的内容，须使用客户端组件

error.jsx, 当发生运行时错误时显示的备用UI

  • error.jsx 把路由段和它的嵌套子段包装在一个 React Error Boundary 中
  • 可以使用位于应用程序根目录中的 global-error.js 来处理根布局或模板中的错误
  • 全局错误UI必须定义自己的<html>和<body>标签。该文件在活动时替换根布局或模板

route.jsx, 创建自定义 api 请求处理程序

  • 支持 GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS.
  • 参数 request：NextRequest 对象, Web请求的扩展。提供了对传入请求的进一步控制，可访问cookie和扩展的URL对象nextUrl。
  • 参数 context (optional) context.params 包含当前路由的动态路由参数

template.jsx, 类似 layout.jsx，当需要创建一个新的组件实例时使用

  • 与跨路由持久化和维护状态的layout布局不同，template模板被赋予了一个唯一的键，这意味着在导航时会刷新子客户端组件的状态。
  • layout 内部的<Suspense>仅在布局第一次加载时显示，而在切换页面时则不显示。对于模板，每次导航都会重新渲染<Suspense>的回退UI。

default.jsx, 在并行路由中呈现回退UI

  • 对于硬导航（整个页面重新加载），Next.js无法恢复部分UI插槽的活动状态。可以为与当前URL不匹配的子页面呈现 default UI。

4. 路由：以服务器路由为中心的客户端导航

与使用客户端路由的 pages 目录不同，app 目录中的新路由器使用以服务器为中心的路由，以便与服务器上的服务端组件和数据获取保持一致。客户端不必下载路由图，并且可以使用对服务端组件的相同请求来查找路由。这种优化对所有应用都有用，对路由多的应用影响更大。

虽然路由是以服务器为中心的，但使用 Link 组件的客户端导航具有类似于单页应用程序的行为。这意味着当用户导航到新路由时，浏览器不会重新加载页面。但 URL 将被更新，Next.js 将只呈现更改的部分。

此外，当用户浏览应用程序时，路由器会将服务端组件数据存储在客户端缓存(内存)中。缓存按路由段分割，允许在任何级别失效，并确保并发渲染的一致性。这意味着在某些情况下，可以重用先前获取的段的缓存，从而进一步提高性能。

局部渲染 Partial Prerendering

部分预呈现（PPR）是一种呈现策略，它允许您在同一路由中组合静态和动态内容。这提高了初始页面的性能，同时仍然支持个性化的动态数据。

如果一个组件使用了以下api，它就会变成动态的：

  cookies // 读写 cookies 的方法headers //一个async函数，它允许你从服务端组件读取HTTP传入请求的 headersconnection // 指示强制变为动态，希望它在运行时动态呈现，而不是在构建时静态呈现。draftModesearchParams // 路由查询参数fetch with { cache: 'no-store' } // 不使用缓存每次请求时都从远程服务器获取资源
  • 包裹在<Suspense>中的动态组件开始从服务器并行流式传输到客户端。
  • export const experimental_ppr = true 可以将路由段的所有子节点开启PPR，不需要把它添加到每个文件中，只需要把它添加到路由的顶部段
  • 组件只在访问动态属性时才会变成动态渲染。例如，从<Page />组件中读取searchParams，可以将这个值作为prop转发给另一个组件，进行隔离
  • 当前只能在使用最新的 nextjs canary 版本时启用，未来会成为 Next.js 的默认构建方式

静态渲染及动态渲染组件示例：
在这里插入图片描述

流式传输

通过流式传输，您可以防止缓慢的数据请求阻塞整个页面。这允许用户查看页面的部分内容并与之交互，而无需等待所有数据加载完毕，然后才能向用户显示任何UI。

在Next.js中有两种实现流的方法：

  1. 在页面级别，通过 loading.jsx文件（自动创建<Suspense>）。
  2. 在组件级别，使用<Suspense>进行更细粒度的控制，将阻塞页面的组件单独封装进行流式传输。

5. 路由模式

  1. 动态路由：如果事先不知道确切的段名，并希望根据动态数据创建路由，则可以使用在请求时填充或在构建时预呈现的动态路由。
  2. 并行路径: 允许您在同一视图中同时显示两个或多个可以独立导航的页面。用于具有自己的子导航的分屏视图，例如仪表板。
  3. 拦截路由: 允许你拦截一条路由，并在另一条路由的上下文中显示它。在保持当前页面的上下文很重要时使用。例如，在编辑一个任务时查看所有任务，或在 Feed 中查看图片。
  4. 条件路由: 允许您根据条件有条件地呈现路由。例如:只在用户登录后才显示。

路由组和私有文件夹

  • (folder)：在不参与路由的情况下对路由进行分组，可实现为子路由分别定义布局UI layout.jsx
  • _folder：让子目录不参与路由, 可用于将UI逻辑与路由逻辑分离。

动态路由

  • [folder], 动态路由段，可作为 params 参数传递给layout、page、route 和 generateMetadata函数。例如，一个博客的路由app/blog/[slug]/page.js，其中[slug]是博客文章的动态段。
  • [...folder], 捕获全部路由，例如，app/shop/[…slug]/page.js 会匹配/shop/clothes，还会匹配/shop/clothes/tops， /shop/clothes/tops/t-shirts 等。
  • [[...folder]], 全捕获,除了本级及子路由，也捕获父路由段，例如，app/shop/[[…slug]]/page.js 也会匹配/shop

并行路由

@folder，并行路由是使用命名槽创建的。槽作为参数传递给共享的父布局，并可以与 children 并行呈现

  • 在客户端导航期间，Next.js 将执行部分渲染，更改槽内的UI，同时保持另一个槽的当前UI，即使它们与当前URL不匹配。
  • 整个页面刷新重载，无法确定与当前URL不匹配的插槽的活动状态。不匹配的槽呈现 default.js 界面，如果default.js不存在，则呈现404。
  • 实现条件路由，根据登录用户的角色展示不同的槽。
  • 可以在插槽中添加布局 layout.jsx，以允许用户独立地导航插槽。这对于创建选项卡很有用。
  • 并行路由可以和拦截路由一起使用来创建支持深度链接的对话框。
  • 并行路由可以独立流化，允许你为每条路由定义独立的错误UI error.jsx 和加载UI loading.jsx

拦截路由

  • (.)folder, 匹配在同一级别上路由段
  • (..)folder, 匹配上一级路由段
  • (..)(..)folder, 上两级中的路由段
  • (...)folder, 匹配顶级路由段

用户可以使用客户端导航从图库打开照片对话框，也可以通过URL导航到照片页面：

在这里插入图片描述

6. 组件

默认情况下，布局和页面是服务端组件，它允许您在服务器上获取数据并呈现UI的部分，可选地缓存结果，并将其流式传输到客户端。当您需要交互性或调用浏览器api时，可以使用客户端组件来实现。

  • Next.js默认使用服务端组件
  • 在服务器端服务端组件被渲染为一种特殊的数据格式（RSC Payload）, 客户端组件和 RSC Payload 用于呈现HTML
  • Hydration 是React将事件处理程序附加到DOM的过程，以使静态HTML具有交互性
  • 为了减少客户端JavaScript包的大小，在特定的交互组件中添加“use client”，而不是将UI的大部分标记为客户端组件
  • 当使用依赖于客户端特性的第三方组件时，可以将其包装在客户端组件中，以确保其按预期工作
  • 通过 import 'server-only' 防止在客户端组件中意外使用服务端方法。

使用客户端组件的场景：

  • 包含状态管理及事件处理程序
  • 处理了生命周期钩子，如useEffect
  • 需要调用浏览器API. 如 localStorage, window, Navigator.geolocation 等
  • 自定义 hooks

使用服务端组件的场景：

  • 从服务端靠近数据源的数据库或api中获取数据
  • 使用API密钥、令牌和其他秘密，而客户端不可见
  • 减少发送到浏览器的JavaScript数量
  • 加速首页渲染，流式传输到客户端

Link 导航组件

<Link>是一个React组件，它扩展了HTML <a> 元素，在路由之间提供预加载和客户端导航。这是 Next.js 中导航路由的主要方式。

Image 图片组件

<Image> 组件扩展了HTML <img>元素，提供以下功能：

  • 图像大小优化：自动为每个设备提供正确大小的图像，使用现代图像格式，如WebP
  • 视觉稳定性：防止加载图像时的布局抖动
  • 提升页面加载速度：仅在图片进入视窗时使用本地浏览器延迟加载加载，并带有可选的模糊占位符
  • 资产灵活性：按需调整图像大小，甚至是存储在远程服务器上的图像。

fonts 字体模块

next/font 模块通过内置自托管自动优化字体并减少网络请求。

  • 字体的作用域是使用它们的组件。要将字体应用于整个应用程序，将其添加到根布局中
  • 字体作为静态资产存储，并从部署的位置获取，这意味浏览器不会向谷歌发送请求
  • 通过 next/font/local 加载一个或多个本地字体

7. CSS 样式

提供了多种加载样式的方法：

  • CSS Modules：模块化导入 import styles from './blog.module.css' 使用：<main className={styles.blog}></main>

  • Global CSS：全局样式，创建一个app/global.css文件，并将其导入到根布局中，这些样式应用到应用中的每个路由视图。外部包发布的样式表也可以被导入

  • CSS的顺序取决于你在代码中导入样式的顺序。

  • 使用 Tailwind CSS， Tailwind v4 之后版本不再通过 tailwind.config.js 配置，可以在全局导入的地方通过CSS自定义配置，并采用 OKLCH 色彩空间作为调色板。

  • 使用 CSS-in-JS UI库

  • 使用 Tailwind CSS

建议：

  • 通过一个如可js文件导入css 模块
  • 在应用程序的根目录中导入全局样式和 Tailwind 样式
  • 对嵌套组件使用CSS模块而不是全局样式
  • 将共享样式提取到共享组件中，以避免重复导入
  • 关闭编辑器的自动排序格式功能
  • CSS顺序在开发及生产环境中可能表现不同，始终检查构建结果以验证

获取数据

  • 在服务端组件中直接通过 fetch 或 db 客户端获取数据
  • 在客户端组件需要配合 React 的 use() 函数 或 其他库（SWR、 React Query）

更新数据

  • 通过 React 的 Server Functions 服务器函数来更新数据
  • 在客户端组件中可以通过表单动作或事件响应函数来调用服务器函数
  • 通过 useActionState hook 可以监控调用状态

8. Middleware 中间件

中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应头或直接修改响应。

中间件有效的一些常见场景包括：

  • 在读取部分传入请求后快速重定向
  • 基于A/B测试重定向到不同的页面
  • 修改所有页面或页面子集的标头 headers
  • 可以通过配置或条件判断来指定哪些请求运行。matcher: ['/about/:path*', '/dashboard/:path*']
  • 设置CORS头以允许跨域请求
  • 访问或设置 cookies
  • 中间件不应用于获取数据或会话管理

9. 懒加载

通过懒加载 Lazy loading 可以减少渲染路由所需的JavaScript量，有助于提高应用程序的初始加载性能。

  • 懒加载适用于客户端组件，const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
  • 动态导入一个服务端组件，只有作为服务器组件的子组件的客户端组件才会被懒加载
  • 通过 import() 可以按需加载外部库 const Fuse = (await import('fuse.js')).default

确保最佳性能和用户体验的建议

  • 使用布局来跨页面共享UI，并在导航上启用部分呈现
  • 使用<Link>组件进行客户端导航和预取
  • 通过创建自定义错误页面，优雅地处理生产中的所有错误和404错误
  • 遵循服务器和客户端组件的推荐组合模式，并检查 "use client" 边界的位置，以避免不必要地增加客户端Js包
  • 像cookie和searchParams这样的动态api会导致整个路由动态渲染。确保动态API的使用是有意的，并将它们通过<Suspense>包装起来
  • 利用服务端组件在服务器上获取数据
  • 使用Route Handlers路由处理程序从客户端组件访问后端资源。但不要从服务器组件调用路由处理程序，以避免额外的服务器请求
  • 使用 Loading UI 和 React Suspense 来逐步将UI从服务器发送到客户端，并防止在获取数据时阻塞路由
  • 通过并行获取数据来减少网络瀑布。此外，考虑在适当的地方预加载数据
  • 验证您的数据请求是否被缓存，并在适当的情况下多使用缓存。确保不使用fetch的请求被缓存
  • 使用 Server Actions 处理表单提交、服务器端验证和错误处理
  • 通过使用字体模块将字体文件与其他静态资产一起托管，以减少外部网络请求，及布局抖动
  • 通过使用<Script>组件来优化第三方脚本，该组件可以自动延迟脚本并防止它们阻塞主线程
  • 使用内置的 eslint-plugin-jsx-a11y 插件来尽早捕获可访问性问题
  • 确保你的 .env.* 文件被添加到 .gitignore 中，并且只公共变量添加 NEXT_PUBLIC_ 前缀
  • 使用元数据API通过添加页面标题、描述等来改进应用程序的搜索引擎优化（SEO）

官方开发示例

dashboard-app: https://nextjs.org/learn/dashboard-app

一个基于 App Router 的全栈web应用，访问 PostgresSQL 数据库，仪表板展示，流式加载，账单的分页增删改查，用户登录等功能全面展示 nextjs 基础功能特性。
在这里插入图片描述

在这里插入图片描述

END

如果这篇文章对您有所帮助，欢迎点赞、分享和留言，让更多的人受益。感谢您的细心阅读，如果发现了任何错误或需要补充的地方，请随时告诉我，我会尽快处理 ^_^

相关文章：

Nextjs App Router 开发指南

Next.js是一个用于构建全栈web应用的React框架。App Router 是 nextjs 的基于文件系统的路由器&#xff0c;它使用了React的最新特性&#xff0c;比如 Server Components, Suspense, 和 Server Functions。 术语 树(Tree): 一种用于可视化的层次结构。例如&#xff0c;包含父…...

编程日记 2025/7/10 10:38:28

测试W5500的第3步_使用ioLibrary库创建TCPServer

W5500是一款具有8个Socket的网络芯片&#xff0c;支持TCP Server模式&#xff0c;最多可同时连接8个客户端。本文介绍了基于STM32F10x和W5500的TCP Server实现&#xff0c;包括SPI初始化、W5500复位、网络参数配置、Socket状态管理等功能&#xff0c;适用于需要多客户端连接的嵌…...

编程日记 2025/7/10 10:33:10

Python训练营打卡——DAY31（2025.5.20）

目录 一、机器学习项目的流程 二、文件的组织 1. 项目核心代码组织 2. 配置文件管理 3. 实验与探索代码 4. 项目产出物管理 三、注意事项 if name "main" 编码格式 类型注解 四、通俗解释 1. 拆分文件和目录&#xff1a;整理房间一样管理代码​​ 2. 导…...

编程日记 2025/7/10 10:36:33

P1152 欢乐的跳

P1152 欢乐的跳 - 洛谷 使用map映射来解 #include<bits/stdc.h> using namespace std; int n,a[1005],c[1005]; map<int,int>b;//因为要记录1~n-1是否都出现了 int main(){cin>>n;cin>>a[1];for(int i2;i<n;i){cin>>a[i];//c[i-1]a[i]-a[…...

编程日记 2025/7/10 10:24:07

基于 STM32 的蔬菜智能育苗系统硬件与软件设计

一、系统总体架构 蔬菜智能育苗系统通过单片机实时采集温湿度、光照等环境数据，根据预设阈值自动控制灌溉、补光、通风等设备，实现育苗环境的智能化管理。系统主要包括以下部分： 主控芯片：STM32F103C8T6（32 位 ARM Cortex-M3 单片机，性价比高，适合嵌入式控制）传感器模…...

编程日记 2025/7/10 10:23:17

数论：数学王国的密码学

在计算机科学的世界里&#xff0c;数论就像是一把神奇的钥匙&#xff0c;能够解开密码学、算法优化、随机数生成等诸多领域的谜题。作为 C 算法小白&#xff0c;今天我就带大家一起走进数论的奇妙世界&#xff0c;探索其中的奥秘。 什么是数论&#xff1f; 数论是纯粹数学的分…...

编程日记 2025/7/6 11:38:03

软考软件评测师——黑盒测试测试方法

以下为优化后的博客内容&#xff1a; 软件测试方法论精要 第一部分 核心知识点解析 一、等价类划分法 基本概念 将测试对象的输入域划分为若干子集&#xff0c;每个子集选取代表性样本作为测试用例。分为有效等价类&#xff08;合法输入&#xff09;和无效等价类&#xff0…...

编程日记 2025/7/10 10:32:24

python训练 60天挑战-day31

知识点回顾 规范的文件命名规范的文件夹管理机器学习项目的拆分编码格式和类型注解 昨天我们已经介绍了如何在不同的文件中&#xff0c;导入其他目录的文件&#xff0c;核心在于了解导入方式和python解释器检索目录的方式。 搞清楚了这些&#xff0c;那我们就可以来看看&#x…...

编程日记 2025/7/8 23:48:44

2025年电工杯新规发布-近三年题目以及命题趋势

电工杯将于2025.5.23 周五早八正式开赛&#xff0c;该竞赛作为上半年度竞赛规模最大的竞赛&#xff0c;因免报名费、一级学会承办等因素&#xff0c;被众多高校认可。本文将在从2025年竞赛新规、历史赛题选题分析、近年优秀论文分享、竞赛模板分析等进行电工杯备赛&#xff0c;…...

编程日记 2025/7/10 10:32:23

四元数中 w xyz 的含义及应用

四元数是一种用于表示三维空间中旋转的数学工具&#xff0c;形式通常为 qwxiyjzk&#xff0c;其中w 是实部&#xff0c;x,y,z 是虚部。它们的含义如下&#xff1a; 1. w&#xff08;实部&#xff09; 2. x,y,z&#xff08;虚部/向量部分&#xff09; 3. 单位四元数的条件 四元…...

编程日记 2025/7/10 10:31:37

CSS 样式表的四种应用方式详解以及css注释的应用

一、外部 CSS&#xff08;推荐方式&#xff09; 定义&#xff1a;将 CSS 代码保存为独立的 .css 文件&#xff0c;通过 <link> 标签引入 HTML。 优点&#xff1a; 实现内容与样式完全分离多个页面可共享同一 CSS 文件浏览器可缓存 CSS 文件&#xff0c;提升加载速度 …...

编程日记 2025/7/10 10:38:27

IntentUri页面跳转

android browser支持支持Intent Scheme URL语法的可以在wrap页面加载或点击时&#xff0c;通过特定的intent uri链接可以打开对应app页面&#xff0c;例如 <a href"intent://whatsapp/#Intent;schememyapp;packagecom.xiaoyu.myapp;S.help_urlhttp://Fzxing.org;end&qu…...

编程日记 2025/7/10 10:22:32

蓝桥杯2114 李白打酒加强版

问题描述 话说大诗人李白, 一生好饮。幸好他从不开车。 一天, 他提着酒显, 从家里出来, 酒显中有酒 2 斗。他边走边唱: 无事街上走&#xff0c;提显去打酒。 逢店加一倍, 遇花喝一斗。 这一路上, 他一共遇到店 N 次, 遇到花 M 次。已知最后一次遇到的是花, 他正好把酒喝光了。…...

编程日记 2025/7/10 10:21:47

[ 计算机网络 ] 深入理解OSI七层模型

&#x1f389;欢迎大家观看AUGENSTERN_dc的文章(o゜▽゜)o☆✨✨ &#x1f389;感谢各位读者在百忙之中抽出时间来垂阅我的文章&#xff0c;我会尽我所能向的大家分享我的知识和经验&#x1f4d6; &#x1f389;希望我们在一篇篇的文章中能够共同进步&#xff01;&#xff01;&…...

编程日记 2025/6/27 23:12:30

实战：基于Pangolin Scrape API，如何高效稳定采集亚马逊BSR数据并破解反爬虫？

引言&#xff1a;BSR数据——亚马逊运营的"指南针" 在竞争激烈的亚马逊市场&#xff0c;BSR (Best Sellers Rank) 数据已经成为卖家们不可或缺的"指南针"。这一数字化指标不仅反映商品在特定品类中的销售表现&#xff0c;更直接影响平台的流量分配和消费者…...

编程日记 2025/6/27 23:19:44

电子制造企业智能制造升级：MES系统应用深度解析

在全球电子信息产业深度变革的2025年&#xff0c;我国电子信息制造业正经历着增长与转型的双重考验。据权威数据显示&#xff0c;2025年一季度行业增加值同比增长11.5%&#xff0c;但智能手机等消费电子产量同比下降1.1%&#xff0c;市场竞争白热化趋势显著。叠加关税政策调整、…...

编程日记 2025/6/27 23:14:17

lambda架构和kappa架构区别

Lambda架构与Kappa架构是大数据处理领域的两种核心架构模式&#xff0c;主要差异体现在数据处理逻辑、系统复杂度和适用场景等方面。以下是二者的详细对比分析&#xff1a; 一、核心设计差异 ‌Lambda架构 包含三层&#xff1a;批处理层&#xff08;Batch Layer&#xff09;、…...

编程日记 2025/6/27 23:26:26

【css知识】flex-grow: 1

目录 一、基本概念&#xff1a;二、工作原理&#xff1a;多个元素的情况&#xff1a; 三、实际应用示例&#xff1a;常见使用场景&#xff1a;注意事项&#xff1a; 四、最佳实践&#xff1a;五、与其他 flex 属性配合&#xff1a; &#x1f680;写在最后 flex-grow: 1是什么&a…...

编程日记 2025/6/27 23:08:13

六足连杆爬行机器人的simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序 4.系统原理简介 5.完整工程文件 1.课题概述 六足连杆爬行机器人的simulink建模与仿真。通过simulink&#xff0c;对六足机器人的六足以及机身进行simulink建模&#xff0c;模拟其行走&#xff0c;仿真输出机器人行走时六足的坐…...

编程日记 2025/6/27 23:35:45

软考软件测评师——系统安全设计（防火墙技术）

目录 一、核心概念解析 二、技术联动体系 三、技术局限认知 四、网络架构设计 五、防护系统测试规范 一、核心概念解析 1. 防火墙技术 网络安全基础防护体系&#xff0c;通过软硬件结合方式在内外部网络间建立隔离屏障。核心作用包括流量监控、访问控制、日志记录三大模块…...

编程日记 2025/6/27 22:59:29

漏洞检测与渗透检验在功能及范围上究竟有何显著差异？

漏洞检测与渗透检验是确保系统安全的重要途径&#xff0c;这两种方法各具特色和功效&#xff0c;它们在功能上有着显著的差异。 目的不同 漏洞扫描的主要任务是揭示系统内已知的安全漏洞和隐患&#xff0c;这就像是对系统进行一次全面的健康检查&#xff0c;看是否有已知的疾…...

编程日记 2025/6/27 23:29:22

探秘「4+3原型驱动的交付模式」如何实现软件快速定制

软件行业长期受困于需求沟通难题&#xff1a;客户需求表达不清、频繁变更及真伪需求混杂难辨&#xff1b;终端业务部门参与度低加剧后期确认困难&#xff0c;加之调研结果传递失真引发功能实现偏差——"需求黑洞"始终是甲乙双方的共同痛点。 然而&#xff0c;NC科技…...

编程日记 2025/7/10 10:27:32

C语言入门

一、认识C语言 什么是C语言 C语言是一门通用计算机编程语言&#xff0c;广泛应用于底层开发。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。 尽管C语言提供了许多低级处理的功能&#xff0c…...

编程日记 2025/7/10 10:24:04

java 异常验证框架validation，全局异常处理，请求验证

1、依赖 异常验证框架validation<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId><version>${spring-boot.version}</version></dependency> 当鼠标放在依…...

编程日记 2025/6/27 23:07:44

如何使用VH6501进行CAN采样点测试

Vector 的 VH6501 是一种专为 CAN 和 CAN FD 网络设计的干扰测试设备&#xff0c;集成了干扰生成和 CANoe 网络接口功能&#xff0c;支持通过 CAPL 脚本实现测试自动化。 硬件规格如下&#xff1a; VH6501采样点测试原理是&#xff1a;干扰一帧报文中某一位的采样点附近的总线电…...

编程日记 2025/6/27 23:28:27

QT6 源（113）篇二：阅读与注释工具栏 QToolBar，给出源码

&#xff08;9&#xff09;本源码来自于头文件 qtoolbar . h &#xff1a; #ifndef QDYNAMICTOOLBAR_H #define QDYNAMICTOOLBAR_H#include <QtWidgets/qtwidgetsglobal.h> #include <QtGui/qaction.h> #include <QtWidgets/qwidget.h>QT_REQUIRE_CONFIG(to…...

编程日记 2025/6/27 23:11:08

编程日志5.13

邻接表的基础代码 #include<iostream> using namespace std; //邻接表的类声明 class Graph {private: //结构体EdgeNode表示图中的边结点，包含顶点vertex、权重weight和指向下一个边结点的指针next struct EdgeNode { int vertex; int weight; …...

编程日记 2025/6/27 23:08:29

Java 08集合

集合 Collection 接口&#xff0c;不可以创建对象add clear remove contains(Object obj);判断是否存在 isEmpty 空返回为true sizeArrayList Collection<String> cnew ArraryList<>(); 以多态的方法创建集合对象&#xff0c;调用单列集合中的共有方法 编译看…...

编程日记 2025/6/27 23:21:37

CSS 背景全解析：从基础属性到视觉魔法

CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 一、background-color&#xff1a;背景颜色 作用&#xff1a;设置元素的背景色&#xff0c;支持所有合法…...

编程日记 2025/6/27 23:33:54

2025华为OD机试真题+全流程解析+备考攻略+经验分享+Java/python/JavaScript/C++/C/GO六种语言最佳实现

华为OD全流程解析&#xff0c;备考攻略 快捷目录 华为OD全流程解析&#xff0c;备考攻略一、什么是华为OD&#xff1f;二、什么是华为OD机试&#xff1f;三、华为OD面试流程四、华为OD薪资待遇及职级体系五、ABCDE卷类型及特点六、题型与考点七、机试备考策略八、薪资与转正九、…...

编程日记 2025/6/27 23:35:53

中小型制造业信息化战略规划指南

1 引言 在当今技术飞速发展和全球竞争日趋激烈的时代&#xff0c;信息化建设对于中小型制造企业&#xff08;SME&#xff09;而言&#xff0c;已不再是可有可无的选项&#xff0c;而是关乎生存、发展和保持持续竞争力的核心要素。在数字化浪潮席卷全球的背景下&#xff0c;制造…...

编程日记 2025/6/27 23:27:26

PowerBI 矩阵实现动态行内容(如前后销售数据)统计数据，以及过滤同时为0的数据

我们有一张活动表 和 一张销售表 我们想实现如下的效果&#xff0c;当选择某个活动时&#xff0c;显示活动前后3天的销售对比图&#xff0c;如下&#xff1a; 实现方法&#xff1a; 1.新建一个表&#xff0c;用于显示列&#xff1a; 2.新建一个度量值&#xff0c;用SELECTEDVA…...

编程日记 2025/6/27 23:20:05

在QT中栅格布局里套非栅格布局的布局会出现父布局缩放子布局不跟随的问题

这个是 Qt Designer 设计界面中的一个“常见陷阱”。 &#x1f9e0; 结论先说&#xff1a; 在 Qt Designer 中使用栅格布局&#xff08;Grid Layout&#xff09;嵌套其他栅格布局&#xff0c;一般不会出问题&#xff0c;但如果嵌套的是水平布局&#xff08;HBox&#xff09;或垂…...

编程日记 2025/6/27 23:40:10

Pydantic数据验证实战指南：让Python应用更健壮与智能

导读&#xff1a;在日益复杂的数据驱动开发环境中&#xff0c;如何高效、安全地处理和验证数据成为每位Python开发者面临的关键挑战。本文全面解析了Pydantic这一革命性数据验证库&#xff0c;展示了它如何通过声明式API和类型提示系统&#xff0c;彻底改变Python数据处理模式。…...

编程日记 2025/7/7 14:46:24

深度解析 HDFS与Hive的关系

1. HDFS 和 Hive 如何协同 我们将从 HDFS&#xff08;Hadoop Distributed File System&#xff09; 的架构入手&#xff0c;深入剖析其核心组成、工作机制、内部流程与高可用机制。然后详细阐述 Hive 与 HDFS 的关系&#xff0c;从执行流程、元数据管理、文件读写、计算耦合等…...

编程日记 2025/6/27 23:04:04

ArrayList源码分析

1. ArrayList默认初始化容量 首先编写一个简单的初始化ArrayList的代码 List<String> li new ArrayList<>();然后进入ArrayList中&#xff0c;在无参数构造方法中可以查看到上面的绿色注释中写了构造一个空的集合并且初始化容量为10。接下来继续查看源码&#x…...

编程日记 2025/6/27 23:11:32

文件操作和IO-2 使用Java操作文件

Java操作文件的API 1、针对文件系统的操作。包括但不限于&#xff1a;创建文件、删除文件、重命名文件、列出目录内容…… 2、针对文件内容的操作。读文件/写文件 Java中针对文件的操作&#xff0c;使用File类来进行操作&#xff0c;这个类被存储在java.io这个包里面。 i&a…...

编程日记 2025/6/27 23:07:35

day 31

文件的拆分 1. 项目核心代码组织 src/&#xff08;source的缩写&#xff09;&#xff1a;存放项目的核心源代码。 2. 配置文件管理 config/ 目录&#xff1a;集中存放项目的配置文件&#xff0c;方便管理和切换不同环境&#xff08;开发、测试、生产&#xff09;的配置。 …...

编程日记 2025/6/27 22:59:43

基于Python批量删除文件和批量增加文件

一、为什么写这么一个程序 其实原因也是很简单的&#xff0c;我去网上下载了一个文件夹&#xff0c;里面太多别人的文件了&#xff0c;我不喜欢&#xff0c;所以我就写了这么一个代码。 二、安装Python和vscode 先安装Python在安装vscode Python安装 vscode的安装 三、源码…...

编程日记 2025/7/5 1:18:07

【信息系统项目管理师】第12章：项目质量管理 - 26个经典题目及详解

更多内容请见： 备考信息系统项目管理师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第…...

编程日记 2025/6/27 22:59:41

ShenNiusModularity项目源码学习（27：ShenNius.Admin.Mvc项目分析-12）

订单列表页面用于浏览、检索、维护商城模块的订单信息。订单列表页面的后台控制器类OrderController位于ShenNius.Admin.Mvc项目的Areas\Shop\Controllers内&#xff0c;页面文件位于同项目的Areas\Shop\Views\Order内&#xff0c;其中Index.cshtml页面为主页面&#xff0c;Det…...

编程日记 2025/6/27 23:18:45

(T_T)，不小心删掉RabbitMQ配置文件数据库及如何恢复

一、不小心删除 今天是2025年5月15日&#xff0c;非常沉重的一天&#xff0c;就在今早8点左右的时候我打算继续做我的毕业设计&#xff0c;由于开机的过程十分缓慢&#xff08;之前没有&#xff09;&#xff0c;加上刚开机电脑有卡死的迹象&#xff0c;再加上昨天晚上关电脑前…...

编程日记 2025/6/27 22:59:45

【Python装饰器深度解析】从语法糖到元编程实战

目录 🌟 前言🏗️ 技术背景与价值🩹 当前技术痛点🛠️ 解决方案概述👥 目标读者说明🧠 一、技术原理剖析📊 核心概念图解💡 核心作用讲解🔧 关键技术模块说明⚖️ 技术选型对比🛠️ 二、实战演示⚙️ 环境配置要求💻 核心代码实现案例1：基础计时装饰器案…...

编程日记 2025/6/27 23:39:18

操作系统学习笔记第5章 （竟成）

目录 第 5 章 输入 / 输出 (I/O) 管理 5.1 I/O 管理基础 5.1.1 I/O 设备 1.I/O 设备的基本概念 2.I/O 设备的分类 3.I/O 接口 4.I/O 端口 (1) I/O 端口的概念 (2) I/O 端口的编址 ① 独立编址方式 ② 统一编址方式 5.1.2 I/O 控制方式 1. 程序查询方式 2. 程序中断方式 3. DMA …...

编程日记 2025/6/27 23:09:41

【DCGMI专题1】---DCGMI 在 Ubuntu 22.04 上的深度安装指南与原理分析（含架构图解）

目录 一、DCGMI 概述与应用场景 二、Ubuntu 22.04 系统准备 2.1 系统要求 2.2 环境清理（可选） 三、DCGMI 安装步骤（详细图解） 3.1 安装流程总览 3.2 分步操作指南 3.2.1 系统更新与依赖安装 3.2.2 添加 NVIDIA 官方仓库 3.2.3 安装数据中心驱动与 DCGM 3.2.4 服务…...

编程日记 2025/7/9 15:12:15

C# 使用 OpenCV 基础

一、C#安装OpenCV 安装上面两个模块 二、使用 导入 using OpenCvSharp;加载图片 // 导入图片 Mat image Cv2.ImRead("C:\x5.bmp"); // 拷贝 Mat image2 image.Clone();// 打开窗口 Cv2.NamedWindow("image", WindowFlags.AutoSize); // 显示图片 Cv2…...

编程日记 2025/6/27 23:31:50

如何解决全局或静态变量被修改的bug

问题卡死 程序原来设置Firware name 时N32G475&#xff0c;在程序运行时&#xff0c;程序崩溃&#xff0c;发现输出的固件名称没有了&#xff0c;这里说明固件名称被程序修改了 程序在开机时都是对的 打开map文件查找fw_name的内存地址&#xff0c;他的值被更改&#xff0c;就…...

编程日记 2025/6/27 23:38:16

[Java实战]Spring Boot整合Sentinel：流量控制与熔断降级实战（二十九）

[Java实战]Spring Boot整合Sentinel&#xff1a;流量控制与熔断降级实战&#xff08;二十九&#xff09; 一、Sentinel简介 Sentinel是阿里开源的分布式系统流量防卫组件&#xff0c;核心功能包括&#xff1a; 流量控制&#xff1a;根据QPS、线程数等指标限制资源访问熔断降…...

编程日记 2025/7/7 22:55:26

Linux系统中，Ctrl+C的运行过程是什么？

文章目录 前言1.终端驱动捕获键盘输入2.信号发送到前台进程组3. 进程处理信号4. 信号传递的详细流程5. Shell 的后续处理关键机制说明扩展&#xff1a;其他相关信号总结 前言 今天看到有个小伙伴面试问到这个问题&#xff0c;感觉挺有意思&#xff0c;我们后端开发者相信都用过…...

编程日记 2025/7/7 20:36:52

101个α因子#9

((0 < ts_min(delta(close, 1), 5)) ? delta(close, 1) : ((ts_max(delta(close, 1), 5) < 0) ? delta(close, 1) : (-1 * delta(close, 1))))worldquant brain平台上调整后的语法&#xff1a; ((0 < min(close-ts_delay(close, 1), ts_delay(close, 1)-ts_delay(c…...

编程日记 2025/6/27 23:26:58