三十_A-优快云博客

原创如何正确实现圆角渐变边框？为什么 border-radius 对 border-image 不生效？

在项目中实现圆角渐变边框时，border-image + border-radius 不生效。本文从 CSS 渲染机制出发，解释两者不生效的根本原因，并给出解决方案，适合实际项目使用。

2025-12-13 14:51:45 457

原创 WebRTC 入门：一分钟理解一对多直播的完整实现流程

WebRTC 一对多直播看上去很复杂，其实核心逻辑就几步：老师推流、学生收流、双方协商媒体轨道。本文将通过一个简洁的示例，带你快速搞懂这套机制，阅读完即可理清思路。

2025-12-05 08:10:41 474

原创 WebRTC 入门踩坑：一次完整的P2P通话流程全解析

本文整理了P2P通话流程、核心方法与信令机制，并深入分析一个高频坑点：必须先 addTrack 再 createOffer / createAnswer。搞懂这篇，你就真正理解 WebRTC 的通话原理了！

2025-11-26 08:07:12 822

原创【解决方案】 Electron 中调用 IP 话机接口的 ECONNRESET 错误

在 Electron 应用中通过 fetch 频繁调用 IP 话机 HTTP 接口时，你是否遭遇过 ECONNRESET (连接被对方重置) 错误？本文将带你深入问题根源。

2025-11-17 08:23:03 287

原创【解决方案】一分钟讲清楚动态路由

前端项目配置基础静态路由，登录后根据用户权限获取菜单并转换为动态路由，通过路由守卫实现权限控制和自动重定向到首个动态路由。

2025-11-13 08:46:37 445

原创 TypeORM 实战篇：在 NestJS 项目中集成 TypeORM

本文带你从零实战，在 NestJS 项目中完整集成 TypeORM。包含项目初始化、数据库配置、实体定义、以及基于 Repository 的 CRUD 操作，让你快速掌握 TypeORM 在实际后端项目中的最佳用法。

2025-11-03 08:14:46 480

原创 TypeORM 多对多关联篇：中间表、JoinTable 与复杂关系的建模

详细解析多对多（ManyToMany）关系在 TypeORM 中的实现原理，带你理解 @JoinTable 的作用、自动生成中间表的规则，以及多对多场景下的查询与更新技巧。

2025-10-27 10:28:35 872

原创 TypeORM 一对多关联篇：用最直观的例子讲清 OneToMany / ManyToOne

通过部门和员工的例子，完整讲解一对多、多对一关系的映射配置、级联删除等常见用法与注意事项。

2025-10-23 08:02:49 395

原创 TypeORM 一对一关联篇：掌握实体关系与 JoinColumn

深入理解一对一（OneToOne）关系的实现方式，讲解 @JoinColumn 的作用与外键映射规则，通过 User 与 IdCard 示例掌握 TypeORM 的实体关联机制。

2025-10-20 08:23:25 513

原创 TypeORM 速查手册：配置、Entity、CRUD 一篇搞定

ORM 是 Object-Relational Mapping 的缩写，即对象关系映射。也就是说把关系型数据库的表映射成面向对象的 class，表的字段映射成对象的属性映射，表与表的关联映射成属性的关联。

2025-10-16 08:11:41 982

原创【实录】项目打包自动更新版本号并展示 commitId

通过 npm version、git tag 与 Vite 的 define 配置，实现发版时自动更新版本号并展示对应 commitId，彻底告别人工修改版本的麻烦。

2025-10-13 07:35:27 383

原创【实录】使用 patch-package 修复第三方 npm 包中的 Bug

本文详细介绍了如何在团队项目中使用 patch-package，记录对依赖包的修改并自动应用补丁，让临时修复变得可追踪、可复现、可共享。

2025-10-10 08:11:38 487

原创 Vite 8 即将发布！性能提升与新特性全解读

本文记录了我对 Vite 8 的 Rolldown 集成的学习与实践。从官方性能案例到新特性分析，再到如何快速试用，我把重点内容整理成笔记，分享给大家。如果你正在关注前端构建工具的演进，这篇文章或许能帮你快速上手 Vite 8。

2025-09-29 09:56:17 689

原创【实录】使用 Verdaccio 从零搭建私有 npm 仓库（含完整步骤及避坑指南）

本文详细记录使用 Verdaccio 搭建私有 npm 仓库的完整实践过程。涵盖安装启动、用户登录、包发布、项目配置（.npmrc）、版本更新及注意事项，并提供了使用 nrm 管理多源的方法。为管理企业内部组件库提供完整解决方案。

2025-09-26 08:00:17 1042

原创【工具】Electron-Egg：跨平台桌面应用开发的新选择

桌面应用开发一直是很多前端、全栈工程师的“门槛”之一。虽然 Electron 提供了跨平台能力，但在实际项目中，开发流程、进程通信、打包更新、安全加固等环节往往让人头疼。Electron-Egg 正是为了解决这些问题而生，它提供了完整的项目架构、模块化支持、自动更新、跨平台打包与安全机制，帮助开发者快速构建企业级桌面应用。本文将从功能特性、技术栈、案例应用、使用方法等方面，带你全面了解这个开源框架。

2025-09-22 07:30:00 266

原创【工具】PM2 使用全记录：功能、实战、场景与总结

在学习和使用 Node.js 部署应用的过程中，我发现如果直接用 node app.js 启动应用，一旦进程崩溃，服务就会直接中断，需要手动重启。另外，日志查看也比较麻烦。带着问题，我开始接触 PM2 —— 一个专门为 Node.js 应用设计的进程管理工具。

2025-09-18 07:30:00 703

原创【实录】打造一个可复用的日志 SDK：架构设计与实战

在项目开发中，我们项目中使用了多个SDK。每个SDK都使用自己的日志格式和输出方式，导致日志分散、格式不一致，给问题排查和日志分析带来很大困难。正是面对这样的痛点，我决定设计一个统一的日志SDK，让所有SDK都能以一致的格式和方式输出日志。

2025-09-15 07:30:00 273

原创【实录】学习 Docker 的过程中，我是这样把镜像越做越小的

1. 学会用 .dockerignore 控制上下文，不要把没用的东西打包进去。2. 多阶段构建能把编译环境和运行环境分开，减少镜像体积。3. 选择合适的基础镜像（比如 alpine），能显著减小体积。

2025-09-11 08:14:39 683

原创【NestJS】构建可复用的数据存储模块

Nest 中的动态模块允许你创建可在运行时配置的模块，而不是使用静态的固定配置。当你需要提供灵活、可定制的模块时，这尤其有用。

2025-09-08 08:21:10 410

原创【工具】41K star！网页一键变桌面应用

项目中遇到了一个需要将现有的 web 页面打包成一个桌面应用的需求。最一开始想到的是 Electron，但是它还需要一些开发工作并且打包后的应用体积比较大，调研后发现了开源工具 Pake。

2025-09-05 07:32:51 234

原创【NestJS】HTTP 接口传参的 5 种方式（含前端调用与后端接收）

在前后端开发中，HTTP 接口的数据传输方式有多种，常见的有 query、url param、form-urlencoded、form-data、json。作为前端，我们不仅要知道如何调用，还要理解后端如何接收。今天我们用 NestJS 来演示这几种方式。

2025-09-02 07:55:13 902

原创【实录】基于 Canvas 的签名板实现：支持鼠标与触摸

在实际开发中，签名板功能常见于合同签署、快递确认、在线表单等场景。本文将基于 HTML5 Canvas，实现一个支持鼠标和触摸事件的签名板。通过监听用户操作并将轨迹绘制到画布上，我们就能完成一个跨端的电子签名功能。

2025-08-26 08:39:06 519

原创【实录】uniapp 全局弹窗实现方案

用户希望不论在哪个页面，在收到某个消息时都会弹出一个弹窗。但是 uniapp 自身无法实现在所有页面中弹出自定义组件。

2025-08-13 08:05:53 851

原创【实录】NestJS 中的 IoC

IoC 全称 Inversion of Control 译为控制反转，是面向对象中的一种设计原则，用来降低代码之间的耦合度。

2025-08-07 19:47:45 238

原创【实录】uniapp - android 静态声明权限和动态请求权限的区别

在 UniApp 的 manifest.json 中已配置了 RECORD_AUDIO、CAMERA、ACCESS_FINE_LOCATION 权限，为何还需在代码中调用 plus.android.requestPermissions() 动态申请？

2025-08-05 10:01:55 296

原创【源码】一个项目竟然引入三个项目管理工具？统一一下吧！！！

在团队协作中有一个场景很常见: 同一个项目但是包管理器却是不同的。这样不是不可以，但这样是不合理的。

2025-08-04 09:42:46 862

原创【源码】听说你还在单独为 await 做 try catch？

通过调用传入的 Promise 实例，在 then 和 catch 中分别处理成功和失败最后将其结果放到数组并返回。在处理错误的时候如果有传入第二个参数则将其和错误信息通过 Object.assign() 合并后放到数组中返回。

2025-08-01 14:24:14 321

原创【源码】npm init vue@x 干了什么？带你读懂源码逻辑

通过 npm init vue@3 或者 npm init vue@2 初始化一个对应版本的 vue 项目。

2025-07-31 18:33:14 722

原创【解析】从输入 URL 到页面展现的全过程

1. 解析 URL。2. 缓存判断。3. 域名解析（DNS 解析）。4. 获取 MAC 地址。5. TCP 三次握手。6. HTTPS 的 TLS 四次握手7. 发送 HTTP 请求。8. 服务器处理请求并返回 HTTP 报文。9. 断开连接。10. 浏览器解析渲染页面。

2025-07-30 10:03:51 809

原创【源码】Element-UI make new 新增组件

在 Element-UI 源码中可以通过命令 make new 新增组件，减少重复工作。通过该命令创建组件目录结构，包含测试代码、入口文件、文档。

2025-07-21 08:06:33 796

原创【源码】arrify 转数组

从单元测试入手，一步一步跟着断点进行调试来阅读源码，在读的过程中产生的问题，如果不是阻塞性的问题都将其记下来，先将整体流程完成，然后再去解决之前产生的问题。

2025-07-18 09:34:09 839

原创【源码】omit.js 剔除对象中的属性

库的作用:1. 删除目标对象中的一个或多个 key2. omit 接收两个参数，第一个参数是目标对象，第二个参数是目标对象中将要被删除 key 组成的数组。从单元测试入手，一步一步跟着断点进行调试来阅读源码，在读的过程中产生的问题，如果不是阻塞性的问题都将其记下来，先将整体流程完成，然后再去解决之前产生的问题。

2025-07-11 15:40:26 724

原创【源码】Vue3 模板编译

通过 traverseNode 方法可以得到是他会对每个 node 上的 codegenNode 属性进行赋值，在 codegenNode 中会有一个 patchFlag 值。这里会在 diff 的时候用到。在 node 对应的 context 中还会有一个 helpers 属性，这里存放了每个节点应该什么样的处理的方法名。这里的会在代码生成阶段用到，会将这里的所有方法引入。

2025-07-07 13:26:02 293

原创【源码】vue3 初始化流程

先创建vue实例，然后将实例进行挂载。在挂载过程中根据传入的组件对象创建对应的虚拟DOM。根据虚拟DOM创建对应的组件实例。然后初始化props和slots并调用setup函数。生成渲染函数兼容2.x版本的的处理执行钩子函数获取subTree并调用patch处理调用mounted钩子函数在整个挂载流程中遵循深度优先。

2025-07-02 09:37:08 972

原创【源码】Vue3 computed 源码

computed 会进行缓存上一次计算出来的结果，当计算属性所依赖的属性没有发生改变时，访问计算属性会返回之前在 _value 缓存的值。computed 的求值是惰性的，计算属性所依赖的属性发生变化的时候计算属性不会立刻去求值，而是调用了计算属性的 scheduler 函数将 _dirty 改为了 true 并调用 trigger 函数通知依赖这个计算属性的地方进行更新。只有触发了计算属性的 get value 函数的时候才会调用 this.effect 函数进行重新计算求值。

2025-06-30 14:06:39 960

原创【源码】Vue3 ref/toRefs 源码

通过 toRefs 可以将对象或者数组内的每一项都转换为 ref 类型，我们也就可以采用 .value 的形式访问。至于为什么在 template 中不需要采用 .value，是因为在模板编译的时候替我们省略了。

2025-06-27 08:38:12 636

原创【源码】Vue3 watchEffect 源码

在看 reactive 源码的时候发现单独调用 reactive 函数并没有收集依赖，那么什么时候才会收集依赖呢，我把之前的 demo 改了改，加入了 watchEffect 之后发现在 watchEffect 中用到的属性会被收集依赖，那为什么调用了 watchEffect 之后就会收集依赖呢，让我们进入到源码中一探究竟吧。

2025-06-26 09:42:42 1097

原创【源码】Reactive 源码

看代码要带着问题去看，不要盲目的去看问题就是这次看源码的主线，要围绕着主线去展开，过程中和主线没有多大关系的该忽略掉就忽略掉开源项目一般都封装的比较好，有可能一个函数中会引用多个文件中的函数，每次跳转的时候将跳转的目录记下来，避免跳着跳着就不知道跳哪去了进入到一个文件中先将函数都收起来，便于查看

2025-06-24 19:07:46 759

原创【源码】Vue 构造函数及初始化做了什么

看源码前辈们的建议：1. 看代码要带着问题，不要盲目的去看2. 你的问题就是你的主线，要时刻记着你的主线是什么，那些和主线没有多大关系的该忽略就暂时忽略掉3. 在网上找到高质量的博客或视频，跟着前辈走会让你事半功倍

2025-06-23 16:39:52 941

原创 vue-treeselect 中的小 tip

1. 设置选中当前节点不默认选中父节点和子节点：flat: true参考资料：https://vue-treeselect.js.org/#flat-mode-and-sort-values2. 选中了分支节点及其所有后代，则vue-treeselect会将它们组合到值数组中的单个项目中，可以通过valueConsistsOf 来更改：ALL: 选中的所有节点都将包含在 v...

2019-10-29 16:38:08 2242 1

空空如也

空空如也