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

Vue3 配合 fullPage.js 打造高效全屏滚动网页

news 来源：原创 2025/7/14 20:52:31

引言

在现代网页设计中，整屏滚动（Full-page Scrolling）已成为展示内容的一种流行方式。通过将内容分成若干个全屏页面，并配合流畅的过渡动画，可以为用户带来身临其境的浏览体验。本文将介绍如何使用 fullPage.js 插件来创建一个专业的整屏滚动网站。

效果预览

插件介绍

fullPage.js 是一个简单易用且功能强大的 JavaScript 库

官方网站：中文文档 fullPage.js

主要特点：

支持全屏滚动

添加幻灯片

延迟加载

自动播放

响应式设计

丰富的回调函数

基础设置

1. 引入必要文件

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css"><!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"></script>

2. HTML 结构

<div id="fullpage"><div class="section">第一屏</div><div class="section">第二屏</div><div class="section">第三屏</div><!-- 更多section... -->
</div>

3. 初始化配置

new fullpage('#fullpage', {autoScrolling: true,scrollHorizontally: true,navigation: true,navigationPosition: 'right',scrollingSpeed: 700,afterLoad: function(origin, destination, direction) {// 页面加载后的回调}
});

内容设计与实现

1. 动画系统设计

.animate {opacity: 0;transition: all 1s ease;
}.animate.fade-up {transform: translateY(50px);
}.animate.active {opacity: 1;transform: translate(0) scale(1);
}

2. 内容模块划分

Hero 区域
数据统计
产品展示
服务流程
客户评价
联系方式

3. 动画控制

const animatedSections = new Set();// 在 afterLoad 回调中控制动画
afterLoad: function(origin, destination, direction) {const currentSection = destination.item;const sectionIndex = destination.index;if (!animatedSections.has(sectionIndex)) {const animateElements = currentSection.querySelectorAll('.animate');animateElements.forEach((el, index) => {setTimeout(() => {el.classList.add('active');}, index * 200);});animatedSections.add(sectionIndex);}
}

实现建议

性能优化
- 图片延迟加载
- 合理使用动画
- 控制页面大小
响应式设计
- 使用弹性布局
- 适配不同设备
- 移动端优化
用户体验
- 添加导航提示
- 控制滚动速度
- 优化过渡效果
内容组织
- 逻辑性强
- 层次分明
- 重点突出
动画效果
- 适度使用
- 确保流畅
- 避免过度

常见问题解决

滚动卡顿
1. 减少页面元素
2. 优化动画效果
3. 调整滚动速度
移动端适配
1. 使用响应式设计
2. 调整内容布局
3. 优化触摸事件
内容溢出
1. 控制内容量
2. 使用滚动容器
3. 优化布局结构

总结

fullPage.js 为我们提供了一个强大的工具来创建整屏滚动网站。通过合理的内容组织、精心的动画设计和细致的用户体验优化，我们可以打造出既专业又吸引人的网站。关键点在于：

合理规划内容结构
设计适当的动画效果
注重用户体验优化
确保性能和响应式
保持代码的可维护性

通过本文的实践，相信你已经掌握了使用 fullPage.js 创建整屏滚动网站的基本技能。记住，好的网站不仅要看起来漂亮，更要注重实用性和用户体验。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>整屏滚动展示</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}.section {color: #333;background: #fff;}/* 通用动画类 */.animate {opacity: 0;transition: all 1s ease;}.animate.fade-up {transform: translateY(50px);}.animate.fade-left {transform: translateX(-50px);}.animate.fade-right {transform: translateX(50px);}.animate.fade-scale {transform: scale(0.8);}/* 激活动画 */.animate.active {opacity: 1;transform: translate(0) scale(1);}/* 第一屏：Hero区域 */#section1 {background: linear-gradient(135deg, #667eea, #764ba2);}.hero-content {text-align: center;color: #fff;padding: 0 20px;}.hero-content h1 {font-size: 4em;margin-bottom: 20px;}.hero-content p {font-size: 1.5em;margin-bottom: 30px;}/* 第二屏：产品特性 */.features-container {display: flex;justify-content: center;gap: 30px;padding: 0 10%;}.feature-card {background: white;padding: 30px;border-radius: 15px;box-shadow: 0 10px 30px rgba(0,0,0,0.1);text-align: center;flex: 1;}/* 第三屏：关于我们 */.about-container {display: flex;align-items: center;gap: 50px;padding: 0 10%;}.about-image {flex: 1;border-radius: 20px;overflow: hidden;}.about-image img {width: 100%;height: auto;}.about-content {flex: 1;}/* 第四屏：团队展示 */.team-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;padding: 0 10%;}.team-member {text-align: center;background: white;padding: 20px;border-radius: 15px;box-shadow: 0 5px 15px rgba(0,0,0,0.1);}.team-member img {width: 150px;height: 150px;border-radius: 50%;margin-bottom: 15px;}/* 新增：数据统计区域样式 */.stats-container {display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px;padding: 0 10%;text-align: center;}.stat-item {background: rgba(255, 255, 255, 0.1);padding: 30px;border-radius: 15px;backdrop-filter: blur(10px);}.stat-number {font-size: 3em;font-weight: bold;color: #2c3e50;margin-bottom: 10px;}/* 新增：产品展示区域样式 */.products-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;padding: 0 10%;}.product-card {background: white;border-radius: 20px;overflow: hidden;box-shadow: 0 15px 30px rgba(0,0,0,0.1);}.product-image {width: 100%;height: 200px;object-fit: cover;}.product-info {padding: 20px;}/* 新增：服务流程样式 */.process-timeline {display: flex;justify-content: space-between;padding: 0 10%;position: relative;}.process-step {flex: 1;text-align: center;position: relative;padding: 20px;}.step-number {width: 50px;height: 50px;border-radius: 50%;background: #3498db;color: white;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;font-size: 1.5em;}/* 新增：客户评价样式 */.testimonials-container {display: flex;gap: 30px;padding: 0 10%;}.testimonial-card {flex: 1;background: white;padding: 30px;border-radius: 15px;box-shadow: 0 10px 20px rgba(0,0,0,0.1);}.client-info {display: flex;align-items: center;margin-top: 20px;}.client-avatar {width: 60px;height: 60px;border-radius: 50%;margin-right: 15px;}/* 新增：联系我们样式 */.contact-container {display: grid;grid-template-columns: 1fr 1fr;gap: 50px;padding: 0 10%;}.contact-form {background: white;padding: 40px;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.1);}.form-group {margin-bottom: 20px;}.form-group input,.form-group textarea {width: 100%;padding: 12px;border: 1px solid #ddd;border-radius: 8px;margin-top: 5px;}/* 新增：合作伙伴样式 */.partners-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px;padding: 0 10%;}.partner-logo {background: white;padding: 20px;border-radius: 10px;display: flex;align-items: center;justify-content: center;box-shadow: 0 5px 15px rgba(0,0,0,0.1);}</style>
</head>
<body><div id="fullpage"><!-- 第一屏：Hero区域 --><div class="section" id="section1"><div class="hero-content"><h1 class="animate fade-up">创新科技</h1><p class="animate fade-up">引领未来发展的先驱者</p><button class="animate fade-up">了解更多</button></div></div><!-- 新增：数据统计屏 --><div class="section" id="section2"><h2 class="section-title animate fade-up">我们的成就</h2><div class="stats-container"><div class="stat-item animate fade-up"><div class="stat-number">1000+</div><div class="stat-label">服务客户</div></div><div class="stat-item animate fade-up"><div class="stat-number">50+</div><div class="stat-label">合作伙伴</div></div><div class="stat-item animate fade-up"><div class="stat-number">200+</div><div class="stat-label">完成项目</div></div><div class="stat-item animate fade-up"><div class="stat-number">98%</div><div class="stat-label">客户满意度</div></div></div></div><!-- 新增：产品展示屏 --><div class="section" id="section3"><h2 class="section-title animate fade-up">产品展示</h2><div class="products-grid"><div class="product-card animate fade-left"><img src="https://picsum.photos/400/200" class="product-image" alt="产品1"><div class="product-info"><h3>智能产品 A</h3><p>革命性的智能解决方案，为您提供极致体验</p></div></div><div class="product-card animate fade-up"><img src="https://picsum.photos/401/200" class="product-image" alt="产品2"><div class="product-info"><h3>智能产品 B</h3><p>引领行业标准的创新科技产品</p></div></div><div class="product-card animate fade-right"><img src="https://picsum.photos/402/200" class="product-image" alt="产品3"><div class="product-info"><h3>智能产品 C</h3><p>为企业定制的专业级解决方案</p></div></div></div></div><!-- 新增：服务流程屏 --><div class="section" id="section4"><h2 class="section-title animate fade-up">服务流程</h2><div class="process-timeline"><div class="process-step animate fade-up"><div class="step-number">1</div><h3>需求分析</h3><p>深入了解客户需求，制定个性化方案</p></div><div class="process-step animate fade-up"><div class="step-number">2</div><h3>方案设计</h3><p>专业团队设计最优解决方案</p></div><div class="process-step animate fade-up"><div class="step-number">3</div><h3>开发实施</h3><p>高效执行，确保项目质量</p></div><div class="process-step animate fade-up"><div class="step-number">4</div><h3>售后服务</h3><p>持续支持，及时响应</p></div></div></div><!-- 新增：客户评价屏 --><div class="section" id="section5"><h2 class="section-title animate fade-up">客户评价</h2><div class="testimonials-container"><div class="testimonial-card animate fade-left"><p>"使用他们的产品后，我们的工作效率提升了30%以上。"</p><div class="client-info"><img src="https://picsum.photos/60/60" class="client-avatar" alt="客户1"><div><h4>前端切图仔001</h4><p>科技公司 CEO</p></div></div></div><div class="testimonial-card animate fade-up"><p>"专业的团队，优质的服务，是值得信赖的长期合作伙伴。"</p><div class="client-info"><img src="https://picsum.photos/61/61" class="client-avatar" alt="客户2"><div><h4>前端切图仔001</h4><p>互联网公司 CTO</p></div></div></div><div class="testimonial-card animate fade-right"><p>"他们的创新解决方案帮助我们解决了长期困扰的问题。"</p><div class="client-info"><img src="https://picsum.photos/62/62" class="client-avatar" alt="客户3"><div><h4>前端切图仔001</h4><p>制造业 总监</p></div></div></div></div></div><!-- 新增：联系我们屏 --><div class="section" id="section6"><div class="contact-container"><div class="contact-info animate fade-left"><h2>联系我们</h2><p>地址：北京市*******</p><p>电话：010-12345678</p><p>邮箱：contact@example.com</p></div><div class="contact-form animate fade-right"><h3>发送消息</h3><div class="form-group"><input type="text" placeholder="您的姓名"></div><div class="form-group"><input type="email" placeholder="您的邮箱"></div><div class="form-group"><textarea placeholder="您的留言" rows="4"></textarea></div><button class="submit-btn">发送</button></div></div></div><!-- 新增：合作伙伴屏 --><div class="section" id="section7"><h2 class="section-title animate fade-up">合作伙伴</h2><div class="partners-grid"><div class="partner-logo animate fade-scale"><img src="https://picsum.photos/100/50" alt="合作伙伴1"></div><div class="partner-logo animate fade-scale"><img src="https://picsum.photos/101/50" alt="合作伙伴2"></div><div class="partner-logo animate fade-scale"><img src="https://picsum.photos/102/50" alt="合作伙伴3"></div><div class="partner-logo animate fade-scale"><img src="https://picsum.photos/103/50" alt="合作伙伴4"></div></div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"></script><script>// 记录已经执行过动画的部分const animatedSections = new Set();new fullpage('#fullpage', {autoScrolling: true,scrollHorizontally: true,navigation: true,navigationPosition: 'right',scrollingSpeed: 700,// 滚动到新页面后触发动画afterLoad: function(origin, destination, direction) {const currentSection = destination.item;const sectionIndex = destination.index;// 如果该部分没有执行过动画if (!animatedSections.has(sectionIndex)) {// 获取当前部分的所有需要动画的元素const animateElements = currentSection.querySelectorAll('.animate');// 为每个元素添加动画类animateElements.forEach((el, index) => {// 添加延迟，实现错落动画效果setTimeout(() => {el.classList.add('active');}, index * 200);});// 记录该部分已执行动画animatedSections.add(sectionIndex);}}});</script>
</body>
</html>

Vue3 配合 fullPage.js 打造高效全屏滚动网页

引言在现代网页设计中，整屏滚动（Full-page Scrolling）已成为展示内容的一种流行方式。通过将内容分成若干个全屏页面，并配合流畅的过渡动画，可以为用户带来身临其境的浏览体验。本文将介绍如何使用 fullPage.js 插件来…...

编程日记 2025/7/14 20:52:31

全排列 II：去重的技巧与实现

全排列 II：去重的技巧与实现 1. 引言：排列问题的坑你有没有遇到过这样的问题？ 当我们在做全排列（Permutation）的时候，如果输入的数组中包含重复元素，生成的排列中就会出现大量重复项。这样不…...

编程日记 2025/7/9 14:42:27

微型导轨和普通导轨有哪些区别？

微型导轨和普通导轨都是常用的工业机械传动装置，目前，市场上有各种各样的导轨产品。那么微型导轨和普通导轨有哪些区别呢？ 1、尺寸：微型导轨尺寸较小，滑座宽度最小可达 8MM，长度最小可达 11MM 左右&#xf…...

编程日记 2025/7/9 10:53:37

Java 输入流到输出流

Java 输入流到输出流的复制方法主要有以下六种实现方式，根据性能、适用场景和实现原理可分为不同类别： 一、基础字节流方式实现原理：通过 FileInputStream 和 FileOutputStream 逐字节或块读取数据并写入。代码示例： try (In…...

编程日记 2025/7/11 8:59:57

Anaconda安装-Ubuntu-Linux

1、进入Anaconda官网，以下载最新版本，根据自己的操作系统选择适配的版本。 2、跳过注册： 3、选择适配的版本： 4、cd ~/anaconda_download 5、bash Anaconda3-2024.10-1-Linux-x86_64.sh 6、按Enter或PgDn键滚动查看协议&…...

编程日记 2025/7/9 23:10:47

每日一题之既约分数

题目描述本题为填空题，只需要算出结果后，在代码中使用输出语句将所填结果输出即可。如果一个分数的分子和分母的最大公约数是 1，这个分数称为既约分数。例如 3/4,1/8,7/1， 都是既约分数。请问，有多少个既约分…...

编程日记 2025/7/14 20:40:05

诠视科技MR眼镜如何使用VLC 进行RTSP投屏到电脑

文章目录一、应用开发部分（1）基础场景构建（2）添加XvCameraManager（3）添加XvMRVideoCaptureManager（4）添加XvRTSPStreamerManager（5）打包测试二、VLC media …...

编程日记 2025/7/14 20:41:00

“头”里有什么——HTML 元信息

2025/3/28 向全栈工程师迈进！ 一、看基本HTML <!doctype html> <html lang"zh-CN"><head><meta charset"utf-8" /><title>我的测试页面</title></head><body><p>这是我的页面</p&g…...

编程日记 2025/7/9 13:18:32

【Kafka】从理论到实践的深度解析

在当今数字化转型的时代，企业面临着数据量呈指数级增长、业务系统愈发复杂的挑战。在这样的背景下，高效的数据传输与处理技术成为了关键。Kafka，作为一款分布式消息队列系统，凭借其卓越的性能和丰富的特性，在众多企业的…...

编程日记 2025/7/14 20:42:10

Debezium系列之：使用Debezium和Apache Iceberg构建数据湖

Debezium系列之：使用Debezium和Apache Iceberg构建数据湖 Debezium Server Iceberg“Debezium Server Iceberg” 消费者设置数据复制Upsert 模式保留已删除的记录使用Upsert模式追加模式优化批处理大小在数据分析的世界中，数据湖是存储和管理大量数据以满足数据分析、报告或机…...

编程日记 2025/7/12 1:43:25

resnet网络迁移到昇腾执行（OM上篇）

目录总体介绍 pytorch迁移OM模型原始代码详细介绍模型加载和初始化初始化统计变量数据推理及归一化统计每个样本的结果基本概念 Softmax（归一化指数函数） 作用代码示例应用场景 argmax取最大值索引作用代码示例两者配合使用…...

编程日记 2025/7/10 5:12:06

RHCA核心课程技术解析5：红帽高可用性集群架构与深度实践

编程日记 2025/7/10 1:22:46

Display Serializer、Camera Deserializer（Camera Des）和SerDes‌ 加解串应用

‌1. 概述：三者的核心定位‌ ‌(1) SerDes（Serializer/Deserializer）‌ ‌定义‌：通用高速数据传输技术，实现‌并行↔串行‌双向转换。‌角色‌：数据链路的“翻译官”，解决并行传输的带宽与距…...

编程日记 2025/7/14 16:41:47

vue3+bpmn.js基本使用

一、案例使用依赖 // 必填"bpmn-js": "^7.3.1", "bpmn-js-properties-panel": "^0.37.2","bpmn-moddle":"^7.1.3","camunda-bpmn-moddle": "^7.0.1",// 可选"element-plus/icons-vue&qu…...

编程日记 2025/7/14 20:43:06

《数据结构：单链表》

“希望就像星星，或许光芒微弱，但永不熄灭。” 博主的个人gitee：https://gitee.com/friend-a188881041351 一.概念与结构链表是一种物理存储上非连续、非顺序的存储结构，数据元素的顺序逻辑是通过链表中的指针链接次序实现的。单…...

编程日记 2025/7/5 15:03:18

RedHatLinux(2025.3.22)

1、创建/www目录，在/www目录下新建name和https目录，在name和https目录下分别创建一个index.htm1文件，name下面的index.html 文件中包含当前主机的主机名，https目录下的index.htm1文件中包含当前主机的ip地址。 （1&…...

编程日记 2025/7/3 11:32:50

C++异常处理完全指南：从原理到实战

文章目录异常的基本概念基本异常抛出与捕获多类型异常捕获异常重新抛出异常安全异常规范（noexcept）栈展开与析构标准库异常总结异常的基本概念异常是程序运行时发生的非预期事件（如除零、内存不足）。C通过try、catch和throw提…...

编程日记 2025/7/14 20:44:08

Oracle 19C 备份

在 Oracle 19c 中，备份数据库通常使用 RMAN（Recovery Manager） 工具，它是 Oracle 提供的官方备份和恢复工具。以下是通过 RMAN 备份 Oracle 19c 数据库的详细步骤和命令。一、RMAN 基本概念 RMAN 是 Oracle 的备份和恢复工具&am…...

编程日记 2025/7/10 1:06:50

深入理解MySQL聚集索引与非聚集索引

在数据库管理系统中，索引是提升查询性能的关键。MySQL支持多种类型的索引，其中最基础也是最重要的两种是聚集索引和非聚集索引。本文将深入探讨这两种索引的区别，并通过实例、UML图以及Java代码示例来帮助您更好地理解和应用它们。一、概念…...

编程日记 2025/7/10 17:32:42

用Python打造智能宠物：强化学习的奇妙之旅

友友们好！我是Echo_Wish，我的的新专栏《Python进阶》以及《Python！实战！》正式启动啦！这是专为那些渴望提升Python技能的朋友们量身打造的专栏，无论你是已经有一定基础的开发者，还是希望深入挖掘Python潜力的爱好者，这里都将是你不可错过的宝藏。在这个专栏中，你将会…...

编程日记 2025/7/14 20:47:07

OGG故障指南：OGG-01163 Bad column length (xxx) specified for column

报错 OGG-01163 Bad column length (xxx) specified for column AAA in table OWNER.TABLE, maximum allowable length is yyy原因源端修改了字段长度。虽然源端和目标端的长度已经通过DDL语句修改到一致，在extract进程未重启的情况下，生成的trail文…...

编程日记 2025/7/14 12:36:36

XML标签格式转换为YOLO TXT格式

针对的是多边形（<polygon>）来描述对象的边界，而不是传统的矩形框（<bndbox>） import xml.etree.ElementTree as ET import os from pathlib import Path# 解析VOC格式的XML文件，提取目标框的标…...

编程日记 2025/7/10 9:13:50

Java的string默认值

在Java中，String类型的默认值取决于其定义和实例化的方式。以下是关于String默认值的详细说明未实例化的String变量‌ 如果定义一个String变量但未对其进行实例化（即未使用new关键字或直接赋值），其默认值为:ml-search[null]。这…...

编程日记 2025/7/2 14:23:32

侯捷 C++ 课程学习笔记：C++ 中引用与指针的深度剖析

目录一、引言二、引用与指针的基本概念 （一）引用 （二）指针三、引用与指针的区别 （一）定义与初始化 （二）内存空间与 NULL 值 （三）自增操作 …...

编程日记 2025/7/14 20:49:50

llamafactory微调效果与vllm部署效果不一致如何解决

在llamafactory框架训练好模型之后，自测chat时模型效果不错，但是部署到vllm模型上效果却很差这实际上是因为llamafactory微调时与vllm部署时的对话模板不一致导致的。对应的llamafactory的代码为而vllm启动时会采用大模型自己本身设置的对话模板信息…...

编程日记 2025/7/11 13:07:52

欢乐力扣：合并两个有序链表

文章目录 1、题目描述2、思路 1、题目描述合并两个有序链表。将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。在这里插入图片描述 2、思路参考官方题解，简单来说就是不断调整链表指针的指向，让…...

编程日记 2025/7/6 2:23:29

访问者模式_行为型_GOF23

访问者模式访问者模式（Visitor Pattern）是一种行为型设计模式，核心思想是将算法与对象结构分离，使得在不修改现有对象结构的前提下，可以动态添加新的操作。这类似于“医生查房”——医生（访问者&#xff…...

编程日记 2025/7/14 20:48:05

排序算法2-选择排序

目录 1.常见排序算法 2.排序算法的预定函数 2.1交换函数 2.2测试算法运行时间的函数 2.3已经实现过的排序算法 3.选择排序算法的实现 3.1直接选择排序 3.2堆排序 4.下讲预告 1.常见排序算法前面一讲已经讲解了插入排序，这一讲我将讲解选择排序，…...

编程日记 2025/7/9 23:10:50

openwrt24.10.0版本上安装istoreOS的屏幕监控插件

lcdsimple 插件支持在软路由下面显示统计信息到 HDMI 或者 VGA 上。手动安装方法： 保证 quickstart 版本大于 0.9.7 安装 lcdsimple 具体方法： opkg update is-opkg install quickstart opkg install lcdsimple 手动下载 QUICKSTART 跟 LCD SIMPL…...

编程日记 2025/7/14 20:51:30

内网服务器无法通过公网地址访问映射到公网的内网服务

内网服务器无法通过公网地址访问映射到公网的内网服务问题现象问题原因解决方法总结前几天遇到一个网络问题，在这里做下记录，希望能帮助到有相同问题的朋友。问题现象网络拓扑如上所示，服务器1和服务器2在同一内网，网段均为1…...

编程日记 2025/7/14 20:43:06

基于Web的交互式智能成绩管理系统设计

目录摘要绪论一、应用背景二、行业发展现状三、程序开发的重要意义四、结语 1 代码 2 数据初始化模块 3 界面布局模块 4 核心功能模块 5 可视化子系统 6 扩展功能模块 7 架构设计亮点功能总结一、核心数据管理二、智能分析体系三、可视化系统四、扩…...

编程日记 2025/7/12 20:40:49

从虚拟现实到可持续设计：唐婉歆的多维创新之旅

随着线上线下融合逐渐成为全球家居与建材行业的发展趋势,全球市场对高品质、个性化家居和建材产品的需求稳步攀升,也对设计师提出更高的要求。在这一背景下,设计师唐婉歆将以产品设计师的身份,正式加入跨国企业AmCan 美加集团,投身于备受行业瞩目的系列设计项目。她将负责Showr…...

编程日记 2025/7/10 8:22:12

PHP MySQL 预处理语句

PHP MySQL 预处理语句引言在PHP中与MySQL数据库进行交互时，预处理语句是一种非常安全和高效的方法。预处理语句不仅可以防止SQL注入攻击，还可以提高数据库查询的效率。本文将详细介绍PHP中预处理语句的用法，包括其基本概念、语法、优势以及在实际开发中的应用。预处理…...

编程日记 2025/7/14 20:49:50

基于飞腾/龙芯+盛科CTC7132全国产交换机解决方案

产品介绍盛科CTC7132,内置ARM-Cortex A53 主频1.2GHz；支持24个千兆电口，24个万兆光口（850nm多模），1个千兆管理网口，1个管理串口；支持1个百兆健康管理网口：用于设备端口状态、电压、…...

编程日记 2025/7/14 20:52:31

Vue动态添加或删除DOM元素：购物车实例

Vue 指令系列文章：《Vue插值：双大括号标签、v-text、v-html、v-bind 指令》《Vue指令：v-cloak、v-once、v-pre 指令》《Vue条件判断：v-if、v-else、v-else-if、v-show 指令》《Vue循环遍历：v-for 指令》《Vue事件处理：v-on 指令》《Vue表单元素绑定：v-model 指令》…...

编程日记 2025/7/8 11:38:13

深入理解Agentic Workflows

本文来源：https://weaviate.io/blog/what-are-agentic-workflows 这篇文章将带你深入理解AI Agent、Agentic AI、Agentic Workflows、Agentic Architectures等概念，非常值得推荐。一、什么是 AI Agents？ AI Agents 是结合了大模型进行推理和…...

编程日记 2025/7/11 10:48:31

深入理解：阻塞IO、非阻塞IO、水平触发与边缘触发

深入理解：阻塞IO、非阻塞IO、水平触发与边缘触发在网络编程和并发处理中，理解不同的 I/O 模型和事件通知机制至关重要。本文将深入探讨阻塞IO（Blocking IO）、非阻塞IO（Non-Blocking IO）、水平触发&#x…...

编程日记 2025/7/12 10:59:45

deepseek 技术的前生今世：从开源先锋到AGI探索者

一、引言：中国AI领域的“超越追赶”样本 DeepSeek（深度求索）作为中国人工智能领域的代表性企业，自2023年创立以来，凭借开源生态、低成本技术路径与多模态创新，迅速从行业新秀成长为全球AI竞赛中的关键力量…...

编程日记 2025/7/8 2:01:47

合规+增效正也科技携智能营销产品出席中睿论坛

正也科技作为医药数字化领域的标杆企业，受邀参展第二届中睿医健产业企业家年会暨第十三届中睿医药新春论坛，本次论坛以“合力启新程”为主题，吸引了800多位医药健康企业的董事长、总经理参与，并通过主论坛、分论坛、路演等形式探讨…...

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

Python小练习系列 Vol.5：数独求解（经典回溯 + 剪枝）

🧠 Python小练习系列 Vol.5：数独求解（经典回溯剪枝） 🧩 数独不仅是益智游戏，更是回溯算法的典范！本期我们将用 DFS 剪枝的方式一步步求解一个标准 9x9 数独。 🧩 一、题目描述 …...

编程日记 2025/7/9 14:26:10

基于kafka的分布式日志收集平台项目（续）

#第一个容易错的地方上次做到测试集群的创建topic时出现了错误具体错误是配置信息出错了，然后报错如下： #现在来具体警戒哪些地方要特别注意： ### node.id 和listeners 和advertised.listeners这三行是每一台机器（每个节点&…...

编程日记 2025/7/7 20:28:20

C++运算符重载、类的转换构造函数和类型转换函数的基础练习

练习1：（困难） 建立一个矩阵类，可以完成指定的操作或运算。说明： （1）、矩阵为2行3列，基类型为整型； （2）、操作或运算：初始化&…...

编程日记 2025/7/10 16:05:55

第一天 Linux驱动程序简介

目录一、驱动的作用二、裸机驱动 VS linux驱动 1、裸机驱动 2、linux驱动三、linux驱动位于哪里？ 四、应用编程 VS 内核编程 1、共同点 2、不同点五、linux驱动分类 1、字符设备 2、块设备 3、网络设备六、Linux驱动学习难点与误区 1、学习难点 …...

编程日记 2025/7/11 15:03:04

408 计算机网络知识点记忆（1）

前言本文基于王道考研课程与湖科大计算机网络课程教学内容，系统梳理核心知识记忆点和框架，既为个人复习沉淀思考，亦希望能与同行者互助共进。（PS：后续将持续迭代优化细节） 核心知识记忆点计算机网络&a…...

编程日记 2025/7/10 4:48:47

scala简介和基础语法

Scala简介 Scala 是一门多范式（multi-paradigm）的编程语言，设计初衷是要集成面向对象编程和函数式编程的各种特性。 Scala 运行在 Java 虚拟机上，并兼容现有的 Java 程序。Scala 源代码被编译成 Java 字节码，所以它可…...

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

[特殊字符] Hyperlane：Rust 高性能 Web 框架的终极选择 [特殊字符]

🔥 Hyperlane：Rust高性能Web框架的终极选择 🔥 📈 性能封神：32万QPS碾压群雄在1000并发压测中，Hyperlane以307,568.90 req/s的恐怖QPS稳居Rust生态第一，甚至超越Tokio框架！开启Kee…...

编程日记 2025/7/14 18:06:43

树莓派超全系列文档--(13)如何使用raspi-config工具其二

如何使用raspi-config工具其二 raspi-configPerformance optionsOverclockGPU memoryOverlay file systemFan Localisation optionsLocaleTime zoneKeyboardWLAN country Advanced optionsExpand filesystemNetwork interface namesNetwork proxy settingsBoot orderBootloader…...

编程日记 2025/7/14 11:22:09

引言