- 博客(80)
- 收藏
- 关注
RSS订阅原创 我总结了前端实习的算法必刷路线！（附力扣题号）
只要有一个 reject 就直接 reject，全部 resolve 才 resolve。实现一个带并发限制的异步调度器，保证同时运行的任务最多有 2 个。循环引用 (Circular Reference) 必须解决。这部分题目直接在 LeetCode 上搜题号练习。的算法题，面试时通常是在在线编辑器（白板）里写。的异步执行即可，不需要完全符合 A+ 规范。这部分考察你将数据结构应用到实际业务中的能力。来简化实现，但面试要求手写链表结构更有说服力。将扁平数组转换为树形结构。
2026-01-01 21:48:37
609
原创 Next.js路由系统
Next.js作为React生态系统中最受欢迎的框架之一，其路由系统经历了从传统客户端路由到服务端路由的演进，最终形成了当前基于文件系统的两种路由系统：应用路由（App Router）和页面路由（Pages Router）。这两种路由系统各有特点，适用于不同场景，共同构成了Next.js强大的路由能力。本文将详细介绍Next.js最新路由系统的实现方式，从最基础的静态路由到复杂的动态路由、API路由和权限控制，每种情况都提供文件路径结构说明和代码示例，帮助开发者全面掌握Next.js路由的使用方法。Next
2025-11-03 22:24:54
371
原创 css面试题2
伪类（Pseudo-class）描述元素的某种状态或位置（如:hover伪元素（Pseudo-element）创建一个不存在于 HTML 中的虚拟元素（如::before“在不同设备/屏幕尺寸下，展示最适合的样式。z-index“不是适配设备，而是适配内容。它通过流体布局 + 弹性媒体 + 媒体查询的组合，让网页像水一样自然填充任何容器用户体验一致（无论设备）开发维护高效（一套代码）未来兼容性强（新设备自动适配）
2025-11-01 16:42:20
785
原创 现代CSS布局技术：Flex与Grid布局全面解析
Grid布局的核心在于其行列定义，这主要通过和属性实现。列定义固定值：如定义两列，宽度分别为100px和200px百分比：如30% 70%按百分比分配容器宽度弹性单位：如1fr 2fr按比例分配剩余空间（1:2）函数组合：如定义列宽的最小和最大值重复模式：如创建3列，每列宽度相等行定义容器 {gap: 20px;随着Web技术的不断发展，Flex和Grid布局已成为现代前端开发的标准布局工具。
2025-10-30 16:44:27
1006
原创 css面试题1
方法占据空间？可交互？屏幕阅读器可读？触发布局重排？❌❌❌✅✅✅（默认）❌❌opacity: 0✅✅✅❌移出视区（如✅（但视觉不可见）✅✅❌❌（需清 padding/border）❌✅✅transform隐藏✅（布局位置不变）✅✅❌<link>是 HTML 的“亲儿子”，加载快、性能好；@import是 CSS 的“内部工具”，适合模块化，慎用于主文档。优先用<link>，让页面更快呈现！transition特性transitionanimation。
2025-10-29 23:09:40
411
原创 HTML面试题
属性全称作用是否立即加载常见标签href建立链接或引用关系否（按需加载）<a><link>srcSource嵌入资源到页面中是（立即加载）<img><script><iframe>htmlasync是“谁快谁先跑”，defer是“等 DOM 建好再按顺序跑”。srcset让浏览器根据设备屏幕大小和像素密度，智能选择最合适的图片加载，兼顾清晰度与性能。html类型是否换行可设宽高可包含块级元素示例块级元素✅ 是✅ 是✅ 通常可以<div><p><section>行内元素。
2025-10-28 19:08:36
636
原创 Nivo图表库全面指南：配置与用法详解
Nivo图表库使用指南：核心图表配置解析 Nivo是React生态中基于D3.js的高定制化可视化库，通过模块化设计和响应式组件简化了复杂图表的创建流程。本文重点介绍两种核心图表配置： 饼图配置：通过ResponsivePie组件，支持环形图(innerRadius)、扇形间隔(padAngle)和多重标签系统(径向/扇形标签)。典型配置包括数据格式要求、颜色方案选择和交互式图例设置。 条形图配置：使用ResponsiveBar组件时需定义keys(数值字段)和indexBy(分类字段)，支持双轴配置、网格
2025-10-18 20:00:55
1286
原创 FullCalendar：现代Web应用中的专业日历解决方案
FullCalendar是一款开源的JavaScript日历库，采用微内核+插件架构，支持多种视图模式和交互功能。它提供npm和CDN两种安装方式，通过丰富的配置项实现高度定制化，包括语言、视图样式和事件处理等。核心优势在于模块化设计，开发者可按需引入功能插件，避免代码冗余。FullCalendar支持静态事件配置和动态数据源，能与主流前端框架集成，适用于从简单日程展示到复杂资源调度的各类Web应用场景。
2025-10-18 18:17:20
1162
原创 Yup与Formik配合应用详解及2025年最新校验方法解析
本文深入解析了Yup与Formik在React表单验证中的协作机制。Formik负责表单状态管理和交互处理，Yup则专注于验证规则定义，二者结合提供声明式的表单解决方案。文章通过完整代码示例展示了实际应用场景，包括表单字段定义、Yup验证规则配置以及Formik的状态管理流程。随着技术发展，2025年已出现Zod等更先进的替代方案，开发者可根据项目需求选择最适合的验证工具。该内容为React开发者提供了从传统方案到最新技术的完整表单验证知识体系。
2025-10-18 17:20:40
977
原创 MUI组件库与主题系统全面指南
MUI（Material-UI）是一个基于React的UI组件库，严格遵循Google的Material Design设计规范。它最初被称为Material-UI，后更名为MUI以简化品牌识别。MUI提供了一套完整的组件库，涵盖表单、布局、导航、反馈、数据展示等多个方面，开发者可以像积木一样组合这些组件，快速构建出美观、一致且功能完备的用户界面。MUI的核心优势在于其高度可定制化和响应式设计能力。通过主题系统，开发者可以轻松调整组件的外观和感觉，使其与品牌风格保持一致；
2025-10-17 23:50:26
977
原创 React开发模式解析：JSX语法与生命周期管理
特性ReactVue设计理念差异数据流单向数据流：props从父组件传递给子组件双向数据绑定：视图与数据自动同步React强调显式控制，Vue强调隐式响应渲染机制虚拟DOM + diff算法虚拟DOM + 响应式追踪React需要手动控制渲染，Vue自动优化钩子函数明确的阶段划分，强调组件状态围绕实例完整生命周期React关注组件状态变化，Vue关注实例生命周期学习曲线学习曲线较陡峭，需要掌握JSX和组件化思维学习曲线较为平缓，提供模板语法。
2025-10-17 23:49:39
1260
1
原创 浏览器并行执行机制解析
浏览器进程模型主要有四种：Process-per-site-instance（默认模式，同一站点的标签页共享进程）、Process-per-site（同域名的标签页共享进程）、Process-per-tab（每个标签页独立进程）和Single Process（传统单进程模式）。这种机制实现了"并发"效果，但本质上仍是单线程交替执行，而非真正的并行。这种设计既保留了JavaScript的单线程确定性优势，又充分利用了现代多核CPU的并行计算能力，为网页应用提供了更流畅的用户体验和更高的执行效率。
2025-09-25 17:47:49
480
原创 Interview X,新一代面试工具
三个层面的深度创新，成功地将传统面试练习工具，升级为一个能够提供实时、深度、个性化反馈，并能伴随用户长期成长的全生命周期职业发展智能体。综上所述，Interview X项目通过在。需要联系，适合作毕设、练手项目！还有安卓端完整系统，不赘述。
2025-09-16 20:37:23
937
原创 Vue3 项目接口对接与响应式渲染最佳实践
本文总结了Vue3项目接口对接与响应式渲染的最佳实践。首先推荐封装axios请求工具并模块化管理API，同时保持TS类型定义与接口文档同步。其次强调响应式数据管理要使用整体替换而非原地修改，并推荐用computed包装模板数据。文章还提供了分页处理、错误提示等实用技巧，并分析了"假性响应"问题的解决方案。这些实践能有效提升项目健壮性和开发效率。
2025-07-21 14:58:42
773
原创 Vue3 开发——评论区“假性响应”与“暂无评论”问题排查实录
Vue3评论区开发中遇到"假性响应"问题：接口返回数据但页面始终显示"暂无评论"。排查发现，使用Object.assign(commentsPage.value, pageData)方式更新数据可能导致响应式失效。解决方案包括：1)改用commentsPage.value = pageData直接赋值；2)用computed包装数据(const commentRecords = computed(() => commentsPage.value.records
2025-07-21 14:51:20
686
原创 带预览效果的批量水印生成器
Watermark GUI Utils 是一个用于批量为照片添加水印的工具，支持自动识别相机型号、镜头型号、拍摄参数等信息，并将其美观地添加到图片上。本项目的最大特色是：集成了现代化的 PyQt5 图形界面，所有设置一目了然，实时预览，零命令行门槛。
2025-07-18 03:07:00
1143
原创 React Hooks全面解析：从基础到高级的实用指南
自定义Hooks是React中逻辑复用的核心机制，通过封装可重用的组件逻辑，使代码更加模块化和可维护。自定义Hooks应以"use"开头命名，遵循React Hooks的使用规则。表单验证是Web应用中的常见需求，通过自定义Hooks可以将验证逻辑封装，使组件保持简洁。// 实时验证if (!validate();// 处理表单输入// 验证表单if (!if (!使用场景复杂表单验证跨组件共享表单逻辑表单状态管理最佳实践。
2025-07-05 19:02:48
1239
原创 Sass详解：功能特性、常用方法与最佳实践
Sass作为一种CSS预处理器，已经从最初的简单扩展发展成为功能丰富的样式编程语言。通过变量、嵌套、混合宏、继承、控制指令等功能，Sass显著提升了样式表的可维护性和开发效率。在实际项目中，Sass可以用于实现主题系统、响应式设计、工具类生成等复杂功能，同时与现代构建工具链无缝集成。保持代码简洁：避免过度嵌套和复杂的控制逻辑，保持样式代码的可读性。合理组织文件：采用模块化结构，按功能划分文件，使用Partial和主文件集中管理。遵循命名规范：使用连字符分隔的变量名，避免全局污染，必要时使用命名空间。
2025-07-04 10:33:41
1040
原创 WebSocket技术全面解析：从历史到实践
将为WebSocket提供更多可能性。RFC 6455允许通过扩展定义自定义帧类型，这为特定领域的应用提供了更多灵活性。未来可能出现更多针对特定场景的WebSocket扩展，如低延迟视频传输、高吞吐量数据推送等。
2025-07-01 16:24:57
1438
原创 JavaScript变量声明关键字深度解析：var、let与const
通过深入理解var、let和const的作用域特性、变量提升机制、重复声明规则和值修改限制，开发者可以编写出更安全、更高效、更易维护的JavaScript代码。这些关键字的选择不仅影响代码的可读性，还关系到程序的执行效率和内存管理，是JavaScript编程中的基础但至关重要的知识。这些机制差异直接影响了变量的行为，例如在循环中使用let可以为每次迭代创建独立的变量环境，而使用var则会导致所有迭代共享同一个变量。这些特性直接影响了变量在代码中的使用方式和安全性。这一差异是理解变量声明行为的关键。
2025-07-01 11:17:54
817
原创 深入解析 Cookie、LocalStorage 和 SessionStorage
特性Cookie设计初衷在客户端和服务器间传递状态信息持久化存储较大客户端数据会话级存储客户端数据存储容量很小 (~4KB)，数量有限较大 (5-10MB)较大 (5-10MB)生命周期可设置过期时间（持久 Cookie）或会话结束（会话 Cookie）永久存储，直到用户或 JS 清除当前标签页/窗口会话结束时清除作用域由DomainPath限定同源策略（协议+域名+端口）同源策略（协议+域名+端口）标签页隔离否（同域同路径共享）否（同源页面共享）是（每个标签页独立）随 HTTP 请求发送。
2025-06-29 16:13:03
1449
原创 Node.js到底是什么
随着 TypeScript 的深度整合和云原生技术的普及，Node.js 不仅巩固了其在后端开发的地位，还逐步渗透到 AI、IoT 等新兴领域。对于开发者而言，掌握 Node.js 及其生态工具（如 Express、npm）是构建高效、可扩展应用的关键。我想像是npm、vite这些名词大家都很熟悉，对它们的作用也有大致印象，但是可能都像我一样不明白Node.js到底是什么，这里给大家带来一个简单介绍。Node.js 从一个实验性项目发展为现代 Web 开发的核心工具，其成功源于。
2025-06-27 15:22:38
1638
原创 Vue SPA 路由跳转无法回到顶部问题排查与解决
SPA 项目中，路由跳转"回到顶部"问题本质是滚动容器定位+内容区布局。预留导航栏空间滚动条可见用 scrollIntoView 或 scrollTop 控制实际滚动容器就能优雅解决绝大多数场景下的"回到顶部"问题。
2025-06-25 23:47:14
1171
原创 仿Apple官网设计风格
苹果风格核心是简洁、明亮、渐变、圆角、主色点缀和细腻动画。通过分区渐变、卡片高光、主色渐变标题/icon、平滑动画，极大提升了页面的现代感和高级感。可根据实际品牌色微调主色系，或根据内容适当调整分区背景色。动画可进一步丰富，如卡片 hover 3D 效果、按钮波纹等。
2025-06-25 23:46:13
666
原创 全局配置Axios后的api使用指南
本文介绍了分层封装axios后的API使用方法，主要包括：1.基础GET/POST请求；2.类型安全请求实现；3.文件上传处理；4.自定义错误处理；5.请求配置与取消；6.响应拦截器应用；7.最佳实践如创建API服务模块。重点展示了如何通过http.get/post等方法发送请求，使用TypeScript类型定义确保类型安全，并提供统一错误处理、文件上传等常见场景的实现方案，最后建议将API逻辑封装为独立服务模块。全文通过代码示例演示了从基础到进阶的完整API调用方案。
2025-06-23 23:55:25
400
原创 TypeScript Axios 封装与 API 设计深度实践
本文分享了一个基于TypeScript的Axios封装方案，采用分层架构设计，包含基础层、错误处理层、API服务层和类型定义层。方案提供了预配置的Axios实例，实现请求/响应拦截器、类型安全的HTTP方法封装以及标准化的错误处理机制。通过泛型应用确保类型安全，并展示了在Vue组件中的实际使用方式。文章还总结了最佳实践，包括类型安全优先、拦截器职责单一化、API版本管理等技巧，帮助开发者构建更健壮的前端请求处理方案。
2025-06-23 23:47:41
1184
原创 深入浅出PHP
设计，尤其擅长与HTML结合，生成动态网页内容。它简单易学、功能强大，是构建动态网站和Web应用程序的核心工具之一。，适合从静态网页升级到动态网站的开发者。通过学习PHP，你可以快速构建功能丰富的Web应用，并借助其庞大的社区资源解决开发中的问题。每次在宝塔上面看到PHP我都很疑惑这是啥，于是去了解了一下。PHP代码嵌入HTML中，通过。
2025-06-20 10:42:36
663
原创 sql注入
SQL注入是一种常见的网络安全攻击手段，攻击者通过在应用程序的输入字段中插入恶意SQL代码，篡改数据库查询逻辑，从而非法访问、修改或删除数据库中的数据。通过以上方法，可大幅降低SQL注入攻击的风险，保障数据库和应用程序的安全。永远为真，攻击者可绕过身份验证。
2025-05-22 21:34:30
1036
原创 Bcrypt 技术深度解析：从原理到实践
相比传统哈希算法（如 MD5/SHA），它有效防御了彩虹表攻击和暴力破解，同时通过内存消耗优化增加了 GPU 并行攻击的成本。在实际应用中，开发者应结合具体场景选择合适的工作因子，并依赖成熟的库（如。Bcrypt 会自动生成 16 字节的盐值，并将其编码为 Base64 格式嵌入最终的哈希字符串中。每个密码在哈希时都会生成一个唯一的随机盐值，确保即使相同密码生成的哈希值也不同。算法（Blowfish 的改进版）进行多轮迭代加密，增加计算复杂度。）实现密码的加密与验证，确保用户数据的安全性。
2025-05-22 11:50:25
1695
原创 Bcrypt 转换原理深度解析
Bcrypt 是一种安全的密码哈希算法，其核心思想是通过盐值、多轮迭代加密和 Blowfish 密钥扩展将密码转换为不可逆的哈希值。其转换过程包括输入参数（密码、盐值、工作因子）、密钥扩展（EksBlowfishSetup）、加密固定字符串和输出格式编码。Bcrypt 通过盐值的随机性、慢哈希设计和恒定时间比较机制，有效抵御暴力破解和侧信道攻击。其工作因子控制计算复杂度，增加破解成本。Bcrypt 广泛应用于多种编程语言（如 Node.js、Java、Go）中，用于生成和验证密码哈希，确保用户密码的安全性。
2025-05-22 11:45:49
1269
原创 Typescript中的对象类型
创建对象字面量时，若包含目标类型未声明的属性，TypeScript 报错。固定属性类型必须符合索引签名类型，否则报错。只限制顶层属性，不影响内部对象的可变性。限制所有属性值类型一致，适用于字典模式。固定属性类型必须是索引签名类型的子集。使用解构赋值设置默认值，简化代码。标记属性为可选，调用时可省略。：命名复用性强的对象类型。：适用于更复杂的类型组合。：直接在函数参数中声明。描述未知属性名的对象。继承并扩展其他接口。：将所有属性变为可选。：将所有属性变为必填。：将所有属性设为只读。防止通过索引修改值。
2025-05-10 10:04:18
1199
原创 Typescript中的接口
是一种核心的类型定义工具，用于描述对象的形状（shape），即对象必须包含哪些属性、方法及其类型。接口的主要目的是提供一种。，确保代码的类型安全性和一致性。：可选属性必须出现在接口的末尾。TypeScript 中的。
2025-05-10 10:03:32
861
原创 利用flask设计接口
GET 请求示例app = Flask(__name__) # GET 请求示例 @app . route('/api/greet' , methods = [ 'GET' ]) def greet() : name = request . args . get('name' , 'World') return jsonify({name }!
2025-05-04 11:29:28
940
原创 TypeScript中的泛型函数
作为泛型参数的默认名称（避免与 TypeScript 内置类型。是类型参数（Type Parameter）。如果希望限制泛型参数的类型（例如，要求元素必须有。是用户自定义的名称，可以换成其他任意名称（如。，即数组的元素类型由泛型参数。是用户自选的名称，但通常用。
2025-04-29 09:13:56
601
原创 TypeScript之基础知识
接口（Interface）：类型别名（Type Aliases）：3. 函数类型4. 泛型5. 联合类型与类型守卫6. Vue 中的 TypeScript 使用6.1 安装与配置Vue CLI 项目：Vite 项目：手动配置：安装依赖：创建 ：6.2 Vue 组件的 TypeScript 写法Options API：Composition API：6.3 Props 类型定义6.4 响应式数据与类型推断6
2025-04-28 22:14:19
1012
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人