- 博客(153)
- 收藏
- 关注
RSS订阅
原创 fetch+ReadableStream实现SSE推送实时踢人下线
本文介绍了基于SSE(Server-Sent Events)的踢人下线功能实现方案。系统采用前后端分离架构，前端通过SSEClient建立长连接，后端使用SSE管理器维护连接池和消息队列。核心功能包括：1) 前端通过cookie验证建立SSE连接；2) 后端实时推送下线事件；3) 微信小程序降级为轮询机制；4) 心跳检测保持连接活性。实现要点包含连接注册、消息分发、设备黑名单管理等功能模块，确保用户在多设备登录时能及时收到强制下线通知。系统通过SSE长连接与轮询降级相结合的方式，实现了高效可靠的消息推送机制
2026-05-11 01:05:35
877
原创 B站登录流程全解析：RSA+极验验证
B站登录流程采用RSA加密与极验验证码双重安全机制，通过主站、风控和跨域SSO系统协同完成认证。流程包括：1)获取极验参数完成人机验证；2)获取RSA公钥加密密码；3)提交登录请求获取refresh_token；4)通过SSO列表实现跨域登录态同步。该机制有效保障了传输安全并防范自动化攻击，同时支持B站生态内多域名的统一登录体验。
2026-05-08 22:00:46
1016
1
原创 切屏检测系统的实现与破解 Page Visibility API + Window Focus/Blur + Mouse Leave/Enter
这篇文章展示了一个切屏检测系统的前端界面设计。界面采用现代化渐变背景和毛玻璃效果，包含以下核心组件：1) 仪表盘展示关键统计数据；2) 检测方法区域说明不同监控技术；3) 日志面板实时显示检测记录。整体设计注重用户体验，采用卡片式布局、悬停动画和状态指示器，色调以蓝紫色为主，搭配高亮色突出重点信息。响应式网格布局确保在不同设备上都能良好显示。
2025-12-19 12:30:43
1138
原创 抖音直播推流技术分析
摘要 本文分析了抖音直播的Web技术实现方案，主要包含三个核心部分： 视频播放技术检测：通过JavaScript检测视频元素的src、srcObject等属性，可识别WebRTC、MSE或传统URL等不同播放方式，并支持HLS/FLV等流媒体协议判断。 WebAssembly应用：抖音采用WASM模块处理直播流解码、视频渲染加速和音视频同步，实现高性能的跨平台播放能力，显著提升直播流畅度。 FLV流媒体架构：详细解析了抖音直播FLV流URL结构和CDN分发机制，展示了React+FlvPlayer+WebA
2025-12-05 00:17:49
3209
原创 JSONP跨域获取服务器时间+requestAnimationFrame实现秒杀倒计时
本文介绍了实现秒杀倒计时功能的JavaScript方案。通过计算结束时间与当前时间的差值，将剩余时间转换为天、小时、分钟、秒和毫秒的格式展示。核心逻辑包括：1) 获取网络时间并计算时间差；2) 使用requestAnimationFrame实现流畅的倒计时动画；3) 格式化时间单位并实时更新显示。代码示例展示了完整的HTML/CSS/JS实现，包括时间转换公式、格式化函数和界面渲染，最后达到精确到十分之一秒的倒计时效果。当倒计时结束时，会自动停止并归零。
2025-11-24 22:45:04
635
原创 速通web全栈开发
这篇文章系统梳理了全栈开发涉及的主要工具和技术栈。文章分为开发工具、后端技术、前端技术、后台管理系统和项目部署五大板块，详细列举了各环节的常用工具和框架。后端部分涵盖SpringBoot、MyBatis、Redis等主流技术；前端部分包括Vue/React框架、Webpack/Vite构建工具及各类辅助库；同时介绍了后台管理系统模版和基于阿里云的部署方案。全文以工具清单形式呈现，为全栈开发者提供了全面的技术选型参考。
2025-10-05 14:45:45
1406
原创 Spring Boot常用依赖大全：从入门到精通
本文总结了Spring Boot项目中常用的依赖配置，涵盖Web开发、数据库、接口文档、微服务、认证授权等场景。主要包括：1) Spring Web MVC基础依赖；2) Swagger/SpringDoc API文档工具；3) MySQL/MyBatis Plus/MongoDB数据库相关；4) Redis缓存与分布式锁；5) Nacos微服务注册发现；6) 支付宝支付、二维码生成等第三方集成。同时推荐了维护状态更好的SpringDoc作为Swagger替代方案，并提供了Redisson、Lombok等实
2025-06-13 23:01:45
2262
1
原创 原生js图片懒加载 面向对象+队列管理和并发控制+节流+模块化+可配置
本文介绍了一个图片懒加载解决方案的实现，通过IntersectionObserver API智能检测图片是否进入视口，采用队列管理和并发控制机制优化加载性能。核心功能包括： 预加载边界设置 并发加载控制（默认3张） 加载状态可视化（旋转指示器） 浏览器兼容性降级处理 调试日志系统 该方案实现了高效的图片按需加载，同时保证页面性能，适合图片密集型网页应用。
2025-06-10 01:27:08
706
原创 揭秘B站视频秒播技术：m4s与SourceBuffer的奥秘
B站视频播放速度快的原因在于其采用了m4s分段存储技术，通过range请求动态下载视频片段，并利用SourceBuffer进行实时播放。这种技术允许根据进度条动态加载视频片段，边播边下载，确保流畅播放。调试过程中，通过过滤206状态码和Content-Range信息，验证了视频片段的动态加载机制。此外，SourceBuffer将视频数据存储在内存中，通过MediaSource对象管理，确保高效播放，但数据不会持久化存储。最后，通过Java代码示例展示了如何从B站获取视频和音频URL并下载到本地。
2025-05-10 16:56:16
1815
原创 【重生之我在B站学MySQL】
InnoDB存储引擎：支持事务、行级锁定和外键MRG_MYISAM存储引擎：收集相同的MyISAM表MEMORY存储引擎：基于哈希的，存储在内存中，对临时表有用BLACKHOLE存储引擎：写入到这的数据会被销毁MYISAM存储引擎：不支持事务CSV存储引擎：CSV存储引擎ARCHIME存储引擎：存档类型的存储引擎显示当前数据库支持的存储引擎。
2024-12-10 23:03:37
2579
原创 前端js常用代码片段
这篇文章介绍了几个前端开发实用的JavaScript代码片段： 获取滚动条Y轴距离 - 提供了兼容现代和旧浏览器的方案，优先使用window.scrollY，降级使用documentElement或body的scrollTop。 视频播放技术检测 - 通过检查video元素的属性可判断是使用WebRTC、MSE还是传统URL播放，并支持检测HLS、FLV等流媒体格式。 图片懒加载 - 提供两种实现方式： 原生实现：使用IntersectionObserver API 第三方库vanilla-lazyload
2026-06-29 23:18:42
270
原创 强智教务查成绩脚本
这篇文章摘要可以概括为： 一个Python脚本实现了某高校教务系统的自动登录和成绩查询功能。主要包含以下技术要点：1) 通过requests库处理HTTP请求；2) 使用BeautifulSoup解析HTML页面；3) 对密码进行AES加密传输；4) 处理登录流程中的重定向和验证码检查；5) 登录成功后爬取成绩表格数据并解析为结构化格式。脚本封装了完整的认证流程，包括密码加密、会话保持和异常处理，最终输出学生的课程成绩信息。依赖包括requests、beautifulsoup4、pycryptodome等常
2026-06-16 21:53:33
251
原创 强智教务学生评价脚本：轻松完成课程打分
这段代码是一个用于自动化网页评教的JavaScript脚本，主要功能是在iframe中找到评分项并自动打高分（第10项9分，其余10分）。执行步骤包括：1) 打开评教页面；2) 按F12打开控制台；3) 等待iframe加载完成；4) 粘贴并运行代码；5) 检查控制台确认评分；6) 手动提交。该脚本通过DOM操作定位评分元素并模拟点击，最后尝试调用iframe内部的刷新函数更新总分。注意需保持主页面不关闭，确保iframe完全加载后才能运行。
2026-06-16 21:13:48
234
原创 揭秘npm run dev背后的完整调用链
npm run dev 的执行过程：首先 npm 读取 package.json 中的 dev 脚本并定位到 vite 命令；接着通过 node_modules/.bin 找到 vite 可执行文件，执行其入口脚本；随后动态加载核心 CLI 模块解析参数并匹配 dev 命令；最后懒加载服务器创建逻辑，合并用户配置后启动开发服务器。整个过程采用模块懒加载设计，确保快速响应并支持性能分析功能。
2026-06-14 00:26:20
221
原创 前后端分离前台、中后台、中台、后台目录结构
项目目录结构摘要： 前端：分三个独立项目（C端用户界面/运营管理系统/UniApp跨端应用），采用模块化组织，包含路由、API、组件、状态管理等标准目录。UniApp部分遵循小程序开发规范，支持多端发布。 后端：基于Spring Boot的单体架构，按业务划分中台模块（商品/订单/用户中心）和后台管理系统（权限/系统配置），包含标准分层结构（Controller/Service/Repository）。 辅助：提供文档管理（API/数据库）和自动化脚本。整体采用前后端分离架构，支持独立开发部署。
2026-06-07 21:12:52
63
原创 用nodeJS生成项目图片
本文介绍了一个使用Node.js生成PNG图片的脚本。该脚本通过自定义像素函数创建了三种不同风格的PNG图片：一个空购物车图标、一个笔记本电脑产品图和一个耳机产品图。核心功能包括创建PNG文件头、IHDR块、IDAT数据块和IEND块，并使用zlib进行数据压缩。每个图片都通过像素级控制实现了精细的图形效果，如购物车的边框、轮子和把手，笔记本电脑的屏幕和键盘，以及耳机盒和耳塞的细节。该方案展示了如何通过编程方式生成简单的矢量风格图标和产品示意图。
2026-05-19 11:07:58
191
原创 3条命令+3个软件彻底解决c盘空间不足
本文介绍了三种迁移大文件/文件夹到其他磁盘分区的方法：1）使用robocopy命令复制文件并保留所有属性；2）通过move命令移动文件后创建目录符号链接；3）使用FreeMove图形工具自动完成迁移。还推荐了两款实用软件：SpaceSniffer（可视化分析磁盘空间占用）和傲梅分区助手（调整分区大小）。这些方法适用于将游戏/软件迁移到其他盘符而不影响原路径访问，能有效解决C盘空间不足问题。
2026-05-18 20:50:54
48
原创 UniApp开发全攻略：从生命周期到路由传值
本文总结了UniApp开发中的核心知识点：1)条件编译实现多平台适配；2)应用、页面和组件的生命周期管理；3)路由跳转与页面传值方式；4)pages.json配置详解，包括页面样式、tabBar设置和easycom组件自动导入规则。重点介绍了全局样式覆盖关系、APP-PLUS平台特有配置以及导航栏自定义方法，为UniApp开发者提供了全面的配置参考和技术要点梳理。
2026-05-17 22:57:42
76
原创 UniApp云开发笔记
UniApp云开发提供完整的云端一体化解决方案，主要包括云数据库、云存储和云函数三大核心功能。开发者可通过JS直接操作云数据库实现增删改查，使用uniCloud-db组件简化数据绑定和分页操作。云存储支持文件上传下载，云函数则用于后端逻辑处理，包括数据库操作和接口请求。此外还提供云对象、schema2code自动生成代码、人脸识别等扩展能力，以及uni-admin和uni-cms管理系统，大幅提升开发效率，实现前后端一体化开发。
2026-05-17 16:45:30
153
原创 Python邮箱工具类封装：高效邮件发送与管理
本文档实现了一个基于SMTP协议的邮箱工具模块，主要包含EmailClient类和邮件发送功能。该模块支持HTML和纯文本格式邮件发送，提供SMTP连接池管理和配置获取功能，并实现了专门的注册验证邮件模板。核心功能包括：通过SMTP协议发送邮件、自动处理TLS/SSL连接、支持Flask应用配置集成、完善的错误日志记录，以及美观的HTML验证邮件模板生成。模块设计考虑了可重用性，可作为通用邮件服务集成到Web应用中。
2026-05-16 23:44:59
172
原创 缓存工具类封装：内存与Redis无缝切换
本文介绍了一个缓存工具模块，提供MemoryCache和RedisCache两种缓存实现，以及统一的CacheManager管理接口。MemoryCache类实现了线程安全的内存缓存，支持TTL过期机制、自动清理过期数据、命名空间隔离等功能。主要方法包括set/get/delete缓存、检查存在性、获取键列表、清理过期项等。RedisCache保持相同接口，可通过CacheManager动态切换缓存后端。该模块适用于需要灵活切换缓存策略的应用场景，如短信验证码缓存等短期数据存储需求。
2026-05-16 23:40:15
303
原创 前端Token失效检测与自动登出机制详解
本文分析了前端用户认证失效的检测机制，主要包括四种触发场景：1）跨标签页通过storage事件监听token变化；2）API响应拦截服务端返回的token失效错误码；3）用户主动登出调用清除token；4）手动清空localStorage。核心机制是通过统一的beUnauthenticated函数处理token失效，清除本地存储并跳转登录页。系统采用多维度监控确保任何token失效情况都能被可靠检测，实现安全的认证状态管理。
2026-05-16 22:52:12
108
原创 前端直传OSS服务端签名(Policy+Signature)/STS临时凭证
本文介绍了前端直传文件到阿里云OSS的后端核心任务与MD5校验方案。后端必须完成三个核心任务：配置OSS环境（创建Bucket并设置CORS）、颁发临时上传凭证（推荐STS临时凭证）、实现业务校验与控制（身份验证、文件限制等）。文件上传后可通过OSS回调或前端上报通知后端。 MD5校验有三种方式：客户端计算MD5并由OSS校验（最严格）、OSS默认CRC64校验（性能好）、不校验（仅测试用）。实施MD5校验时，前端需计算文件MD5并转换为Base64格式作为请求头，后端需在Policy中声明MD5校验要求，
2026-05-15 00:59:51
574
原创 个人开发者接入阿里云号码认证服务AliCloud-NirvanaPns实现一键登录
本文详细分析了手机号一键登录功能的系统架构与实现方案。该功能基于阿里云号码认证服务(PNVS)，采用客户端-服务端架构，主要包含前端SDK封装模块、服务端认证模块和客户端原生插件三大部分。前端SDK模块提供初始化、环境检测、预取号和获取登录令牌等核心功能，通过状态码管理不同操作结果。系统设计考虑了性能优化(如预取号冷却机制)、异常处理和环境适配等问题，同时遵循阿里云官方最佳实践，确保在Android/iOS原生App环境中实现安全高效的一键登录体验。
2026-05-14 21:09:55
629
原创 多端登录设备管理功能实现
本文介绍了一个基于uni-app和Flask的设备管理系统架构。前端通过device.js获取设备指纹信息，包括跨平台适配的ID生成和IP属地获取，并通过请求拦截器自动注入设备标识。后端使用Flask实现设备管理，包括登录时保存设备信息、JWT令牌包含设备标识、请求拦截验证设备状态等功能。系统通过UserLoginDevice数据模型记录设备状态，并提供设备管理界面展示不同状态的设备（当前设备、在线非当前设备、已下线设备）。整体流程实现了从用户登录到设备管理的完整闭环，确保设备信息的准确记录和安全验证。
2026-05-10 02:20:23
248
原创 个人资质实现微信授权登录和内嵌微信二维码扫码登录
本文详细分析了微信授权登录和扫码登录的技术实现方案。系统采用Flask后端+Vue3前端的技术架构，整合微信开放平台接口进行用户认证。微信授权登录通过OAuth2.0流程获取用户信息，扫码登录则基于场景ID实现状态管理。文章详细介绍了数据模型设计、YunGouOS签名算法、H5授权流程实现、PC扫码登录流程等核心模块，并提供了关键代码片段和状态流转示意图。两种登录方式都实现了与系统账号的绑定机制，并通过JWT进行会话管理。
2026-05-07 22:30:40
595
原创 安全认证与访问控制
本文摘要介绍了四种常见的API认证方式：1）Basic认证通过Base64编码用户名密码进行简单验证；2）Token认证使用JWT或Redis存储令牌实现无状态/有状态验证；3）OAuth第三方授权通过授权码流程实现微信等平台登录；4）API Key认证采用密钥对机制，客户端用私钥签名，服务端用公钥验证。每种方式各有特点，Basic适合内网简单场景，Token认证主流，OAuth用于第三方登录，API Key适合机器间通信，实际选择需考虑安全性和业务需求。
2026-05-05 15:36:43
297
原创 python邮箱令牌/点击验证、邮箱验证码实现
本文介绍了房屋租赁系统的邮箱验证功能实现。系统提供三种邮箱相关功能，重点描述了注册邮箱验证的后端实现方案。注册流程包括：用户注册后创建未激活账户，生成24小时有效的一次性Token并存入数据库，发送验证邮件。邮件包含验证链接和可复制Token，支持点击按钮或手动输入两种验证方式。后端提供4个API接口：发送验证邮件、链接验证、手动验证和重新发送验证。邮件模板采用HTML格式，包含验证按钮、Token显示框和备用链接，确保良好的用户体验。系统使用SMTP协议发送邮件，支持SSL/TLS加密，并记录邮件发送日志
2026-05-04 23:00:28
770
原创 unipp+vue3+python h5+app极验验证码集成全流程解析
极验验证码集成方案分析：该方案采用前后端分离架构，前端通过uni-app实现H5/App双环境适配，后端使用Flask提供接口支持。核心流程分为初始化、用户验证和业务提交三个阶段，通过极验SDK实现滑块验证功能。系统支持H5内嵌和App WebView弹窗两种渲染方式，验证成功后返回lot_number等关键参数进行二次校验。后端采用HMAC-SHA256算法生成签名，确保验证安全性。方案具有环境自适应、验证流程标准化和安全防护等特点。
2026-05-04 15:34:16
334
原创 uniapp+vue3+python对接阿里云短信认证服务alibabacloud_dypnsapi20170525
手机号功能全流程分析 本文详细分析了基于阿里云短信服务的手机号功能实现方案，主要包括三大核心流程： 手机号注册流程：从用户输入到短信验证、数据库存储的完整链路 手机号登录流程：验证码登录的交互过程及JWT Token生成机制 找回密码流程：通过手机号验证实现密码重置 技术实现方面，后端采用Flask框架配合阿里云短信SDK，前端使用Vue3+uniapp，包含： 详细的配置项说明（短信签名、模板、密钥等） 安全控制机制（频率限制、有效期控制、加密存储） 数据存储方案（内存/Redis+MySQL） 关键AP
2026-04-29 22:50:27
740
原创 react 地图找房模块
本文介绍了地图封装的流程与实现方法。主要内容包括：1) 界面设计展示，通过React组件实现地图容器和房源列表的交互；2) 地图初始化过程，包括创建地图实例、添加控件和事件监听；3) 覆盖物渲染机制，根据缩放级别动态绘制不同层级的区域覆盖物（区、镇、小区）；4) 覆盖物创建方法，包括圆形覆盖物和矩形覆盖物的实现细节。文中还提供了详细的代码片段，展示了如何通过百度地图API实现地图功能与房源数据的可视化呈现。
2026-04-02 18:00:57
95
原创 React城市选择模块功能实现
城市选择界面实现总结 本文介绍了React城市选择界面的实现过程，主要包含以下内容： 界面结构：使用NavBar组件实现顶部导航栏，结合AutoSizer和List组件优化城市列表展示性能。 数据处理： 通过axios获取城市列表和热门城市数据 使用formatCityData函数对城市数据进行字母分类和排序 获取当前定位城市并添加到数据中 性能优化： 采用虚拟列表技术(List组件)优化长列表渲染 动态计算行高(getRowHeight方法) 使用AutoSizer确保列表占满屏幕 辅助功能： 封装get
2026-03-29 22:37:18
446
原创 百度地图api基本使用
本文介绍了如何在React项目中集成百度地图API。首先检查BMap对象是否加载，然后通过new BMap.Map()初始化地图实例，设置中心点坐标和缩放级别，并启用滚轮缩放功能。地图容器使用<div id="container">作为渲染节点。代码示例展示了完整的React组件实现，包括地图初始化逻辑和基本配置。
2026-03-29 15:28:46
44
原创 React轮播图优化：通过延迟 + 动画的组合，彻底消除视觉上的闪烁感
该代码实现了轮播图加载优化方案，通过添加showCarousel状态控制显示时机，结合300ms延迟和0.5秒淡入动画，确保加载过程平滑。主要特点：1)数据加载完成后延迟显示；2)使用CSS动画实现淡入效果；3)保留加载指示器保证视觉连续性。这种双重保障机制有效消除了页面闪烁问题，提升了用户体验。
2026-03-28 21:45:55
75
原创 React TabBar切换与高亮实现
本文介绍了如何实现TabBar的切换和高亮功能。通过配置TabBar数据项，使用selected状态控制选中项，结合路由切换实现内容渲染。关键点包括：1)通过selectedTab状态管理当前选中项；2)使用componentDidUpdate监听路由变化更新选中状态；3)通过Route组件配置各页面路由；4)点击菜单时同时更新状态和路由。还处理了默认选中项和首页重定向的逻辑，实现了完整的TabBar导航功能。
2026-03-28 18:14:37
275
原创 react在 HomeList 中缓存已获取的列表数据，避免重复请求。
该代码实现了一个带有无限滚动功能的列表组件HomeList，主要特性包括： 使用antd-mobile组件库构建列表和无限滚动功能 通过全局缓存Map对象listCache保存不同频道的数据 支持上拉加载更多数据，当没有更多数据时自动停止 点击列表项跳转到详情页，并调用父组件的onSaveScroll保存滚动位置 使用useEffect和useRef管理组件首次挂载逻辑 通过API获取列表数据并处理分页逻辑 实现了频道切换时的数据缓存和更新机制
2026-03-28 12:41:18
156
原创 React滚动位置管理
React 滚动位置管理 Hook 实现 该代码实现了一个 React Hook useScrollPosition，用于管理多个 Tab 切换时的滚动位置状态。主要功能包括： 滚动位置存储：使用 sessionStorage 保存每个频道(Tab)的滚动位置 自动恢复：在 Tab 切换或组件挂载时自动恢复上次保存的滚动位置 性能优化： 使用 debounce 对滚动事件进行节流处理 通过 requestAnimationFrame 优化滚动恢复性能 使用 Map 结构存储多个频道的 ref 引用 Hook
2026-03-28 12:37:42
74
原创 前端js汉字手写练习系统
本文介绍了一个汉字手写练习系统的网页设计。系统采用响应式布局，包含左右两个主要面板：左侧展示汉字、拼音和释义等信息，右侧提供书写练习画布和工具按钮。界面采用清新渐变背景，白色卡片设计，配有圆角、阴影等现代UI元素。功能区域包括汉字显示区、笔画顺序提示、书写画布和操作工具按钮等，支持触摸屏操作。整体设计注重用户体验，通过视觉层次和交互反馈帮助学习者掌握汉字书写。
2025-12-19 12:23:33
737
原创 移动开发常见问题
本文介绍了前端开发中常见的几种样式处理技巧：1. 使用CSS的aspect-ratio属性实现元素宽高等比缩放；2. 通过百分比或固定值配合object-fit控制图片比例；3. 处理2倍精灵图时需用background-size缩小一半；4. 解决移动端1px边框问题的多种方案对比，推荐使用伪元素+transform的兼容性最佳方案。文中提供了详细的代码示例和效果对比图，帮助开发者快速掌握这些实用技巧。
2025-12-07 16:59:28
429
原创 楼梯导航功能函数式封装
这篇文章介绍了一个网页楼梯导航功能的实现方案。通过JavaScript封装了initLoutiNavigation函数，主要功能包括：1）计算各楼层滚动位置；2）处理导航点击事件实现平滑滚动；3）根据滚动位置自动更新激活状态。代码实现了防抖处理(isScrolling标志)和性能优化(clearTimeout)，确保滚动过程中导航状态正确同步。该方案可用于长页面分段导航场景，提升用户体验。
2025-12-07 02:24:19
823
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人