- 博客(119)
- 收藏
- 关注
RSS订阅原创 从零开始:使用 Docker 部署 React 前端项目完整实战
本文详细介绍了将React+Vite前端项目容器化部署到Docker的全过程。首先讲解了Docker核心概念，包括镜像(Image)、容器(Container)、Dockerfile和多阶段构建等基础知识。然后通过车辆管理系统前端项目实战，展示了如何编写Dockerfile、配置Nginx反向代理、构建镜像和运行容器的具体步骤。文章还分享了部署过程中遇到的典型问题及解决方案，并比较了Docker与传统虚拟机的区别，突出了Docker轻量、快速和可移植的优势。
2026-01-12 11:24:41
1032
原创 React 组件通讯全案例解析：从 Context 到 Ref 的实战应用
本文介绍了React组件通讯的多种实现方式。通过实际案例详细解析了如何使用createContext、useReducer等原生Hook构建状态管理方案，替代第三方状态库。重点展示了：1）通过Context实现跨组件数据共享；2）使用useReducer集中管理复杂状态；3）利用useRef+forwardRef实现父子组件方法调用。案例包含计数器、规则列表等典型场景，并对比了不同通讯方式的适用场景。该方案适用于需要轻量级状态管理的项目，可避免props透传问题，提高代码可维护性。
2025-12-03 16:44:16
891
原创 从验证码组件到 AI 时代：为什么「用中学」才是程序员的生存法则？
摘要：本文通过分析SnowAdmin验证码组件的实现过程，揭示了当代程序员"用中学"的工作模式。在AI时代，提前储备知识的性价比下降，开发者更倾向于在解决问题时即时获取所需知识。文章指出程序员的核心竞争力已转向需求拆解、调试优化、沟通协作和技术选型等能力，并提出了"以组件为单位学习"、"渐进式改造"等实践方法论。作者认为编程的本质是创造性解决问题，AI的普及反而让开发者能更专注于核心能力的提升，建议拥抱"用中学"的模式，在实践过
2025-11-24 15:25:05
1507
原创 GPT-5 Mini：你不可错过的智能助手功能揭秘
摘要： GPT-5Mini是OpenAI推出的轻量级AI助手，具备自然语言处理、多领域知识覆盖及图像识别（可选）能力，可高效辅助学习、创作与工作。支持上下文记忆、个性化回答及多任务处理，开发者还能通过API集成扩展功能。无论是生成代码、撰写文案还是日常信息检索，GPT-5Mini都能成为提升生产力的智能伙伴。未来将持续优化，更精准满足用户需求。 （约120字） 钩子文案建议： 🔥 "还在为低效工作头疼？GPT-5Mini让你1小时干完3天的活！" 💡 "开发者秘密武器：这个
2025-11-21 17:40:21
353
原创 从零到一：编写一个简单的 Umi 插件并发布到 npm
本文介绍了Umi插件开发与发布的完整流程。首先创建插件项目并安装Umi依赖，接着注册npm账户并发布插件到npm仓库。重点演示了通过npm link本地测试插件的方法，以及在项目中安装使用插件的配置方式（在.umirc.ts中配置plugins项）。最后总结了常见问题解决方案，包括移除private字段、设置公开访问权限等。通过这一流程，开发者可以掌握Umi插件的开发、测试、发布与使用的完整生命周期。
2025-11-12 10:21:38
595
原创 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
829
原创 跨域，Cookie与Token前端身份验证的全流程解析
本文系统讲解了前端开发中的跨域、Cookie和Token三大核心概念。跨域是浏览器的安全机制，可通过CORS或代理解决；Cookie是浏览器自动管理的凭证，适合传统网站；Token是前端手动管理的通用凭证，更适合前后端分离和移动端应用。文章对比了两者的优缺点及适用场景，并解释了XSS和CSRF等安全概念，为开发者提供了清晰的技术选型指南。
2025-11-05 10:19:46
1132
原创 从零实现JSON与图片文件上传功能
支持拖拽上传和点击上传两种方式限制仅允许上传JSON文件和图片文件实现文件大小限制（最大5MB）提供图片预览功能提供JSON内容解析与格式化显示功能支持文件移除操作技术选型React + TypeScript 作为基础框架Ant Design 组件库提供UI支持，特别是组件FileReader API 处理文件读取操作// 在返回的JSX中添加文件信息显示区域<h3>文件信息</h3>
2025-10-10 14:11:26
567
原创 流式聊天界面实现解析：从零到一构建实时对话体验
本文介绍了基于React的流式聊天组件实现方案。该组件采用函数式编程，核心功能包括实时消息流、Markdown支持、滚动控制等。通过messages和allMessages状态分别管理临时和历史消息，结合定时器模拟流式响应。关键实现包括：使用markdown-it渲染消息内容；通过组合历史与当前消息优化性能；自动滚动与手动控制机制；滚动加载更多历史消息。组件采用智能状态管理，既确保流畅交互体验，又为扩展预留空间，是AI对话界面开发的实用参考案例。
2025-10-09 15:57:00
1029
原创 WebSocket实战：打造AI流式对话的实时通信基础
本文介绍了WebSocket在实现AI流式对话中的应用，通过一个完整的React案例演示了关键技术。WebSocket相比HTTP具有双向通信、持久连接、低延迟等优势，案例中实现了连接管理、消息收发、自动滚动等功能，并包含错误处理和模拟模式。文章还探讨了与AI对话场景的关联，如流式响应、多模态支持等扩展方向。该案例为开发实时交互应用提供了实用参考。
2025-09-28 15:04:08
685
原创 UmiJS的基础操作：约定式路由，登录权限设置wrappers和mack测试接口以及CRUD实践
本文介绍了Umi框架的核心功能与应用实践。Umi是基于React的企业级前端框架，提供完善的路由系统和插件体系。文章详细讲解了配置式和约定式路由的实现方式，包括独立页面设置和权限控制（wrappers中间件）。同时介绍了两种路由参数传递方法（useSearchParams和useParams）及对应的接收方式。在组件通信方面，展示了useContext钩子实现父子组件数据共享的方案。最后通过一个TodoList案例，演示了如何调用mock接口并实现数据的增删改查功能。
2025-09-23 16:05:42
570
原创 《前端学习总结：GitLab、状态管理、组件库与 Umi.js》
本文分享了在新公司实习期间的前端学习收获。主要内容包括：1.掌握了GitLab代码管理流程，包括个人访问令牌使用、分支创建与合并；2.学习了轻量级状态管理库Valtio的使用方法；3.了解了组件库开发工具链（url-parse、stylelint等）；4.接触了企业级React框架Umi.js的特点和路由管理；5.总结了前端项目开发流程的整体认知。这些知识为快速上手公司项目和后续学习打下了基础。
2025-09-22 17:23:44
904
原创 我的第一次实习：作为甲方公司的前端实习生
这篇文章分享了一段令人失望的实习经历。作者作为前端实习生进入甲方公司后，发现团队由三名实习生组成，缺乏专业指导，只能独自摸索。工作中面临繁琐的管理流程和仅2500元的低薪。这段经历让作者从期待转为迷茫，最终认识到公司只是将实习生当作廉价劳动力。虽然获得了独立解决问题的能力和项目经验，但也深刻反思：实习应注重成长环境而非仅是工作机会。作者决定加强学习并寻找更有发展空间的团队，建议读者选择实习时要关注是否能获得实质性的成长。
2025-09-15 21:14:49
373
原创 UniApp 实现搜索页逻辑详解
本文介绍了小程序搜索页面的实现方案，包含搜索框、历史记录、热门搜索、分页加载等功能模块。重点解析了搜索触发逻辑：输入关键字处理（去空格、判空）、历史记录存储（本地缓存、去重）、参数重置和请求发送。同时实现了点击标签搜索、触底分页加载、无数据提示等交互细节。文章还提供了关键代码片段，展示如何通过状态管理处理不同搜索结果场景（正常数据、无更多数据、完全无结果）。该方案具有清晰的逻辑流程，优化了用户体验，并完善了异常情况处理，适合大多数搜索场景需求。
2025-09-02 15:25:35
929
原创 小程序开发：懒加载只加载当前和滑动到的图片
本文介绍了小程序图片预览的优化方案，通过懒加载技术实现只加载当前和滑动到的图片。核心思路是：1)传递当前图片ID获取下标；2)使用数组存储待加载图片索引；3)初始化仅加载当前图片；4)监听轮播变化动态加载新图片。具体实现包括条件渲染(v-if判断索引是否在数组中)、swiper的@change事件处理等。该方法有效减少了首屏加载压力，避免了不必要的流量消耗，同时保证了流畅的预览体验。文章还提供了完整的代码示例，展示了如何通过动态管理加载索引数组来实现按需加载效果。
2025-09-01 16:25:17
345
原创 [特殊字符] React 自定义 Hook 实现防抖（Debounce）
防抖（Debounce）是一种优化高频事件处理的技术，通过延迟执行回调函数直到事件停止触发一段时间。比如在搜索框输入时，只有用户停止输入1秒后才发起请求，避免频繁请求。React中可通过自定义Hook实现：利用useRef保存定时器，每次触发时清除前一个定时器并设置新的延迟执行。这样能确保只执行最后一次触发的事件，提升性能。示例展示了如何将防抖应用于滚动和输入事件。
2025-08-29 08:53:01
665
原创 用React写一个技能冷却的案例，关于节流
本文介绍了前端开发中的节流(throttle)概念，通过"技能冷却"案例生动展示了其应用场景。节流函数在指定时间内只执行一次，类比游戏技能冷却时间或电梯按钮。文章实现了一个React组件模拟技能触发和冷却效果，当技能处于冷却时按钮不可点击，直观体现了节流的作用。同时对比了节流与防抖的区别：节流是间隔执行，防抖是延迟执行。最后强调合理使用节流/防抖能有效提升前端性能，避免资源浪费。
2025-08-28 16:38:22
438
原创 理解虚拟 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
635
原创 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
176
原创 Vue插槽以及一些api的使用
本文介绍了Vue3中的四个核心特性：1.插槽机制，包括默认插槽和具名插槽的使用，父组件通过插槽向子组件传递差异化的模板结构；2.作用域插槽，子组件通过插槽props向父组件传递数据；3.customRef自定义响应式数据，可控制数据更新的时机和逻辑；4.Teleport组件，用于将子组件渲染到DOM结构中指定位置，常用于模态框等需要全局定位的场景。这些特性增强了组件的灵活性和复用性，能够更好地处理复杂的UI交互需求。
2025-08-25 10:59:52
358
原创 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
502
原创 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
447
原创 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
383
原创 管理项目服务器连接数据库
本文介绍了将中后台管理项目的数据存储从JSON文件迁移到MongoDB数据库的过程。通过创建数据库模型（Model）并导入原有JSON数据，实现了数据持久化存储的升级。文章详细展示了如何使用Mongoose库进行数据库连接，以及通过定义模型对象对订单、城市、车型等数据进行增删改查操作。代码示例包括订单列表查询、详情获取、创建更新订单等核心功能实现，并演示了如何用数据库操作替代原有的文件系统(FS)操作，简化了数据筛选等逻辑处理。最后说明了在入口文件中建立数据库连接的方法，完成了整个数据存储方案的升级。
2025-08-20 16:28:05
596
原创 mongoose（对象文档模型库）的使用
Mongoose是Node.js操作MongoDB的优化模块，通过对象映射简化数据库操作。它提供Schema模式对象定义文档结构，Model对象作为集合操作接口，Document对象表示具体文档。使用步骤包括：连接数据库、创建Schema、生成Model。Model提供增删改查方法如create()、find()、updateOne()、deleteMany()等，均为异步操作。文档对象(Document)是Model实例，支持save()等方法。Mongoose解决了非关系型数据库的类型限制问题，支持数据
2025-08-19 15:50:51
465
原创 Mongodb（文档数据库）的安装与使用（文档的增删改查）
本文介绍了MongoDB数据库的基本使用和图形化操作。首先解释了数据库作为数据存储仓库的作用，对比了传统文件存储方式。接着详细说明了MongoDB的安装配置过程，包括环境变量设置和客户端工具安装。重点演示了通过命令行和GUI工具进行数据操作：使用insertOne/insertMany插入文档，find/findOne查询数据，updateOne/updateMany更新文档（注意需使用$set操作符），以及remove删除文档（现建议使用deleteOne/deleteMany）。文章特别强调了_id字段
2025-08-18 16:32:00
499
原创 从0开始的中后台管理系统-7（项目完结主题切换）
本文介绍了前端项目实现主题切换功能的完整方案。首先在状态管理(resso)中设置isDark变量并实现持久化存储，通过Switch组件切换时动态修改HTML的class。CSS中使用CSS变量(--dark-color等)实现样式切换，同时通过ConfigProvider配置antd组件的主题算法(theme.darkAlgorithm/defaultAlgorithm)来实现组件库的主题适配。方案包含HTML元素样式切换、CSS变量应用和antd组件主题配置三个关键部分，最终实现了包括基础元素和UI组件在
2025-08-17 10:01:36
346
2
原创 从0开始的中后台管理系统-7（司机列表展示以及面包屑和页签分页实现还有懒加载）
本文介绍了前端开发中面包屑导航和分页功能的实现方法，以及React组件懒加载的应用。面包屑通过递归查找菜单树匹配当前路由，生成路径数组展示；分页功能同样基于路由匹配，动态管理标签页数组。文章还详细说明了React.lazy结合Suspense实现组件懒加载的封装方案，通过动态导入和加载状态占位优化性能。这些技术方案采用Ant Design组件库和React Router实现，适用于中后台管理系统开发，能有效提升用户体验和页面加载效率。
2025-08-15 16:22:27
653
原创 从0开始的中后台管理系统-7（订单列表功能实现，调用百度地图打点以及轨迹图动态展示）
本文介绍了基于百度地图API实现地图打点和轨迹展示的技术方案。主要包括三个方面：1.地图打点功能通过Map实例的点击事件获取经纬度坐标，存储到数组并支持删除操作；2.轨迹展示功能利用Polyline绘制路径点数组，结合TrackAnimation实现轨迹动画效果；3.文件导出方案通过Blob对象处理二进制流数据，创建a标签模拟下载操作。实现过程涉及地图初始化、控件添加、事件绑定、数据存储等关键技术点，为前端地图应用开发提供了完整解决方案。
2025-08-14 17:09:23
411
原创 从0开始的中后台管理系统-6（添加用户以及绑定角色给用户动态添加权限，以及在layout父路由组件去进行路径跳转判断）
本文介绍了一个基于角色的前端权限设计方案。通过用户-角色-菜单的三级关联实现权限控制：1)用户绑定角色(如管理员/普通用户)，角色关联菜单权限；2)登录时将角色信息加密到token；3)访问时通过token解密获取角色，筛选对应菜单权限；4)在Layout组件中进行路由拦截，未授权访问跳转403页面。方案包含核心代码实现：路由配置中使用AuthLoader预加载权限数据，Layout组件进行路径校验，SideMenu组件递归渲染授权菜单。该设计实现了动态菜单展示和路由权限控制，确保用户只能访问授权资源。
2025-08-13 16:55:53
394
原创 从0开始的中后台管理系统-5（菜单的路径绑定以及角色页面的实现）
本文摘要：文章主要介绍了前端开发中实现菜单与路由双向绑定的方法，以及角色管理页面的构建。首先通过路由加载器获取权限列表，递归生成菜单路径，使用Ant Design的Menu组件实现导航栏与路由的绑定。随后详细描述了角色管理页面的实现，包括数据表格展示、搜索表单、新增/编辑角色等功能，通过useAntdTable和useImperativeHandle等Hooks实现父子组件通信和数据管理。整个系统实现了权限控制、菜单路由同步和角色管理等功能。
2025-08-12 16:58:23
396
原创 从0开始的中后台管理系统-5（部门管理以及菜单管理页面功能实现）
本文介绍了用户管理、部门管理和菜单管理功能的实现方式。前端通过表单发送请求携带参数访问接口，后端处理数据后返回给前端展示。部门管理页面与用户管理类似，但需要处理嵌套的上级部门结构。文章详细展示了部门管理的React组件代码，包括表单、表格和操作按钮的实现。后端使用递归函数处理部门数据的增删改查，特别是处理嵌套的children属性。路由设置部分展示了如何通过递归过滤、查找和更新部门数据，以及处理删除操作。虽然递归逻辑较为复杂，但核心思路仍是对数据进行筛选和操作。
2025-08-11 17:08:40
465
原创 从0开始的中后台管理系统-5（userList页面功能实现）
本文实现了一个基于React和Express的用户管理系统，包含完整的增删改查功能。前端使用Ant Design组件库和ahooks的useAntdTable钩子实现表格展示、搜索分页和表单联动；后端通过Express处理数据请求，将用户信息持久化存储在JSON文件中。系统特点包括：1）前端采用useAntdTable简化分页搜索逻辑；2）支持批量删除操作；3）实现了用户状态筛选和模糊搜索；4）后端通过中间件进行token验证；5）文件上传功能采用multer处理。整个系统展示了前后端分离开发模式下，前端处
2025-08-10 17:21:54
751
原创 从0开始的中后台管理系统-5（userList动态展示以及上传图片和弹出创建用户表单）
本文介绍了使用Ant Design实现用户列表管理功能。通过Table组件展示50条随机生成的用户数据，支持分页、搜索和重置功能。父组件通过ref调用子组件(CreateUser)的open方法实现新增用户弹窗，并传递更新方法以保证数据同步。表单包含用户ID、名称、邮箱、角色等字段，支持状态筛选和操作按钮。通过useEffect监听分页参数变化，动态获取数据并更新表格展示。整体实现了用户列表的CRUD基本功能，展示了Ant Design组件在React项目中的实际应用。
2025-08-08 16:55:10
442
原创 从0开始的中后台管理系统-4（用图表工具展示线性，饼型图表，以及其他页面的动态展示）
本文介绍了如何实现dashboard和用户列表页面。dashboard页面使用ECharts图表库展示数据，包括折线图、饼图和雷达图，通过自定义hook封装图表实例创建逻辑，并调用后端接口获取数据。用户列表页面采用Ant Design组件实现搜索表单和数据表格布局，包含用户ID、名称、邮箱等字段展示及操作按钮。文章详细说明了图表组件的封装实现过程、接口调用方法以及页面布局结构，同时提供了金额格式化、日期转换等工具函数。
2025-08-07 16:59:50
327
原创 从0开始的中后台管理系统-4（静态布局和登录（登出）功能以及状态管理工具zustand和resso）
本文介绍了基于React的后台管理系统实现方案，重点讨论了路由配置、登录跳转和状态管理。系统采用React Router实现页面路由，包括登录页、欢迎页和错误页等基础页面。在登录功能中实现了登出重定向和返回原页面功能，通过URL参数保存跳转路径。文章对比了两种轻量级状态管理工具zustand和resso的使用方法，展示了用户信息存储和更新的实现代码。系统采用Ant Design组件库构建UI，并实现了基本的布局结构，包含导航栏、侧边菜单和内容区域，为后续开发奠定了基础。
2025-08-06 16:59:24
980
原创 Session
本文介绍了Cookie的局限性以及Session技术的应用。Cookie存在存储量小、易被篡改的安全隐患，而Session通过在服务器存储用户数据，仅需在客户端保存Session ID来解决这些问题。文章详细说明了Express框架中express-session组件的使用步骤，包括安装、引入和配置中间件。同时探讨了Session持久化方案，通过session-file-store模块将Session数据保存到文件系统，避免服务器重启导致数据丢失。文中还提供了完整的代码示例，展示如何利用Session实现用
2025-08-05 09:25:17
1370
1
原创 基于Express+Ejs实现带登录认证的多模块增删改查后台管理系统
本文介绍了基于Express框架实现学生管理系统的关键功能开发。主要内容包括：1）采用模块化路由管理，将不同数据表操作分离到独立路由文件；2）实现学生数据的增删改查功能，通过JSON文件持久化存储数据；3）使用cookie-parser中间件实现登录状态持久化，设置maxAge控制有效期。文章阐述了路由本质即"数据表+操作方式"的核心理念，展示了从简单数据展示到完整后台系统的演进过程，包括路由模块化、数据操作和登录验证三大核心功能的实现思路。
2025-08-04 16:34:48
1363
原创 从零开始学Express，理解服务器，路由于中间件
本文介绍了使用Express框架进行Node.js后端开发的基础知识。文章首先解释了后端开发的必要性，然后详细讲解了Express的安装配置、服务器创建、路由处理等核心功能。主要内容包括：1) Express的基本使用，包括中间件和路由的概念；2) 使用nodemon工具实现代码热更新；3) GET/POST请求的参数处理方式；4) 实现简单的登录注册功能案例；5) 使用EJS模板引擎渲染动态页面。文章通过大量代码示例，帮助前端开发者快速掌握Express的核心功能，包括服务器搭建、请求处理、静态资源管理和
2025-08-03 17:27:43
1708
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人