- 博客(72)
- 收藏
- 关注
RSS订阅原创 一次授权只发一次：微信喝水提醒的可靠状态机设计
本文探讨了基于微信一次性订阅消息的健康打卡系统设计要点。系统需接受平台约束，将授权转化为闭环流程，而非永久定时推送。服务端维护多状态提醒计划，通过独立授权记录实现幂等性。采用本地优先的打卡策略，确保用户操作即时响应。时间计算遵循纯规则，worker采用事务锁抢占任务，但消息发送在事务外完成。系统选择at-most-once投递，避免重复打扰，并通过状态收敛处理各种异常。部署上，调度器与业务逻辑解耦，便于扩展。最后提出可靠提醒系统的关键检查清单，涵盖授权记录、任务抢占、外部调用、异常处理和状态收敛等方面。
2026-07-29 10:33:02
323
原创 麻将桌上的并发控制：扫码进房、乐观版本与零和结算
微信小程序「零碎百宝箱」的麻将计分工具通过服务端中心化设计解决多人协作的共享状态难题。核心设计包括：1）分离房间状态、流水与结算数据，通过版本号轮询实现低频同步；2）结合乐观版本检查与数据库悲观锁处理并发提交；3）服务端强制零和验证与总分计算，防止数据篡改；4）采用JWT身份验证与二维码入口分离的安全模型。该方案以事务性写操作和快照式统计平衡实时性与复杂度，适用于低频多人协作场景，其关键是对事实来源、版本控制及不变量的明确定义。
2026-07-29 10:31:04
300
原创 撤销为什么只需要 pop：用事件重放实现离线台球计分
台球计分工具采用事件溯源设计模式，通过只记录比赛事件（如选手获胜、特殊胜局等）而非直接维护比分等状态，实现可靠计分和轻松撤销。核心思想是将事件序列作为唯一事实来源，所有状态（比分、开球方等）都通过重放事件计算得出。该方案解决了多状态同步问题，支持离线使用，并通过结构特征检测实现旧数据兼容。设计关键包括：坚持事件单一来源、编写纯计算函数、维护业务不变量、明确数据生命周期边界。这种模式适用于操作可离散化、状态可计算且需要频繁撤销的场景，避免了传统状态同步的复杂性。
2026-07-28 10:33:55
232
原创 从一个小程序到一座工具箱：uni-app 分包与 Flask 微服务实践
本文探讨了小程序从单一功能逐步扩展为多功能工具箱时的架构设计挑战。通过"零碎百宝箱"项目的实践，提出了分层解决方案：主包提供核心能力，各工具作为独立分包运行，通过注册表统一管理。关键技术点包括：工厂函数统一网络请求边界、本地优先的离线同步策略、服务端采用"专属服务+通用服务"的混合架构，以及统一设计系统与业务个性的平衡。文章总结了不同类型工具的技术选型标准，并分析了当前架构的适用边界。
2026-07-28 10:28:10
453
原创 在浏览器里跑 Prettier：格式化 Markdown 的四个难点
「一键格式化」功能看似简单，实则暗藏四个技术难点：1) Prettier全量加载体积过大，需动态导入；2) 中文段落需设置proseWrap:preserve避免错误折行；3) 光标位置需精准映射到格式化后文档；4) 撤销操作需保证单步完成。MarkView通过45行精心设计的代码解决了这些问题，包括异步加载Prettier核心及插件、保留中文段落原生换行、利用官方API处理光标映射，以及将全文替换封装为单事务操作确保撤销完整性。
2026-07-20 17:15:04
155
原创 File System Access API 实战：让网页真正读写本地文件
本文介绍了如何利用 File System Access API 实现 Markdown 编辑器的原生文件读写功能，并解决了一系列状态管理问题。主要内容包括：1）通过文件句柄直接读写原文件，支持 Ctrl+O/Ctrl+S 操作；2）句柄持久化存储与权限恢复机制；3）基于双基线（内容签名和修改时间）的外部修改检测策略，通过智能比对判断是否静默同步或提示用户决策。文章特别强调了权限管理、状态同步和异常处理的细节设计，展示了如何将浏览器API限制转化为合理的用户交互方案。
2026-07-20 17:03:08
349
原创 把 CodeMirror 6 调教成 Markdown 编辑器：扩展、装饰与门面
本文介绍了基于CodeMirror 6的MarkView编辑器核心实现思路，重点阐述了其设计哲学与关键技术点。CodeMirror 6采用"最小化基础+可扩展"理念，MarkView在minimalSetup基础上通过扩展实现多文档状态管理、主题切换等功能。文章详细说明了：1）Vue组件与编辑器逻辑的完全解耦；2）通过EditorState快照实现多文档隔离与撤销栈防污染；3）CSS变量替代Compartment实现无闪烁主题切换；4）围栏代码块语言高亮的懒加载策略及补全功能修复方案。
2026-07-20 17:00:34
255
原创 一条 Markdown 渲染管线的全部细节：Worker、源行标注与按需加载
MarkView 的右侧预览区，看起来只是「把 Markdown 变成 HTML」。但真正跑起来的是一条跨线程、按需加载、带序号防乱序的管线：marked 解析、KaTeX 公式、highlight.js 高亮全部在 Web Worker 里跑完，Mermaid 因为需要真实 DOM 被单独留在主线程，最后串行提交到预览区。
2026-07-20 16:59:27
476
原创 BroadcastChannel + IndexedDB：多标签页文档同步实战
探讨了纯前端 Markdown 工具在多标签页环境下的数据同步问题。
2026-07-15 10:23:43
180
原创 MarkView：纯前端 Markdown 实时预览工具的架构设计
MarkView 是一个纯前端的本地 Markdown 实时预览工具（https://markview.art）：左侧 CodeMirror 6 编辑，右侧实时渲染，所有数据保存在浏览器 IndexedDB 中，无需任何后端。支持暗色/浅色主题、命令面板、URL 分享，并可作为 PWA 离线安装，甚至能注册为系统的 `.md` 文件处理器——双击本地文件直接用它打开。
2026-07-15 10:21:08
416
原创 知乎网页版「摸鱼神器」：一键开启精简模式，上班划水更安全~
本文分享了一段JavaScript代码，可将知乎网页版伪装成文档阅读页面，隐藏导航栏、侧边栏等干扰元素，仅保留内容流。代码通过动态注入CSS样式和添加切换按钮实现一键切换功能，适合上班摸鱼时使用。文章详细介绍了使用方法、实现原理及注意事项，并提供了书签版代码方便一键执行。
2026-05-14 15:46:51
1291
原创 全栈开发实时珠宝金价查询小程序
本文介绍了基于Python Flask和UniApp的全栈项目"金价排行榜"开发过程，该项目实现了珠宝品牌实时金价聚合查询功能。
2026-03-17 17:17:32
895
原创 OpenClaw浏览器自动化实战：让AI拥有“眼睛“和“双手“
详细记录在服务器上配置OpenClaw浏览器自动化功能的完整过程，包括基础配置、中文字体支持和实际应用案例。
2026-03-17 17:15:47
1345
原创 OpenClaw完整部署指南：从本地到远程访问
详细记录OpenClaw的完整部署流程，包括UI页面访问、远程连接方案（Tailscale/SSH隧道）和通义千问大模型接入。
2026-03-17 17:15:12
2070
原创 （一）AntV/X6 复杂图形应用架构解析：工厂模式与管理器体系
本文介绍了一种基于AntV/X6和Vue3的大型图形编辑器架构方案。通过工厂模式构建包含GraphManager、NodeManager、EdgeManager、LayoutManager和EventManager的管理器体系，实现模块解耦与高可维护性。方案特点包括：Vue组件化节点渲染、统一初始化与销毁流程、清晰职责划分，适用于流程图、ER图等复杂图形编辑场景。文中展示了核心工厂设计及关键管理器实现，为前端工程化处理图形编辑器提供了实践参考。
2026-01-13 11:47:10
703
原创 （二）AntV X6 布局管理器深度解析：迭代布局与父子嵌套
本文提出一种基于dagre的图编辑布局方案，采用迭代式方法解决多层级节点布局问题。系统通过自底向上的节点尺寸计算和自顶向下的位置应用，实现父子节点的自适应嵌套。关键技术包括：1）根据层级动态设置节点大小；2）根节点与子树分别布局；3）支持方向与间距配置。该方法在AntV X6框架中实现了稳定可控的布局流程，有效提升了复杂图结构的可读性。实验表明，该方案能良好处理父子节点嵌套与全局布局的兼容性问题。
2026-01-13 11:45:57
389
原创 （三）Vue3 + AntV/X6 自定义节点实践：组件化节点与事件联动
本文介绍了在Vue3中使用AntV/X6实现自定义节点组件化的实践方案。通过@antv/x6-vue-shape将Vue组件作为X6节点形状，实现UI与逻辑解耦。核心包括：使用Teleport容器挂载节点，通过事件系统实现节点交互联动，采用数据监听更新节点状态，以及利用NodeManager管理节点注册和容器挂载。文章详细展示了组件结构、事件触发机制、数据更新处理和样式绑定方法，最终形成了一套完整的组件化节点与业务交互解决方案，提升了图建模应用的可维护性和交互体验。
2026-01-13 11:44:46
843
原创 Vue3 富文本输入框组件深度解析
本文介绍了一个基于Vue3的富文本输入框组件，具有标签化输入、占位符切换、精确光标控制等核心功能。组件采用类型化数据模型设计，通过contenteditable属性和自定义标签系统实现功能。关键技术包括：使用零宽空格实现标签定位、TreeWalker优化文档遍历、封装Range/Selection API实现跨浏览器光标控制、以及复杂的键盘事件处理逻辑（如Enter、Backspace、Delete键的特殊处理）。该组件在保证用户体验的同时，提供了强大的富文本编辑能力。
2025-08-20 17:10:55
1101
原创 简单微信小程序开发案例——瞬间听力测试
瞬间听力测试是一款基于Vue3+uni-app开发的微信小程序游戏，采用渐进式挑战模式（7-20位数字）和三种语音播报速度（舒缓/正常/急促）。项目技术亮点包括：1）SCSS主题系统动态生成渐变背景；2）Web Audio API程序化生成点击音效；3）微软TTS服务实现高质量语音合成；4）音频池优化策略提升响应速度。前端采用Composition API架构，后端通过Docker部署微软TTS镜像，支持MP3流式传输，实现低延迟的语音交互体验。
2025-08-20 15:53:47
1036
原创 Vue + CSS实现渐变栅格进度条
对于多数传统的图表，缺乏视觉吸引力和操作灵活性，使其在许多特定的场景下，难以发挥大屏的优势。本文提出了一种实现渐变栅格进度条的方法，以其独特的样式和强大的可配置属性，有效解决了上述痛点。其渐变色的进度更加直观的体现了项目进展的程度，栅格化的比例着重分割重大节点，可以灵活调整颜色、栅格数量、间隔、宽度、高度、圆角、数值、标签、刻度等属性，并同时具有平滑的过渡效果。通过实验验证，本方法在提升用户体验、满足可视化大屏开发需求等方面拥有重大意义和应用价值。
2025-03-19 16:08:22
1696
1
原创 Python 爬虫验证码识别
在我们进行爬虫的过程中，经常会碰到有些网站会时不时弹出来验证码识别。我们该如何解决呢？这里分享 2 种我尝试过的方法。
2025-01-07 15:10:22
1652
1
原创 一键翻译并下划线、中划线、驼峰命名
本文旨在接入百度翻译接口，并通过改良改接口，自动翻译并转换成下划线小写、下划线大写、中划线大写、中划线小写、大驼峰、小驼峰格式，方便编程过程中命名。
2025-01-07 11:35:54
734
原创 Python 爬虫保存文件竟能这么快！
本文通过介绍使用python爬虫Selenium和requests+Beautiful Soup+pdfkit两种方式实现保存文件(TXT、PDF)，重点解决了在DOM结构复杂多样的条件下，如何快速精确的获取主体内容的问题，取其精华，去其糟粕的同时显著提升速度。
2024-08-26 14:54:06
800
1
原创 Markdown 常用语法
本文主要介绍了Markdown的一些常用语法，包括：粗体、斜体、粗斜体、列表、引用、分割线、删除线、下划线、链接、图片、表格、代码、键盘，以及 VuePress 关于 MarkDown 的一些常用拓展。
2023-10-23 16:47:25
641
2
原创 如何使用 VuePress 搭建博客网站并 Vercel 部署
本文主要介绍了如何使用VuePress搭建默认主题的博客网站，以及如何通过Vercel免费部署网站的方法。
2023-10-23 15:11:18
709
原创 如何使用 GoGoCode 一键 Vue2 转换 Vue3
通过GoGoCode将Vue2文件构造为核心 AST 实例，再通过编写转换规则，将Vue2语法换成Vue3语法。
2023-10-20 17:13:02
7346
14
原创 麻将记分器：简单的微信小程序开发
本文从前后端两个方面介绍了一个简单的麻将记分器微信小程序的准备工作以及代码的编写，并以动图的形式展示了样例，提供了部分代码供参考。
2023-10-18 11:27:18
11502
19
原创 WinSCP脚本实现将jar包一键上传Ubuntu并docker部署
首先，在Ubuntu写一个.sh脚本用于自动更新jar包的docker容器和镜像，然后在Windows写一个.bat脚本用于上传jar包并运行.sh脚本。
2023-06-29 20:05:14
951
原创 Vue 导出 PDF
旨在通过 html2canvas 和 jspdf，先将页面的 html 转成 canvas，再将 canvas 转成 pdf，同时解决了分页截断的问题。
2023-05-18 11:12:01
802
2
原创 Nginx 服务器 SSL 证书安装部署
本文旨在通过WinSCP、putty两种工具，先下载证书，在上传至服务器指定文件夹，修改配置，重启nginx，实现在nginx上部署SSL证书。
2023-04-14 22:57:05
1519
原创 无界(wujie)微前端实现及三种通信方式介绍
本文主要介绍了无界(wujie)微前端和qiankun的对比、wujie的实现及三种通信方式（props、window、eventBus）。
2022-09-29 14:59:12
19291
2
Python爬虫+Beautiful Soup+字符串转PDF
2025-03-26
无界微前端实践(vue3+vite+vue2+webpack)
2023-10-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人