木灵鱼儿

阅读了axios源码后对axios的一些最佳实践和axios-retry插件的使用感悟

木灵鱼儿 13小时前 vue 项目实战

阅读了axios源码后对axios的一些最佳实践和axios-retry插件的使用感悟

前言乘着年底没什么事，把axios和axios-retry的源码简单看了下，总结了下一些最佳实践。axios本身axios有个很便捷的使用方式，就是它既可以作为函数发起请求：axios()，也能通过它身上的属性，如：get、post、delete等来发起对应请求，也可以通过axios.request()来发起更加灵活配置请求，甚至还能通过axios.create()来创建自定义配置的请求实例。为什么它能有这么多请求方式？其实就是axios本身就是axios.request这个方法的bind返回值，当我们import引入这个axios的时候，引入的是request函数。import axi...

28 0 0

axios 拦截器源码

使用Github Actions打包前端项目并自动上传到Github Pages分支

木灵鱼儿 1周前教程

使用Github Actions打包前端项目并自动上传到Github Pages分支

前言之前写了一篇 Github Actions 怎么将build的内容发布到 Releases 上，这次想将前端的SPA项目搞一个在线预览的站点，但是又没有经济实力提供一个服务器来进行部署，所以就参考了下一些开源项目，发现他们都是用 Github Pages 来做在线预览的，所以我也想弄一个。本篇文章就不细说基本内容了，想入门的可以看之前那篇：《使用Github Actions打包前端项目并自动上传到Releases》教程我本来的意思是，先用 Actions 打包后，再克隆一个仓库，切换到 Github Pages 的分支，将dsit目录里的内容复制到这个 Github Pages 的...

139 0 0

预览 github actions

使用Github Actions打包前端项目并自动上传到Github Pages分支

vue3中使用shiki实现代码高亮和注意事项

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

vue3中使用shiki实现代码高亮和注意事项

前言最近在写AI训练器的UI界面，有一个需求就是展示TOML配置，为此就需要用到代码高亮，我之前用过 highlight.js 和 PrismJS，但是在撰写VitePress项目配置时发现了一个新的代码高亮库：shiki。shiki可以省去维护css和html，并且原生就是ESM按需加载，支持多种主题等，已经满足了我对一个代码高亮的需求，为此我去尝试用了下这个，于是有了本篇文章。插件文档：Shiki语法高亮器github：shiki注意事项shiki是按需加载的，它的实现方式就是除了一个主体的js文件，在打包后会有非常多的不同代码语言的解析器脚本文件，但是不用担心，这些脚本文件只有在真...

256 2 0

代码高亮异步 vue3

爱快ikuai和windows电脑使用iperf3测试内网传输速度

木灵鱼儿 3周前教程

爱快ikuai和windows电脑使用iperf3测试内网传输速度

前言最近终于将常用的设备都替换成了2.5g网口了，为了就是希望局域网看电影的时候，拖拽视频进度条能少卡顿一点，但是发现一个很蛋疼的问题，明明wifi已经是wifi6的极致了，2400mbps了，换算成文件大小怎么也可以300m每秒的文件，但是在内网传输文件的时候发现速度只有10mb，贼难受，想要测试一下速度，发现不知道怎么弄。为此写一篇文章留给有需要的人，也方便自己以后使用。首先我的路由器是ikuai爱快，或者你的路由器支持iperf3这个功能，那么也能照着这个教程来测试内网速度。教程首先我们开启爱快的内网测试功能，如果是支持iperf3的路由器，自行去开启这个功能。找到：应用工具 --...

868 0 0

windows ikuai iperf3

x86多网口软路由+pve+爱快ikuai+iStoreOS实现组网和翻墙

木灵鱼儿 1月前教程

x86多网口软路由+pve+爱快ikuai+iStoreOS实现组网和翻墙

需求想实现网络层完整的翻墙处理，除了旁路由的方式，我们还可以通过爱快的双wan口来实现，爱快本身实现了双wan口无网自动切换，我们只需要让其中一个wan口是可以翻墙的，并设置为主wan即可。当翻墙的主wan口无法访问时，爱快会切换另一条wan口，从而保持网络畅通，虽然切换的时候会有一小段时间是没有网络的。示意图功能实现[hide]安装PVE首先我们拥有一台多网口的x86设备，并且安装了pve系统，具体的操作就不多说了，基本上就是：下载pve系统iso文件，刻录到U盘，启动，安装，b站有很多教程，随便找一个照着做就行了。这里提供一个脚本，用于给pve显示设备温度和cpu功耗等信息。你需要S...

1679 19 19

翻墙爱快 PVE

了解前端的复制功能

木灵鱼儿 2月前前端功能

了解前端的复制功能

前言前端的复制功能第一次使用的时候还记忆犹新，那时根本不知道怎么操作，复制它到底是怎么实现的，该怎么去触发，百度查看了不知道多少所谓的复制功能文档，每篇都有不一样的用法，我总想着有一天能搞清楚这些，毕竟现在复制功能已经web功能开发中离不开了。execCommand API浏览器在document对象上暴露了execCommand方法，该方法允许使用者通过输入“命令”的方式来操作可编辑内容区域的元素。可编辑内容区域被官方认为是contenteditable="true"的html元素，但按道理，input这些应该也是算可编辑内容区域的。这些都不重要，我们这次关注的...

2511 36 6

copy clipboard 复制

表维护笔记

木灵鱼儿 2月前 MySQL

表维护笔记

更改表名ALTER TABLE test RENAME tests;或者：RENAME TABLE test to tests;将test表改成tests表。更改表的字符集比如更改为gbk，不过用的很少，一般创建数据库时就已经定好了，不会再改动。ALTER TABLE tests CHARSET gbk;清空表数据DELETE FROM test;使用delete删除有的软件会提示你没有where条件，是否全部删除，有的不会，这种方式删除会比较慢。我们可以用这种方式：TRUNCATE test;删除表DROP TABLE IF EXISTS test;用if判断下表是否存在，存在则删除。...

638 1 0

MySQL 表

搭建一个vite+vue+ts的Chrome插件开发模板

木灵鱼儿 2月前 Chrome插件

搭建一个vite+vue+ts的Chrome插件开发模板

前言最近在开发一个Chrome插件，在阅读官方文档时发现它提供的都是js的方式，完全没有工程化的概念，而且插件的版本已经到v3了，v3版本限制了非常多的东西，比如我们使用vue的template渲染，由于vue用到了eval来实现，导致插件会报错，蛋疼的很，总不能写手写render函数吧，太累了。最好的解决办法就是用vite来打包vue项目，这样既可以用vue组件的方式开发，打包时也会将template转换成render函数，从而避免了eval的报错，我们还可以使用到ts和scss这些便利的工具。为此我们搭建一个开发模板需要实现以下功能：支持vite打包支持typescript支持scs...

2894 22 23

插件模板 vue3

Debian12 更新系统版本（目前更新至12.8版本）

木灵鱼儿 2月前运维

Debian12 更新系统版本（目前更新至12.8版本）

前言更新系统需要下载很多相关依赖，如果在国内，我建议是先换源，换成国内源再更新，如果是vps主机，应该就不用考虑这个事情了，不知道换源可以看我之前的文章。教程首先更新软件包索引：sudo apt update然后升级已安装的软件包：sudo apt upgrade如果你想更加果断，比如你是新装的系统，不需要考虑包之前的依赖啥的，可以直接全面升级：sudo apt full-upgrade这种方式也适合有时候的内核更新。完事后我们清理下无用的安装包：sudo apt autoremove一般情况下不需要重启系统，如果你不放心可以重启一下：reboot查看系统版本完事后重新连接ssh，我们可...

3540 17 0

debian 更新系统

基本查询SQL笔记

木灵鱼儿 2月前 MySQL

基本查询SQL笔记

查询一个表的所有字段SELECT * FROM user;查询了user表的所有字段。指定字段查询SELECT id,email FROM user;别名SELECT id,email AS emails FROM user;它会将email字段名改成emails展示。查询条件-包含查询email中含有@符号的数据：SELECT * FROM user WHERE email LIKE "%@%";查询email中含有@符号并且id大于2的数据：SELECT * FROM user WHERE email LIKE "%@%" AND id>...

460 0 0

MySQL 表查询子查询

表生成的SQL笔记

木灵鱼儿 2月前 MySQL

表生成的SQL笔记

先进入数据库。创建表CREATE TABLE user ( id INTEGER PRIMARY KEY AUTO_INCREMENT NOT NULL, nickname VARCHAR(30) NULL, gender TINYINT NOT NULL DEFAULT 0, email VARCHAR(100) NOT NULL );查看表结构DESC user;给表添加数据INSERT INTO user SET email = "13xxx@qq.com",gender = 1;另一种添加方式，适合多条数据：INSERT INTO user (...

524 0 0

MySQL 表生成

数据库管理SQL笔记

木灵鱼儿 2月前 MySQL

数据库管理SQL笔记

创建数据库CREATE DATABASE test CHARSET utf8mb4;查看所有数据库show DATABASES;进入指定数据库use 数据库名;查看创建的数据库信息SHOW CREATE DATABASE `ease-change-backend`;得到：CREATE DATABASE `ease-change-backend` /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci */ /*!80016 DEFAULT ENCRYPTION='N' */数据库名可以用`来包...

523 0 0

MySQL 数据库管理

使用Github Actions打包前端项目并自动上传到Releases

木灵鱼儿 2月前教程

使用Github Actions打包前端项目并自动上传到Releases

前言应公司业务需求，最近在写一个谷歌插件，我本来想手动build后将dist目录打包成zip手动Releases一下，但leader说这样太浪费时间了，让我用github的Actions来做，我也是头一回接触这个，两眼一抹黑，花了点时间了解后，成功实现了该功能，可以理解为actions就是预先定义的操作步骤，将多个步骤组合成一个workflows工作流，每次通过触发条件触发这个工作流，有点类似CI/CD的感觉。教程创建workflows首先我们需要在项目根目录创建文件夹：.github └─ workflows创建一个.github目录，在该目录下再创建一个workflows目录，之...

1632 103 0

github actions 自动打包

pnpm 查看插件的版本和测试版本

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

pnpm 查看插件的版本和测试版本

前言最近在写Chrome插件，版本是V3版本，找了好久找到一个插件可以帮助我快速开发：@crxjs/vite-plugin，但是这个插件目前正式版只支持vite2版本，vite3版本还在测试阶段，为此我需要知道最新版的是哪个版本。教程查看正式版版本号：pnpm list @crxjs/vite-plugin如果我要查看测试版：pnpm info @crxjs/vite-plugin versions --json不想用命令我们可以去 npmjs 网站查看插件的版本：

799 6 0

版本 pnpm

解决axios失败重试插件axios-retry和错误消息弹窗重复触发的问题

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

解决axios失败重试插件axios-retry和错误消息弹窗重复触发的问题

前言一直很头疼axios的失败重试插件axios-retry会重复调用axios自定义的响应错误拦截器，而我们常常会在这个拦截器中编写一个用于弹出错误消息的弹窗，这就导致了一个问题：如果我们失败会重试3次，那么全部都失败的话就会触发4次响应错误拦截器，然后就会导致触发4次错误消息的弹窗，非常蛋疼。为此常常需要考虑怎么避免重复触发的问题，常见的一些做法比如通过自定义的拦截器接受的error对象上的config属性，添加一个计数器来处理，如果计数器大于等于3的话就可以触发消息弹窗。本来axios-retry插件本身就会在config上注入一个计数的属性和总次数，但是也没法用，实际测试中发现，...

1199 0 1

axios 拦截器失败重试

ts-node 使用项目中的tsconfig.json和路径别名

木灵鱼儿 4月前 TypeScript

ts-node 使用项目中的tsconfig.json和路径别名

前言在使用 Prisma 的 seed 功能时，我遇到了一个非常棘手的问题：默认情况下，ts-node 会将其运行的脚本视为一个独立的文件进行转换，这导致无法识别较新的 JavaScript API 或路径别名。这在一些复杂场景中特别麻烦，因为我们往往需要复用项目中的工具函数，而由于文件层级的原因，往往不得不使用大量的 ../../../ 路径。更糟糕的是，如果 A 文件引入 B 文件，而 B 文件又无法使用路径别名，这种链式问题使得项目结构变得更加复杂且难以维护。因此，我开始思考一下如何能够简化这一过程，并复用已有的 TypeScript 配置。教程[hide]首先我们先看下我的运行命...

1682 88 2

路径别名 TypeScript ts-node

openWrt或者iStoreOS如何手动卸载openClash

木灵鱼儿 4月前教程

openWrt或者iStoreOS如何手动卸载openClash

前言有时候因为我们误操作导致openClash核心啊或者其他发生了问题，没法恢复了，以前的土办法就是重新安装系统，再来一遍，最近不想再折腾了，想着能不能手动卸载再安装一下呢？但是路由系统本身没有提供卸载可视化按钮，于是我们只能通过命令的形式卸载了。手动卸载先ssh连接路由，这一步就不多说了，连完之后我们输入命令：opkg list-installed | grep openclash这是用于筛选查询，查询openclash的包名，因为我们卸载需要完整包名。一般会返回如下：luci-app-openclash - 0.46.014-beta如果你想查看所有已安装的包，然后自己找，去掉gre...

3889 0 3

卸载 OpenWrt OpenClash

Windows如何读写Proxmox VE（PVE）格式化的ext4磁盘

木灵鱼儿 4月前运维

Windows如何读写Proxmox VE（PVE）格式化的ext4磁盘

前言最近pve换了一块新固态，用于替换原来的机械硬盘，换固态第一个原因是主机搬来搬去，机械盘怕到时候有损伤，那数据就没了，第二是我用来看视频的话，机械的读取确实是一个瓶颈，当然也有可能是因为程序垃圾导致读取卡顿，毕竟我没有装nas这种系统来使用。在更换之前我考虑到数据的迁移，由于pve格式化后的磁盘格式为ext4，这个格式在linux和mac系统中是可以通用的，但是windows本身是没有对它的官方支持，所以当我把磁盘拆下来用移动硬盘盒插电脑时，文件资源管理器中是不是出现对应盘符的。为此我考虑了一下几种数据迁移的方式：pve通过smb局域网共享磁盘；windows本身通过wsl2进行挂载...

1931 0 0

磁盘 windows PVE

mysql 9.0 便携版开启局域网共享

木灵鱼儿 4月前 MySQL

mysql 9.0 便携版开启局域网共享

前言最近使用mysql的时候都是用的一个便携版，打开命令界面就能用了，也不用安装什么依赖，也不需要安装服务，比较方便。但是有时候需要局域网共享一下mysql，为此水个文章记录一下。注意本教程不适用大部分便携版，可能只适用我这种版本的，大家可以参考一下。教程首先我们需要在mysql的配置文件：my.ini添加如下内容：[mysqld] bind-address=0.0.0.0表示mysql启动时要使用ip地址。然后由于便携版的mysql没法直接通过终端进入到命令界面，我们使用Navicat Premium Lite 17这个软件来进入mysql的命令界面。Navicat先本地连接mysql...

1490 2 0

MySQL 局域网共享

git merge合并分支，将多个commit压缩成一条进行提交

木灵鱼儿 4月前 Git 笔记

git merge合并分支，将多个commit压缩成一条进行提交

前言随着项目的复杂度，有时候会用到cherry-pick的情况，但是cherry-pick如果应对太多的commit操作上也会不方便，假如我们有一个dev分支，一个功能分支A，现在功能A上有10个commit提交，都是针对这一个功能的，我们需要将其合并到dev分支。传统的merge合并会将A分支的10个commit提交都合并到dev上，导致commit树变得繁琐。为此我们需要把这10次commit改成一个commit提交。教程首先我们先切到dev分支：git checkout develop然后通过--squash命令来压缩commitgit merge --squash aa就是被合并...

2179 2 2

压缩 git 合并

git 同步远程仓库已删除的分支，本地批量删除分支

木灵鱼儿 4月前 Git 笔记

git 同步远程仓库已删除的分支，本地批量删除分支

前言我们创建了很多分支，但是有一天一些旧的无用的分支已经在远程仓库删除了，但是我们本地对应的分支信息还在，我们需要将其和远程仓库同步。教程首先是远程分支同步处理：git fetch --all --prune获取所有远程仓库的最新提交，并删除本地仓库中不再存在的远程跟踪分支。但是我们只能删除远程的分支，事实上git会在本地创建一个本地的分支，分支名的区别：远程分支是origin/xxx，本地是xxx，通过这个命令我们只是删除了origin/xxx，本地的分支还在。如果分支不多，可以自己手动一个个删除。如果分支多，或者很频繁处理这个事情，我们可以创建一个bash脚本来处理这个事情。创建文件...

2007 0 0

git 分支同步

git cherry-pick 提取提交进行合并

木灵鱼儿 4月前 Git 笔记

git cherry-pick 提取提交进行合并

前言最近在发版的时候遇到一个头疼的问题，就是develop开发分支上的一个功能暂时还不能上线，但是其他的功能提交需要上线，此时平时常用的merge合并就不太行了。为此老大提了一个新的合并方式：git cherry-pick，这个我之前都没有使用过，它的作用就是可以提取其他分支的指定commit进行合并，这样就可以跳过不能上线的功能提交了。教程没有图，在b站视频上偷了一张图来用。可以看到我们有两列分支，左边的12357就是主分支，右边的468就是开发的新功能，但是6这个提交不能进行合并，我们需要提取4和8合并到主分支。在cherry-pick之前我们需要将分支切换到main分支，因为最终代...

1987 0 2

git cherry-pick 提取合并

Nuxt3 控制打包输出目录

木灵鱼儿 5月前 nuxt

Nuxt3 控制打包输出目录

前言Nuxt3采用了nitro作为http服务，所以打包输出相关的配置其实就是nitro的配置。教程打开next.config.ts文件export default defineNuxtConfig({ nitro: { output: { dir: "", // 这个是配置总的输出路径，一般没必要配置 serverDir: "", // 这个是SSR打包输出路径 publicDir: "" // 这个是SSG打包输出路径 } } });比如我希望通过genera...

2275 115 0

打包输出路径 Nuxt3

Nuxt3 解决a元素或者NuxtLink使用绝对路径跳转其它地址报错

木灵鱼儿 5月前 nuxt

Nuxt3 解决a元素或者NuxtLink使用绝对路径跳转其它地址报错

前言最近在使用Nuxt3开发官网的时候，需要有一些地址跳转，但是跳转的地址是绝对路径，比如我官网是/a的域名路径，但是需要从官网跳转到/b路径的时候，nuxt就会报错。在控制台会报警告：No match found for location with path "/b"在通过generate命令打包的时候还会报错： Error: [404] Page not found: /b导致我们打包失败，实际上这个路径在生产环境是存在的，只是在本地开发的时候不存在。不管我们使用A元素还是NuxtLink标签，配置的target="_blank"也没有用，该报...

2211 0 4

路径 Nuxt3 a元素

Windows安装Starship

木灵鱼儿 5月前教程

Windows安装Starship

前言安装的时候总是碰到windows的PowerShell总是没有配置文件，一般谁会去记创建配置的命令啊，为此写个文章记录一下。教程安装Starship先去github下载Starship的msi安装包。github地址：Starship找到starship-x86_64-pc-windows-msvc.msi这个安装包下载。下载完毕后安装即可。创建PowerShell配置文件安装完毕后我们配置一下PowerShell。首先看看配置文件有没有，输入命令：notepad $PROFILE如果打开的不是Microsoft.PowerShell_profile.ps1文件就是没有，我们手动创建...

2002 4 0

windows Starship 终端

木灵鱼儿

阅读了axios源码后对axios的一些最佳实践和axios-retry插件的使用感悟

使用Github Actions打包前端项目并自动上传到Github Pages分支

vue3中使用shiki实现代码高亮和注意事项

爱快ikuai和windows电脑使用iperf3测试内网传输速度

x86多网口软路由+pve+爱快ikuai+iStoreOS实现组网和翻墙

了解前端的复制功能

表维护笔记

搭建一个vite+vue+ts的Chrome插件开发模板

Debian12 更新系统版本（目前更新至12.8版本）

基本查询SQL笔记

表生成的SQL笔记

数据库管理SQL笔记

使用Github Actions打包前端项目并自动上传到Releases

pnpm 查看插件的版本和测试版本

解决axios失败重试插件axios-retry和错误消息弹窗重复触发的问题

ts-node 使用项目中的tsconfig.json和路径别名

openWrt或者iStoreOS如何手动卸载openClash

Windows如何读写Proxmox VE（PVE）格式化的ext4磁盘

mysql 9.0 便携版开启局域网共享

git merge合并分支，将多个commit压缩成一条进行提交

git 同步远程仓库已删除的分支，本地批量删除分支

git cherry-pick 提取提交进行合并

Nuxt3 控制打包输出目录

Nuxt3 解决a元素或者NuxtLink使用绝对路径跳转其它地址报错

Windows安装Starship

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

阅读了axios源码后对axios的一些最佳实践和axios-retry插件的使用感悟

使用Github Actions打包前端项目并自动上传到Github Pages分支

vue3中使用shiki实现代码高亮和注意事项

爱快ikuai和windows电脑使用iperf3测试内网传输速度

x86多网口软路由+pve+爱快ikuai+iStoreOS实现组网和翻墙

了解前端的复制功能

表维护笔记

搭建一个vite+vue+ts的Chrome插件开发模板

Debian12 更新系统版本（目前更新至12.8版本）

基本查询SQL笔记

表生成的SQL笔记

数据库管理SQL笔记

使用Github Actions打包前端项目并自动上传到Releases

pnpm 查看插件的版本和测试版本

解决axios失败重试插件axios-retry和错误消息弹窗重复触发的问题

ts-node 使用项目中的tsconfig.json和路径别名

openWrt或者iStoreOS如何手动卸载openClash

Windows如何读写Proxmox VE（PVE）格式化的ext4磁盘

mysql 9.0 便携版开启局域网共享

git merge合并分支，将多个commit压缩成一条进行提交

git 同步远程仓库已删除的分支，本地批量删除分支

git cherry-pick 提取提交进行合并

Nuxt3 控制打包输出目录

Nuxt3 解决a元素或者NuxtLink使用绝对路径跳转其它地址报错

Windows安装Starship

最近评论

博客文章RSS订阅

博客评论RSS订阅