- 博客(94)
- 收藏
- 关注
RSS订阅原创 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
218
原创 Mongodb（文档数据库）的安装与使用（文档的增删改查）
本文介绍了MongoDB数据库的基本使用和图形化操作。首先解释了数据库作为数据存储仓库的作用，对比了传统文件存储方式。接着详细说明了MongoDB的安装配置过程，包括环境变量设置和客户端工具安装。重点演示了通过命令行和GUI工具进行数据操作：使用insertOne/insertMany插入文档，find/findOne查询数据，updateOne/updateMany更新文档（注意需使用$set操作符），以及remove删除文档（现建议使用deleteOne/deleteMany）。文章特别强调了_id字段
2025-08-18 16:32:00
263
原创 从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
242
原创 从0开始的中后台管理系统-7（司机列表展示以及面包屑和页签分页实现还有懒加载）
本文介绍了前端开发中面包屑导航和分页功能的实现方法，以及React组件懒加载的应用。面包屑通过递归查找菜单树匹配当前路由，生成路径数组展示；分页功能同样基于路由匹配，动态管理标签页数组。文章还详细说明了React.lazy结合Suspense实现组件懒加载的封装方案，通过动态导入和加载状态占位优化性能。这些技术方案采用Ant Design组件库和React Router实现，适用于中后台管理系统开发，能有效提升用户体验和页面加载效率。
2025-08-15 16:22:27
586
原创 从0开始的中后台管理系统-7（订单列表功能实现，调用百度地图打点以及轨迹图动态展示）
本文介绍了基于百度地图API实现地图打点和轨迹展示的技术方案。主要包括三个方面：1.地图打点功能通过Map实例的点击事件获取经纬度坐标，存储到数组并支持删除操作；2.轨迹展示功能利用Polyline绘制路径点数组，结合TrackAnimation实现轨迹动画效果；3.文件导出方案通过Blob对象处理二进制流数据，创建a标签模拟下载操作。实现过程涉及地图初始化、控件添加、事件绑定、数据存储等关键技术点，为前端地图应用开发提供了完整解决方案。
2025-08-14 17:09:23
348
原创 从0开始的中后台管理系统-6（添加用户以及绑定角色给用户动态添加权限，以及在layout父路由组件去进行路径跳转判断）
本文介绍了一个基于角色的前端权限设计方案。通过用户-角色-菜单的三级关联实现权限控制：1)用户绑定角色(如管理员/普通用户)，角色关联菜单权限；2)登录时将角色信息加密到token；3)访问时通过token解密获取角色，筛选对应菜单权限；4)在Layout组件中进行路由拦截，未授权访问跳转403页面。方案包含核心代码实现：路由配置中使用AuthLoader预加载权限数据，Layout组件进行路径校验，SideMenu组件递归渲染授权菜单。该设计实现了动态菜单展示和路由权限控制，确保用户只能访问授权资源。
2025-08-13 16:55:53
344
原创 从0开始的中后台管理系统-5（菜单的路径绑定以及角色页面的实现）
本文摘要：文章主要介绍了前端开发中实现菜单与路由双向绑定的方法，以及角色管理页面的构建。首先通过路由加载器获取权限列表，递归生成菜单路径，使用Ant Design的Menu组件实现导航栏与路由的绑定。随后详细描述了角色管理页面的实现，包括数据表格展示、搜索表单、新增/编辑角色等功能，通过useAntdTable和useImperativeHandle等Hooks实现父子组件通信和数据管理。整个系统实现了权限控制、菜单路由同步和角色管理等功能。
2025-08-12 16:58:23
342
原创 从0开始的中后台管理系统-5（部门管理以及菜单管理页面功能实现）
本文介绍了用户管理、部门管理和菜单管理功能的实现方式。前端通过表单发送请求携带参数访问接口，后端处理数据后返回给前端展示。部门管理页面与用户管理类似，但需要处理嵌套的上级部门结构。文章详细展示了部门管理的React组件代码，包括表单、表格和操作按钮的实现。后端使用递归函数处理部门数据的增删改查，特别是处理嵌套的children属性。路由设置部分展示了如何通过递归过滤、查找和更新部门数据，以及处理删除操作。虽然递归逻辑较为复杂，但核心思路仍是对数据进行筛选和操作。
2025-08-11 17:08:40
317
原创 从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
684
原创 从0开始的中后台管理系统-5（userList动态展示以及上传图片和弹出创建用户表单）
本文介绍了使用Ant Design实现用户列表管理功能。通过Table组件展示50条随机生成的用户数据，支持分页、搜索和重置功能。父组件通过ref调用子组件(CreateUser)的open方法实现新增用户弹窗，并传递更新方法以保证数据同步。表单包含用户ID、名称、邮箱、角色等字段，支持状态筛选和操作按钮。通过useEffect监听分页参数变化，动态获取数据并更新表格展示。整体实现了用户列表的CRUD基本功能，展示了Ant Design组件在React项目中的实际应用。
2025-08-08 16:55:10
392
原创 从0开始的中后台管理系统-4（用图表工具展示线性，饼型图表，以及其他页面的动态展示）
本文介绍了如何实现dashboard和用户列表页面。dashboard页面使用ECharts图表库展示数据，包括折线图、饼图和雷达图，通过自定义hook封装图表实例创建逻辑，并调用后端接口获取数据。用户列表页面采用Ant Design组件实现搜索表单和数据表格布局，包含用户ID、名称、邮箱等字段展示及操作按钮。文章详细说明了图表组件的封装实现过程、接口调用方法以及页面布局结构，同时提供了金额格式化、日期转换等工具函数。
2025-08-07 16:59:50
285
原创 从0开始的中后台管理系统-4（静态布局和登录（登出）功能以及状态管理工具zustand和resso）
本文介绍了基于React的后台管理系统实现方案，重点讨论了路由配置、登录跳转和状态管理。系统采用React Router实现页面路由，包括登录页、欢迎页和错误页等基础页面。在登录功能中实现了登出重定向和返回原页面功能，通过URL参数保存跳转路径。文章对比了两种轻量级状态管理工具zustand和resso的使用方法，展示了用户信息存储和更新的实现代码。系统采用Ant Design组件库构建UI，并实现了基本的布局结构，包含导航栏、侧边菜单和内容区域，为后续开发奠定了基础。
2025-08-06 16:59:24
947
原创 Session
本文介绍了Cookie的局限性以及Session技术的应用。Cookie存在存储量小、易被篡改的安全隐患，而Session通过在服务器存储用户数据，仅需在客户端保存Session ID来解决这些问题。文章详细说明了Express框架中express-session组件的使用步骤，包括安装、引入和配置中间件。同时探讨了Session持久化方案，通过session-file-store模块将Session数据保存到文件系统，避免服务器重启导致数据丢失。文中还提供了完整的代码示例，展示如何利用Session实现用
2025-08-05 09:25:17
1336
1
原创 基于Express+Ejs实现带登录认证的多模块增删改查后台管理系统
本文介绍了基于Express框架实现学生管理系统的关键功能开发。主要内容包括：1）采用模块化路由管理，将不同数据表操作分离到独立路由文件；2）实现学生数据的增删改查功能，通过JSON文件持久化存储数据；3）使用cookie-parser中间件实现登录状态持久化，设置maxAge控制有效期。文章阐述了路由本质即"数据表+操作方式"的核心理念，展示了从简单数据展示到完整后台系统的演进过程，包括路由模块化、数据操作和登录验证三大核心功能的实现思路。
2025-08-04 16:34:48
1335
原创 从零开始学Express，理解服务器，路由于中间件
本文介绍了使用Express框架进行Node.js后端开发的基础知识。文章首先解释了后端开发的必要性，然后详细讲解了Express的安装配置、服务器创建、路由处理等核心功能。主要内容包括：1) Express的基本使用，包括中间件和路由的概念；2) 使用nodemon工具实现代码热更新；3) GET/POST请求的参数处理方式；4) 实现简单的登录注册功能案例；5) 使用EJS模板引擎渲染动态页面。文章通过大量代码示例，帮助前端开发者快速掌握Express的核心功能，包括服务器搭建、请求处理、静态资源管理和
2025-08-03 17:27:43
1497
原创 Javascript模块化与Async语法糖
本文介绍了JavaScript模块化和异步编程的三种核心方案：1) CommonJS模块化方案，通过函数作用域封装模块，使用require/exports实现模块通信，适用于Node.js环境；2) ES Module现代模块化方案，采用静态结构的import/export语法，适合浏览器环境，默认严格模式；3) async/await异步编程方案，通过async函数返回Promise，使用await以同步方式处理异步操作，配合try/catch进行错误处理。三种方案各具特色：CommonJS同步执行，ES
2025-08-01 08:53:01
852
原创 我终于搞懂了Promise，并且手写了一遍。
摘要：文章深入解析了Promise如何解决回调地狱问题。Promise通过将异步返回值存储起来，使用.then()实现链式调用，避免了多层嵌套回调。其核心机制是利用JS的微任务队列，确保resolve存值后立即执行.then()回调。手写Promise的实现思路包括：定义类管理状态和结果、实现resolve/reject方法、处理异步回调缓存、支持链式调用等。关键在于理解Promise本质是将异步操作同步化，通过状态管理和任务队列协调执行顺序。
2025-07-31 10:31:20
1153
原创 Promise完全体总结
本文介绍了Promise的基本原理和使用方法，用于解决异步编程中的回调地狱问题。Promise是一个存储异步操作结果的对象，通过resolve和reject方法存储数据，并通过then、catch和finally方法处理数据。重点讲解了Promise的三种状态（pending、fulfilled、rejected）和链式调用的实现方式，通过返回新的Promise实现多次异步操作的有序执行。最后指出Promise虽然解决了回调嵌套问题，但要深入理解还需掌握微任务/宏任务等概念。
2025-07-30 16:05:24
796
原创 Node.js以及异步编程
本文介绍了服务器的概念及其运作原理，将服务器比作餐厅服务员，解释其在客户端和数据库之间的中介作用。重点讲解了Node.js作为服务器端JavaScript运行环境的特点：单线程、异步、非阻塞和统一API。文章还介绍了nvm工具管理Node.js版本的方法，以及Node.js的两种运行方式。最后详细探讨了异步编程机制，比较了同步与异步的区别，指出回调函数的局限性以及Promise在解决回调地狱问题中的重要作用。全文通过生动的比喻和代码示例，帮助读者理解服务器编程的核心概念。
2025-07-30 10:05:53
693
原创 JS的基础概念--结束
本文总结了JavaScript进阶概念，包括对象内存结构、原型机制、new运算符原理、对象拷贝方法、高阶函数、闭包和递归等核心知识点。作者表示已完成前端基础学习，掌握了项目开发流程，现在需要通过实际项目来巩固所学内容。文章重点梳理了6个关键概念，为后续项目实践奠定理论基础。
2025-07-29 16:41:34
598
原创 JS的基础概念-函数
本文系统总结了JavaScript函数的核心概念：1)函数作为一等公民的特性；2)三种定义方式（声明式、表达式、构造函数）；3)参数处理及回调函数；4)返回值差异（常规函数与箭头函数）；5)作用域链机制；6)window对象关系；7)变量/函数提升现象；8)调试技巧与IIFE；9)this绑定规则及箭头函数的特殊表现；10)严格模式影响。内容聚焦关键知识点，通过简明案例帮助理解函数核心机制，为后续深入学习奠定基础。
2025-07-28 21:32:11
552
原创 js基础概念-2流程控制
本文介绍了JavaScript流程控制相关概念，包括代码块、条件语句(if/else、switch)和循环结构(while/do-while/for)，以及break/continue的使用。还涉及一些实用技巧：isNaN()判断数值，Math数学工具对象，以及console.time()用于代码性能测试。这些基础知识对掌握JS单线程下的流程控制至关重要。
2025-07-27 17:38:35
632
原创 js基础概念-1
本文回顾了JavaScript的基础知识，包括其解释性语言特性、单线程异步编程模式，以及基于ECMAScript规范的特点。内容涵盖JS入门基础（如HelloWorld、三种编写方式）、基本语法（字面量、变量、常量标识符等）、数据类型（数值、字符串等）及其转换，以及各类运算符的使用（算术、赋值、逻辑运算符等）。作者强调这些基础概念需要通过实践来掌握，建议通过多写代码来自然而然地理解运用，而非死记硬背。
2025-07-25 19:55:14
674
原创 从0开始的中后台管理系统-3（架构设计完结）
本文介绍了中后台管理系统的前端架构设计关键环节。主要包括：1）localStorage封装，解决对象存储问题，通过JSON转换实现数据持久化；2）环境变量配置，区分开发/测试/生产环境的服务器地址，支持多环境切换；3）金额和日期格式化工具封装，提供标准化的数据显示方案。这些基础架构设计为后续项目实战（如登录模块）奠定了基础。
2025-07-24 10:29:57
846
原创 分享：脑子一热学前端的两个月，不想再回头了
摘要：一名迷茫的软件工程专业大三学生，通过两个月的前端实战学习实现了蜕变。文章记录了与一位求职受挫学长的对话，引发对学习方法和职业规划的深刻思考。作者坦言自己并非志向远大，而是决心掌握一门谋生技能，抱着"来都来了"的心态坚持学习。他提出趁着年轻勇敢尝试的观点，认为七八年的专注投入无论结果如何都值得。最后鼓励迷茫者从学习一门技术开始行动，强调"在路上"比原地踏步更重要。
2025-07-24 08:44:25
490
原创 Axios封装以及添加拦截器
本文介绍了如何使用Axios封装前端HTTP请求层，提升代码复用性和可维护性。主要包括：1）创建Axios实例并配置baseURL和超时；2）添加请求拦截器自动处理token和loading；3）配置响应拦截器统一处理错误和业务状态码；4）封装带泛型的get/post方法支持类型提示；5）提供模块化调用示例。通过这种封装，实现了请求配置统一管理、自动错误处理、类型安全等目标，使前端API调用更规范高效。
2025-07-23 08:52:04
987
原创 从0开始的中后台管理系统-2
本文介绍了中后台管理系统的架构设计实现过程。首先规划了项目目录结构，明确定义不同功能模块的文件夹划分。接着详细讲解了路由封装的两种方式：使用createBrowserRouter API和useRoutes钩子，并推荐了前者以便实现路由拦截等功能。然后重点阐述了Axios请求的封装方法，包括基础请求处理和拦截器实现，通过请求/响应拦截器统一处理token、loading状态和错误提示。最后介绍了Loading过渡效果的具体实现，通过计数器机制确保多个请求时的正确显示逻辑。文章提供了从项目结构到核心功能模块的
2025-07-22 20:57:15
968
原创 从0开始的中后台管理系统
本文记录了从零开始开发中后台管理系统的完整流程。首先介绍了企业级开发流程：从需求文档、原型设计到开发排期、测试上线的全流程。作为前端开发者，主要工作是接口文档评审、开发实现和自测。接着详细说明了技术选型（React18+TS+AntD）、项目基础配置（ESLint/Prettier/Vite）、系统架构设计等关键环节。重点强调了目录结构规划、代码规范配置和开发环境搭建等实战经验，为后续具体功能开发奠定基础。文章以实际项目为导向，系统梳理了前端工程化开发的完整路径。
2025-07-21 21:15:53
1090
原创 Http和Https
HTTP是客户端与服务端通信的应用层协议，通过请求/响应报文实现数据交互。请求报文包含方法、URL和版本，响应报文包含状态码和原因短语，两者都包含首部字段和可选主体。HTTP默认使用TCP持久连接，通过Cookie解决无状态问题。HTTPS在HTTP基础上通过TLS/SSL加密传输，采用非对称加密交换密钥后转为对称加密通信，并利用SSL证书验证服务器身份。TLS握手过程通过交换随机数和加密套件协商生成会话密钥，确保通信安全性和身份认证。
2025-07-20 13:16:08
1599
原创 TypeScript
这篇博客介绍了TypeScript(TS)的快速入门指南。TS作为JavaScript的超集，通过静态类型检查在代码运行前发现错误，提高代码质量。文章详细讲解了TS的安装使用(全局安装typescript)、编译方式(命令行和自动化编译)、新增数据类型(any/unknown/never等)、面向对象特性(类修饰符、抽象类)、接口和泛型等核心概念。TS虽然需要更多代码，但能大幅提升代码可维护性，特别适合大型项目。作者强调TS的优势在于开发体验的改善，建议开发者从简单项目开始逐步掌握TS，最终实现"
2025-07-18 15:26:00
1323
1
原创 React钩子HOOK
本文总结了React函数组件中常用的钩子函数及其使用场景。主要包括：useState用于状态管理，useEffect处理副作用，useRef保存DOM引用或可变数据，useContext实现跨组件数据共享，useReducer管理复杂状态逻辑，useCallback和useMemo用于性能优化，useImperativeHandle控制子组件暴露的方法，以及useDeferredValue和useTransition处理渲染性能问题。文章还比较了useEffect、useInsertionEffect和us
2025-07-17 10:55:13
820
原创 登录注册案例
本文介绍了使用React实现登录注册权限系统的完整流程。主要包含：1）使用RTK Query处理登录注册API请求；2）通过Redux存储登录状态（isLog、token、user信息）；3）实现路由权限控制，未登录用户无法访问受限页面；4）使用localStorage持久化登录状态；5）设置token自动过期功能；6）在请求头中添加JWT实现服务器验证。整个过程涵盖了表单处理、状态管理、路由守卫、数据持久化等完整的前端权限控制方案。
2025-07-16 15:29:37
807
原创 Token和cookie和jwt的关系
本文探讨了Web开发中登录注册功能的实现原理，重点解释了HTTP无状态特性带来的身份验证问题。文章介绍了两种解决方案：传统Cookie机制和现代JWT(JSON Web Token)技术。在Cookie方案中，服务器通过Set-Cookie响应头设置用户标识，浏览器后续请求自动携带该标识；而JWT方案则通过加密令牌实现前后端分离，包含header、payload和signature三部分，存储在Cookie中作为身份凭证。两种方式都解决了HTTP无状态导致重复登录的问题，其中JWT更具扩展性和安全性。
2025-07-16 09:11:20
816
原创 React-router
React Router 解决 SPA 刷新跳转问题 摘要：React SPA 应用存在刷新页面返回首页的问题。React Router 通过客户端路由将 URL 映射到组件，实现不依赖服务器的路由切换。安装 react-router-dom 后，使用 Route 组件注册路由，路径参数用 /:id 格式。Link/NavLink 实现导航，NavLink 提供 isActive 状态。常用钩子包括 useParams 获取参数、useNavigate 跳转、Outlet 展示嵌套路由、Navigate 组
2025-07-15 10:32:43
616
原创 PTKQuery
摘要：本文介绍了Redux Toolkit Query（RTKQ）的使用方法，重点讲解了如何通过API与服务器交互获取数据。主要内容包括：1）RTKQ的基本配置（创建Api对象、设置baseUrl和endpoints）；2）在store中注册API和中间件；3）使用钩子函数获取和展示数据；4）实现学生信息的增删改查操作。文章通过具体代码示例演示了getStudents、addStudent等方法的实现，并提及了缓存管理、标签系统等高级功能。RTKQ简化了Redux与服务器的交互流程，适用于需要从数据库动态获
2025-07-14 20:18:59
898
原创 Redux-2
本文介绍了Redux Toolkit(RTK)的基本使用流程。通过createSlice方法创建包含reducers和actions的切片，配置store后全局注入。在组件中使用useSelector获取state，useDispatch调用action。重点展示了如何组织多个切片文件，并通过示例代码演示了数据修改操作。文中还提及了文件拆分和index.js默认导入的技巧，完整呈现了RTK简化Redux开发的核心用法。
2025-07-14 09:21:19
667
原创 终端输入命令，背后发生了什么--shell，tty，terminal解析
日常编程会接触到命令行打开一个窗户输入命令（比如切换目录运行程序等），这样一个黑底白字可以输入指令的窗口有很多名字，这里是zsh,但是还有shell,bash,cmd,terminal,console,powershell,不能说搞混，甚至我一直以为大概这些都是指一个东西，打开一个终端，输入命令，或者安装配置一些依赖，而且也没有影响到写代码或者按照依赖，唯一的前提就是在项目文件夹打开这个终端。
2025-07-13 13:30:53
943
原创 Redux
Redux是一种可预测的JavaScript状态管理容器，核心思想是通过单一数据源和纯函数管理应用状态。文章首先介绍了Redux的基本概念：1) 使用单一store存储全局状态；2) 通过dispatch派发action对象触发状态变更；3) 纯reducer函数处理action并返回新状态。通过计数器示例演示了基础用法，包括创建reducer、生成store、订阅状态和派发action。重点介绍了现代Redux开发推荐的Redux Toolkit工具包，其简化了传统Redux的繁琐流程，使用createS
2025-07-13 09:53:49
799
原创 ajax和XMLHttpRequest以及fetch
本文探讨了前端网络请求的实现原理，从底层XMLHttpRequest(XHR)到现代fetch API的演进。作者通过实践代码演示了XHR的基本使用方式，包括open、send方法和readyState状态判断，解释了Ajax技术（异步JavaScript和XML）实现局部更新的原理。进一步用Promise封装XHR请求，对比了原生fetch API的简洁性，指出fetch实质上是对XHR和Promise的封装。文章强调理解底层原理的重要性，虽然现代工具如fetch和axios简化了开发，但掌握XHR等基础
2025-07-11 10:48:56
1239
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人