自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 C 语言中 node * 与 node * 的语法辨析与风格探讨

语法等价node*与node *在 C 语言语法层面无本质区别,编译器视为同一写法;风格差异:前者强调 “指针类型的整体性”,后者强调 “变量的指针属性”;核心陷阱:多变量声明时,仅绑定紧跟的变量,需避免视觉误导;实践原则:团队风格统一 > 个人偏好,清晰性 > 简洁性。希望本文能帮助你彻底厘清这一细节问题,在实际开发中写出更规范、更易维护的 C 语言代码!

2025-11-21 14:51:38 564

原创 前端拦截机制深度解析:路由拦截与全局拦截的核心区别与实践

前端工程化开发中,路由拦截和全局拦截是两种核心拦截机制。路由拦截针对页面跳转行为,管控路由切换链路,典型场景包括登录校验、权限控制和跳转提示;全局拦截则覆盖全应用通用事件,如网络请求、错误捕获和资源加载。两者在拦截对象、作用范围、触发时机和技术实现上存在本质差异:路由拦截通过路由框架原生API实现,仅在路由变化时触发;全局拦截则需自定义全局监听,对特定事件实时响应。实际开发应根据需求选择,与路由强相关的场景用路由拦截,通用规则场景用全局拦截,两者常配合使用以构建完整的前端拦截体系。

2025-09-29 09:19:52 662

原创 详解浏览器开发者工具 Network 面板:Headers、Payload 等核心标签用法

Network 面板记录了页面加载过程中所有的 HTTP/HTTPS 请求,包括文档、脚本、样式、图片、接口等资源。每个请求对应一条记录,点击任意记录后,右侧会显示该请求的详细信息,而 Headers、Payload 等标签则是查看这些信息的不同维度入口。熟练掌握这些标签的用法,能显著提升调试效率。标签名主要作用核心内容实用场景Headers展示请求 / 响应的元数据请求方法、URL、状态码、请求头、响应头、查询参数、Cookie 等。

2025-09-14 00:28:50 1317

原创 HTTP 状态码背后的逻辑:从请求到响应的完整流程解析(含完整流程图)

HTTP状态码是服务器处理请求时的反馈信号,分为5类(1xx-5xx)。服务器处理流程分为6个阶段:基础校验(400)、身份认证(401)、权限验证(403)、资源定位(404)、参数校验(422)和业务处理(200/500)。状态码的出现顺序遵循请求处理逻辑,如401必在403前出现,404在401/403后触发。理解这种层级关系能帮助开发者快速定位问题:400检查请求格式,401验证身份,403确认权限,404排查资源路径,422核对参数,500则需查看服务器日志。掌握状态码的内在逻辑可显著提升调试效率

2025-09-13 15:26:34 886

原创 【零基础入门 Git 全流程:从安装到远程仓库的保姆级教程】

作为一名刚接触编程的小白,你是否曾被 "提交代码"" 拉取更新 ""解决冲突" 这些词汇搞得一头雾水?Git 作为目前最流行的版本控制工具,是每个开发者必备的技能。本文将以最通俗的语言,带你从零开始掌握 Git 的核心操作,全程文字引导 + 代码示例,保证零基础也能看懂!分类命令作用示例基础配置配置全局用户名(标识提交作者)git config --global user.name "张三"配置全局邮箱(建议与远程账号一致)本地操作git init初始化本地 Git 仓库git init。

2025-09-07 23:43:18 1026

原创 前后端中的回调机制:含义、作用与实现详解

回调(Callback)是指一个函数(或方法)被作为参数传递给另一个函数(或方法),并在特定事件发生或条件满足时被调用的机制。简单来说,就是 "你告诉我做完事后该怎么办,我做完了就按你说的办"。类型优点缺点适用场景同步回调1. 流程直观,易于理解2. 可立即获取结果3. 无状态同步问题1. 可能阻塞主线程2. 不适合耗时操作简单的参数验证、数据转换异步回调1. 非阻塞,提高系统吞吐量2. 适合处理网络请求等耗时操作3. 避免界面卡顿1. 流程复杂,调试困难。

2025-09-07 21:33:02 870

原创 前端令牌存储完全指南:从原理到实践(含代码示例)

令牌存储无 “银弹”,需根据安全性需求、生命周期、用户体验安全优先选 Cookie(HttpOnly)或内存存储;体验优先选 LocalStorage(持久化)或 SessionStorage(会话级);核心原则:敏感令牌不暴露给前端 JS,非敏感令牌需加密 + 防 XSS,同时做好 CSRF 防护。掌握不同存储方案的特性与适用场景,才能在实际项目中构建安全、可靠的身份验证体系。

2025-09-05 14:54:26 1288

原创 前端视觉交互设计全解析:从悬停高亮到多维交互体系(含代码 + 图表)

核心维度包含场景技术依赖设计原则关键目标元素状态交互悬停、激活、聚焦、禁用CSS 伪类(:hover/:active/:focus/:disabled)、transition包容性、一致性让用户 “知道能点什么”操作结果交互成功、错误、加载CSS 动画、JavaScript 事件监听即时性、有意义让用户 “知道成没成”状态过渡交互选项卡切换、折叠、模态框CSS transition/animation、JavaScript 状态管理适度性、可预测让交互 “流畅不跳变”

2025-09-05 13:14:12 1376

原创 Next.js App Router 中文件系统路由与页面跳转实践(以用户详情页面为例)

Next.js App Router 的文件系统路由机制,通过 “文件夹结构 +page.tsx入口” 的设计,彻底简化了前端路由的管理成本。在 “用户详情页面” 的实践中,只需通过静态文件夹定义基础路径、动态文件夹处理用户 ID 参数,并使用Link组件生成跳转链接,即可轻松实现页面间的无缝跳转。这种 “约定大于配置” 的理念,让开发者能更聚焦于业务逻辑,显著提升开发效率与项目可维护性。

2025-09-04 22:00:32 1641

原创 详解前端模块化导入中 .、.. 与 @ 的路径区别

.和虽为简单符号,却直接影响前端项目的模块化规范。和..是基于当前文件的相对路径,是简化绝对路径的配置型别名。在实际开发中,需根据目录层级和项目规范灵活选择,以写出清晰、可维护的导入代码。掌握路径规则,不仅能减少「模块找不到」的报错,更是前端工程化素养的基础体现。

2025-09-04 00:11:40 904

原创 【如何生成专业级 API 接口文档:从规范到实战】

专业的 API 接口文档是团队协作的 “基础设施”,其核心价值在于 “减少沟通成本,明确开发边界”。选择合适的工具(如 Swagger 适合后端驱动,YApi 适合团队协作),遵循 “基础信息 + 通用规则 + 接口详情 + 错误码” 的结构,结合代码示例和可视化调试,才能生成真正实用的文档。记住:文档不是 “写完就忘” 的产物,需随接口迭代同步更新,始终保持 “最新、最准、最易懂”。

2025-08-22 10:48:05 1066

原创 后端存储 vs localStorage:谁更适合你的前端数据存储需求?

后端存储指数据通过前端发送请求到服务器,最终存储在数据库(如 MySQL、MongoDB 等)中的方式。前端通过 API 接口(如 RESTful、GraphQL)与后端交互,实现数据的增删改查。核心特点:数据存储在服务器,依赖网络请求,受后端权限控制。后端存储和 localStorage 的核心区别在于数据存储位置和访问方式:后端存储强调安全性、持久性和同步性,适合核心数据;localStorage 强调本地高效访问和离线可用,适合临时或配置类数据。

2025-08-22 10:12:15 898

原创 HTTP 403 错误:后端权限校验机制深度解析

根据 HTTP/1.1 规范(RFC 7231),403 状态码的官方解释是:"服务器理解请求但拒绝授权访问"。服务器已成功接收并解析请求(排除 400 类语法错误)服务器能明确识别请求者身份(或确认其为匿名用户)服务器基于预设的权限规则判定请求者不具备访问资格403 错误是后端系统权限控制体系的 "哨兵",它的出现既是安全机制的体现,也可能暗示着权限设计的缺陷。理解 403 与其他状态码的本质区别掌握从日志到代码的全链路排查方法在安全合规与用户体验之间找到平衡点。

2025-08-21 20:48:42 1683

原创 【前端基础知识系列七】彻底搞懂 CSS position 属性:5 种定位方式的核心区别与实战用法

不需要特殊定位?用默认的static想微调元素位置,又不想影响其他元素?用relative想让元素 "浮" 在某个容器内(比如弹窗在对话框内)?用absolute(记得给父容器加relative想让元素始终显示在屏幕上(比如顶部导航)?用fixed想让元素滚动到一定位置后 "粘住"(比如列表分类标题)?用sticky(别忘加top等阈值)举个实际项目中的例子:很多网站的头部导航会用。

2025-08-19 14:08:00 1038

原创 React 状态管理:useState 与 useDatePersistentState 深度对比

useState是 React 官方提供的状态管理 Hook,用于在函数组件中声明和管理组件级局部状态。它的核心作用是存储组件运行时的临时数据,状态仅存在于组件挂载期间,依赖内存维护。基本用法jsx// 初始值为0从业务场景推测,是基于持久化需求封装的自定义 Hook,专门用于处理包含 Date 类型的状态。它通常会将状态存储在中,实现页面刷新 / 重新打开后状态不丢失,同时自动处理 Date 类型的序列化与反序列化(因为仅支持字符串存储)。基本用法(参考示例代码):jsx。

2025-08-18 20:21:14 697

原创 【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)

作用:存放静态资源,这些资源不会被 Webpack 处理包含内容index.html:应用的入口 HTML 文件favicon.ico:网站图标robots.txt:搜索引擎爬虫规则其他静态文件(如无需编译的 JS、CSS)示意图public/├── index.html 🌐 应用入口页面├── favicon.ico 🔍 网站图标├── robots.txt 🤖 爬虫规则└── manifest.json 📱 PWA配置文件。

2025-08-18 19:24:46 2274

原创 【前端基础知识系列五】页面滚动设置全解析:从基础到高级实战

平衡体验与性能。基础用 CSS 控制,复杂交互用 JS + 节流,动画优先用 IntersectionObserver,避免高频 DOM 操作。根据场景选择方案,优先使用原生 API 提升效率。希望本文的内容能帮助你更好地掌握前端滚动设置技巧,如果你有其他优秀的滚动实现方案,欢迎在评论区交流分享!

2025-08-18 18:59:43 1047

原创 【前端基础知识系列四】React中下拉菜单交互设计:从向下展开到向上适配的用户体验逻辑

下拉菜单的展示方向不是 “非此即彼” 的选择,而是基于空间环境的动态适配。无论是向下的自然延伸,还是向上的反向调整,核心目标都是让用户能完整、便捷地操作 —— 这正是交互设计中 “规则服务于体验” 的体现:技术逻辑(定位计算)最终要为用户体验(可见性、可操作性)让路。在实际开发中,需结合元素位置、视口尺寸等动态决策,让菜单 “始终出现在最合适的地方”。本文是「前端基础知识系列」的第四篇,聚焦React中下拉菜单交互设计。后续将持续更新更多前端开发必备的基础知识点。

2025-08-17 23:06:00 803

原创 【前端基础知识系列三】Tailwind CSS 核心语法:工具类使用规则详解(附速查表)

Tailwind 工具类的核心优势在于语义化命名和原子化拆分掌握命名规则后,看到类名就知道对应样式(如必然是无需编写 CSS 文件,直接通过类名组合实现样式,大幅减少上下文切换响应式前缀和状态前缀让交互与适配变得简单直观建议将本文作为速查表,开发时对照查找。遇到不确定的样式时,可参考Tailwind 官方文档的搜索功能 —— 直接搜索 CSS 属性(如 "flex"、"border-radius")即可找到对应的工具类。熟练后,你会发现开发界面的效率会有质的提升!

2025-08-15 13:41:34 1297

原创 【前端基础知识系列二】图标应用全场景覆盖:10 种核心方案适配 Web、App及小程序开发

合并多 SVG 为 symbol 集合,通过<use>标签复用,现代前端优选。html-- 定义symbol(可外链引入) -->"></symbol></svg>-- 引用图标 -->核心特点:一次加载多图标,矢量缩放,支持 CSS 控制;初期配置稍复杂。适用场景:中大型项目,需自定义图标且数量较多。小项目优先选组件库 / 字体图标;中大型项目推荐 Symbol 库或本地化字体;个性化动态需求考虑内联 SVG 或 Canvas;服务端驱动场景用后端生成。

2025-08-12 19:30:48 759

原创 【前端基础知识系列一】详解 uni-app 中 px 与 rpx 的区别及实战应用

px是我们最熟悉的传统长度单位,1px 理论上对应屏幕上的一个物理像素点(在 Retina 等高密度屏幕中,1px 可能由多个物理像素组成,但逻辑上仍作为最小单位存在)。它的核心特点是"固定不变":无论屏幕尺寸是 3.5 英寸的手机还是 10 英寸的平板,设置为100px的元素宽度始终是 100px。这种特性导致它在不同设备上的视觉占比差异很大 —— 在小屏手机上可能占满半屏,在大屏设备上却可能只占四分之一。rpx是跨设备适配的 "利器",通过比例缩放解决不同屏幕的显示差异;px。

2025-08-10 00:31:55 1594

原创 轻松搞定前端图标:Unicode 表情与本地图片的正确打开方式

本文介绍前端开发中两种图标实现方式:直接使用Unicode表情符号或本地图片图标。Unicode表情轻量高效,通过直接粘贴或编码方式调用,适合快速开发;本地图标可定制化,通过<image>标签引入,适合品牌需求。文章对比了两者的资源占用、加载速度和兼容性,建议根据项目需求选择:简单图标用Unicode表情,品牌定制用本地图片,或混合使用以兼顾效率与个性化。提供了详细的代码示例和样式配置建议,帮助开发者灵活运用不同图标方案。

2025-07-27 11:23:11 1316

原创 前端UI进阶:多平台通用的“高颜值”标签页式筛选功能全解析

本文介绍了移动应用中标签页式筛选系统的实现方案,针对传统顶部筛选栏进行优化。该系统采用主题特色+位置区域+热门优选三标签页结构,通过点击切换不同筛选面板,节省屏幕空间的同时提升交互体验。实现过程包括:1)构建标签页导航与筛选面板结构;2)设计筛选选项数据结构;3)实现标签页切换与面板展开收起逻辑;4)编写多条件筛选核心算法;5)添加CSS动画优化交互反馈。该方案具有视觉层次清晰、操作反馈明确等优势,特别适合民宿/酒店类应用的移动端开发,能有效提升用户查找效率和使用体验。

2025-07-25 14:11:34 665

原创 前端新手必看!5 类 CSS 核心属性通俗解析,让样式设计变简单

本文总结了前端开发中常用的CSS样式属性,主要分为五大类:1)盒模型与布局相关属性(width/height/margin/padding等),控制元素尺寸和间距;2)定位与层级属性(position/z-index/transform等),管理元素层叠和位置;3)视觉样式属性(background/color/font等),设置元素外观;4)动画与过渡属性(animation/transition),实现动态效果;5)弹性布局属性(flex/justify-content等),优化元素排列。

2025-07-24 20:47:08 992

原创 【微信小程序 uni-app 实战:Vue 语法从0到1打造高颜值活动列表(附实现代码)】

本文系统介绍了基于Vue单文件组件构建移动端活动列表页的实践方案。从template、script、style三个维度详细解析:模板层实现动态样式绑定、轮播图优化和分类标签交互;脚本层设计响应式数据、计算属性和核心业务逻辑;样式层运用scoped作用域、SCSS预处理器和交互动画效果。通过数据驱动视图的设计模式,结合性能优化与用户体验考量,打造出兼具视觉美感和交互流畅的活动页面,为Vue移动端开发提供了可复用的技术方案。

2025-07-24 14:40:00 2504

原创 【前端实战:从抽奖到倒计时!手把手教你用 JavaScript 打造超实用交互案例】

摘要:本文通过两个实战案例展示JavaScript的核心应用。案例一实现手机号码抽奖功能,利用setInterval定时器、键盘事件监听和随机数生成技术,模拟综艺节目的抽奖效果。案例二构建电商限时抢购倒计时,通过定时器和DOM操作实现自动更新时间的交互效果。两个案例分别演示了高频定时更新和周期性DOM操作的技术要点,并对比了不同业务场景下JavaScript的应用差异。文中还贴心地为初学者提供了常见问题解决方案,帮助开发者快速掌握JavaScript的定时器、事件处理和DOM操作等技能,让网页交互更加生动。

2025-06-06 01:24:37 760

原创 【前端开发入门必备:HTML 标签超全解析与常用 15 标签速查】

本文系统介绍了HTML标签在前端开发中的核心作用,首先列举了15个最常用的HTML标签(如div、span、a、img等)及其功能场景,帮助开发者快速上手。随后详细解析了HTML标签的8大分类:文档结构、文本语义、列表、媒体、表单、布局容器、表格和HTML5语义化标签,通过典型示例说明各类标签的具体应用。文章强调合理运用HTML标签对网页结构搭建、内容展示和交互实现的重要性,为开发者提供了全面的HTML开发知识框架。

2025-05-31 17:12:13 1263 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除