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

next.js实现项目搭建

news 来源：原创 2025/6/24 18:17:28

一、创建 Next.js 项目的步骤

1、安装

npx create-next-app@latest
# 或
yarn create next-app
# 或
pnpm create next-app

按照交互式提示配置你的项目：

  • 输入项目名称

  • 选择是否使用 TypeScript

  • 选择是否启用 ESLint

  • 选择是否启用 Tailwind CSS

  • 选择是否使用 src/ 目录

  • 选择是否启用实验性 App 路由功能

  • 选择是否自定义导入别名

1、运行

npm run dev

项目将在 http://localhost:3000 启动。

2、常用命令

  • npm run dev - 启动开发服务器

  • npm run build - 构建生产版本

  • npm run start - 启动生产服务器

  • npm run lint - 运行 ESLint

3. 额外配置

添加 TypeScript（如果初始未选择）

1、创建空 tsconfig.json：

touch tsconfig.json

2、安装 TypeScript 依赖

npm install --save-dev typescript @types/react @types/node

3、重新运行 npm run dev，Next.js 会自动配置 tsconfig.json

添加样式

Next.js 支持多种样式解决方案：

  • CSS Modules（内置支持）

  • Tailwind CSS（推荐）

  • Sass（需要安装 sass）

  • CSS-in-JS（如 styled-components, emotion）

    二、Next.js (TypeScript) 配置多个页面的方法

    在 Next.js 中配置多个页面非常简单，主要取决于你使用的是传统的 pages 路由还是新的 app 路由（Next.js 13+）。以下是两种方式的配置方法：

    方法一：使用传统的 pages 路由

    1、创建页面文件

    在 pages 目录下，每个文件都会自动成为一个路由：

    pages/
├── index.tsx        // 对应路径 /
├── about.tsx       // 对应路径 /about
├── blog/
│   ├── index.tsx   // 对应路径 /blog
│   └── [slug].tsx  // 动态路由 /blog/:slug
└── users/└── [id].tsx    // 动态路由 /users/:id

    2、基本页面示例

    pages/about.tsx:

    import React from 'react';const AboutPage: React.FC = () => {return (<div><h1>关于我们</h1><p>这是关于我们的页面</p></div>);
};export default AboutPage;

    3、动态路由页面

    pages/blog/[slug].tsx:

    import { useRouter } from 'next/router';const BlogPost: React.FC = () => {const router = useRouter();const { slug } = router.query;return (<div><h1>博客文章: {slug}</h1><p>这是关于 {slug} 的文章内容</p></div>);
};export default BlogPost;

    方法二：使用新的 app 路由 (Next.js 13+)

    1. 创建页面结构

    app/
├── page.tsx        // 对应路径 /
├── about/
│   └── page.tsx   // 对应路径 /about
├── blog/
│   ├── page.tsx   // 对应路径 /blog
│   └── [slug]/
│       └── page.tsx  // 动态路由 /blog/:slug
└── users/└── [id]/└── page.tsx  // 动态路由 /users/:id

    2. 基本页面示例

    app/about/page.tsx:

    export default function AboutPage() {return (<div><h1>关于我们</h1><p>这是关于我们的页面</p></div>);
}

    3. 动态路由页面

    app/blog/[slug]/page.tsx:

    export default function BlogPost({params,
}: {params: { slug: string };
}) {return (<div><h1>博客文章: {params.slug}</h1><p>这是关于 {params.slug} 的文章内容</p></div>);
}

    【1】页面间导航

    使用 Next.js 的 Link 组件实现页面间导航：

    import Link from 'next/link';export default function Navigation() {return (<nav><Link href="/">首页</Link><Link href="/about">关于</Link><Link href="/blog">博客</Link><Link href="/blog/first-post">第一篇文章</Link></nav>);
}

    【2】获取路由参数

    在 pages 路由中:

    import { useRouter } from 'next/router';// 在组件内
const router = useRouter();
const { id } = router.query;

    在 app 路由中:

    // 直接从组件的 props 中获取
export default function Page({ params }: { params: { id: string } }) {return <div>ID: {params.id}</div>;
}

    【3】注意事项

    1. 确保文件名正确：

      • pages 路由：直接使用 .tsx 文件

      • app 路由：必须在文件夹内创建 page.tsx

    2. 动态路由参数：

      • pages 路由：使用 [param].tsx 格式

      • app 路由：使用 [param]/page.tsx 格式

    3. 如果你同时使用 pages 和 app 路由，Next.js 会优先使用 app 路由。

    4. 对于 API 路由：

      • pages 路由：放在 pages/api 目录下

      • app 路由：放在 app/api 目录下

    这样配置后，你的 Next.js 应用就可以支持多个页面和动态路由了。

    三、复用 Header 和 Footer 组件

    登录是一个页面，其他首页，个人中心，关于我们等页面，头部和底部配置好，不需要在每个使用的页面中引用。

    方法一、创建可复用组件（推荐）

    1、创建共享组件

    首先，将 Header 和 Footer 拆分为独立组件：

    // components/Header.tsx
export default function Header() {return (<header className="w-full h-12 bg-pink-500 flex items-center justify-center"><h1 className="text-white font-bold">头部导航</h1></header>);
}
    // components/Footer.tsx
export default function Footer() {return (<footer className="w-full h-12 bg-yellow-300 flex items-center justify-center"><p className="text-gray-800">© 2023 版权所有</p></footer>);
}

    2、创建布局组件（可选但推荐）

    // components/Layout.tsx
import Header from './Header';
import Footer from './Footer';export default function Layout({ children }: { children: React.ReactNode }) {return (<div className="min-h-screen flex flex-col"><Header /><main className="flex-1 p-4">{children}</main><Footer /></div>);
}

    3、在页面中使用

    home 页面:

    // app/home/page.tsx
import Layout from '@/components/Layout';export default function HomePage() {return (<Layout><section className="max-w-4xl mx-auto"><h2 className="text-2xl font-bold mb-4">首页内容</h2><p>这里是首页的内容...</p></section></Layout>);
}

    about 页面:

    // app/about/page.tsx
import Layout from '@/components/Layout';export default function AboutPage() {return (<Layout><section className="max-w-4xl mx-auto"><h2 className="text-2xl font-bold mb-4">关于我们</h2><p>这里是关于我们的内容...</p></section></Layout>);
}

    方法二、使用根布局 (App Router 特有)

    1、修改根布局

    // app/layout.tsx
import Header from '@/components/Header';
import Footer from '@/components/Footer';export default function RootLayout({children,
}: {children: React.ReactNode;
}) {return (<html lang="zh-CN"><body className="min-h-screen flex flex-col"><Header /><main className="flex-1">{children}</main><Footer /></body></html>);
}

    2、页面内容会自动嵌入

    这样所有页面都会自动包含 Header 和 Footer，无需在每个页面单独引入。

    方法三、使用模板组件

    如果你需要某些页面有不同的布局：

    // app/template.tsx
'use client';import Header from '@/components/Header';
import Footer from '@/components/Footer';export default function Template({ children }: { children: React.ReactNode }) {return (<div className="min-h-screen flex flex-col"><Header /><main className="flex-1 p-4">{children}</main><Footer /></div>);
}

    然后在页面中使用：

    // app/about/page.tsx
import Template from '@/app/template';export default function AboutPage() {return (<Template><section className="max-w-4xl mx-auto"><h2 className="text-2xl font-bold mb-4">关于我们</h2><p>这里是关于我们的内容...</p></section></Template>);
}

    【1】最佳实践建议

    1. 推荐使用方法一（独立组件+布局组件）：

      • 灵活性最高

      • 可以轻松在某些页面中隐藏 Header/Footer

      • 便于维护和更新

    2. 如果 Header/Footer 在所有页面都相同：

      • 可以使用方法二（根布局）

      • 最简单直接

    3. 需要不同变体时：

      • 可以创建多个布局组件（如 LayoutWithNav, SimpleLayout）

      • 根据页面需求选择不同布局

    这样配置后，你的 about 页面将自动复用 home 页面的头部和底部，同时保持代码的整洁和可维护性。

    相关文章：

    next.js实现项目搭建

    一、创建 Next.js 项目的步骤 1、安装 npx create-next-applatest # 或 yarn create next-app # 或 pnpm create next-app 按照交互式提示配置你的项目&#xff1a; 输入项目名称 选择是否使用 TypeScript 选择是否启用 ESLint 选择是否启用 Tailwind CSS 选择是否使用 s…...

    编程日记 2025/6/24 18:17:28

    使用GoLang版MySQLDiff对比表结构

    概述 下载地址&#xff1a; https://github.com/camry/mysqldiff/ 编译安装 git clone https://github.com/camry/mysqldiff.git go env -w GOPROXYhttps://goproxy.cn,direct go env -w GOPRIVATE*.corp.example.com go build .\mysqldiff.go执行对比 ./mysqldiff --sourc…...

    编程日记 2025/6/24 11:24:27

    git工具使用详细教程-------命令行和图形化工具

    下载 git下载地址&#xff1a;https://git-scm.com/downloads TortoiseGit&#xff08;图形化工具&#xff09;下载地址&#xff1a;https://tortoisegit.org/download/ 认识git结构 工作区&#xff1a;存放代码的地方 暂存区&#xff1a;临时存储&#xff0c;将工作区的代码…...

    编程日记 2025/6/22 19:21:56

    失控的产品

    大部分程序员很难有机会做一个新的产品&#xff0c;绝大多时候去一家新公司也都是在旧产品上修修补补。 笔者还是很幸运得到了开发新品的机会&#xff0c;从2023年开始做&#xff0c;中间经历了许多磕磕碰碰。 有的小伙伴从中离开&#xff0c;偶尔又加入1~2个人&#xff0c;但…...

    编程日记 2025/6/23 20:51:58

    区块链blog1__合作与信任

    &#x1f342;我们的世界 &#x1f33f;不是孤立的&#xff0c;而是网络化的 如果是单独孤立的系统&#xff0c;无需共识&#xff0c;而我们的社会是网络结构&#xff0c;即结点间不是孤立的 &#x1f33f;网络化的原因 而目前并未发现这样的理想孤立系统&#xff0c;即现实中…...

    编程日记 2025/6/24 18:06:15

    ES常识9：如何实现同义词映射(搜索)

    在 Elasticsearch&#xff08;ES&#xff09;中实现同义词映射&#xff08;如“美丽”和“漂亮”&#xff09;&#xff0c;核心是通过 同义词过滤器&#xff08;Synonym Token Filter&#xff09; 在分词阶段将同义词扩展或替换为统一词项&#xff0c;从而让搜索时输入任意一个…...

    编程日记 2025/6/24 17:55:31

    aws 实践创建policy + Role

    今天Cyber 通过image 来创建EC2 的时候，要添加policy, 虽然是administrator 的role, 参考Cyber 提供的link: Imageshttps://docs.cyberark.com/pam-self-hosted/14.2/en/content/pas%20cloud/images.htm#Bring 1 Step1:...

    编程日记 2025/6/24 18:00:44

    兰亭妙微B端UI设计：融合多元风格，点亮品牌魅力

    在B端产品市场&#xff0c;独特的品牌形象是企业脱颖而出的关键。兰亭妙微专注于B端UI设计&#xff0c;通过融合多元风格&#xff0c;为企业点亮品牌魅力&#xff0c;助力品牌价值提升。 兰亭妙微主创团队源自清华&#xff0c;历经多年沉淀&#xff0c;积累了丰富的设计经验。…...

    编程日记 2025/6/24 18:04:26

    高项-逻辑数据模型

    逻辑数据模型的核心理解 1. 定义与特点 逻辑数据模型&#xff08;Logical Data Model, LDM&#xff09;&#xff1a; 是一种抽象的数据结构设计&#xff0c;用于描述业务实体&#xff08;如客户、订单&#xff09;及其关系&#xff08;如“客户下单”&#xff09;&#xff0c…...

    编程日记 2025/6/24 18:06:14

    Aquatone安装与使用

    前言:aquatone工具获取网页截图,在资产收集的时候&#xff0c;对于网站可以起到快速浏览 michenriksen/aquatone: A Tool for Domain Flyovershttps://github.com/michenriksen/aquatone 任务一 安装chromium sudo apt install chromiumchromium -h 任务二 下载aquatone Relea…...

    编程日记 2025/6/24 18:05:15

    解读RTOS 第八篇 · 内核源码解读：以 FreeRTOS 为例

    1. 引言 FreeRTOS 作为最流行的嵌入式实时操作系统之一，其内核源码简洁且功能完善。通过剖析其关键模块（任务管理、调度器、队列、内存管理和移植层），不仅能够更深入地理解 RTOS 的运行机制，还能掌握根据项目需求进行内核定制与优化的能力。本章将带你以 FreeRTOS 10.x 版…...

    编程日记 2025/6/24 18:07:54

    6、登录功能后端开发

    6、登录功能后端开发 https://xiaoxueblog.com/ai/%E7%99%BB%E5%BD%95%E5%8A%9F%E8%83%BD%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91.html 1、新建用户表SQL脚本 -- CREATE DATABASE aicloud CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;-- 创建用户表 drop table if exi…...

    编程日记 2025/6/2 4:28:16

    「彻底卸载 Quay 容器仓库」：干净移除服务、镜像与配置的全流程指南

    文章目录 &#x1f9f9; 第一步&#xff1a;停止并禁用 systemd 服务&#x1f6ae; 第二步&#xff1a;移除 Podman 容器与相关资源1. 删除 quay-app 容器2. 删除镜像&#xff08;如果你想彻底清理&#xff09;3. 删除挂载卷&#xff08;比如 SQLite 存储&#xff09; &#x1…...

    编程日记 2025/6/24 13:45:55

    C++从入门到实战（十五）String（上）介绍STL与String的关系，为什么有string类，String有什么用

    C从入门到实战&#xff08;十五&#xff09;String&#xff08;上&#xff09; 前言一、STL与String的关系1. STL 是什么&#xff1f;2. String 是什么&#xff1f;3. String 与 STL 的关系 二、为什么有string类&#xff0c;有什么用1. 为什么需要 string 类&#xff1f;2. st…...

    编程日记 2025/6/23 22:57:38

    【Python 正则表达式】

    Python 正则表达式通过 re 模块实现模式匹配&#xff0c;是文本处理的核心工具。以下是系统化指南&#xff0c;包含语法详解和实战案例&#xff1a; 一、正则基础语法 1. 元字符速查表 符号含义示例匹配结果.任意字符&#xff08;除换行符&#xff09;r"a.c"“abc”…...

    编程日记 2025/6/20 5:43:06

    【MySQL】第四弹——表的CRUD进阶(二)数据库设计

    文章目录 &#x1f31f;范式&#x1f31f;表的设计&#x1f4ab;第一范式 1NF&#x1fa90;反例&#x1fa90;正例 &#x1f4ab;第二范式 2NF&#x1fa90;反例&#x1fa90;正例 &#x1f4ab;第三范式 3NF&#x1fa90;反例&#x1fa90;正例 &#x1f4ab;表的设计方法&…...

    编程日记 2025/6/23 10:35:36

    Unity基础学习（十五）核心系统——音效系统

    目录 一、关于音频文件的导入相关 二、音频源组件Audio Source 三、Audio Listener的介绍 四、关于播放音乐的方式 五、麦克风输入相关 Microphone 类方法与属性总览​ 1. Start 方法​ ​2. End 方法​ ​3. IsRecording 方法​ ​4. GetPosition 方法​ ​5. devic…...

    编程日记 2025/6/3 12:57:55

    计算机视觉----常见卷积汇总

    普通卷积   普通卷积大家应该都比较熟悉了&#xff0c;如果不熟悉的话&#xff0c;可以参考我之前的博客&#xff0c;或者去网上自行百度。这里主要想补充两个知识点。一&#xff1a;卷积核参数量怎么算&#xff1f; 二&#xff1a;如何高效的并行运算卷积滑窗&#xff1f; …...

    编程日记 2025/6/22 16:45:11

    【人工智能-agent】--Dify+Mysql+Echarts搭建了一个能“听懂”人话的数据可视化助手！

    Echarts官网&#xff1a;https://echarts.apache.org/zh/index.html ECharts 是一个由百度团队开发的、基于 JavaScript 的开源可视化图表库&#xff0c;它提供了丰富的图表类型和强大的交互功能&#xff0c;能够帮助开发者轻松创建专业级的数据可视化应用。 核心特点 丰富的图…...

    编程日记 2025/6/1 3:33:22

    【专栏启动】开篇：为什么是 Django + Vue3？测试平台的技术选型与架构蓝图

    【专栏启动】开篇&#xff1a;为什么是 Django Vue3&#xff1f;测试平台的技术选型与架构蓝图 前言一、为什么是 Django Vue3&#xff1f;二、测试平台的架构设计蓝图三、测试平台模块功能概述 结语 前言 一个高效、稳定、易用的测试平台&#xff0c;不仅能够帮助团队提升测…...

    编程日记 2025/6/19 18:34:39

    Rust 学习笔记：关于 Vector 的练习题

    Rust 学习笔记&#xff1a;关于 Vector 的练习题 Rust 学习笔记&#xff1a;关于 Vector 的练习题哪个调用会报错&#xff1f;以下代码能否通过编译&#xff1f;若能&#xff0c;输出是&#xff1f;以下代码能否通过编译&#xff1f;若能&#xff0c;输出是&#xff1f;以下代码…...

    编程日记 2025/6/24 17:23:58

    Modbus TCP转Profinet网关：数字化工厂异构网络融合的核心枢纽

    在现代工业生产中&#xff0c;随着智能制造和工业互联网的不断发展&#xff0c;数字化工厂成为了制造业升级的重要方向。数字化工厂的核心在于实现设备、数据和人的互联互通&#xff0c;而这其中&#xff0c;通信协议扮演着至关重要的角色。今天&#xff0c;我们就来探讨开疆智…...

    编程日记 2025/6/20 22:46:25

    精益数据分析（62/126）：从客户访谈评分到市场规模估算——移情阶段的实战进阶

    精益数据分析&#xff08;62/126&#xff09;&#xff1a;从客户访谈评分到市场规模估算——移情阶段的实战进阶 在创业的移情阶段&#xff0c;科学评估用户需求与市场潜力是决定产品方向的关键。今天&#xff0c;我们结合Cloud9 IDE的实战经验与《精益数据分析》的方法论&…...

    编程日记 2025/6/22 18:47:41

    各类开发教程资料推荐，Java / python /golang /js等

    更多资源在文末&#x1f447;&#x1f447;&#x1f447;&#x1f447;&#x1f447;&#x1f447;&#x1f447;&#x1f447;&#x1f447; 1. 入门首选&#xff08;易学且应用广&#xff09; Python 特点&#xff1a;语法简洁、易读&#xff0c;社区资源丰富。 用途&#…...

    编程日记 2025/6/22 21:45:13

    现代健康养生小贴士

    在忙碌的现代生活中&#xff0c;掌握一些简单实用的健康养生技巧&#xff0c;能轻松为身体 “充电”&#xff0c;提升生活质量。以下从饮食、运动、作息等方面&#xff0c;为你带来科学易执行的养生建议。 一、饮食&#xff1a;吃对食物&#xff0c;为健康加分 早餐要吃好&am…...

    编程日记 2025/6/21 18:14:59

    每日一道leetcode（新学数据结构版）

    208. 实现 Trie (前缀树) - 力扣&#xff08;LeetCode&#xff09; 题目 Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&#xff0c;例如自动…...

    编程日记 2025/6/24 1:40:32

    ChromaDB 向量库优化技巧实战

    chroma 一步步使用 安装 # 安装chromadb pip install chromadb,sentence_transformers# 不启动服务会出现sock.connect(sa)TimeoutError: timed out chroma run服务启动后&#xff0c;您将看到类似以下输出&#xff1a; 建立连接 部署完成后&#xff0c;需要建立与Chroma服…...

    编程日记 2025/6/23 14:05:43

    全国各地区经纬度数据（包含省、市、县）

    全国各地区经纬度数据&#xff08;包含省、市、县&#xff09; 1、指标&#xff1a;行政区划代码、省份、城市、经度、纬度 2、来源&#xff1a;高德地图 3、用途&#xff1a;可用于空间相关研究 4、下载链接&#xff1a; 全国各地区经纬度数据&#xff08;包含省、市、县…...

    编程日记 2025/5/31 10:33:56

    记录一下seata后端数据库由mariadb10切换到mysql8遇到的SQLException问题

    文章目录 前言一、问题记录二、参考帖子三、记录store.db.driverClassName 前言 记录一下seata后端数据库由mariadb10切换到mysql8遇到的SQLException问题。 一、问题记录 17:39:23.709 ERROR --- [ionPool-Create-1134013833] com.alibaba.druid.pool.DruidDataSource : …...

    编程日记 2025/6/20 5:43:06

    【Python 面向对象】

    Python 的面向对象编程&#xff08;OOP&#xff09;通过类&#xff08;Class&#xff09;和对象&#xff08;Object&#xff09;实现代码结构化&#xff0c;支持封装、继承和多态三大特性。以下是系统化指南&#xff1a; 一、类与对象基础 1. 定义类 class Dog:# 类属性&…...

    编程日记 2025/6/21 13:19:34

    软考软件评测师——计算机组成与体系结构

    目录 计算机寻址方式详解与对比分析 一、立即寻址 二、直接寻址 三、间接寻址 四、寄存器寻址 五、寄存器间接寻址 六、变址寻址 七、基址寻址 八、相对寻址 九、综合对比分析 计算机寻址方式详解与对比分析 一、立即寻址 核心概念 指令操作码后直接携带操作数值&a…...

    编程日记 2025/6/19 23:26:07

    宝元LNC数控数据采集方式、跨平台采集通讯方案介绍

    文章目录 采集效果图通讯方案介绍技术名词解释技术细节小结 采集效果图 通讯方案介绍 老版本宝元&#xff1a;必须走TCP通讯&#xff0c;如LNC568A系列 今天主要介绍新版本的宝元&#xff0c;如采用M6800控制器的5800系列系统等 新版本宝元通讯方式&#xff1a; ①sdk通讯&…...

    编程日记 2025/6/19 21:23:10

    ZFile与Cpolar技术结合实现远程数据实时访问与集中管理的可行性分析

    文章目录 前言1.关于ZFile2.本地部署ZFile3.ZFile本地访问测试4.ZFile的配置5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定ZFile公网地址 前言 在信息爆炸的年代&#xff0c;每个现代人都在数字浪潮中扮演着独特的角色。不论是商务精英、影像创作者还是学术达人&…...

    编程日记 2025/6/20 15:49:37

    JS手写代码篇---手写 Object.create

    JS手写代码篇 在做手写题的时候&#xff0c;我们要思考两个问题 这个代码的作用是什么能够实现的效果是什么样子 1. 手写 Object.create 思路&#xff1a;创造一个对象&#xff0c;类似于Object.create()方法>将obj作为原型 // 手写 Object.create function create (ob…...

    编程日记 2025/5/31 10:16:56

    homeassistant安装

    这里写自定义目录标题 homeassistant安装&#xff08;windows&#xff09;安装virtual boxhaos下载haos安装docker镜像地址更换安装File editor安装hacs安装Xiaomi Miot Auto问题排查 homeassistant安装&#xff08;windows&#xff09; 安装virtual box 百度搜索virtual box…...

    编程日记 2025/6/21 1:58:54

    Pythonnet - 实现.NET Core和Python进行混合编程

    1 安装Pythonnet包 2...

    编程日记 2025/5/31 10:34:01

    C++23 新特性：ranges::contains 与 ranges::contains_subrange

    文章目录 ranges::containsranges::contains_subrange编译器支持总结 C23 标准带来了许多令人兴奋的新特性&#xff0c;其中就包括了 ranges::contains 和 ranges::contains_subrange 这两个算法。这两个算法由提案 P2302R4 提出&#xff0c;它们为 C 程序员提供了更加丰富和…...

    编程日记 2025/6/1 10:42:59

    （C语言）超市管理系统 （正式版）（指针）（数据结构）（清屏操作）（文件读写）

    目录 前言&#xff1a; 源代码&#xff1a; product.h product.c fileio.h fileio.c main.c 代码解析&#xff1a; 一、程序结构概述 二、product.c 函数详解 1. 初始化商品列表 Init_products 2. 添加商品 add_product 3. 显示商品 display_products 4. 修改商品 mo…...

    编程日记 2025/6/23 10:42:51

    Framebuffer显示bmp图片

    代码&#xff1a; /* 标准输入输出头文件&#xff0c;提供文件操作和输入输出函数&#xff08;如printf&#xff09;*/ #include <stdio.h>/* 文件控制操作头文件&#xff0c;提供文件打开模式&#xff08;如O_RDWR&#xff09;和文件控制函数 */ #include <fcntl.h&…...

    编程日记 2025/6/24 14:32:17

    常用负载均衡技术有哪些？不同网络层面上的网络负载均衡技术

    前言 负载均衡是一种策略&#xff0c;它能让多台服务器或多条链路共同承担一些繁重的计算或I/O任务&#xff0c;从而以较低成本消除网络瓶颈&#xff0c;提高网络的灵活性和可靠性。 在系统管理员发现网络性能不好时&#xff0c;可以通过网络负载均衡来分配资源&#xff0c;以…...

    编程日记 2025/6/20 5:58:16

    由于复制槽导致wal大量堆积的处理方案

    文章目录 环境症状问题原因解决方案 环境 系统平台&#xff1a;N/A 版本&#xff1a;N/A 症状 数据库中的pg_wal占用大量空间&#xff0c;且不删除。 问题原因 复制槽占用早期的wal日志&#xff0c;导致wal归档后无法正常删除。 1. 排查复制槽情况&#xff1a; highgo# …...

    编程日记 2025/6/23 21:40:00

    用FileCodeBox打造私有文件传输：Ubuntu环境保姆级部署教程！

    文章目录 前言1.Docker部署2.简单使用演示3. 安装cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 前言 在数字化浪潮席卷全球的当下&#xff0c;文件传输已成为现代职场的高频需求。当谈及资料交换场景时&#xff0c;许多用户往往抱怨传统工具存在界面复杂、功能卡顿、广告…...

    编程日记 2025/6/20 18:03:10

    从卡顿到丝滑：JavaScript性能优化实战秘籍

    引言 在当今的 Web 开发领域&#xff0c;JavaScript 作为前端开发的核心语言&#xff0c;其性能表现对网页的加载速度、交互响应以及用户体验有着举足轻重的影响。随着 Web 应用的复杂度不断攀升&#xff0c;功能日益丰富&#xff0c;用户对于网页性能的期望也越来越高。从电商…...

    编程日记 2025/6/23 16:32:01

    win11平台下的docker-desktop中的volume位置问题

    因为需要搞个本地的mysql数据库&#xff0c;而且本地安装的程序较多&#xff0c;不想再安mysql了&#xff0c;就想到使用docker来安装。而且因为数据巨大&#xff0c;所以想到直接使用转移data文件夹的方式。 各种查询&#xff0c;而且还使用ai查询&#xff0c;他们都提到&…...

    编程日记 2025/5/31 6:47:42

    掌握Multi-Agent实践(七)：基于AgentScope分布式模式实现多智能体高效协作[并行加速大模型辅助搜索、分布式多用户协同辩论赛]

    之前的案例都是运行在单台机器上以单进程形式运行，受限于 Python 的全局解释器锁，实际只能有效利用一个 CPU 的计算资源，并且无法支持多个用户从自己的电脑上接入同一个 Multi-Agent 应用进行交互。为了提高运行效率并支持多用户接入同一个应用中，AgentScope 提供了分布式…...

    编程日记 2025/5/30 18:15:06

    2023CCPC河南省赛暨河南邀请赛个人补题ABEFGHK

    Dashboard - 2023 CCPC Henan Provincial Collegiate Programming Contest - Codeforces 过题难度&#xff1a;A H F G B K E 铜奖&#xff1a; 2 339 银奖&#xff1a; 3 318 金奖&#xff1a; 5 523 A: 直接模拟 // Code Start Here int t;cin >> t;while(t-…...

    编程日记 2025/6/20 23:15:56

    基于基金净值百分位的交易策略

    策略来源&#xff1a;睿思量化小程序 基金净值百分位&#xff0c;是衡量当前基金净值在过去一段时间内的相对位置。以近一年为例&#xff0c;若某基金净值百分位为30%&#xff0c;意味着过去一年中有30%的时间基金净值低于当前值&#xff0c;70%的时间高于当前值。这一指标犹如…...

    编程日记 2025/6/2 6:10:35

    Ubuntu20.04下如何源码编译Carla，使用UE4源码开跑，踩坑集合

    一、简介 作为一个从事算法研究的人员，无人驾驶仿真一直是比较重要的一部分，但是现在比较常见的算法验证都是在carla这个开源仿真平台上做的，所以我有二次开发carla的需求，今天就来讲讲编译CARLA。 网上的教材很多，但还是推荐大家看官网教程：Linux build - CARLA Simul…...

    编程日记 2025/6/20 11:39:20

    Windows 环境下 Docker Desktop 安装 + 汉化

    一、WSL2Ubuntu20.04以及Docker Desktop安装 在开发过程中&#xff0c;Docker 是一款极为实用的工具。本教程专为 Windows 用户打造&#xff0c;将全面且细致地讲解 Docker Desktop 的安装与配置步骤&#xff0c;助您迅速入门并熟练掌握。同时&#xff0c;考虑到语言使用习惯&…...

    编程日记 2025/6/22 8:16:20

    HDMI信号采集器连OBS没有声音的问题

    Windows中的设置 windows中可以按客服发来的视频做参考。 视频教程&#xff1a; https://jvod.300hu.com/vod/product/79b234d5-81f0-4255-8680-693de7b4b0d4/715859bc4d83490bb977d8bc0061bd5e.mp4 Linux中的设置 在linux中发现视频不太一样&#xff0c;设置完没有声音。…...

    编程日记 2025/6/20 14:31:25