FengChen的进阶之路

原创 Vibe Coding进阶之路之AI 应用工程体系：核心概念关系图与名词解释

AI Engineer 的核心不是“会问模型问题”，而是“把模型能力变成稳定、可控、可评估的产品能力”。Prompt、Context、RAG、Embeddings、Agent、Tools、Guardrails、Human-in-the-loop、Evaluation 和 Observability 构成 AI 应用工程的主要模块。Vibe Coding 是开发这些模块时的 AI 辅助开发方式。AI 产品交互+ LLM API+ RAG+ 工程化能力。

原创 【Web 流媒体三部曲之三】声网 Web SDK 快速上手：8 个 API 搞定推流拉流

声网Web端流媒体SDK快速上手指南 本文是Web端流媒体入门系列的第三篇，聚焦声网Web SDK（agora-rtc-sdk-ng）的实践应用。文章提供了从环境配置到核心API调用的完整指南，包含8个关键API的对照表、主播与观众端的推荐调用顺序，以及最小可运行代码示例。特别强调了Token鉴权机制、事件监听处理和生产环境注意事项，帮助开发者快速构建基础的音视频互动功能。通过清晰的步骤说明和代码片段，读者可以快速理解声网SDK的核心工作流程，包括系统检测、客户端创建、角色设置、音视频轨道管理、频道加入/发

原创 【Web 流媒体三部曲之二】从 getUserMedia 到 publish：Web 直播数据链路图解

摘要： 本文详解Web端流媒体直播的8步数据链路，从设备采集到观众播放，重点解析主播与观众的分工逻辑。关键步骤包括getUserMedia获取设备、join入会鉴权、publish推流、SFU服务器转发及观众subscribe订阅流程。通过时序图对比主播/观众行为，并指出四个常见误区：误将本地预览等同推流、忽略join前置条件、混淆host/audience角色、Token未通过后端签发。结合声网Web SDK代码示例，帮助开发者快速定位黑屏、权限等典型问题。 关键词： WebRTC、SFU、getUser

原创 【Web 流媒体三部曲之一】直播、点播与 WebRTC 是什么？

摘要 本文是Web端流媒体入门系列的第一篇，主要面向需要在浏览器中实现直播/连麦功能的前端开发者。文章通过通俗比喻解释了流媒体概念，区分了Web上RTC与点播的技术差异，并详细介绍了H.264视频编码和AAC/Opus音频编码原理。内容涵盖从浏览器采集原始音视频（getUserMedia）、RTC SDK编码传输（声网Web SDK）、服务器转发到观众播放的完整流程。文章特别强调了I/P帧、GOP等关键概念，以及安全上下文、用户授权等实际开发中的注意事项，为Web实时音视频开发提供了清晰的技术框架。

原创 接入 Cursor IDE接入Jira

摘要：本文详细介绍了如何将Jira通过MCP协议接入Cursor IDE，实现在编辑器内直接查询和操作Jira工单。内容包括获取Atlassian API Token、安装uvx工具、配置Cursor MCP连接、使用示例及常见问题排查。配置完成后，用户可直接在Cursor中用自然语言查询Jira工单状态、获取详细信息或执行搜索操作，同时提供了常用JQL查询参考和工具说明。

原创 Vue / React 单页应用刷新 /login 无法访问问题分析

本文分析了SPA应用中刷新子路由页面404问题的根本原因：前端路由由Vue/React管理，而后端服务器无法识别这些虚拟路径。关键在于需要配置服务器将所有非静态资源请求重定向到index.html，由前端路由接管渲染。解决方案包括： Nginx配置：使用try_files指令回退到index.html 对象存储/CDN：设置404错误页面为index.html 确保接口路由(/api等)不被错误重定向 修复后，无论是直接访问还是刷新子路由页面都能正常显示，同时保持接口路由正常工作。这种配置适用于Vue/Re

原创 遇到即记之ngrok--免费HTTPS、本地开发调试、Webhook测试必备工具

ngrok内网穿透工具摘要 ngrok是一款功能强大的内网穿透工具，可将本地服务快速暴露到公网。其主要特点包括： 一键部署：通过简单命令实现HTTP/HTTPS/TCP隧道 自动HTTPS：免费提供SSL证书，解决开发环境HTTPS需求 多场景适用：微信小程序调试、Webhook测试、临时演示等 可视化监控：内置Web界面查看请求详情 优势在于简单易用和HTTPS支持，但存在免费版URL随机变化、性能限制等问题。安装仅需下载客户端并配置token，开发中常用于前端调试、小程序API对接等场景。适合开发测试使

原创 遇到即记之渐进式 Web 应用（PWA）让Web拥有APP的体验

本文系统介绍什么是 PWA、具备哪些能力、优缺点是什么，以及如何从零实现「可安装」的 PWA（Manifest、Service Worker、安装提示），并附带可复用的代码示例与验证方式，方便日后复习与对外分享。

原创 【Three.js + MediaPipe】视频粒子特效：实时运动检测与人物分割技术详解

本文介绍了一种基于 Three.js 和 MediaPipe 的视频粒子特效实现方案。系统通过帧差法实时检测运动区域，结合 MediaPipe Selfie Segmentation 进行人物分割，最终在 GPU 上渲染出动态粒子效果：运动点标记为红色，静止点标记为黑色。文章详细阐述了技术架构（CPU 处理+GPU 渲染混合模式）、运动检测算法（帧差法原理与实现）、人物分割技术，并提供了完整的代码示例。该系统具有实时性好、算法简单等优势，但也存在对噪声敏感等局限性。通过调整运动检测阈值，可适应不同场景需求。

原创 Vue 项目中使用 AbortController：解决请求取消、超时与内存泄漏问题

在项目中，搜索输入时中止旧请求→ 保证数据正确。统一中止多个请求→ 页面切换时清理资源。组件卸载时中止请求→ 避免内存泄漏与报错。超时自动取消→ 提升用户体验。工具类封装→ 增强代码复用性和可维护性。就是请求的“刹车器”，能在项目中随时中止请求，保证性能与体验。

原创 Nginx如何实现反向代理和负载均衡器等功能的

Nginx如何实现反向代理和负载均衡器等功能的

原创 在本地开发环境中七牛上传功能正常，但在测试环境出现，解决MockJS引发的上传错误TypeError: ***.upload.addEventListener is not a function

Mock.jsAxios七牛上传其他依赖原生 XHR。

原创 项目管理体系

bugfix 分支：修复bug分支，在bugfix分支上修复bug，修复完成后合并到master分支和release分支。release 分支：主迭代分支，时刻保证是稳定可用的版本，周版本时需要保证与master 分支一致。代码提交必须通过CI流程，代码提交后会自动触发CI流程，CI流程通过后才能合入代码。用英文描述，尽量简洁，清晰，方便阅读，方便追踪。|–|–|- frontend 前端仓。|–|–|- build 编译构建仓。|–|–|- backend 后端仓。|–|–|- testing 测试仓。

原创 【解答】为什么vue3舍弃了defineProperty而使用proxy

为什么vue3舍弃了defineProperty而使用proxy

原创 手写 Vue 3 核心概念：简化版实现

这是一个简化的 JavaScript/TypeScript 实现，旨在展示 Vue 3 中一些核心概念，包括响应式系统 (Reactive System) 和虚拟 DOM (Virtual DOM) 渲染。请注意，这是一个高度简化的版本，与真实的 Vue 3 框架在功能和复杂性上有很大差距，但它可以帮助我们理解 Vue 3 工作的一些基本原理。

原创 神奇的TypeScript -- 进阶篇之实用工具类型

TypeScript作为一个强类型语言，TypeScript为我们也提供了很多实用工具类型，让我们可以以一种方便的方式来操作现有类型并从中创建新类型。他们可以帮助我们更轻松地描述常见类型转换，提高代码的可读性和可维护性。TypeScript的实用工具类型是预定义的类型函数，提供对现有类型的便捷转换和操作。可以轻松地创建新类型或修改现有类型，而无需手动编写冗长的类型定义。提高代码可读性: 提供简洁的语法来表达常见的类型转换，使代码更易于阅读和理解。

原创 前端路由History 和 Hash模式的区别以及Vue项目打包后显示白屏，路由router-view不加载问题

什么是前端路由？前端路由有什么作用呢？前端路由又是如何实现的？常见的路由模式History和Hash又有什么区别呢？VueRouter又是如何实现的？我们的日常项目又该怎么使用呢？我们再来一次，这一次我们好好来~前端路由是指在单页面应用（SPA，Single Page Application）中，通过前端实现页面跳转和页面内容更新的一种机制。与服务器端路由不同，前端路由不需要重新加载整个页面，而是通过动态加载页面内容来实现页面的切换，从而提高用户体验和应用的响应速度。前端路由，简单来说，就是。

原创 神奇的TypeScript -- 基础篇

什么是TypeScript，她为什么神奇呢？我们再来一次，这一次我们好好来~

原创 Vue3+TypeScript项目目录结构及文件作用

【代码】Vue3+TypeScript项目目录结构及文件作用。

原创 Node.js 和浏览器环境中都使用 WebSocket

浏览器环境本身就支持WebSocket，直接使用JavaScript内置的WebSocket对象来建立连接。Node中本身并内置WebSocket协议的支持，所以需要使用ws来实现WebSocket功能。

原创 Javascript 位运算符(&，|，^，＜＜，＞＞，＞＞＞)

位运算是一种对二进制数进行操作的技术，常用于优化算法和处理底层数据。在JavaScript中，位运算符包括按位与（&）按位或（|）按位异或（^）左移（<<）右移（>>）无符号右移（>>>）。这些运算符可以对数字的二进制表示进行操作，实现一些特定的位级操作。例如，按位与运算可以用来提取特定位的值，按位或运算可以将特定位设置为1，按位异或运算可以进行位翻转等。通过合理使用位运算，可以提高代码效率和性能。

原创 运维：在Linux上运行程序经常自动断开连接怎么办？Linux: SSH连接时，窗口关闭，会话不终止

运维：在Linux上运行程序经常自动断开连接怎么办？Linux: SSH连接时，窗口关闭，会话不终止

原创 什么是跨域？怎么解决跨域？为什么使用中间服务器就行？

跨域指的是在Web开发中，当一个网页的脚本试图访问不同域（域名、协议或端口）的资源时，就会发生跨域问题。同源策略（Same-Origin Policy）是浏览器的一种安全机制，限制了一个网页从一个源加载的资源如何与来自另一个源的资源进行交互。跨域问题通常会导致浏览器阻止跨源请求，以防止恶意网站利用用户的信息或执行恶意操作。为了克服跨域问题，可以使用CORS（Cross-Origin Resource Sharing）机制来允许跨源请求，确保安全地进行跨域数据传输和交互。

原创 Vue3组合式API + TS项目中手写国际化插件

【代码】Vue3组合式API + TS项目中手写国际化插件。

原创 神奇的Vue3 - 组件探索

Vue3中组件的各种使用方法,涵盖了注册、Prop、事件、双向绑定、插槽等主要内容。

原创 神奇的Vue3 - Pinia

Pinia的 API 更简单、更直观，使得使用存储变得轻而易举。另外Pinia的结构与Vue的类似，因此更容易上手。响应式状态管理Pinia的状态可以直接在操作中进行更新，从而减少了冗余代码。与 Vuex 不同，Pinia 不再需要显式的提交mutation。Pinia是模块化设计的，允许创建多个存储库，这些存储库可以直接在需要它们的组件中导入。这样可以更好地进行代码拆分，并提供更好的TypeScript推断。

原创 Vue中实现鼠标按住元素进行拖动

实现元素拖动效果

原创 神奇的Vue3--基础篇

Vue3基础梳理

原创 JavaScript数组操作方法全录 sort | filter | map | reduce

需要注意的是，对数组进行浅拷贝和深拷贝也是很重要的概念。浅拷贝会创建一个新的数组，但与原始数组共享相同的引用。而深拷贝则会创建一个完全新的数组，对新数组的修改不会影响原始数组。

原创 CSS想用两种不同单位计算怎么办？CSS的calc怎么用

calc()的主要作用是在数值具有不同CSS单位时执行数学计算，尤其在响应式网页设计中非常有用。但需要注意的是，calc()不能操作CSS颜色值和其他类型的CSS值。目前，calc()在大部分的浏览器中得到支持，但在W3C的CSS值和单位模块3中，它被列为有可能在CR期间被删除的功能之一。浏览器在处理不同单位的计算时，会通过自动进行单位转换来确保计算结果的准确性。您可以在表达式中的每个操作数中使用不同的单位。calc()函数接受一个表达式作为参数，表达式的结果将用作CSS属性的值。+：将指定的操作数相加。

原创 为什么元素显示的样式跟我设置的不一样？CSS优先级详解

在CSS中，选择器优先级是指确定应用于元素的最相关CSS声明的算法。这个优先级决定了哪个样式规则将被应用到元素上。根据选择器的类型和特定性，CSS规定了不同的优先级，例如ID选择器比类选择器具有更高的优先级。在CSS中，选择器的优先级决定了最终应用到元素的样式。

原创 JavaScript判断当前浏览器类型（包括判断移动端浏览器类型）

JavaScript判断浏览器类型

原创 书接上回：四个月看完《JavaScript权威指南》

原创 JS创建二维数组

创建一个m*n的二维数组Array.from(Array(m), () => Array(n).fill(0));

原创 从0开始学JavaScript（一） 之什么是JavaScript

今天是2022年的第一天，也算是给自己开个好JavaScript是Web编程语言

原创 function的arguments属性

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments

原创 JS 中parseInt(string, radix) 的正确用法

parseInt(string, radix)解析一个radix进制的string字符串并返回的十进制整数解析二进制字符串 “10”，并返回它对应的十进制整数parseInt('10', 2) // 2特别说明：1.radix的值是2-36之间的整数，如果radix 的值不处于 2-36 之间时，永远返回NAN2.如果string的内容不符合radix进制的值得时候，同样返回NAN比如：在二进制中是没有2这个字符的在十六进制中是没用G这个字符的研究研究：['1', '2

原创 正确使用“width:100%“

如果想要正确使用"width:100%“这一属性，一定要设置"box-sizing:border-box”,否则会造成子元素溢出

原创 行内元素

1、行内元素会在一条直线上排列，在同一行从左至右水平排列。直到一行排不下，才会换行。2、行内元素设置宽、高、margin上下、padding上下无效（竖直无效）。3、行内元素设置line-height，margin左右、padding左右有效（水平有效）。4、行内元素的宽高随标签里的内容而变化。...

原创 CSS 外边距（margin）合并

定义：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。情况1当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。情况二当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。情况三假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：情况四如果这个外边距遇到另一个.