木灵鱼儿

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

木灵鱼儿 4天前 vue 项目实战

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

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

126 0 0

slot 插槽 element-plus

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

plugin-legacy 动态读取 .browserslistrc配置

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

plugin-legacy 动态读取 .browserslistrc配置

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

176 0 0

postcss vite @vitejs/plugin-legacy

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

木灵鱼儿 1周前 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，让我们专...

1w 262 2

自动引入 eslint ts

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

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

木灵鱼儿 2周前 Vite

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

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

534 0 1

babel vite 兼容

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

前端字体优化

木灵鱼儿 3周前 CSS

前端字体优化

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

712 3 1

压缩字体 font-face

数据库索引

木灵鱼儿 2月前 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 ...

1147 2 2

MySQL 索引

数据库外键约束

木灵鱼儿 2月前 MySQL

数据库外键约束

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

1146 16 0

MySQL 外键级联

数据库锁机制

木灵鱼儿 2月前 MySQL

数据库锁机制

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

1017 0 0

MySQL 锁机制表锁

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

木灵鱼儿 2月前教程

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

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

1049 0 0

vscode env 高亮

数据库中事务和隔离级别

木灵鱼儿 2月前 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...

1020 0 0

MySQL 事务 TRANSACTION

数据库删除多表查询数据

木灵鱼儿 2月前 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...

846 0 0

MySQL 多表查询 DELETE

数据库多表合并UNION

木灵鱼儿 2月前 MySQL

数据库多表合并UNION

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

746 0 0

MySQL UNION 多表合并

数据库多表中多对多

木灵鱼儿 2月前 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, ...

844 0 0

MySQL 多对多

数据库自链接

木灵鱼儿 2月前 MySQL

数据库自链接

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

715 0 0

MySQL 自链接 JOIN

数据库多表查询与操作

木灵鱼儿 2月前 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）返回左表的所有记录，以及右表中满足连接条件的记录，右表没...

926 0 0

left MySQL 多表查询

数据库分组统计GROUP和分组筛选HAVING

木灵鱼儿 2月前 MySQL

数据库分组统计GROUP和分组筛选HAVING

前言在日常的数据分析和报表开发中，分组统计是非常常见的需求。MySQL 提供了 GROUP BY 语句用于分组统计，而 HAVING 子句则用于分组后的筛选。本文将详细讲解如何在 MySQL 中使用分组、分组的适用场景、实际案例与代码示例，并介绍分组查询如何显示其他字段以及分组后再进行筛选的方法。一、为什么要使用分组统计？当我们需要对某一字段的不同取值进行分类汇总时，就需要用到分组统计。例如，统计每个部门的员工人数、每个商品的销售总额等。二、GROUP BY 的基本用法GROUP BY 用于将查询结果按照一个或多个字段进行分组，通常与聚合函数（如 COUNT、SUM、AVG、MAX、MI...

920 0 0

MySQL GROUP HAVING

数据库去重DISTINCT

木灵鱼儿 2月前 MySQL

数据库去重DISTINCT

前言在实际开发中，数据表中经常会出现重复的数据。为了保证数据的准确性和简洁性，我们常常需要对查询结果进行去重操作。MySQL为我们提供了DISTINCT关键字，帮助我们轻松实现数据去重。一、DISTINCT的基本用法DISTINCT用于SELECT语句中，可以去除查询结果中的重复记录。其基本语法如下：SELECT DISTINCT 列名1, 列名2, ... FROM 表名 WHERE 条件;如果只对一个字段去重，则只需写一个字段名。如果对多个字段去重，则只有所有字段值都相同时才会被视为重复。示例1：单字段去重假设有如下用户表users：idnamecity1张三北京2李四上海3王五北京...

979 0 0

MySQL 去重 DISTINCT

数据库统计SUM求和和AVG平均数

木灵鱼儿 2月前 MySQL

数据库统计SUM求和和AVG平均数

前言在MySQL数据库中，SUM 和 AVG 是最常用的聚合函数之一，分别用于对某一列进行求和和求平均值。它们常用于数据统计、报表分析等场景。本文将详细介绍这两个函数的用法，并提供常见案例和示例代码。一、SUM函数——求和1. 基本语法SELECT SUM(列名) FROM 表名 WHERE 条件;2. 示例假设有一个员工表 employees，结构如下：idnamesalary1张三50002李四70003王五6000计算所有员工的工资总和SELECT SUM(salary) AS total_salary FROM employees;结果：total_salary18000按部门统...

838 0 0

MySQL SUM 求和

MySQL中 ONLY_FULL_GROUP_BY 的详解

木灵鱼儿 2月前 MySQL

MySQL中 ONLY_FULL_GROUP_BY 的详解

起因在MySQL的SQL查询中，GROUP BY语句用于将结果集按照一个或多个列进行分组。早期MySQL版本对GROUP BY的实现较为宽松，允许在SELECT列表中出现未包含在GROUP BY子句中的列，且这些列的值未必唯一或确定。这种宽松的行为可能导致查询结果不可预测，尤其是在分布式或高并发环境下，容易引发数据一致性问题。为了解决这一隐患，MySQL引入了ONLY_FULL_GROUP_BY SQL模式。该模式要求SELECT列表、HAVING、ORDER BY等子句中出现的所有列，要么是GROUP BY子句中的分组列，要么是聚合函数的结果。这样可以保证查询结果的确定性和一致性。适用...

1041 0 0

MySQL ONLY_FULL_GROUP_BY

数据库MIN和MAX聚合查询

木灵鱼儿 2月前 MySQL

数据库MIN和MAX聚合查询

前言在MySQL数据库中，MIN和MAX是两种常用的聚合函数，分别用于获取某一列的最小值和最大值。它们在数据分析、报表统计、业务查询等场景中非常常见。一、MIN和MAX的基本用法MIN(column)：返回指定列的最小值。MAX(column)：返回指定列的最大值。示例假设有如下员工表employees：idnamesalary1张三80002李四120003王五10000查询最高和最低工资SELECT MIN(salary) AS min_salary, MAX(salary) AS max_salary FROM employees;结果：min_salarymax_salary80...

979 0 0

MySQL MIN MAX

数据库COUNT统计

木灵鱼儿 2月前 MySQL

数据库COUNT统计

前言在MySQL数据库中，COUNT函数是最常用的聚合函数之一，主要用于统计表中记录的数量。无论是数据分析、报表统计还是日常开发，COUNT都扮演着不可或缺的角色。1. COUNT函数的基本用法COUNT函数有多种用法，常见的有以下几种：COUNT(*)：统计表中所有行的数量（包括NULL值）。COUNT(列名)：统计指定列中非NULL值的数量。COUNT(DISTINCT 列名)：统计指定列中不同（去重）且非NULL值的数量。示例假设有如下用户表users：idnameemail1张三zhangsan@xx.com2李四NULL3王五wangwu@xx.com1.1 统计总行数SELE...

877 0 0

MySQL COUNT 统计

数据库排序

木灵鱼儿 2月前 MySQL

数据库排序

前言在 MySQL 数据库中，排序是一项非常常见且重要的操作。通过排序，我们可以按照指定的字段对查询结果进行升序或降序排列，从而更方便地分析和展示数据。1. 基本排序用法MySQL 提供了 ORDER BY 语句用于对查询结果进行排序。其基本语法如下：SELECT 字段1, 字段2, ... FROM 表名 ORDER BY 排序字段 [ASC|DESC];ASC：升序排列（默认）DESC：降序排列示例：按年龄升序排列假设 users 表数据如下：idnameage1张三252李四223王五284赵六22SQL 语句：SELECT id, name, age FROM users ORD...

934 0 0

排序 MySQL ORDER BY

数据库日期处理函数和相关技巧

木灵鱼儿 2月前 MySQL

数据库日期处理函数和相关技巧

前言MySQL 在日期和时间处理方面提供了丰富的函数和灵活的用法。1. 时间处理函数有哪些？案例与代码示例函数名作用说明示例代码及结果NOW()返回当前日期和时间SELECT NOW(); → 2024-06-01 15:30:00CURDATE()返回当前日期SELECT CURDATE(); → 2024-06-01CURTIME()返回当前时间SELECT CURTIME(); → 15:30:00DATE()提取日期部分SELECT DATE('2024-06-01 15:30:00'); → 2024-06-01TIME()提取时间部分SELECT TIME('2024-06-...

924 0 0

MySQL 日期

数据库日期类型

木灵鱼儿 2月前 MySQL

数据库日期类型

前言MySQL 中的日期和时间类型用于存储日期、时间或两者的组合。合理选择和使用这些类型对于数据的准确性和高效性至关重要。本文将介绍 MySQL 支持的主要日期类型、它们的区别、使用场景、格式化方法，以及重点讲解 TIMESTAMP 与 DATETIME 的区别。MySQL 日期类型一览类型说明DATE仅存储日期（YYYY-MM-DD），不含时间部分TIME仅存储时间（HH:MM:SS），不含日期部分YEAR存储年份（YYYY 或 YY），范围为 1901-2155 或 70-69DATETIME存储日期和时间（YYYY-MM-DD HH:MM:SS），无时区信息TIMESTAMP存储日...

918 0 0

MySQL 日期类型 DATETIME

数据库多选项SET类型

木灵鱼儿 2月前 MySQL

数据库多选项SET类型

前言MySQL中的SET类型是一种非常实用的数据类型，允许在单个字段中存储多个预定义的选项。它适用于需要在一列中保存多个状态、标签或权限等多选项场景。本文将详细介绍SET类型的用法、相关案例、代码示例，并重点讲解如何利用二进制进行模糊匹配及其底层原理。一、SET类型简介SET类型本质上是一个字符串对象，可以包含0个或多个值，每个值必须从事先定义好的集合中选择。每个SET列最多可以有64个不同的成员。语法示例CREATE TABLE user_tags ( id INT PRIMARY KEY AUTO_INCREMENT, tags SET('sports�...

884 0 0

MySQL Set 二进制

木灵鱼儿

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

plugin-legacy 动态读取 .browserslistrc配置

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

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

前端字体优化

数据库索引

数据库外键约束

数据库锁机制

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

数据库中事务和隔离级别

数据库删除多表查询数据

数据库多表合并UNION

数据库多表中多对多

数据库自链接

数据库多表查询与操作

数据库分组统计GROUP和分组筛选HAVING

数据库去重DISTINCT

数据库统计SUM求和和AVG平均数

MySQL中 ONLY_FULL_GROUP_BY 的详解

数据库MIN和MAX聚合查询

数据库COUNT统计

数据库排序

数据库日期处理函数和相关技巧

数据库日期类型

数据库多选项SET类型

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

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

plugin-legacy 动态读取 .browserslistrc配置

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

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

前端字体优化

数据库索引

数据库外键约束

数据库锁机制

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

数据库中事务和隔离级别

数据库删除多表查询数据

数据库多表合并UNION

数据库多表中多对多

数据库自链接

数据库多表查询与操作

数据库分组统计GROUP和分组筛选HAVING

数据库去重DISTINCT

数据库统计SUM求和和AVG平均数

MySQL中 ONLY_FULL_GROUP_BY 的详解

数据库MIN和MAX聚合查询

数据库COUNT统计

数据库排序

数据库日期处理函数和相关技巧

数据库日期类型

数据库多选项SET类型

最近评论

博客文章RSS订阅

博客评论RSS订阅