- 博客(291)
- 问答 (10)
- 收藏
- 关注
RSS订阅原创 使用 XLSX.js 导出 Excel 文件
在前端开发中，经常会遇到 将页面表格数据导出为 Excel 文件 的需求，例如：本文介绍如何使用 XLSX.js 将 HTML 表格数据导出为 文件。点击按钮后，将页面中的表格数据导出为 Excel 文件。示例效果：下载 ：也可以直接通过 CDN 引入：三、HTML 表格结构首先准备一个简单的 HTML 表格。四、核心导出逻辑点击按钮时调用 方法，实现 Excel 导出。五、核心实现思路整个导出流程主要分为 5 个步骤：通过 获取 HTML table。2 解析表格数据将表格转换为
2026-03-09 10:55:19
456
原创 前端 PDF 渲染与下载实现
本文介绍了在Vue项目中基于pdf.js实现PDF预览和下载的完整方案。pdf.js作为Mozilla开源的PDF解析库，支持将PDF渲染为Canvas并实现自定义展示，相比iframe和embed方式具有更好的可控性。文章详细讲解了pdf.js的渲染原理、Vue中的实现步骤、PDF下载功能以及性能优化建议，并针对常见问题提供了解决方案。该方案适用于电子处方、合同文件等多种PDF展示场景，兼顾了功能实现与用户体验。
2026-03-09 10:40:26
427
原创 前端文件处理完全指南：File、Blob、Base64转换
本文系统介绍了前端文件处理的三种核心数据格式（File、Blob、Base64）及其转换方法。重点讲解了如何获取File对象、实现格式转换（File↔Base64↔Blob）、生成浏览器预览地址等关键技术，并针对视频格式兼容性提供了解决方案。文章还提出了性能优化建议，如避免大文件使用Base64、及时释放URL等，最后列举了图片上传预览、文件下载等典型应用场景。这些知识可以帮助开发者更高效地处理前端文件操作需求。
2026-03-09 10:23:25
545
原创 前端实现文件下载的完整流程
本文详解了前端文件下载的实现原理和完整流程。核心步骤包括：前端发送请求获取文件流，将响应转换为Blob对象，生成浏览器可访问的URL，最后通过创建a标签触发下载。相比直接使用window.open，采用fetch/axios+Blob的方式具有支持Token认证、POST请求、错误处理等优势，是企业项目中的最佳实践。文章还介绍了后端响应头的关键设置和JSON+Base64下载方式，完整呈现了从请求到下载的完整链路。
2026-03-09 10:04:40
444
原创 移动端软键盘弹出，fixed 底部按钮会被顶上去？
移动端开发中，position: fixed按钮在软键盘弹出时会被顶起是常见问题，主要因浏览器视口高度变化导致。解决方案包括：1）改用Flex布局保持按钮在文档流中（最稳定）；2）使用100dvh动态适应视口（现代浏览器适用）；3）键盘弹出时隐藏按钮（简单但体验较差）。其中Flex布局重构页面结构是推荐方案，适合企业级项目。不同平台表现各异，Android问题较明显。
2026-03-03 16:21:35
656
原创 Ant Design 项目集成阿里 Iconfont 图标库
本文介绍了封装阿里矢量图标库(Iconfont)为React组件的方案。通过将iconfont.js文件本地化部署，解决了直接使用CDN链接的依赖外网问题。组件封装提供统一的<IconFont />接口，内置悬停交互和尺寸控制，避免重复代码。实现步骤包括资源准备、组件封装和样式定义，使用简单且支持自定义效果。该方案具有稳定性高、体验感好、扩展性强等优点，特别适合需要品牌化定制图标的业务场景。
2026-02-03 16:03:20
622
原创 Python 类型提示模块 typing 详解
Python的typing模块提供了类型提示功能，用于标注变量、函数参数和返回值的预期类型。主要作用包括提高代码可读性、支持IDE静态检查以及促进团队协作。基础用法涵盖变量类型标注、函数参数/返回值标注，以及Optional、Union、Any等常用类型。高级功能如TypedDict、Literal适合大型项目。示例展示了一个类型标注完整的学生成绩管理系统，演示了Dict、List、Optional等类型在实际代码中的应用。类型提示不影响运行时行为，仅作为开发辅助工具。
2026-02-02 14:25:34
589
原创 Python Web框架的首选：FastAPI讲解
FastAPI 是一个现代 Python Web 框架，以高性能、类型安全和自动文档生成著称。它基于 Starlette、Pydantic 和 Uvicorn 三大核心技术，性能接近 Node.js/Go，显著优于 Flask/Django。框架特色包括：自动参数校验、Swagger/ReDoc 文档生成、强大的依赖注入系统、原生异步支持。通过类型注解实现"代码即文档"，简化 API 开发流程。相比传统框架，FastAPI 更适合现代应用场景如 AI 服务、微服务、前后端分离 API 等
2026-02-02 14:21:33
837
原创 Python 的 with 语句：把「资源管理」这件事交给语法
Python中的with语句用于自动管理资源（如文件、网络连接等），确保资源的正确释放。相比手动try/finally，with更简洁安全，其本质是语法级的try/finally封装。要使用with，对象需实现上下文管理协议（__enter__和__exit__方法）。常见应用场景包括文件操作、线程锁、数据库连接等。with通过自动调用__exit__保证资源清理，无论是否发生异常，是Python资源管理的推荐方式。
2026-02-02 14:18:13
637
原创 Python 中的 async 和 await 入门
Python中的async/await用于编写异步代码，使程序能同时处理多个任务。同步代码会阻塞程序执行，而异步代码能在等待I/O操作时执行其他任务，提高效率。通过async定义协程函数，用await等待异步任务完成，配合asyncio.run()运行主函数和asyncio.gather()并发执行多个任务。异步编程适用于网络请求等I/O密集型场景，但不适合CPU密集型计算。常见框架如FastAPI利用异步处理高并发请求。注意直接调用async函数只会返回协程对象，需通过await或事件循环驱动执行。
2026-02-02 14:12:34
731
原创 Python 中的模块与路径管理
本文介绍了Python模块的基本概念和使用方法。模块是组织和重用代码的基本单位，通过.py文件实现功能封装。文章详细讲解了如何创建模块、导入模块的多种方式（整体导入、部分导入、别名导入等），并介绍了Python标准库模块。此外，还阐述了模块搜索路径机制、如何自定义导入路径，以及如何将多个模块组织成包。最后简要说明了模块缓存机制和包的创建方法，为Python代码的组织和管理提供了实用指导。
2026-02-01 14:01:06
598
原创 Python 中的 `__name__` 与 `__main__` 详解
Python中__name__和__main__是控制代码执行方式的关键变量。当模块直接运行时，__name__值为"__main__"；被导入时则为模块名。通过if __name__ == "__main__":可以隔离测试代码、实现模块多功能使用（如独立脚本和导入功能），以及控制调试模式等。典型应用包括测试代码隔离、数据处理脚本、包初始化等场景，使模块既能独立运行又可被安全导入。
2026-02-01 13:59:14
736
原创 Python 类型注解
Python类型注解指南：提升代码质量与开发效率 Python 3.5引入的类型注解功能为动态语言带来了静态类型检查能力。本文系统介绍了类型注解的核心概念和应用场景，包括变量、函数参数、返回值的类型标注方法，以及容器类型、可选参数、联合类型等常见用法。类型注解虽不影响运行时，但能显著提升代码可读性、IDE智能提示和静态检查能力，特别适合大型项目开发。文章还涵盖了TypedDict、泛型等进阶用法，并提供了官方文档资源。通过合理使用类型注解，开发者可以编写更健壮、更易维护的Python代码。
2026-02-01 13:55:19
702
原创 Python 包管理工具讲解pip
摘要：本文介绍了Python项目开发中管理第三方依赖的两个核心工具——pip和requirements.txt。pip是Python官方包管理工具，支持安装、卸载、更新和查看包信息等操作。requirements.txt文件则用于记录项目依赖清单，确保环境一致性。文章详细讲解了如何生成和使用requirements.txt，包括版本控制写法，并强调了虚拟环境配合使用的重要性。最后解释了pip安装依赖的默认存放位置（site-packages目录）以及虚拟环境中的路径差异，帮助开发者解决"项目文件夹
2026-02-01 13:53:28
749
原创 Python 环境变量管理
本文介绍了使用.env文件管理Python环境变量的最佳实践。通过python-dotenv库加载配置，避免了硬编码敏感信息的安全风险，并支持多环境配置管理。文章详细展示了从基础配置到多环境管理的实现方案，包括环境变量类型转换、默认值设置和配置验证，同时提供了Flask框架的集成示例。这种管理方式提高了代码安全性、灵活性和可维护性，是Python项目配置管理的推荐方案。
2026-01-30 15:10:47
645
原创 Python 常用的内置模块
Python内置模块提供了丰富的功能，涵盖了文件操作、系统交互、日期处理、数学运算、数据序列化等多个方面。主要包括： 文件和目录操作：os模块提供系统接口，pathlib实现面向对象的路径操作 系统相关：sys模块处理命令行参数、解释器信息及程序退出 日期时间：datetime进行日期时间处理，time提供时间戳和计时功能 数学运算：math包含数学函数和常量，random生成随机数 数据序列化：json处理JSON数据，pickle实现Python对象序列化 网络功能：urllib处理URL请求和编码 高
2026-01-30 15:05:16
511
原创 Python 基础入门
本文介绍了Python编程语言的基本概念和入门知识。主要内容包括：Python简介及其简洁易读、跨平台、丰富的库和面向对象等特点；Python的安装步骤与环境变量配置；基础语法如变量与数据类型、基本运算、字符串操作、条件语句和循环结构；函数的定义与使用；常用数据结构包括列表、字典和元组；以及异常处理的基本方法。文章为初学者提供了Python编程的快速入门指南，涵盖了核心语法和基本操作。
2026-01-30 15:02:38
1439
原创 为什么 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
951
原创 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
788
原创 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
791
原创 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
621
原创 Next.js 的默认开发快速构建工具Turbopack
Next.js 15引入Turbopack作为默认开发构建工具，逐步取代Webpack。Turbopack由Vercel团队基于Rust开发，具有增量编译、智能缓存等特性，编译速度比Webpack快700倍。目前主要用于开发环境，生产环境仍需Webpack，但可通过实验性配置启用Turbopack构建。虽然生态仍在完善，但Turbopack凭借其性能优势将成为Next.js的未来构建引擎。文章还介绍了多环境构建脚本实践方案，帮助开发者管理不同环境的打包配置。
2026-01-20 09:45:49
880
原创 Next.js Script 组件详解
Next.js中的next/script组件是优化第三方脚本加载的关键工具。相比传统<script>标签，它能避免阻塞渲染、精确控制执行时机，并支持SSR/CSR安全加载。使用方式分为页面级引入（局部使用）和应用级引入（全局共享），并提供了多种加载策略：默认afterInteractive（推荐）、性能优先的lazyOnload、慎用的beforeInteractive以及实验性的worker策略。此外，还支持通过dangerouslySetInnerHTML或子节点方式编写内联脚本。正确使用n
2026-01-20 09:41:25
638
原创 Next.js 图像优化组件
Next.js的next/image组件提供高效的图像优化功能，包括自动适配WebP/AVIF等现代格式、防止布局偏移、按需懒加载和远程图像处理。通过width和height设置尺寸，支持四种布局模式（intrinsic/fixed/responsive/fill），并可配置外部域名优化。开发时默认禁用优化，生产环境自动生成优化URL。首屏图像建议使用priority属性优先加载，提升用户体验。
2026-01-20 09:36:50
763
原创 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
501
原创 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
669
原创 Next.js 的服务端路由：对应api文件夹
本文介绍了Next.js中api文件夹的作用及基本使用方法。api文件夹用于创建后端API路由，支持RESTful接口，可直接处理数据库操作、第三方API调用等后端逻辑。文章详细演示了如何创建API路由、支持不同HTTP方法，并以MySQL数据库为例，展示了完整的用户查询和新增接口实现流程。通过这种方式，Next.js项目可以实现前后端一体化开发，无需额外搭建后端服务。
2026-01-20 09:18:43
876
原创 Next.js 路由组：优雅的组织代码
路由组是一种将相关路由组织在一起而不影响实际URL路径的技术。通过将文件夹用括号(folder_name)包裹，开发者可以创建逻辑分组，保持项目结构清晰的同时不影响最终URL。 主要特性包括： URL透明性 - 分组名称不会出现在浏览器地址栏 逻辑组织 - 相关路由可集中管理 布局共享 - 组内路由可共用特定布局 灵活嵌套 - 支持多层级分组结构 典型应用场景包括： 多布局系统（如营销页面与应用内页面） 多租户SaaS应用（区分管理员和用户界面） A/B测试和特性开关（不同版本路由分组） 通过路由组，开发者
2026-01-20 09:11:01
782
原创 Next.js 平行路由：构建模块化动态布局
Next.js平行路由是一种高级特性，允许在同一布局中同时渲染多个独立页面，适用于复杂界面如仪表盘。通过@folder定义插槽，各组件可独立管理状态和加载逻辑。文章通过仪表盘案例展示了如何构建平行路由结构，包括布局集成、条件渲染、错误处理等技巧，并解决了常见问题如硬导航回退和路由冲突。这种模式特别适合需要多区域动态更新的Web应用。
2026-01-19 14:44:15
250
原创 Next.js 的客户端页面路由详解
Next.js 15的App Router模式基于文件系统路由，通过app/目录结构实现页面路由。核心特性包括： 路由机制：支持静态和动态路由（[id]、[...id]、[[...id]]），可通过useParams获取参数 导航方式：提供useRouter（编程式导航）、<Link>（预加载跳转）和redirect()（强制重定向） 渲染模式：结合SSR（首屏渲染）和CSR（无刷新跳转），兼顾SEO和用户体验 实践案例：演示了包含首页、详情页和导航栏的完整路由实现方案 该路由系统通过文件结构自
2026-01-19 14:41:52
709
原创 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
1110
原创 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
1197
原创 什么是 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
982
原创 前端页面渲染方式：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
1179
原创 Next.js 的哲学思想
Next.js是一个全栈React框架，其核心理念是"约定优于配置"，通过文件系统路由、自动代码分割等设计简化开发流程。它强调开发者体验，提供零配置启动、热模块替换等特性，并默认内置性能优化功能如静态生成和服务端渲染。Next.js打破了前后端壁垒，支持在单一框架内开发全栈应用，并能适应从简单静态站点到复杂企业系统的渐进式演进。其设计目标是让开发者专注于业务逻辑而非配置细节，提供开箱即用的高效开发体验。
2026-01-19 14:21:00
786
1
原创 前端如何实现 [记住密码] 功能
前端实现"记住密码"功能主要通过浏览器自动填充或前端存储技术。核心原理是让浏览器密码管理器保存账号密码，而非直接存储明文。技术方案包括：1）规范表单元素，使用autocomplete属性触发浏览器保存；2）谨慎使用Cookie或Web Storage存储登录Token（非密码）。安全准则强调避免明文存储、确保HTTPS传输、设置安全Cookie属性等。最佳实践建议优先依赖浏览器原生功能，区分"记住密码"和"保持登录"状态，并提供用户控制权。关键操作
2026-01-16 09:09:27
1514
原创 前端常用加密方式使用
本文介绍了常见的加密与编码方法，包括Base64编码、MD5、SHA-256、AES对称加密和RSA非对称加密。Base64用于二进制转文本，MD5和SHA-256是哈希算法（后者更安全），AES适合大数据加密但需密钥管理，RSA使用公钥/私钥对安全性更高。文章还解释了对称/非对称加密的区别及哈希算法的核心特征（确定性、定长输出、不可逆和雪崩效应），并提供了JavaScript实现代码示例。
2026-01-16 09:00:32
979
原创 不点击鼠标也能通过MouseEvent实现点击事件
浏览器事件系统基于发布-订阅模式，通过统一的事件处理接口实现真实操作与程序模拟的无差别响应。核心设计包括标准化Event对象和确定性事件流（捕获→目标→冒泡）。MouseEvent构造函数允许自定义事件属性，与element.click()相比提供更精细的控制，能精确模拟完整点击序列（mousedown→mouseup→click）。这种设计确保了事件处理的一致性、可测试性和可扩展性。
2026-01-16 08:50:41
855
原创 NProgress 跟随页面加载的原理
NProgress并不能真正追踪页面加载进度，而是通过模拟算法和事件绑定创造视觉反馈。其核心机制包括"涓滴"算法（随机缓慢增加进度）和绑定到关键事件（如路由变化）。在单页应用中，通常与路由守卫配合使用，通过DOM事件模拟传统页面加载效果。该组件本质上是一种"视觉安慰剂"，通过可见的进度缓解用户等待焦虑，而非反映真实加载状态。
2026-01-16 08:45:25
965
原创 前端实现页面顶部阅读进度条
本文介绍了如何为网页实现一个顶部阅读进度条，帮助用户直观了解阅读进度。核心原理是通过JavaScript监听滚动事件，计算当前滚动位置与页面总高度的比例，并动态更新进度条宽度。实现步骤包括：创建HTML进度条容器，添加CSS样式美化进度条，编写JavaScript计算滚动百分比并更新DOM。文章还提供了性能优化建议（如使用requestAnimationFrame）和进阶功能（如百分比显示、颜色渐变）。最后附上完整源码示例，包含响应式设计和视觉增强效果。
2026-01-15 10:03:14
1033
空空如也
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关注的人