- 博客(277)
- 问答 (10)
- 收藏
- 关注
RSS订阅原创 Python 环境变量管理
本文介绍了使用.env文件管理Python环境变量的最佳实践。通过python-dotenv库加载配置，避免了硬编码敏感信息的安全风险，并支持多环境配置管理。文章详细展示了从基础配置到多环境管理的实现方案，包括环境变量类型转换、默认值设置和配置验证，同时提供了Flask框架的集成示例。这种管理方式提高了代码安全性、灵活性和可维护性，是Python项目配置管理的推荐方案。
2026-01-30 15:10:47
233
原创 Python 常用的内置模块
Python内置模块提供了丰富的功能，涵盖了文件操作、系统交互、日期处理、数学运算、数据序列化等多个方面。主要包括： 文件和目录操作：os模块提供系统接口，pathlib实现面向对象的路径操作 系统相关：sys模块处理命令行参数、解释器信息及程序退出 日期时间：datetime进行日期时间处理，time提供时间戳和计时功能 数学运算：math包含数学函数和常量，random生成随机数 数据序列化：json处理JSON数据，pickle实现Python对象序列化 网络功能：urllib处理URL请求和编码 高
2026-01-30 15:05:16
145
原创 Python 基础入门
本文介绍了Python编程语言的基本概念和入门知识。主要内容包括：Python简介及其简洁易读、跨平台、丰富的库和面向对象等特点；Python的安装步骤与环境变量配置；基础语法如变量与数据类型、基本运算、字符串操作、条件语句和循环结构；函数的定义与使用；常用数据结构包括列表、字典和元组；以及异常处理的基本方法。文章为初学者提供了Python编程的快速入门指南，涵盖了核心语法和基本操作。
2026-01-30 15:02:38
253
原创 为什么 Next.js 打包比 Vue/React 大？
Next.js打包体积比Vue/React更大的现象源于框架设计差异。作为全栈框架，Next.js默认包含SSR、服务端路由、API路由等功能，会生成客户端和服务端两份产物，而Vue/React仅生成客户端bundle。此外，Next.js每个路由都包含服务端和客户端代码，使用React本身也增加了体积，且构建产物包含大量元数据。但实际浏览器仅加载部分资源，真实访问量远小于打包体积。要优化可减少客户端组件、使用动态导入、优化依赖等。本质上，Next.js"打包厨房"而Vue/React仅
2026-01-21 14:20:06
905
原创 NextAuth 认证常见问题
本文总结了在Next.js中使用NextAuth进行认证时常见的问题与解决方案。主要涵盖： NextAuth的token生成与存储机制 登录成功后默认生成加密session token并存储在浏览器Cookie中 默认有效期30天，可通过配置调整 选择Cookie而非localStorage的原因 更高的安全性（HttpOnly防XSS） 自动携带请求头 支持跨子域共享 业务接口调用时的token传递 同源请求自动携带Cookie 跨域需要额外配置credentials NextAuth与传统JWT的区别
2026-01-21 14:10:15
731
原创 Next.js 15 + MySQL + NextAuth.js 基于 Cookie/Session 鉴权实战
本文介绍了使用Next.js 15和MySQL实现基于NextAuth的用户认证系统的完整流程。主要内容包括：环境配置（Node.js 18+、Next.js 15、MySQL）、数据库设计（创建用户表）、数据库连接设置、NextAuth配置（使用JWT策略和CredentialsProvider）、用户注册API实现、登录和注册页面开发。文章提供了详细的代码示例，涵盖了从数据库操作到前端交互的完整认证流程实现，并强调了NextAuth v5的新特性。通过.env文件配置敏感信息，确保开发安全性。该系统支持
2026-01-21 14:03:35
759
原创 Next.js 常见鉴权方案
本文介绍了Next.js(App Router)中三种常见的鉴权方案：基于Cookie/Session的网站登录方案、基于JWT的前后端分离方案和基于API Key的服务端调用方案。重点演示了JWT认证的实现过程，包括登录接口生成Token、保护API路由进行Token校验等关键步骤。通过代码示例展示了如何使用jsonwebtoken和bcryptjs库实现用户认证，并说明了如何在校验通过后返回受保护的用户数据。最后强调访问受保护API时需在请求头中携带有效的JWT Token。
2026-01-21 13:57:46
560
原创 Next.js 的默认开发快速构建工具Turbopack
Next.js 15引入Turbopack作为默认开发构建工具，逐步取代Webpack。Turbopack由Vercel团队基于Rust开发，具有增量编译、智能缓存等特性，编译速度比Webpack快700倍。目前主要用于开发环境，生产环境仍需Webpack，但可通过实验性配置启用Turbopack构建。虽然生态仍在完善，但Turbopack凭借其性能优势将成为Next.js的未来构建引擎。文章还介绍了多环境构建脚本实践方案，帮助开发者管理不同环境的打包配置。
2026-01-20 09:45:49
770
原创 Next.js Script 组件详解
Next.js中的next/script组件是优化第三方脚本加载的关键工具。相比传统<script>标签，它能避免阻塞渲染、精确控制执行时机，并支持SSR/CSR安全加载。使用方式分为页面级引入（局部使用）和应用级引入（全局共享），并提供了多种加载策略：默认afterInteractive（推荐）、性能优先的lazyOnload、慎用的beforeInteractive以及实验性的worker策略。此外，还支持通过dangerouslySetInnerHTML或子节点方式编写内联脚本。正确使用n
2026-01-20 09:41:25
602
原创 Next.js 图像优化组件
Next.js的next/image组件提供高效的图像优化功能，包括自动适配WebP/AVIF等现代格式、防止布局偏移、按需懒加载和远程图像处理。通过width和height设置尺寸，支持四种布局模式（intrinsic/fixed/responsive/fill），并可配置外部域名优化。开发时默认禁用优化，生产环境自动生成优化URL。首屏图像建议使用priority属性优先加载，提升用户体验。
2026-01-20 09:36:50
715
原创 Next.js 中 middleware 中间件使用方式
Next.js 16将中间件(Middleware)更名为代理(Proxy)，功能保持不变。Middleware是运行在请求到达路由前的函数，位于用户请求和路由处理器之间，可进行拦截、修改、重定向等操作，运行在Edge Runtime环境。必须放在项目根目录的middleware.ts/js文件中，作用范围由matcher定义。常见应用场景包括权限控制/鉴权、国际化路由重写、A/B测试和防盗链等。Middleware运行在Edge Runtime环境，不支持Node.js API，执行时间短，不能直接修改响
2026-01-20 09:32:41
459
原创 Next.js 中自定义错误页面
Next.js 15 App Router提供了两种自定义错误页面的方式：1）通过not-found.js处理404路由不存在的情况；2）通过error.js捕获页面渲染错误。not-found.js需放在app目录下，会自动渲染未匹配的路由；error.js可作为全局或局部错误边界，接收error对象和reset方法，支持交互功能。全局error.js捕获整个应用错误，局部版本只处理特定目录下的错误。建议在全局layout中同时配置这两种文件，确保统一的错误处理体验。
2026-01-20 09:25:05
632
原创 Next.js 的服务端路由：对应api文件夹
本文介绍了Next.js中api文件夹的作用及基本使用方法。api文件夹用于创建后端API路由，支持RESTful接口，可直接处理数据库操作、第三方API调用等后端逻辑。文章详细演示了如何创建API路由、支持不同HTTP方法，并以MySQL数据库为例，展示了完整的用户查询和新增接口实现流程。通过这种方式，Next.js项目可以实现前后端一体化开发，无需额外搭建后端服务。
2026-01-20 09:18:43
820
原创 Next.js 路由组：优雅的组织代码
路由组是一种将相关路由组织在一起而不影响实际URL路径的技术。通过将文件夹用括号(folder_name)包裹，开发者可以创建逻辑分组，保持项目结构清晰的同时不影响最终URL。 主要特性包括： URL透明性 - 分组名称不会出现在浏览器地址栏 逻辑组织 - 相关路由可集中管理 布局共享 - 组内路由可共用特定布局 灵活嵌套 - 支持多层级分组结构 典型应用场景包括： 多布局系统（如营销页面与应用内页面） 多租户SaaS应用（区分管理员和用户界面） A/B测试和特性开关（不同版本路由分组） 通过路由组，开发者
2026-01-20 09:11:01
761
原创 Next.js 平行路由：构建模块化动态布局
Next.js平行路由是一种高级特性，允许在同一布局中同时渲染多个独立页面，适用于复杂界面如仪表盘。通过@folder定义插槽，各组件可独立管理状态和加载逻辑。文章通过仪表盘案例展示了如何构建平行路由结构，包括布局集成、条件渲染、错误处理等技巧，并解决了常见问题如硬导航回退和路由冲突。这种模式特别适合需要多区域动态更新的Web应用。
2026-01-19 14:44:15
230
原创 Next.js 的客户端页面路由详解
Next.js 15的App Router模式基于文件系统路由，通过app/目录结构实现页面路由。核心特性包括： 路由机制：支持静态和动态路由（[id]、[...id]、[[...id]]），可通过useParams获取参数 导航方式：提供useRouter（编程式导航）、<Link>（预加载跳转）和redirect()（强制重定向） 渲染模式：结合SSR（首屏渲染）和CSR（无刷新跳转），兼顾SEO和用户体验 实践案例：演示了包含首页、详情页和导航栏的完整路由实现方案 该路由系统通过文件结构自
2026-01-19 14:41:52
642
原创 Next.js 路由系统对比：Pages Router vs App Router
Next.js作为React全栈框架，提供了Pages Router和App Router两种路由方案。Pages Router基于pages目录，通过文件名映射URL，支持SSR/SSG但布局复用复杂；App Router基于app目录，采用文件夹结构，原生支持嵌套路由、Server Components和更完善的页面状态管理。两者在数据获取、SEO、学习曲线等方面存在显著差异。官方推荐新项目优先采用App Router，虽然学习成本较高，但能获得更现代化的开发体验和性能优化。开发者可根据项目需求选择合适
2026-01-19 14:39:32
1038
原创 Next.js 的客户端组件和服务端组件讲解
Next.js 15的App Router将React组件分为服务端组件(Server Component)和客户端组件(Client Component)。服务端组件默认运行在Node.js环境，可直接访问数据库等资源，具有体积小、首屏渲染快、SEO友好等特点；客户端组件需添加"use client"指令，支持React Hook和用户交互。两者主要区别在于执行环境、功能支持和性能表现。最佳实践是保持页面布局为服务端组件，仅在交互部分使用客户端组件，并遵循服务端组件可嵌套客户端组件但反
2026-01-19 14:34:48
1109
原创 什么是 RSC 渲染
Next.js中的React Server Components(RSC)是一种新型服务端渲染架构，与传统SSR有本质区别。RSC将组件分为服务端组件(默认，用于数据获取和静态渲染)和客户端组件(需声明'use client'，用于交互)。服务器生成RSC Payload数据流，浏览器按需加载客户端组件并水合。RSC支持流式渲染，可与Suspense结合实现渐进式加载。相比传统SSR，RSC具有组件级渲染、部分水合、更小代码体积等优势。水合(Hydration)是将交互功能注入静态HTML的过程，RSC支持
2026-01-19 14:31:17
928
原创 前端页面渲染方式：CSR、SSR、SSG
本文介绍了四种常见的网页渲染方式：CSR（客户端渲染）、SSR（服务端渲染）、同构渲染和SSG（静态站点生成）。CSR通过JavaScript动态渲染页面，具有局部刷新和交互流畅的优点，但不利于SEO且首屏加载慢。SSR由服务端直接返回完整HTML，有利于SEO和首屏速度，但增加服务器负担。同构渲染结合CSR和SSR优势，通过脱水注水机制实现服务端和客户端协同渲染。SSG则在构建时生成静态HTML，适合内容固定的网站。文章还推荐了Next.js和Nuxt.js等SSR框架，并分析了各种方式的优缺点及适用场景
2026-01-19 14:26:35
1086
原创 Next.js 的哲学思想
Next.js是一个全栈React框架，其核心理念是"约定优于配置"，通过文件系统路由、自动代码分割等设计简化开发流程。它强调开发者体验，提供零配置启动、热模块替换等特性，并默认内置性能优化功能如静态生成和服务端渲染。Next.js打破了前后端壁垒，支持在单一框架内开发全栈应用，并能适应从简单静态站点到复杂企业系统的渐进式演进。其设计目标是让开发者专注于业务逻辑而非配置细节，提供开箱即用的高效开发体验。
2026-01-19 14:21:00
757
1
原创 前端如何实现 [记住密码] 功能
前端实现"记住密码"功能主要通过浏览器自动填充或前端存储技术。核心原理是让浏览器密码管理器保存账号密码，而非直接存储明文。技术方案包括：1）规范表单元素，使用autocomplete属性触发浏览器保存；2）谨慎使用Cookie或Web Storage存储登录Token（非密码）。安全准则强调避免明文存储、确保HTTPS传输、设置安全Cookie属性等。最佳实践建议优先依赖浏览器原生功能，区分"记住密码"和"保持登录"状态，并提供用户控制权。关键操作
2026-01-16 09:09:27
985
原创 前端常用加密方式使用
本文介绍了常见的加密与编码方法，包括Base64编码、MD5、SHA-256、AES对称加密和RSA非对称加密。Base64用于二进制转文本，MD5和SHA-256是哈希算法（后者更安全），AES适合大数据加密但需密钥管理，RSA使用公钥/私钥对安全性更高。文章还解释了对称/非对称加密的区别及哈希算法的核心特征（确定性、定长输出、不可逆和雪崩效应），并提供了JavaScript实现代码示例。
2026-01-16 09:00:32
782
原创 不点击鼠标也能通过MouseEvent实现点击事件
浏览器事件系统基于发布-订阅模式，通过统一的事件处理接口实现真实操作与程序模拟的无差别响应。核心设计包括标准化Event对象和确定性事件流（捕获→目标→冒泡）。MouseEvent构造函数允许自定义事件属性，与element.click()相比提供更精细的控制，能精确模拟完整点击序列（mousedown→mouseup→click）。这种设计确保了事件处理的一致性、可测试性和可扩展性。
2026-01-16 08:50:41
820
原创 NProgress 跟随页面加载的原理
NProgress并不能真正追踪页面加载进度，而是通过模拟算法和事件绑定创造视觉反馈。其核心机制包括"涓滴"算法（随机缓慢增加进度）和绑定到关键事件（如路由变化）。在单页应用中，通常与路由守卫配合使用，通过DOM事件模拟传统页面加载效果。该组件本质上是一种"视觉安慰剂"，通过可见的进度缓解用户等待焦虑，而非反映真实加载状态。
2026-01-16 08:45:25
930
原创 前端实现页面顶部阅读进度条
本文介绍了如何为网页实现一个顶部阅读进度条，帮助用户直观了解阅读进度。核心原理是通过JavaScript监听滚动事件，计算当前滚动位置与页面总高度的比例，并动态更新进度条宽度。实现步骤包括：创建HTML进度条容器，添加CSS样式美化进度条，编写JavaScript计算滚动百分比并更新DOM。文章还提供了性能优化建议（如使用requestAnimationFrame）和进阶功能（如百分比显示、颜色渐变）。最后附上完整源码示例，包含响应式设计和视觉增强效果。
2026-01-15 10:03:14
972
原创 前端网站主题切换原理与实践：CSS 类名切换方案
现代Web开发中，主题切换功能通过CSS变量和JavaScript实现，提升用户体验。核心原理是动态切换HTML元素的CSS类名，从而应用不同样式。实现方案包括：定义主题CSS变量、创建切换控件HTML结构、使用JavaScript管理主题切换逻辑。关键技术涉及CSS变量、平滑过渡动画、localStorage持久化存储以及系统主题检测。进阶功能支持多主题扩展和组件级定制，最佳实践强调渐进增强和无障碍访问。这种方案既灵活又高效，能显著改善用户界面体验。
2026-01-15 09:57:40
639
原创 为什么 CDN 资源不会产生跨域问题?
CDN资源之所以不会产生跨域问题，主要得益于浏览器特性和CORS机制。浏览器默认允许<script>、<img>等标签跨域加载资源，这是历史设计决定的。对于Web字体、API请求等可能触发同源策略限制的资源，CDN服务商通过配置Access-Control-Allow-Origin响应头主动授权跨域访问。因此，CDN资源并非不会跨域，而是通过技术手段避免了跨域限制，使得不同域名的资源能够被前端安全使用。
2026-01-15 09:52:22
998
原创 共享单车的扫码开锁逻辑
共享单车的扫码开锁是一个典型的物联网应用，其核心流程包括：用户扫码获取车辆ID后，App将信息发送至云端服务器；服务器校验用户身份、车辆状态后生成动态开锁指令；指令通过网络下发至单车智能锁，验证后完成开锁；骑行结束后锁具上报关锁信息，服务器停止计费并生成账单。整个过程采用动态密钥、低功耗通信等技术，实现"云端决策、锁端执行"的安全控制模式，兼具集中管控和物理设备交互的特点，是物联网技术在共享经济中的典型应用。
2026-01-15 09:46:06
788
原创 一扫即登：APP扫码登录的原理
扫码登录是一种安全便捷的授权机制，通过已登录的手机确认新设备登录请求。流程包括：电脑生成带临时Token的二维码→手机扫描解析→用户确认授权→服务器验证绑定→电脑轮询完成登录。该方式避免了密码传输风险，采用双因子认证（手机+确认操作），临时Token具有时效性，且用户拥有最终控制权。整个流程包含待扫描、已扫描、已确认、已登录和已过期五个关键状态，形成严格单向流转，确保安全性。
2026-01-15 09:35:55
742
原创 前端实现水印的两种方式：SVG 与 Canvas
前端水印技术对比与实现指南：SVG和Canvas两种方案详解 本文介绍了前端水印的两种主流实现方式。SVG方案利用<pattern>平铺机制实现高清矢量水印，具有性能高、清晰度好、开发简单等优势，适合移动端快速部署。Canvas方案通过动态绘制实现更灵活的定制，支持动态内容生成和防篡改功能，适合需要高级防护的场景。文章详细对比了两者在清晰度、性能、开发复杂度等方面的差异，并提供了完整的实现代码示例和关键参数说明，帮助开发者根据实际需求选择合适的水印方案。
2026-01-15 09:20:26
658
原创 移动端 B 站弹幕功能实现
本文介绍了如何使用HTML5 Canvas和JavaScript实现一个高密度弹幕系统。该系统支持随机弹幕生成、用户自定义弹幕发送、暂停/恢复和隐藏/显示功能。通过Canvas动态渲染弹幕，实现圆角矩形背景和随机颜色效果，确保弹幕不遮挡底部输入框。核心代码包括弹幕类设计、自动发射逻辑、用户交互控制以及渲染循环优化，最终呈现流畅的弹幕动画效果。
2026-01-15 08:56:55
999
原创 移动端实现下拉刷新效果
本文介绍了原生实现下拉刷新功能的核心思路和完整代码。通过监听触摸事件（touchstart/touchmove/touchend），利用CSS transform实现内容跟随手指移动，设置70px触发阈值，并采用transition实现平滑回弹动画。代码包含阻尼效果、刷新指示器旋转动画，以及防止过度下拉等优化处理，最终实现流畅的下拉刷新交互效果。
2026-01-15 08:53:43
632
原创 使用 FNM (Fast Node Manager) 管理多个 Node.js 版本
fnm（Fast Node Manager）是一款轻量级Node.js版本管理工具，相比nvm具有更快的性能和更简单的配置。支持macOS/Linux（通过Homebrew或脚本安装）和Windows（需手动配置环境变量）。主要功能包括安装/切换Node版本、设置默认版本、自动识别项目.nvmrc文件切换版本等。常用命令如fnm install、fnm use、fnm list等，能有效管理多版本Node环境。Windows用户需额外配置PowerShell脚本实现自动版本切换。
2026-01-15 08:50:13
759
原创 构建工具中的 hash 与 contenthash作用：以 Webpack 和 Vite 为例
本文解析了前端构建工具中哈希值的核心作用与实现机制。Webpack提供三种哈希策略：[hash]（全局构建级别）、[chunkhash]（入口粒度）和[contenthash]（内容级别），其中contenthash是最优选择。Vite默认采用基于内容的哈希策略，其[hash]占位符实际等同于Webpack的contenthash。文章对比了两种工具的哈希实现差异，并给出了开发/生产环境的最佳实践配置方案，强调内容哈希在缓存控制中的重要性。最后提供了Webpack和Vite的具体配置示例，帮助开发者实现精准
2026-01-15 08:44:00
870
原创 前端基于 IntersectionObserver 更流畅的懒加载实现
本文介绍了使用IntersectionObserver API实现前端懒加载的方法。该技术通过监听元素是否进入视口来触发数据加载，相比传统的scroll事件监听具有性能更好、配置灵活等优势。文章以廉政制度页面为例，详细讲解了如何设置观察目标、创建IntersectionObserver实例、实现首次加载保护以及利用rootMargin优化加载时机。核心代码展示了React组件中如何结合useEffect和useRef实现滚动到底部自动加载的功能。这种懒加载方式能有效减少初始加载量，提升用户体验，是现代前端性
2026-01-14 15:55:55
1048
原创 前端本地开发构建和更新的过程
本文解析了前端开发环境启动与运行的完整流程。开发时运行npm run dev会启动Node进程、进行依赖预构建并创建本地服务；浏览器请求资源时，服务器会对模块进行实时转换；代码更新触发HMR机制，通过WebSocket推送增量更新。生产构建则采用全量打包和代码优化。文章对比了Vite和webpack的特性差异，Vite凭借原生ESM和esbuild实现更快的启动和更新速度。最后通过流程图展示了从代码修改到浏览器更新的完整HMR过程。
2026-01-14 15:53:28
850
原创 前端页面中，如何让用户回到上次阅读的位置
当用户中途离开页面，再次返回时，如何让他们回到上次阅读的位置，无论是在新闻网站、博客平台，还是长文档应用中，这个功能都很常用。
2026-01-14 15:50:27
903
原创 有限状态机在前端中的应用
前端开发中，有限状态机(FSM)能有效解决复杂状态管理问题。FSM通过明确定义状态、事件和转移规则，将状态切换逻辑可视化。本文介绍了FSM在前端的应用场景，包括按钮状态切换、多步骤表单流程等，并提供了三个实战案例：基础按钮状态机、多步骤表单状态机以及React中的状态机实现。相比传统的if/else方式，FSM使状态流转更加清晰可控，特别适合处理具有明确状态边界的前端交互场景。
2026-01-14 15:47:54
727
原创 JavaScript 常见算法与手写函数实现
本文介绍了JavaScript中常用的排序算法（快速排序、冒泡排序）、数组操作方法（去重、统计字符出现次数、reduce应用）、函数式编程技巧（防抖、节流、柯里化）以及倒计时实现。这些算法和函数在前端开发面试和实际项目中非常实用，涵盖了数据处理、性能优化和函数封装等核心技能。通过代码示例展示了各种方法的实现细节和使用场景，帮助开发者提升编程能力和代码质量。
2026-01-14 15:46:14
513
空空如也
h5页面通过Scheme无法直接唤起APP
2024-01-27
在移动端IOS上获取video视频的第一帧为黑屏
2022-11-10
怎么使用冒泡排序实现时间戳从小到大的排序？
2022-04-28
怎么把Jsonp的异步请求变为同步的
2021-09-13
IE9及以下浏览器请求后端接口报错 statusText"[object Error]"
2021-08-27
ie9及以下 ajax post请求给后台传递的参数，后台拿到为空，其他浏览器都正常？
2021-08-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人