木灵鱼儿

木灵鱼儿 1周前 vue 项目实战

Vue 3 进阶实战：基于 Promise 的通用弹窗管理器（命令式调用）

🚀 前言在 Vue 项目开发中，弹窗（Dialog/Modal/Drawer）是交互的核心载体。然而，随着业务复杂度的攀升，传统的声明式弹窗管理逐渐暴露出“样板代码多”、“状态分散”、“逻辑割裂”等痛点。本文将介绍一种基于 Promise 驱动的命令式弹窗管理方案，它能让你像调用 API 一样从 JS/TS 中直接唤起弹窗，并获取用户操作结果，彻底告别繁琐的 visible 变量。😫 痛点分析：传统模式的“四宗罪”看看这段典型的父组件代码，你是否感到熟悉且头疼？<template>  <UserEditDialog v...

100 0 0

promise dialog vue3

搭建基于 Vite + TypeScript + Vue 3 + Electron的小项目

木灵鱼儿 3周前 vue 项目实战

搭建基于 Vite + TypeScript + Vue 3 + Electron的小项目

前言有时候我们需要将前端项目打包成一个exe文件供人使用，在不考虑性能或者包体大小的情况下，使用Electron来打包项目是一个不错的选择，那么有没有办法从现有的前端项目中加入Electron呢？答案，当然是可以的，这里以我自己的项目为例，我的项目基于Vue3 + TypeScript + Vite，目的是为了实现一个excel文件的格式化处理功能，打包成exe安装包也只是为了减少运维的工作，用户自己安装本地运行就可以了，没必要部署到线上。核心概念：主进程与渲染进程在开始之前，理解 Electron 的两个核心概念至关重要：主进程 (Main Process)：每个 Electron 应...

454 25 0

vue3 vite Electron

OpenClash如何设置规则跳过指定网站代理

木灵鱼儿 1月前教程

OpenClash如何设置规则跳过指定网站代理

前言之前设置某些域名不进行代理，比如国内的一些站点设置了国外IP不能访问，导致访问失败，我之前一直在【插件设置】-【流量控制】-【绕过指定区域 IPv4 黑名单】里面添加，实际上一点效果都没有，加了个寂寞，网上搜也搜不到什么教程，刚好最近折腾明白了，自己写一篇教程，分享给大家。教程我们需要在OpenClash配置页面中找到：【覆写设置】-【规则设置】-【勾选自定义规则】，此时会展示两个输入框，第一个是优先匹配，第二个是候选匹配，我们只需要关系第一个优先匹配就行。鼠标移动到第一个输入框中，然后滚动滚轮，找到关键词rules:，我们需要在它的下面添加规则配置，以我自己网站为例，我不希望访问...

731 0 0

OpenClash clash 规则

深入Element Plus：让自定义组件继承表单的 size 属性

木灵鱼儿 1月前 vue 项目实战

深入Element Plus：让自定义组件继承表单的 size 属性

前言最近在开发一个较为复杂的表单页面时，我遇到一个场景：页面中包含了一些自定义封装的组件，需要让这些组件的 size 属性（用于控制尺寸）能够自动继承自父级 el-form 组件的设置。我们知道，在 Element Plus 中，只要为 <el-form> 组件设置了 size 属性（如 large 或 small），其内部的 el-input、el-button 等官方组件都能自动继承这个尺寸。但对于我们自己开发的组件，例如一个自定义的 <Icon> 组件，它默认是无法感知到 el-form 的 size 设置的。那么，如何才能让我们的自定义组件也具备这种“继...

372 3 0

继承 element-plus size

前端项目版本号管理与CI-CD自动化发布实践

木灵鱼儿 1月前前端基础建设与架构

前端项目版本号管理与CI-CD自动化发布实践

前言在现代前端开发中，规范的版本管理和高效的持续集成/持续部署（CI/CD）是保障项目质量和迭代效率的关键。本文将探讨如何利用 npm（或 pnpm/yarn）对前端项目进行版本号管理，并结合 GitHub Actions 实现标签（tag）触发的自动化发布流程，从而构建一个简洁而强大的 CI/CD 工作流。核心工具：package.json 中的 version 字段所有基于 Node.js 的项目（包括绝大多数前端项目）都通过 package.json 文件来管理元数据，其中 version 字段是记录项目版本号的核心。我们通常遵循语义化版本规范（Semantic Versionin...

595 24 0

git version 版本号

git 如何修改已提交的commit信息

木灵鱼儿 1月前 Git 笔记

git 如何修改已提交的commit信息

前言在使用 Git 提交代码时，我们有时会因为手速过快、疏忽大意或使用 AI 辅助工具时未及时调整，导致提交（Commit）信息不符合规范或包含错误格式。例如：AI 生成的 Commit 信息带有 Markdown 代码块的格式，如下所示，明显是不合适的：``` feat(settings): 重构情绪权重组件并优化交互逻辑将 EmotionSlider 和 EmotionRadar 组件重构为独立模块，调整其目录结构并增强功能。 ... (省略部分内容) ```为了修复这种情况，我们需要修改已经提交的 Commit 信息。根据要修改提交的数量，Git 提供了不同的解决方案。教程：如何...

1483 0 0

git commit rebase

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

木灵鱼儿 2月前 vue 项目实战

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

前言最近在开发后台管理系统时，我遇到了一个常见的需求：在表格的操作列中，根据数据状态动态显示不同的操作按钮。为了让按钮之间排列整齐并带有分隔符，我使用了 Element Plus 的 el-space 组件。代码如下：<el-space size="16" spacer="|"> <el-button type="primary" text> 修改 </el-button> <el-button v-if="isRecycle" type="succ...

2173 4 0

slot 插槽 element-plus

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

vscode 快速引入和解构插件：fast-import

木灵鱼儿 3月前 VSCode

vscode 快速引入和解构插件：fast-import

前言在日常的编码工作中，手动输入 import 语句和进行对象解构时，频繁地移动光标常常会打断我们的编程体验。为了解决这一痛点，我自己开发了 fast-import这个VS Code 插件，旨在通过简单的快捷键操作，极大地提升代码引入与解构的效率和流畅度。痛点回顾与解决方案你是否曾因为以下场景而感到烦恼？手动 import：输入 import {} from "..." 后，需要手动将光标移入 {} 中，再等待代码提示。对象解构：键入 const {} = object; 后，同样需要手动定位光标以输入解构属性。fast-import 插件正是为解决这些重复且繁琐...

1940 1 0

解构 vscode import

git 让新的提交合并到上一次提交中

木灵鱼儿 3月前 Git 笔记

git 让新的提交合并到上一次提交中

前言在提交代码的时候常常会遇到这种情况，我已经把改动提交到远程了，也就是推送了，但是呢，总是会有一些想不到的遗漏发生，比如变量名写错了，注释写错了，反正就是一些很小的细节，但是我又不想再创建一次提交记录，因为这会让历史记录变得很混乱。为此，便有了这篇文章。教程注意，害怕的话我建议先把代码存储一下，因为如果已经合并到上一次记录了，取消本次操作只能reset记录了，到时候代码回退到上一次的提交，你本次修改的东西就没了。操作也很简单，我们利用下面这个命令：git commit --amend此时会打开一个提交信息的编辑界面，我们可以修改提交信息，然后保存退出。（进入到编辑界面会有操作提示，es...

1805 0 0

git commit 合并提交

git 快速将 Git 仓库迁移至其他平台

木灵鱼儿 4月前 Git 笔记

git 快速将 Git 仓库迁移至其他平台

前言在项目开发或重构过程中，我们有时需要将代码仓库从一个平台（如 GitHub）迁移到另一个平台（如自建的 GitLab）。最近就遇到这样的需求，因此整理了一下迁移的相关知识。准备工作：创建新仓库在开始迁移之前，你需要在目标平台（例如 GitLab）上创建一个空仓库。仓库命名：建议新仓库的名称与旧仓库保持一致，例如 my-project。保持纯净：创建仓库时，请勿初始化任何文件。不要勾选创建 README.md、.gitignore 或 LICENSE 等选项。一个完全空的仓库是迁移成功的前提，可以避免后续推送时产生不必要的合并冲突。迁移教程我们提供两种迁移方法，你可以根据实际需求选择。...

2129 15 0

git Remote 迁移

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

木灵鱼儿 4月前 VSCode

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

初心作为一名前后端开发者，你是否也曾遇到过这样的场景：刚刚调整了项目的 TypeScript 或 ESLint 配置，满心欢喜地以为大功告成，却发现类型检查依然报错，代码提示也未按预期生效。这时候，我们通常需要重启 VS Code 服务，才能让新的配置被正确加载。然而，每一次修改配置都可能需要一次手动重启，这个过程不仅繁琐，更会打断我们宝贵的“心流”状态。为了解决这个问题，我曾尝试过一些社区的插件。但它们或多或少存在一些不便，比如我用过的一款，它的重启按钮只在 .ts 或 .js 文件中显示，而在我常用的 .vue 文件中却不见踪影，导致我每次都得特意切换文件才能操作。为了彻底解决这个痛...

2523 6 0

插件 vscode 重启服务

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

plugin-legacy 动态读取 .browserslistrc配置

木灵鱼儿 5月前 vue 项目实战

plugin-legacy 动态读取 .browserslistrc配置

前言在前端开发中，为了确保一致和良好的用户体验，我们通常需要处理不同浏览器对 HTML、CSS 和 JavaScript 的支持差异。在 Vite 生态中，我们通常使用 .browserslistrc 文件来统一管理目标浏览器范围。像 postcss-preset-env 这样的工具会自动读取它来进行 CSS 降级。然而，一个常见痛点是 @vitejs/plugin-legacy 插件的 modernTargets 选项并不会自动读取该文件，需要我们手动配置。这就导致了同一个配置需要维护在两个地方：一份在 .browserslistrc 中给 PostCSS 使用，另一份在 vite.c...

1634 0 0

postcss vite @vitejs/plugin-legacy

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

木灵鱼儿 5月前 vue 项目实战

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

前言在日常的 Vue 项目开发中，我们常常需要手动从 vue 或 vue-router 等库中导入 ref、computed、onMounted 等 API。这不仅是一项重复性的劳动，也打断了我们编写业务逻辑的思路。手动引入（之前）：import { computed, ref } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2)unplugin-auto-import 这款插件正是为了解决这个痛点而生。它能够自动为我们导入这些常用的 API，让我们专...

1.4w 317 2

自动引入 eslint ts

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

Vite 代码降级完全指南：从build.target到自动化 Polyfill

木灵鱼儿 5月前 Vite

Vite 代码降级完全指南：从build.target到自动化 Polyfill

前言在前端开发中，浏览器兼容性是一个绕不开的话题。之前我曾探讨过如何用 Vite 解决低版本浏览器的白屏问题，但方案尚不完善。本文将以一个实际问题为切入点，深入剖析 Vite 项目中代码降级的两种核心方式——语法转译与 API Polyfill，并提供一套精准、自动化的终极解决方案。一个实际问题：Object.hasOwn 引发的兼容性报错有一次我的在开发微信H5页面应用的时候，我引入ky这个请求库，然后我就发现，即便是最新的微信开发者工具，打开还是会报错：Uncaught TypeError: Object.hasOwn is not a functionObject.hasOwn 是...

2633 2 1

babel vite 兼容

Vite 代码降级完全指南：从build.target到自动化 Polyfill

前端字体优化

木灵鱼儿 5月前前端功能

前端字体优化

前言想写这篇文章已经很久很久了，最近狠下心来整理这些资料，希望能帮助到大家。合适的字体格式字体文件有很多种：ttf、otf、eot、svg、woff、woff2；不同的格式用于不同的使用场景，而且大部分格式其实都不推荐使用，最终最值得使用的就是 woff2 格式。格式推荐优先级WOFF2：面向所有现代浏览器，性能最优。WOFF：面向稍旧一些的浏览器，作为 WOFF2 的主要备选。TTF/OTF：面向更老旧的移动浏览器。EOT (可选)：仅在需要兼容 IE8 及以下浏览器时才添加。SVG (基本不用)：除非有极端罕见的兼容性需求。最佳实践代码一个健壮的@font-face 实践代码：@fo...

3063 7 1

压缩字体 font-face

数据库索引

木灵鱼儿 6月前 MySQL

数据库索引

1. 什么是索引？索引是数据库中用于加速数据检索的数据结构，类似于书籍的目录。通过索引，MySQL 可以更快地定位到需要的数据行，避免全表扫描。2. 如何使用索引？创建索引：在创建表时添加索引：CREATE TABLE users ( id INT PRIMARY KEY, name VARCHAR(50), email VARCHAR(100), INDEX idx_name (name) );在已有表上添加索引：CREATE INDEX idx_email ON users(email);删除索引：DROP INDEX idx_col ON 表名;查看索引：SHOW ...

3131 2 2

MySQL 索引

数据库外键约束

木灵鱼儿 6月前 MySQL

数据库外键约束

一、什么是外键约束？外键（Foreign Key）约束是关系型数据库中用于建立和加强两个数据表之间联系的一种机制。通过外键，可以确保子表中的某个字段的值，必须在父表的主键或唯一键中存在，从而保证数据的参照完整性。二、为什么要使用外键？保证数据一致性：防止子表中出现无效的引用数据（如引用了不存在的用户ID）。自动维护数据关系：通过级联操作，自动同步父表和子表的数据变更。简化应用逻辑：部分数据校验交由数据库完成，减少应用层代码复杂度。三、外键的使用场景存在主从关系的数据表（如订单表与用户表、评论表与文章表等）。需要保证子表数据依赖于父表数据的场景。需要自动同步删除、更新等操作的场景。四、如何...

2901 16 2

MySQL 外键级联

数据库锁机制

木灵鱼儿 6月前 MySQL

数据库锁机制

数据库锁机制数据库锁机制是保证数据一致性、完整性和并发安全的重要手段。MySQL作为主流的关系型数据库，其锁机制设计合理，能够满足高并发场景下的数据访问需求。本文将详细介绍MySQL中的锁机制，并结合实际案例进行说明。1. 什么是数据库的锁？数据库的锁是一种用于管理多个用户对数据库中同一资源（如表、行等）并发访问的机制。通过加锁，可以防止数据在并发操作时出现不一致或冲突，确保数据的正确性和完整性。2. 有哪些锁？分别的触发条件和实际应用场景1. 表锁（Table Lock）触发条件：当你对整张表进行操作（如 LOCK TABLES、ALTER TABLE、DROP TABLE 等）时会触...

2788 7 0

MySQL 锁机制表锁

Visual Studio Code env环境变量文件高亮

木灵鱼儿 6月前教程

Visual Studio Code env环境变量文件高亮

前言最近vscode升级了版本：v1.100，这个版本除了又是一堆AI相关的功能优化，只有一个功能让我高兴，就是它对 env 文件实现了默认支持，可以对其高亮了，不用再安装额外的env插件。为此我们可以卸载以下两个插件：DotENVENV那么我们该如何正确使用这个默认高亮呢？教程如果你是新的配置，一般来说不需要配置什么，但是如果你之前使用过上面的两个插件，有可能会自定义了一些 Files Associations 配置，比如我之前就会将 .env.development、.env.production、.env.example 设置它的值为 dotenv 实现代码高亮。但是现在由于vsc...

2793 1 0

vscode env 高亮

数据库中事务和隔离级别

木灵鱼儿 6月前 MySQL

数据库中事务和隔离级别

1. 事务的应用场景事务（Transaction）是数据库操作的最小工作单元，保证一组操作要么全部成功，要么全部失败。常见应用场景有：银行转账：A账户扣款、B账户加款，必须同时成功或失败。订单处理：下单时扣减库存、生成订单、写入日志，三者需一致。批量数据处理：如批量插入、更新、删除，需保证原子性。实战示例：银行转账START TRANSACTION; UPDATE accounts SET balance = balance - 100 WHERE user_id = 1; UPDATE accounts SET balance = balance + 100 WHERE user_id...

2293 0 0

MySQL 事务 TRANSACTION

数据库删除多表查询数据

木灵鱼儿 7月前 MySQL

数据库删除多表查询数据

前言在MySQL中，实际开发中经常会遇到需要根据多表查询的结果来删除数据的需求。本文将详细介绍如何通过多表关联查询来删除指定的数据，并提供实际案例和代码示例。一、基础知识MySQL支持通过DELETE语句结合JOIN来实现多表条件下的数据删除。常见的语法如下：DELETE t1 FROM table1 t1 JOIN table2 t2 ON t1.col = t2.col WHERE t2.some_col = '条件';或者删除多表中的数据：DELETE t1, t2 FROM table1 t1 JOIN table2 t2 ON t1.col = t2.col...

2249 0 0

MySQL 多表查询 DELETE

数据库多表合并UNION

木灵鱼儿 7月前 MySQL

数据库多表合并UNION

前言在实际开发中，数据库经常会遇到需要将多个表的数据合并到一起进行统一查询和展示的需求。此时，MySQL提供了UNION操作符来实现多表合并查询。本文将介绍UNION的使用场景、基本语法、注意事项，并通过案例和示例代码进行说明。一、什么情况下会用到多表合并（UNION）多个结构相同或相似的表，需要将它们的数据合并展示。例如：不同地区的订单表、历史与当前数据分表等。需要将不同查询结果合并成一个结果集进行统一处理或统计。某些业务场景下，数据分散在多个表中，但需要一次性查询出来。二、UNION的基本用法UNION用于合并两个或多个SELECT语句的结果集。其基本语法如下：SELECT colu...

2092 0 0

MySQL UNION 多表合并

数据库多表中多对多

木灵鱼儿 7月前 MySQL

数据库多表中多对多

前言在实际业务场景中，常常会遇到多对多（Many-to-Many, M:N）关系。例如：学生和课程，一个学生可以选多门课程，一门课程也可以被多个学生选修。MySQL等关系型数据库并不直接支持多对多关系，需要通过“中间表”来实现。一、基本原理多对多关系通常通过三张表实现：主表A（如学生表）主表B（如课程表）关联表（如选课表），用于存储A和B的对应关系1. 表结构示例假设有学生（students）、课程（courses）、选课（student_courses）三张表：CREATE TABLE students ( id INT PRIMARY KEY AUTO_INCREMENT, ...

2160 67 0

MySQL 多对多

数据库自链接

木灵鱼儿 7月前 MySQL

数据库自链接

一、什么是自链接？自链接（Self Join）是指在一条 SQL 语句中多次引用同一张表，通过给表设置不同的别名，将其视为多张表进行连接查询。自链接本质上是内连接或外连接，只不过连接的对象都是同一张表。二、什么情况下会用到自链接？当表中数据存在层级关系（如员工与上级、分类与父分类等），需要在同一表内查找相关联的数据时。需要对同一表中的不同记录进行比较或关联时。解决无法通过单表直接查询出父子、上下级等关系的问题。三、自链接解决了什么问题？自链接确实主要解决了表内数据之间的关联查询问题，尤其适用于层级结构的数据（如员工与上级、分类与父分类等）。在你的例子中，员工表中每个员工有一个上级ID字...

1902 0 0

MySQL 自链接 JOIN

数据库多表查询与操作

木灵鱼儿 7月前 MySQL

数据库多表查询与操作

一、什么是多表查询在实际的数据库应用中，数据往往分布在多个表中。多表查询指的是在 SQL 查询中同时涉及两个或两个以上的表，通过一定的关联条件将这些表的数据组合起来，从而获取更全面的信息。例如，订单表与客户表、商品表之间的联合查询。二、如何进行多表查询MySQL 支持多种多表查询方式，主要包括：1. 内连接（INNER JOIN）只返回两个表中满足连接条件的记录。SELECT a.*, b.* FROM table_a a INNER JOIN table_b b ON a.id = b.a_id;2. 左连接（LEFT JOIN）返回左表的所有记录，以及右表中满足连接条件的记录，右表没...

2268 0 0

left MySQL 多表查询

木灵鱼儿

Vue 3 进阶实战：基于 Promise 的通用弹窗管理器（命令式调用）

搭建基于 Vite + TypeScript + Vue 3 + Electron的小项目

OpenClash如何设置规则跳过指定网站代理

深入Element Plus：让自定义组件继承表单的 size 属性

前端项目版本号管理与CI-CD自动化发布实践

git 如何修改已提交的commit信息

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

vscode 快速引入和解构插件：fast-import

git 让新的提交合并到上一次提交中

git 快速将 Git 仓库迁移至其他平台

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

plugin-legacy 动态读取 .browserslistrc配置

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

Vite 代码降级完全指南：从build.target到自动化 Polyfill

前端字体优化

数据库索引

数据库外键约束

数据库锁机制

Visual Studio Code env环境变量文件高亮

数据库中事务和隔离级别

数据库删除多表查询数据

数据库多表合并UNION

数据库多表中多对多

数据库自链接

数据库多表查询与操作

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

Vue 3 进阶实战：基于 Promise 的通用弹窗管理器（命令式调用）

搭建基于 Vite + TypeScript + Vue 3 + Electron的小项目

OpenClash如何设置规则跳过指定网站代理

深入Element Plus：让自定义组件继承表单的 size 属性

前端项目版本号管理与CI-CD自动化发布实践

git 如何修改已提交的commit信息

解决 Element Plus 中 el-space 与 v-if/v-show 的渲染冲突问题

vscode 快速引入和解构插件：fast-import

git 让新的提交合并到上一次提交中

git 快速将 Git 仓库迁移至其他平台

告别手动重启：一键刷新 VS Code 服务的效率神器 —— Restart VSCode Server

plugin-legacy 动态读取 .browserslistrc配置

vite中正确使用unplugin-auto-import实现自动引入vue相关依赖（支持Eslint v9）

Vite 代码降级完全指南：从build.target到自动化 Polyfill

前端字体优化

数据库索引

数据库外键约束

数据库锁机制

Visual Studio Code env环境变量文件高亮

数据库中事务和隔离级别

数据库删除多表查询数据

数据库多表合并UNION

数据库多表中多对多

数据库自链接

数据库多表查询与操作

最近评论

博客文章RSS订阅

博客评论RSS订阅