- 博客(135)
- 收藏
- 关注
RSS订阅原创 用 Python 做一个简单的文本对比工具
这个文本对比工具是一个很适合入门学习的 Python 小项目。它覆盖了文件读写、路径处理、字符串比较、命令行参数、函数拆分、数据类等常见知识点，同时也能解决实际工作中的文本校对问题。从这个脚本可以看到，Python 不一定要写得很复杂，使用标准库就能快速做出实用的小工具。
2026-05-09 09:43:45
362
原创 用 Python 批量筛选 Excel 数据并标黄：从 5.8.txt 到 xlsx 自动标注
return ""def用来定义函数。括号里是参数，函数内部通过return返回结果。
2026-05-09 08:45:17
141
原创 媒体选择、上传与音频采集 API 实现流程
这份文档说明当前项目里图片、视频、音频相关能力是怎么一步步实现的，以及后续接后端时应该如何把本地演示逻辑升级成真实上传流程。
2026-05-07 10:22:00
180
原创 Expo 小程序媒体库功能设计与实现记录
这篇文章记录一个基于 Expo、React Native 和 Expo Router 的媒体库演示功能。当前阶段重点不是完整后端上传链路，而是先把前端交互、媒体选择、录音、预览、缓存、列表展示和删除流程跑通，为后续接入后端和数据库做功能验证。
2026-05-06 17:01:21
588
原创 从零到一：用 Taro + React 搭建数据采集小程序
这是一个数据采集工具小程序图片采集（拍照/相册选择）数据管理（查看/删除）本地存储Taro 是一个让你用 React/Vue 写小程序的框架以前（原生小程序）：├── index.wxss 样式└── index.json 配置现在（Taro + React）：└── index.tsx 组件，在一个文件里写逻辑 + JSX写法说明pxTaro 推荐，编译时自动转成 rpxpx * 2❌ 不要这样！这是一个数据采集工具小程序，用于采集图片数据并本地管理。
2026-04-25 22:44:34
600
原创 实习六个月，我学会了成长，也看清了现实
本文介绍了Next.js App Router的核心概念与实践经验。首先区分了服务端组件（默认支持async/await）和客户端组件（需"use client"声明），强调最佳实践是服务端组件获取数据后通过props传递给客户端组件处理交互。其次对比了fetch和axios的使用场景，推荐服务端使用Next.js增强的fetch以获得缓存功能。路由系统部分展示了文件即路由的约定式配置，包括动态路由和编程式导航的实现。最后详细讲解了三种路由守卫方案，特别推荐使用middleware.ts
2026-04-23 21:41:14
214
原创 Next.js 初学者核心知识点
本文介绍了Next.js App Router的核心概念与实践经验。首先区分了服务端组件（默认支持async/await）和客户端组件（需"use client"声明），强调最佳实践是服务端组件获取数据后通过props传递给客户端组件处理交互。其次对比了fetch和axios的使用场景，推荐服务端使用Next.js增强的fetch以获得缓存功能。路由系统部分展示了文件即路由的约定式配置，包括动态路由和编程式导航的实现。最后详细讲解了三种路由守卫方案，特别推荐使用middleware.ts
2026-03-18 10:32:01
139
原创 海克斯大乱斗攻略网站 —— 从零开发到云服务器部署全记录
本文介绍了一个基于Next.js开发的英雄联盟海克斯大乱斗攻略网站项目。该项目包含英雄图鉴、详情页、海克斯强化和出装推荐四大功能模块，采用Next.js 16、TypeScript和Tailwind CSS v4技术栈。文章详细解析了项目结构、Next.js App Router使用方式、Riot Data Dragon API数据获取方法，以及各页面实现逻辑。同时提供了从本地打包到云服务器部署的完整流程，适合有一定前端基础的开发者学习全栈开发实践。项目充分利用Next.js的服务端渲染特性，结合静态数据缓
2026-03-17 16:14:30
1036
原创 React 性能优化组件设计模式与通信
10000 条数据不用全部渲染，只渲染可视区域内的几十条。用 memo 包裹子组件，props 不变就不重新渲染。按需加载组件，首屏不需要的组件延后加载。，不管子组件的 props 有没有变。
2026-03-12 16:29:49
287
原创 组件设计模式与通信
优先用自定义 Hook。HOC 是类组件时代的方案，存在嵌套地狱和 props 来源不清的问题。Hook 更直观、更灵活、更容易组合。
2026-03-12 16:28:45
228
原创 TCP 与 UDP
因为 TCP 是全双工客户端说"我说完了"（FIN）→ 服务端确认"知道了"（ACK）但服务端可能还没说完，需要继续发数据等服务端也说完了 → 再发 FIN → 客户端确认 ACK两个方向分别关闭，所以要4 步。
2026-03-10 14:50:58
406
原创 OSI(Open System interconnection)
本文介绍了OSI七层模型与TCP/IP四层模型。OSI七层模型由ISO制定，将网络通信分为应用层、表示层、会话层、传输层、网络层、数据链路层和物理层，每层各司其职。数据传输时自上而下封装，接收时自下而上解封。实际应用中多采用简化的TCP/IP四层模型（应用层、传输层、网络层、网络接口层）。分层设计实现了解耦、标准化和易于维护等优势。常见面试题包括模型区别、分层意义以及数据传输过程。
2026-03-10 14:50:01
454
原创 Node.js AI 开发入门 - 完整学习笔记
目标：从零开始学习 Node.js + AI 开发，掌握调用大语言模型的基础知识。时间状态：✅ 第一阶段完成# 网络问题诊断流程：1. 检查环境变量：env | grep ANTHROPIC2. 查看实际请求：观察程序输出的地址3. 确认中转服务可用：检查是否能正常访问这次从零开始搭建 AI 学习项目，虽然遇到了各种网络、配置问题，但通过系统性的排查和解决，最终成功运行了三个示例。理解了 AI 应用开发的基本流程建立了解决复杂问题的方法论为接下来的深入学习打下基础。
2026-02-03 17:16:23
840
原创 从零到一:打造一个语雀文档展示系统
"axios": "^1.6.0", // HTTP 请求库"turndown": "^7.1.2", // HTML 转 Markdown"turndown-plugin-gfm": "^1.0.2" // 支持 GitHub 风格 Markdown (表格等)</</问题: 缺少类型定义,容易出错解决方案: 添加完整的类型定义body_asl?: string;body?: string;content?: string;mode?: string;name?
2026-02-02 13:01:32
800
原创 从零开始构建 React 文档系统 - 完整实现指南
/ 结构数据的类型// 标题还是文档// 显示名称// markdown 文件名// 层级// 父节点 ID// 第一个子节点 ID// 菜单项的类型// 目录项的类型id: string;概念说明例子扁平数组没有层级关系的数据树形结构有父子关系的数据递归函数调用自己父节点标识空 = 根节点叶子节点没有子节点的节点能加载 md 文件slug文件名。
2026-01-28 14:45:32
931
原创 从语雀到本地：打造一个文档导出工具
这个工具虽然代码量不多，但实现了一个完整的文档导出功能。如何使用 Node.js 进行文件系统操作如何调用第三方 API如何处理异步流程如何进行字符串正则匹配和替换如何下载和处理二进制文件希望这个小工具能对你的文档管理工作有所帮助！如果你有任何改进建议，欢迎交流讨论。
2026-01-27 16:51:37
868
原创 从零开始:使用 Docker 部署 React 前端项目完整实战
本文详细介绍了将React+Vite前端项目容器化部署到Docker的全过程。首先讲解了Docker核心概念，包括镜像(Image)、容器(Container)、Dockerfile和多阶段构建等基础知识。然后通过车辆管理系统前端项目实战，展示了如何编写Dockerfile、配置Nginx反向代理、构建镜像和运行容器的具体步骤。文章还分享了部署过程中遇到的典型问题及解决方案，并比较了Docker与传统虚拟机的区别，突出了Docker轻量、快速和可移植的优势。
2026-01-12 11:24:41
1174
原创 React 组件通讯全案例解析：从 Context 到 Ref 的实战应用
本文介绍了React组件通讯的多种实现方式。通过实际案例详细解析了如何使用createContext、useReducer等原生Hook构建状态管理方案，替代第三方状态库。重点展示了：1）通过Context实现跨组件数据共享；2）使用useReducer集中管理复杂状态；3）利用useRef+forwardRef实现父子组件方法调用。案例包含计数器、规则列表等典型场景，并对比了不同通讯方式的适用场景。该方案适用于需要轻量级状态管理的项目，可避免props透传问题，提高代码可维护性。
2025-12-03 16:44:16
915
原创 从验证码组件到 AI 时代：为什么「用中学」才是程序员的生存法则？
摘要：本文通过分析SnowAdmin验证码组件的实现过程，揭示了当代程序员"用中学"的工作模式。在AI时代，提前储备知识的性价比下降，开发者更倾向于在解决问题时即时获取所需知识。文章指出程序员的核心竞争力已转向需求拆解、调试优化、沟通协作和技术选型等能力，并提出了"以组件为单位学习"、"渐进式改造"等实践方法论。作者认为编程的本质是创造性解决问题，AI的普及反而让开发者能更专注于核心能力的提升，建议拥抱"用中学"的模式，在实践过
2025-11-24 15:25:05
1528
原创 GPT-5 Mini：你不可错过的智能助手功能揭秘
摘要： GPT-5Mini是OpenAI推出的轻量级AI助手，具备自然语言处理、多领域知识覆盖及图像识别（可选）能力，可高效辅助学习、创作与工作。支持上下文记忆、个性化回答及多任务处理，开发者还能通过API集成扩展功能。无论是生成代码、撰写文案还是日常信息检索，GPT-5Mini都能成为提升生产力的智能伙伴。未来将持续优化，更精准满足用户需求。 （约120字） 钩子文案建议： 🔥 "还在为低效工作头疼？GPT-5Mini让你1小时干完3天的活！" 💡 "开发者秘密武器：这个
2025-11-21 17:40:21
455
原创 从零到一：编写一个简单的 Umi 插件并发布到 npm
本文介绍了Umi插件开发与发布的完整流程。首先创建插件项目并安装Umi依赖，接着注册npm账户并发布插件到npm仓库。重点演示了通过npm link本地测试插件的方法，以及在项目中安装使用插件的配置方式（在.umirc.ts中配置plugins项）。最后总结了常见问题解决方案，包括移除private字段、设置公开访问权限等。通过这一流程，开发者可以掌握Umi插件的开发、测试、发布与使用的完整生命周期。
2025-11-12 10:21:38
617
原创 Next.js 学习笔记：从约定式路由到 Tailwind、Image、Font 优雅整合。
摘要：本文介绍了Next.js框架的核心特性及其优化方法，包括：1）"约定式路由"系统实现文件即路由；2）Layout机制支持多层嵌套共享UI；3）TailwindCSS提供原子化样式开发；4）next/font模块优化字体加载；5）next/image组件实现智能图片处理；6）clsx工具管理动态className。这些特性共同构建了Next.js高效、模块化的开发体验，简化了路由配置、样式管理和性能优化流程。（149字）
2025-11-06 11:24:00
851
原创 跨域，Cookie与Token前端身份验证的全流程解析
本文系统讲解了前端开发中的跨域、Cookie和Token三大核心概念。跨域是浏览器的安全机制，可通过CORS或代理解决；Cookie是浏览器自动管理的凭证，适合传统网站；Token是前端手动管理的通用凭证，更适合前后端分离和移动端应用。文章对比了两者的优缺点及适用场景，并解释了XSS和CSRF等安全概念，为开发者提供了清晰的技术选型指南。
2025-11-05 10:19:46
1188
原创 从零实现JSON与图片文件上传功能
支持拖拽上传和点击上传两种方式限制仅允许上传JSON文件和图片文件实现文件大小限制（最大5MB）提供图片预览功能提供JSON内容解析与格式化显示功能支持文件移除操作技术选型React + TypeScript 作为基础框架Ant Design 组件库提供UI支持，特别是组件FileReader API 处理文件读取操作// 在返回的JSX中添加文件信息显示区域<h3>文件信息</h3>
2025-10-10 14:11:26
616
原创 流式聊天界面实现解析：从零到一构建实时对话体验
本文介绍了基于React的流式聊天组件实现方案。该组件采用函数式编程，核心功能包括实时消息流、Markdown支持、滚动控制等。通过messages和allMessages状态分别管理临时和历史消息，结合定时器模拟流式响应。关键实现包括：使用markdown-it渲染消息内容；通过组合历史与当前消息优化性能；自动滚动与手动控制机制；滚动加载更多历史消息。组件采用智能状态管理，既确保流畅交互体验，又为扩展预留空间，是AI对话界面开发的实用参考案例。
2025-10-09 15:57:00
1189
原创 WebSocket实战：打造AI流式对话的实时通信基础
本文介绍了WebSocket在实现AI流式对话中的应用，通过一个完整的React案例演示了关键技术。WebSocket相比HTTP具有双向通信、持久连接、低延迟等优势，案例中实现了连接管理、消息收发、自动滚动等功能，并包含错误处理和模拟模式。文章还探讨了与AI对话场景的关联，如流式响应、多模态支持等扩展方向。该案例为开发实时交互应用提供了实用参考。
2025-09-28 15:04:08
741
原创 UmiJS的基础操作：约定式路由，登录权限设置wrappers和mack测试接口以及CRUD实践
本文介绍了Umi框架的核心功能与应用实践。Umi是基于React的企业级前端框架，提供完善的路由系统和插件体系。文章详细讲解了配置式和约定式路由的实现方式，包括独立页面设置和权限控制（wrappers中间件）。同时介绍了两种路由参数传递方法（useSearchParams和useParams）及对应的接收方式。在组件通信方面，展示了useContext钩子实现父子组件数据共享的方案。最后通过一个TodoList案例，演示了如何调用mock接口并实现数据的增删改查功能。
2025-09-23 16:05:42
620
原创 《前端学习总结：GitLab、状态管理、组件库与 Umi.js》
本文分享了在新公司实习期间的前端学习收获。主要内容包括：1.掌握了GitLab代码管理流程，包括个人访问令牌使用、分支创建与合并；2.学习了轻量级状态管理库Valtio的使用方法；3.了解了组件库开发工具链（url-parse、stylelint等）；4.接触了企业级React框架Umi.js的特点和路由管理；5.总结了前端项目开发流程的整体认知。这些知识为快速上手公司项目和后续学习打下了基础。
2025-09-22 17:23:44
917
原创 我的第一次实习：作为甲方公司的前端实习生
这篇文章分享了一段令人失望的实习经历。作者作为前端实习生进入甲方公司后，发现团队由三名实习生组成，缺乏专业指导，只能独自摸索。工作中面临繁琐的管理流程和仅2500元的低薪。这段经历让作者从期待转为迷茫，最终认识到公司只是将实习生当作廉价劳动力。虽然获得了独立解决问题的能力和项目经验，但也深刻反思：实习应注重成长环境而非仅是工作机会。作者决定加强学习并寻找更有发展空间的团队，建议读者选择实习时要关注是否能获得实质性的成长。
2025-09-15 21:14:49
434
原创 UniApp 实现搜索页逻辑详解
本文介绍了小程序搜索页面的实现方案，包含搜索框、历史记录、热门搜索、分页加载等功能模块。重点解析了搜索触发逻辑：输入关键字处理（去空格、判空）、历史记录存储（本地缓存、去重）、参数重置和请求发送。同时实现了点击标签搜索、触底分页加载、无数据提示等交互细节。文章还提供了关键代码片段，展示如何通过状态管理处理不同搜索结果场景（正常数据、无更多数据、完全无结果）。该方案具有清晰的逻辑流程，优化了用户体验，并完善了异常情况处理，适合大多数搜索场景需求。
2025-09-02 15:25:35
976
原创 小程序开发：懒加载只加载当前和滑动到的图片
本文介绍了小程序图片预览的优化方案，通过懒加载技术实现只加载当前和滑动到的图片。核心思路是：1)传递当前图片ID获取下标；2)使用数组存储待加载图片索引；3)初始化仅加载当前图片；4)监听轮播变化动态加载新图片。具体实现包括条件渲染(v-if判断索引是否在数组中)、swiper的@change事件处理等。该方法有效减少了首屏加载压力，避免了不必要的流量消耗，同时保证了流畅的预览体验。文章还提供了完整的代码示例，展示了如何通过动态管理加载索引数组来实现按需加载效果。
2025-09-01 16:25:17
375
原创 [特殊字符] React 自定义 Hook 实现防抖（Debounce）
防抖（Debounce）是一种优化高频事件处理的技术，通过延迟执行回调函数直到事件停止触发一段时间。比如在搜索框输入时，只有用户停止输入1秒后才发起请求，避免频繁请求。React中可通过自定义Hook实现：利用useRef保存定时器，每次触发时清除前一个定时器并设置新的延迟执行。这样能确保只执行最后一次触发的事件，提升性能。示例展示了如何将防抖应用于滚动和输入事件。
2025-08-29 08:53:01
704
原创 用React写一个技能冷却的案例，关于节流
本文介绍了前端开发中的节流(throttle)概念，通过"技能冷却"案例生动展示了其应用场景。节流函数在指定时间内只执行一次，类比游戏技能冷却时间或电梯按钮。文章实现了一个React组件模拟技能触发和冷却效果，当技能处于冷却时按钮不可点击，直观体现了节流的作用。同时对比了节流与防抖的区别：节流是间隔执行，防抖是延迟执行。最后强调合理使用节流/防抖能有效提升前端性能，避免资源浪费。
2025-08-28 16:38:22
463
原创 理解虚拟 DOM：前端开发中的高效渲染利器
虚拟DOM是前端框架(如React、Vue)的核心机制，用JS对象模拟真实DOM结构，通过对比新旧虚拟DOM差异来最小化更新真实DOM。其优势在于：1)减少昂贵DOM操作提升性能；2)实现跨平台渲染；3)提供声明式UI开发体验。虽然手动操作少量DOM可能更快，但虚拟DOM在复杂应用中能降低维护成本。目前虚拟DOM仍是主流方案，但Svelte等编译型框架提供了无虚拟DOM的替代方案。 (149字)
2025-08-27 16:40:04
654
原创 Uniapp的简单体验以及内置组件简单使用
本文介绍了使用Vue3和HBuilder开发UniApp小程序的流程。首先创建UniApp空白项目后，pages.json会自动注册页面路由。演示了常用组件：1)view组件类似div容器；2)scroll-view实现横向滚动效果；3)swiper组件创建轮播图，支持自动播放、垂直滚动等设置；4)navigator组件实现页面跳转。示例代码展示了这些组件的具体用法，包括样式设置和属性配置，如scroll-x实现横向滚动、swiper的自动轮播间隔等。通过浏览器可直接预览组件效果，为小程序开发提供了基础组件
2025-08-26 15:01:29
184
原创 Vue插槽以及一些api的使用
本文介绍了Vue3中的四个核心特性：1.插槽机制，包括默认插槽和具名插槽的使用，父组件通过插槽向子组件传递差异化的模板结构；2.作用域插槽，子组件通过插槽props向父组件传递数据；3.customRef自定义响应式数据，可控制数据更新的时机和逻辑；4.Teleport组件，用于将子组件渲染到DOM结构中指定位置，常用于模态框等需要全局定位的场景。这些特性增强了组件的灵活性和复用性，能够更好地处理复杂的UI交互需求。
2025-08-25 10:59:52
374
原创 Vue状态管理工具pinia的使用以及Vue组件通讯
本文介绍了Pinia状态管理工具的使用方法和Vue组件通信方式。在Pinia部分，详细说明了如何安装配置Pinia，创建store容器，定义state和actions，以及在组件中使用store数据和方法。同时介绍了$subscribe监听数据变化的功能。在Vue组件通信部分，总结了父子组件通过props传值、自定义事件、v-model双向绑定、attrs属性传递、provide/inject等通信方式，并与React的实现原理进行了对比。
2025-08-24 16:25:05
532
原创 Vue生命周期以及自定义钩子和路由
Vue3核心特性摘要：1.生命周期与React对比：Vue的onMounted/onUpdated/onUnmounted对应React的useEffect，组件挂载顺序为子→父的栈结构；2.响应式监听：watch需明确监听对象，watchEffect自动追踪依赖变化并立即执行；3.Hooks封装：复用逻辑可提取为use开头的TS文件；4.组件通信：defineProps接收参数，支持类型声明和默认值；5.路由配置：支持history/hash两种模式，参数传递分query/params两种方式，通过use
2025-08-22 16:43:26
462
原创 Vue3的基础入门使用
本文介绍了从React转向Vue3开发移动端项目的基础知识。主要内容包括：1）使用Vite创建Vue3+TS项目的基本结构；2）Vue3的响应式数据定义方式（ref和reactive）及其与React的useState对比；3）计算属性computed的使用方法；4）watch监视方法的使用。重点讲解了组合式API的写法，以及Vue3与React在数据管理和视图更新方面的异同，为React开发者快速上手Vue3提供了实用指导。
2025-08-21 16:55:44
397
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人