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

HOW - React NextJS 的同构机制

news 来源：原创 2025/6/19 15:41:12

文章目录

  • 一、什么是 Next.js 的同构？
  • 二、核心目录结构
  • 三、关键函数：如何实现不同渲染方式？
    • 1. getServerSideProps —— 实现 SSR（每次请求动态获取数据）
    • 2. getStaticProps + getStaticPaths —— 实现 SSG（构建时生成）
  • 四、Hydration：服务端渲染 + 客户端交互
  • 五、客户端/服务端代码混用的注意点
  • 六、完整例子：同构页面流程图
  • 七、总结

在如下文章我们介绍了同构和三大渲染场景：

  • WHAT - 前端同构 Isomorphic Javascript
  • WHAT - SSR vs SSG vs ISR

接下来我们主要去深入了解 React 的同构实现，Next.js 是最好的起点。它为你封装好了复杂的同构逻辑，让你专注于构建组件和页面。

下面我会帮你系统性地理解 Next.js 的同构机制，包括目录结构、渲染方式（SSR/SSG/ISR）、客户端与服务端代码共存的原理。

一、什么是 Next.js 的同构？

在 Next.js 中，“同构”意味着：

  • 你的 React 页面可以在服务端渲染出 HTML。
  • 然后发送给浏览器，并在浏览器上"水合"成可交互的 React 应用。

一套代码，同时运行在服务器和浏览器，页面内容和结构一致。

二、核心目录结构

my-next-app/
├── pages/               # 路由页面（同构重点）
│   ├── index.tsx        # 首页（自动匹配 / 路由）
│   ├── about.tsx        # /about 页面
│   └── [id].tsx         # 动态路由页面 /xxx
├── public/              # 静态资源
├── components/          # 可复用的 React 组件
├── styles/              # 样式文件
└── next.config.js       # 配置文件

每个 pages/xxx.tsx 页面都会被 Next.js 编译为同构页面 —— 即同时具有 SSR/CSR 能力。

三、关键函数：如何实现不同渲染方式？

1. getServerSideProps —— 实现 SSR（每次请求动态获取数据）

// pages/post/[id].tsx
export async function getServerSideProps(context) {const res = await fetch(`https://api.example.com/post/${context.params.id}`);const data = await res.json();return { props: { data } };
}
  • 每次请求服务器都会运行这段逻辑，返回 HTML。

2. getStaticProps + getStaticPaths —— 实现 SSG（构建时生成）

// pages/post/[id].tsx
export async function getStaticPaths() {const res = await fetch('https://api.example.com/posts');const posts = await res.json();return {paths: posts.map(post => ({ params: { id: post.id.toString() } })),fallback: false, // or 'blocking' for ISR};
}export async function getStaticProps({ params }) {const res = await fetch(`https://api.example.com/post/${params.id}`);const data = await res.json();return { props: { data }, revalidate: 60 }; // ISR：60秒更新一次
}
  • 初始构建时预生成页面，后续请求直接返回静态 HTML。
  • 使用 revalidate 支持增量静态更新（ISR）。

四、Hydration：服务端渲染 + 客户端交互

  1. 服务端阶段：

    • Next.js 在 Node.js 环境执行页面组件。
    • 使用 react-dom/server 渲染为 HTML。
    • 将 HTML 和页面初始数据一同发送给浏览器。

  2. 客户端阶段：

    • React 在浏览器中调用 hydrate 方法，把 HTML “接管”。
    • 绑定事件、状态等功能，实现交互。

这就是同构的本质：HTML 是 SSR 渲染的，交互是 CSR 接管的。

五、客户端/服务端代码混用的注意点

在 Next.js 中你可以写出这样的代码：

import { useEffect } from 'react';export default function Page() {useEffect(() => {console.log('只在浏览器中执行');}, []);return <div>Hello World</div>;
}

✅ 这段代码在 SSR 阶段会忽略 useEffect，只渲染 HTML
✅ 到浏览器中后，useEffect 会执行，实现动态行为。

如果你需要只在服务端运行逻辑，可以用：

if (typeof window === 'undefined') {// 服务端环境
}

六、完整例子：同构页面流程图

User 请求页面 ──> 服务器运行 React 页面（SSR） ──> HTML 返回给浏览器│带上初始数据（props）↓浏览器加载 React、hydrate 成交互页面

七、总结

项目是否同构渲染方式SEO 支持首屏速度
React CRA❌CSR❌慢
Next.js SSR✅服务端渲染✅快
Next.js SSG✅静态生成✅非常快
Next.js ISR✅静态 + 动态混合✅快且智能

相关文章：

HOW - React NextJS 的同构机制

文章目录 一、什么是 Next.js 的同构&#xff1f;二、核心目录结构三、关键函数&#xff1a;如何实现不同渲染方式&#xff1f;1. getServerSideProps —— 实现 SSR&#xff08;每次请求动态获取数据&#xff09;2. getStaticProps getStaticPaths —— 实现 SSG&#xff08;…...

编程日记 2025/5/17 7:40:36

电动汽车直流快充充电桩AEV200-DC240M4的详细介绍

电动汽车直流快充充电桩AEV200-DC240M4产品简介 AEV系列为全新一代分体式电动汽车直流恒功率快速充电机。系统内置 30/40kW 恒功率充电模块&#xff0c;最高输出电压1000V&#xff0c;满足各类车辆充电需求。模块采用隔离风道灌胶设 计 &#xff0c;可靠性高 &#xff0c;可应…...

编程日记 2025/5/17 7:40:35

YOLOv7训练时4个类别只出2个类别

正常是4个类别&#xff1a; 但是YOLOv7训练完后预测总是只有两个类别&#xff1a; 而且都是LFM和SFM 我一开始检查了下特征图大小&#xff0c;如果输入是640*640的话&#xff0c;三个尺度特征图是80*80,40*40,20*20&#xff1b;如果输入是416*416的话&#xff0c;三个尺度特征…...

编程日记 2025/5/17 7:40:34

数据赋能（224）——数据与业务协同——数据动态调整原则

概述 数据动态调整原则不仅能帮助组织迅速响应业务需求和技术环境的变化&#xff0c;还能确保数据应用始终与最新的数据处理技术、算法和工具保持同步。通过实施数据动态调整&#xff0c;企业能够更准确地捕捉业务趋势&#xff0c;优化数据质量&#xff0c;以及提高资源利用效…...

编程日记 2025/5/17 7:40:33

Vulfocus靶场-文件上传-3

WSO2 文件上传 &#xff08;CVE-2022-29464&#xff09; WSO2是一家成立于 2005 年的开源技术提供商。它提供了一个企业平台&#xff0c;用于在本地和整个 Internet 上 集成应用程序编程接口(API)、应用程序和 Web 服务。 某些 WSO2 产品允许无限制的文件上传和远程代码执行。…...

编程日记 2025/5/17 7:39:29

(for 循环) VS (LINQ) 性能比拼 ——c#

在大多数情况下&#xff0c;for 循环的原始性能会优于 LINQ&#xff0c;尤其是在处理简单遍历、数据筛选或属性提取等场景时。这是由两者的实现机制和抽象层次决定的。以下是具体分析&#xff1a; 一、for 循环与 LINQ 的性能差异原因 1. 抽象层次与执行机制 for 循环&#…...

编程日记 2025/5/17 7:39:28

自学嵌入式 day19-数据结构 链表

二、线性表的链式存储 1.特点&#xff1a; &#xff08;1&#xff09;线性表链式存储结构的特点是一组任意的存储单位存储线性表的数据元素&#xff0c;存储单元可以是连续的&#xff0c;也可以不连续。可以被存储在任意内存未被占用的位置上。 &#xff08;2&#xff09;所以…...

编程日记 2025/5/17 7:39:27

一发入魂：极简解决 SwiftUI 复杂视图未能正确刷新的问题（中）

概述 各位似秃非秃小码农们都知道，在 SwiftUI 中视图是状态的函数，这意味着状态的改变会导致界面被刷新。 但是，对于有些复杂布局的 SwiftUI 视图来说，它们的界面并不能直接映射到对应的状态上去。这就会造成一个问题：状态的改变并没有及时的引起 UI 的变化。 如上图所示…...

编程日记 2025/5/17 7:39:26

UI自动化测试详解

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、about自动化测试 定义&#xff1a;把人为驱动的测试转化为机器执行的一种过程&#xff0c;重点在于持续集成这个概念&#xff1b; 优势&#xff1a;节约人力…...

编程日记 2025/6/1 22:15:48

数学复习笔记 14

前言 和家里人交流了一下&#xff0c;他们还是希望我全力以赴初试&#xff0c;我确实也得放开了干&#xff0c;不要束手束脚的。好好加油。感觉公共课都没有啥压力&#xff0c;主要是专业课要好好加油&#xff0c;真不能过不了线&#xff0c;要是过不了线&#xff0c;啥都白搭…...

编程日记 2025/5/17 7:38:24

单元化架构

目录 ​​​​​​​​编辑 单元化 逻辑单元 单元化 多地多机房部署&#xff0c;是互联网系统的必然发展方向&#xff0c;一个系统要走到这一步&#xff0c;也就必然要解决上面提到的问题&#xff1a;流量调配、数据拆分、延时等。业界有很多技术方案可以用来解决这些问题&…...

编程日记 2025/5/17 7:38:22

硬件厂商的MIB文档详解 | 如何查询OID? | MIB Browser实战指南-优雅草卓伊凡

硬件厂商的MIB文档详解 | 如何查询OID? | MIB Browser实战指南-优雅草卓伊凡 一、硬件厂商的MIB文档是什么&#xff1f; 1. MIB的本质&#xff1a;设备的”数据字典” MIB&#xff08;Management Information Base&#xff09; 是SNMP协议的核心数据库&#xff0c;定义了设备…...

编程日记 2025/5/17 7:38:22

遥感图像露天矿区检测数据集VOC+YOLO格式1542张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1542 标注数量(xml文件个数)&#xff1a;1542 标注数量(txt文件个数)&#xff1a;1542 …...

编程日记 2025/5/30 15:08:50

【python基础知识】Day 27 函数专题2：装饰器

知识点&#xff1a; 装饰器的思想&#xff1a;进一步复用函数的装饰器写法注意内部函数的返回值 装饰器教程 作业&#xff1a; 编写一个装饰器 logger&#xff0c;在函数执行前后打印日志信息&#xff08;如函数名、参数、返回值&#xff09; def logger(func):def wrapper(*ar…...

编程日记 2025/5/17 7:36:15

游戏站的几种形式

游戏站点的主要形式&#xff1a;单品游戏站、游戏盒子站与单类型游戏盒子站 随着互联网的普及和游戏产业的快速发展&#xff0c;游戏站点作为玩家获取游戏资源和信息的重要平台&#xff0c;呈现出多种形式。本文将分析三种常见的游戏站点形式&#xff1a;单品游戏站、游戏盒子站…...

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

动态IP赋能业务增效：技术解构与实战应用指南

在数字化转型加速的今天&#xff0c;IP地址作为网络通信的基础设施&#xff0c;其技术特性正深刻影响着企业业务架构的效率与安全性。动态IP&#xff08;Dynamic IP&#xff09;作为互联网资源分配的核心机制&#xff0c;早已突破传统认知中的"临时地址"定位&#xf…...

编程日记 2025/5/17 7:35:11

Redis 五种类型基础操作(redis-cli + Spring Data Redis)

目录 一、什么是 Redis&#xff1f; 二、Redis 的特点 三、Redis 常见的数据类型 四、Redis 的典型应用场景 五、redis-cli&#xff08;命令行工具&#xff09;练习命令 1.1、String 类型&#xff08;最基本的数据类型&#xff09; 1.2、List 类型&#xff08;链表结构&a…...

编程日记 2025/5/23 23:43:29

Gitee DevOps：中国企业数字化转型的加速引擎

随着中国数字经济规模突破50万亿元大关&#xff0c;研发效能已成为企业数字化转型的核心竞争力指标。在2025年这个关键节点&#xff0c;中国企业面临的不再是是否采用DevOps的选择题&#xff0c;而是如何选择最适合本土环境的DevOps平台的战略决策。Gitee DevOps平台凭借其独特…...

编程日记 2025/5/17 7:35:08

【数据仓库面试题合集①】数据建模高频面试题及解析

🧠 面试官爱问什么？——核心考察点 数据建模作为数仓岗位面试的重头戏，考察的不只是模型知识，更是对业务理解、抽象能力和工程落地经验的综合评估。常见题型可分为三类： 概念类：模型类型、建模方法论（如维度建模、范式建模） 场景类：给定一个业务场景进行模型设计（如…...

编程日记 2025/5/17 7:35:07

华为云Flexus+DeepSeek征文｜SpringBoot开发实战：基于ModelArts Studio高效集成DeepSeek大模型服务

目录 一、前言 二、ModelArts Studio&#xff08;MaaS&#xff09;介绍与使用 2.1ModelArts Studio&#xff08;MaaS&#xff09;介绍 2.2 ModelArts Studio&#xff08;MaaS&#xff09;使用场景 2.3 开通MaaS服务 2.4 开通DeepSeek-V3商用服务 三、MaaS模型服务接口测试 3.1 …...

编程日记 2025/5/17 7:34:04

【C++】类与对象

C语言结构体中只能定义变量,在C中,结构体内不仅可以定义变量,也可以定义函数。比如:之前在数据结构中,用C语言方式实现的栈,结构体中只能定义变量;现在以C方式实现,会发现struct中也可以定义函数。 struct Stack {// 成员函数void Init(int defaultCapacity 4){a (int*)mall…...

编程日记 2025/5/17 7:34:04

mac M芯片运行docker-desktop异常问题

虽然mac已经迭代到m4了&#xff0c;但官方的docker-desktop运行仍然有问题&#xff0c;包括但不限于&#xff1a; 命令行docker找不到docker-desk打不开docker-desktop闪退容器起不来 尝试不同版本后&#xff0c;看到了其他可以在mac跑docker的开源方法&#xff0c;更简单、轻…...

编程日记 2025/5/17 7:34:03

5G 技术在智能制造中的应用：加速工业革命的新引擎

5G 技术在智能制造中的应用：加速工业革命的新引擎 在过去几十年里，制造业经历了从机械化到自动化，再到如今的智能化变革。而 5G 技术的出现，不仅是一次通信技术的升级，更是为 智能制造 注入了新的动力。从 智能工厂、工业物联网（IIoT） 到 远程控制与数据智能分析，5G 正…...

编程日记 2025/5/17 7:33:59

数据治理域——数据同步设计

摘要 本文主要介绍了数据同步的多种方式&#xff0c;包括直连同步、数据文件同步和数据库日志解析同步。每种方式都有其适用场景、技术特点、优缺点以及适用的数据类型和实时性要求。文章还详细探讨了数据直连同步的特点、工作原理、优点、缺点、适用场景等&#xff0c;并对数…...

编程日记 2025/5/17 7:32:55

系统架构设计师案例分析题——web篇

软考高项系统架构设计师&#xff0c;其中的科二案例分析题为5选3&#xff0c;总分75达到45分即合格。本贴来归纳web设计题目中常见的知识点即细节&#xff1a; 目录 一.核心知识 1.常见英文名词 2.私有云 3.面向对象三模型 4.计网相关——TCP和UDP的差异 5.MQTT和AMQP协…...

编程日记 2025/5/17 7:32:54

FC7300 SPI MCAL配置引导

一、MCU 组件 - 配置SPI时钟 MCU中配置的SPI输入时钟频率至少应大于2倍的SPI组件中配置的外设波特率。SPI时钟配置为30MHz 二、SPI 组件 - General Spi Level Delivered： 0 级：仅简单同步行为1 级：基本异步行为，通过中断实现2 级：增强型行为，通过轮询实现根据AUTOSAR SPI…...

编程日记 2025/5/17 7:32:53

【记录】Windows｜竖屏怎么调整分辨率使横竖双屏互动鼠标丝滑

本文版本&#xff1a;Windows11&#xff0c;记录一下&#xff0c;我最后调整的比较舒适的分辨率是800*1280。 文章目录 第一步 回到桌面第二步 右键桌面第三步 设置横屏为主显示器第四步 调整分辨率使之符合你的需求第五步 勾选轻松在显示器之间移动光标第六步 拖动屏幕符合物理…...

编程日记 2025/5/17 7:31:51

hghac和hgproxy版本升级相关操作和注意事项

文章目录 环境文档用途详细信息 环境 系统平台&#xff1a;N/A 版本&#xff1a;4.5.6,4.5.7,4.5.8 文档用途 本文档用于高可用集群环境中hghac组件和hgproxy组件替换和升级操作 详细信息 1.关闭服务 所有数据节点都执行 1、关闭hgproxy服务 [roothgdb01 tools]# system…...

编程日记 2025/5/17 7:31:50

【超分辨率专题】一种考量视频编码比特率优化能力的超分辨率基准

这是一个Benchmark&#xff0c;超分辨率视频编码&#xff08;2024&#xff09; 专题介绍一、研究背景二、相关工作2.1 SR的发展2.2 SR benchmark的发展 三、Benchmark细节3.1 数据集制作3.2 模型选择3.3 编解码器和压缩标准选择3.4 Benchmark pipeline3.5 质量评估和主观评价研…...

编程日记 2025/5/17 7:30:48

操作系统之进程和线程听课笔记

计算机的上电运行就是构建进程树,进程调度就是在进程树节点进程进行切换 进程间通信的好处 经典模型 生产者和消费者 进程和线程的区别 线程引入带来的问题线程的优势 由于unix70年代产生,90年代有线程,当时数据库系统操作需要线程,操作系统没有来得及重造,出现了用户态线…...

编程日记 2025/5/17 7:30:47

Mac安装Navicat16

我的电脑用的是M3芯片&#xff0c;然后在安装的时候也踩了很多的坑 先分享一下链接 通过网盘分享的文件&#xff1a;Navicat Premium v16.2.dmg 链接: https://pan.baidu.com/s/1ENLtU7VLCvzntLKqSyFiqg?pwd1234 提取码: 1234 其实按理说用navicat17也是可以的 首先下载完成后…...

编程日记 2025/5/26 1:51:51

表的设计、聚合函数

目录 1、表的设计 1.1、一对一 1.2、一对多 1.3、多对多 2、插入查询结果 3、聚合查询 3.1、聚合函数 3.2、GROUP BY子句 1、表的设计 根据实际的需求场景&#xff0c;明确当前要创建几个表&#xff0c;每个表什么样子&#xff0c;这些表之间是否存在一定联系 1. 梳理…...

编程日记 2025/5/17 7:29:41

React学习———React Router

React Router React Router 是 React 应用中用于管理路由的流行库&#xff0c;它允许你在单页应用&#xff08;SPA&#xff09;中实现导航和页面切换而无需重新加载页面。 安装 npm install react-router-dom核心组件 <BrowserRouter> 使用HTML5的历史记录API&#…...

编程日记 2025/5/17 7:29:39

【前端】[vue3] [uni-app]使用 vantUI 框架

npm 安装&#xff1a; npm i vant/weapp -S --productionmain.js 中挂载 App.vue 引入 vantUI 样式 完成&#xff1a;...

编程日记 2025/5/17 7:29:38

upload-labs通关笔记-第8关 文件上传之点绕过

目录 一、点绕过原理 二、deldot()函数 三、源码分析 四、渗透实战 1、构建脚本test8.php 2、打开靶场 3、bp开启拦截 4、点击上传 5、bp拦截 6、后缀名增加点 7、发包并获取脚本地址 8、访问脚本 本文通过《upload-labs靶场通关笔记系列》来进行upload-labs靶场的渗…...

编程日记 2025/5/17 7:29:37

XML简要介绍

实际上现在的Java Web项目中更多的是基于springboot开发的&#xff0c;所以很少再使用xml去配置项目。所以我们的目的就是尽可能快速的去了解如何读懂和使用xml文件&#xff0c;对于DTD&#xff0c;XMLSchema这类约束的学习可以放松&#xff0c;主要是确保自己知道这里面的大致…...

编程日记 2025/5/17 7:28:32

我设计的一个安全的 web 系统用户密码管理流程

作为一名有多年经验的前端&#xff0c;在刚开始学习web后端的时候&#xff0c;就对如何设计一个安全的 web 系统用户密码管理流程有很多疑问。之前自己也实践过几种方法&#xff0c;但一直觉得不是十分安全。 我们知道&#xff0c;用户在注册或登录界面填写的密码是明文的&…...

编程日记 2025/5/17 7:28:31

事件驱动架构：从传统服务到实时响应的IT新风潮

文章目录 事件驱动架构的本质&#xff1a;从请求到事件的范式转变在EDA中&#xff1a; 事件驱动架构的演进&#xff1a;从消息队列到云原生标配核心技术&#xff1a;事件驱动架构的基石与工具链1. 消息队列&#xff1a;事件传递的枢纽2. 消费者&#xff1a;异步处理3. 事件总线…...

编程日记 2025/5/17 7:27:29

YOLOv11改进 | Neck篇 | 轻量化跨尺度跨通道融合颈部CCFM助力YOLOv11有效涨点

YOLOv11改进 | Neck篇 | 轻量化跨尺度跨通道融合颈部CCFM助力YOLOv11有效涨点 引言 在目标检测领域&#xff0c;YOLO系列算法因其卓越的速度-精度平衡而广受欢迎。YOLOv11作为该系列的最新演进版本&#xff0c;在Neck部分引入了创新的跨尺度跨通道融合模块(CCFM, Cross-scale…...

编程日记 2025/5/17 7:27:28

Unity：场景管理系统 —— SceneManagement 模块

目录 &#x1f3ac; 什么是 Scene&#xff08;场景&#xff09;&#xff1f; Unity 项目中的 Scene 通常负责什么&#xff1f; &#x1f30d; 一个 Scene 包含哪些元素&#xff1f; Scene 的切换与管理 &#x1f4c1; 如何创建与管理 Scenes&#xff1f; 什么是Scene Man…...

编程日记 2025/5/28 18:11:22

官方 Elasticsearch SQL NLPChina Elasticsearch SQL

官方的可以在kibana 控制台上进行查询&#xff1a; POST /_sql { “query”: “SELECT client_ip, status FROM logs-2024-05 WHERE status 500” } NLPChina Elasticsearch SQL就无法以在kibana 控制台上进行查询&#xff0c;但是可以使用postman接口进行查询&#xff1a;...

编程日记 2025/5/17 7:27:27

Kubernetes 1.28 无 Docker 运行时环境下的容器化构建实践：Kaniko + Jenkins 全链路详解

背景说明 随着 Kubernetes 1.28 正式弃用 Docker 作为默认容器运行时&#xff08;CRI 规范演进&#xff09;&#xff0c;传统的 docker build 方式已无法直接在集群内运行。Kaniko 作为 Google 开源的容器镜像构建工具&#xff0c;凭借其无需特权容器、兼容 OCI 标准的特性&am…...

编程日记 2025/5/17 7:26:25

【Linux】序列化与反序列化、会话与进程组、守护进程

一.序列化和反序列化 协议其实就是结构化的数据。但是再网络通信中&#xff0c;我们不直接发送结构化的数据给对方。我们一般会将结构化的数据序列化成字符串/字节流&#xff0c;然后通过网络在发送出去。而接收方收到之后&#xff0c;要对收到的字符串/流式数据进行反序列化&…...

编程日记 2025/5/17 7:26:24

Python机器学习笔记（二十五、算法链与管道）

对于许多机器学习算法，特定数据表示非常重要。首先对数据进行缩放，然后手动合并特征，再利用无监督机器学习来学习特征。因此，大多数机器学习应用不仅需要应用单个算法，而且还需要将许多不同的处理步骤和机器学习模型链接在一起。Pipeline类可以用来简化构建变换和模型链的…...

编程日记 2025/5/17 7:26:23

自媒体工作室如何矩阵？自媒体矩阵养号策略

一、自媒体工作室矩阵搭建方法 1.纵向矩阵&#xff1a;在主流平台都开设账号&#xff0c;覆盖不同用户触达场景。 短视频&#xff1a;抖音、快手、视频号&#xff08;侧重私域沉淀&#xff09; 2.主账号导流&#xff1a;通过关联账号、评论区跳转链接实现流量互通 本地生活…...

编程日记 2025/6/1 12:12:49

Pywinauto：轻松实现Windows桌面自动化实战

你是否厌倦了每天重复点击软件界面的枯燥操作&#xff1f;是否希望能像自动化网页那样&#xff0c;轻松控制桌面程序&#xff1f;在自动化测试逐渐扩展到客户端桌面的今天&#xff0c;你还不知道 pywinauto&#xff0c;就真的落后了&#xff01; 手动测试Windows桌面应用&…...

编程日记 2025/5/17 7:25:20

告别传统的防抖机制，提交按钮的新时代来临

目录 背景 目标 核心代码 样式定义&#xff1a;让图标居中、响应父级颜色 SVG 图标&#xff1a;轻量、无依赖的 loading 图标 指令注册&#xff1a;全局注册 v-bLoading DOM 操作&#xff1a;添加与清除 loading 图标 1. 添加 loading 图标 2. 清除 loading 图标 动画…...

编程日记 2025/5/31 13:36:39

【Linux】Linux安装并配置MongoDB

目录 1.添加仓库 2.安装 MongoDB 包 3.启动 MongoDB 服务 4. 验证安装 5.配置 5.1.进入无认证模式 5.2.1创建用户 5.2.2.开启认证 5.2.3重启 5.2.4.登录 6.端口变更 7.卸载 7.1.停止 MongoDB 服务 7.2.禁用 MongoDB 开机自启动 7.3.卸载 MongoDB 包 7.4.删除数…...

编程日记 2025/5/17 7:25:17

PT2031K单触控单输出触摸IC

1.产品概述 ● PT2031K是一款电容式触摸控制ASIC&#xff0c;支持单通道触摸输入和单路同步开关输出。适用于雾化器、车载用品、电子玩具、消费类电子产品等领域&#xff0c;具有低功耗、高抗干扰、宽工作电压范围的突出优势。 2.主要特性 ● 工作电压范围&#xff1a;2.4~5.5…...

编程日记 2025/5/17 7:24:15

MySQL 与 FastAPI 交互教程

目录 1. 使用 Docker 启动 MySQL2. 创建 FastAPI 应用安装必要的依赖创建项目结构创建数据库连接模块创建数据模型创建 Pydantic 模型&#xff08;用于请求和响应&#xff09;创建主应用 3. 运行和测试应用启动应用访问 API 文档 4. 测试 API 端点创建用户获取所有用户获取特定…...

编程日记 2025/5/17 7:24:14