木灵鱼儿

木灵鱼儿 6月前教程

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文件就是没有，我们手动创建...

2228 4 0

windows Starship 终端

微信如何判断是否关注公众号

木灵鱼儿 6月前微信

微信如何判断是否关注公众号

前言最近写微信相关的功能，要求用户必须关注公众号才能使用功能，所以我们要有一个办法去判断是否关注了公众号，查了下，网上好多乱七八糟的教程，全都没说到点子上，当然也有可能是历史原因，微信的api年年改。教程[hide]获取用户信息判断是否关注实际上现在用于用户是否判断关注公众号，微信官方有提供一个接口，接口会返回一个subscribe字段，用于告知该用户是否关注。官方文档：获取用户基本信息(UnionID机制)GET https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lan...

4697 56 15

微信公众号

Node后端发送请求如何关闭SSL验证

木灵鱼儿 6月前 Nest.js

Node后端发送请求如何关闭SSL验证

前言这是个很奇妙的事情，后端在配置SSL证书的时候出现了一些问题，导致在mac系统上可以正常https访问，但是在其他系统就不行了，因为ssl证书校验不通过，导致请求直接 500错误。本来让后端重新配个正确的证书就行了，但是为了赶时间测试，我这边也得做一个处理，就是虽然请求的是https的api，但是必须关闭ssl验证。这就很奇妙了，从来没有干过，为此写个文章，方便以后查询。教程axios请求配置axios请求它有两个配置属性，分辨对应http和https，我们只需要从node的模块http和https中引入Agent ，然后new出它的实例，同时传入关闭ssl验证的属性即可。impor...

2472 1 1

node ssl

OAuth2中Client Credentials客户端模式如何发送请求

木灵鱼儿 6月前 Nest.js

OAuth2中Client Credentials客户端模式如何发送请求

前言最近在写后端的时候，需要与其他后端服务进行沟通调用，为此就涉及到了信任的问题，对方如何知道我的请求是可信的，总不能随便一个人的请求它就要进行反馈，所以就用到了OAuth2中的Client Credentials 客户端模式来实现认证，通过一个指定的api请求获取到token，然后之后的其它api通信都通过携带这个token来实现认证。其实就和前端的token校验是模式是一样的，但是唯一不同的就是我怎么去发送一个Client Credentials规范的请求来获取token。OAuth2 有哪些模式？为了了解Client Credentials 模式，就不得不了解下OAuth2了。OA...

1877 1 0

Nesjs OAuth2 客户端模式

Nestjs 使用barrelsby一键生成引用入口文件index.ts（桶文件）

木灵鱼儿 6月前 Nest.js

Nestjs 使用barrelsby一键生成引用入口文件index.ts（桶文件）

前言为什么要生成一个统一的入口文件，其实也是为了简化引入，在Nestjs中我们会根据业务产生很多的DTO和Entity文件，还有一些公共的封装，比如封装的拦截器、过滤器、管道等；这些东西为了方便管理，我们都会存放在不同的目录下。比如我个人常用的：common/guards这是一个自定义守卫的目录，但是不同的守卫它会有自己的一些文件，这是我就会做二次划分：common/guards/jwt-auth common/guards/content-type common/guards/index.ts我会将不同的守卫单独再用一个文件夹存放，然后在同级的情况下使用一个index.ts文件来做...

3342 42 6

入口 Nestjs index.ts

Nestjs 使用swagger生成API文档

木灵鱼儿 7月前 Nest.js

Nestjs 使用swagger生成API文档

前言因为后端用java写的项目用到了swagger来生成文档，用起来真的一言难尽，但是为了快速开发，很多时候并没有太多时间来单独写一份api文档，更别说长期更新维护了。所以用代码来生成文档，好像就成了一种需求。刚好有机会我能全栈负责一个项目，当然要搞起来啊，虽然不用，但是这不就是成为项目经验的一种了。开搞。安装依赖并封装启动相关代码pnpm i @nestjs/swagger安装后我们先去环境变量文件新增几个配置项，用于开发和生产环境使用。# 是否启用swagger SWAGGER_ENABLED=true # swagger 标题 SWAGGER_TITLE="API 文档&...

2142 0 0

文档自动生成 Nestjs

解决Nestjs中使用swagger但是返回的类型是存在继承和泛型导致的循环依赖项错误

木灵鱼儿 7月前 Nest.js

解决Nestjs中使用swagger但是返回的类型是存在继承和泛型导致的循环依赖项错误

前言最近在Nestjs项目中使用了swagger来帮助生成api文档，但是当我在返回的类上使用了泛型来传递类型约束的时候，swagger就报错了。我先声明了一个父类用于复用分页属性：// pagination.entity.ts export interface PaginationEntityData<T> { current_page: number; page_size: number; total: number; list: T[]; } export class PaginationEntity<T> { /...

2032 0 0

declare Nestjs swagger

vite+vue3和nuxt3实现低版本浏览器兼容的解决方案（白屏问题）

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

vite+vue3和nuxt3实现低版本浏览器兼容的解决方案（白屏问题）

前言项目全线使用vue3的时候，自然使用的是配套更加契合的vite打包工具，于是自然而然会用到很多新的语法，比如这两年开始普及的可选链语法，这个语法都已经纳入声呐的代码规范中了，但是vite自身打包的时候，并不会做过多的兼容处理。默认情况vite的兼容目标是支持原生ES模块，原生ESM动态导入和import.meta的浏览器，官方预设的兼容目标如下：es2020edge 88firefox 78chrome 87safari 14而我们的可选链正是es2020版本才有的，所以vite在打包后不会做任何兼容处理，这就导致了一些浏览器版本低一点的设备，打开网站就会出现白屏的情况。显然这么新的...

5.2w 62 129

vue3 vite 兼容

解决vscode端口转发（内网穿透）无法启动的问题

木灵鱼儿 7月前教程

解决vscode端口转发（内网穿透）无法启动的问题

前言先说原因，由于国内是禁止访问一些站点的情况下（国情如此），导致vscode无法访问到对应的api请求服务，所以导致一直启动不起来，得到的错误基本上都是：warn Error connecting to relay, will retry: error connecting to tunnel: websocket error: IO error: 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。 (os error 10060)即便我们使用clash做代理处理，但是由于这是终端的请求，普通的代理方式已经不管用了，而通过一些命令处理，比如：CMDset https...

1.1w 5 43

vscode 代理端口转发

“可乐云”机场

木灵鱼儿 7月前 ·

“可乐云”机场

简介官方介绍：“可乐云”机场成立于2020年，是一款快速稳定的网络加速器。该产品支持主流电脑端一键APP加速，免去了第三方客户端复杂配置的问题。用户可以全时段享受游戏和软件加速，以及解锁全球流媒体内容。“可乐云”机场稳定运营，持续更新，致力于提供更优质的云机场服务。官方介绍完了，现在聊聊我的故事。最近工作时，突然收到一个好友申请，打开一看，原来是广告合作邀请。这让我非常高兴，因为之前申请谷歌广告总是被拒，搞得我很郁闷。想着经济形势不好，能有点额外收入补贴网站也不错，但求助于官方论坛，得到的回复都是些没啥用的建议，真是让人失望。这次终于来了一个广告机会，了解后发现广告商提供的是梯子使用权限...

6187 0 1

Nuxt3 解决出现两份css样式问题

木灵鱼儿 8月前 nuxt

Nuxt3 解决出现两份css样式问题

前言最近才发现，nuxt3项目打包后会产生两份css内容，一份是内联样式，一份是css文件样式，最终是css文件样式覆盖了内联，但是这两份样式是一模一样的，而且都是vue组件才会有这种情况，让人不得不怀疑是不是打包出现问题了。事实上也并非如此，这是nuxt3的一个特性，且仅在使用vite的时候才会有，这个特性就是inlineStyles内联样式，这样html可以很快的渲染出东西，大概是这样一个意思。如果你不需要，或者部分组件不需要，可以通过配置进行修改。教程[hide]我们找到nuxt.config.ts文件，配置如下内容：export default defineNuxtConfig(...

6029 58 18

样式 Nuxt3

PostCSS另一种css兼容处理方式（支持nuxt3）：postcss-preset-env

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

PostCSS另一种css兼容处理方式（支持nuxt3）：postcss-preset-env

前言以前使用PostCSS做css兼容性处理，常常就是使用autoprefixer做个浏览器前缀处理就完事了，但是实际上如果真要实现所谓的兼容性处理，css甚至还需要做转换处理，类似于js的async...await的语法转换处理。autoprefixer只是自动添加浏览器前缀，而本次使用的postcss-preset-env除了自动添加浏览器前缀，并且会根据目标浏览器自动转换成兼容的格式，包含许多其他 CSS 提案的 polyfill。举个例子：:root { --main-color: #06c; } body { color: var(--main-color);...

2883 18 0

postcss autoprefixer css兼容

vue实现nuxt的动态布局Dynamic Layout

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

vue实现nuxt的动态布局Dynamic Layout

前言最近在写新的项目，其中遇到一个问题，我的登录页和注册页相关的页面，他们的布局是相同的，所以理所当然的封装了一个layout组件，然后每个页面自己import引入它并使用，这么看其实没有问题。但是当我给layout增加了一个持久的动画的时候，切换页面由于组件会重新渲染，这就导致动画又重新开始了，显得整体非常突兀。于是不得不将layout组件提升到route-view路由视图的外层，然后又要考虑其他layout布局也要生效，于是就有了仿nuxt的动态布局的需求。我希望在路由的meta配上一个layout属性，然后通过这个属性指定对应的布局组件。[hide]代码注意事项首先不能直接从rou...

2922 0 8

layout 动态布局 Dynamic Layout

OpenWrt 换源

木灵鱼儿 8月前运维

OpenWrt 换源

先确保能访问外网输入ping命令测试：ping -c 4 www.baidu.com意思是ping 4次指定网址，这里是ping的百度。然后返回如果有响应值就是可以的，例如：PING www.baidu.com (183.240.98.161): 56 data bytes 64 bytes from 183.240.98.161: seq=0 ttl=49 time=32.139 ms 64 bytes from 183.240.98.161: seq=1 ttl=49 time=32.683 ms 64 bytes from 183.240.98.161: seq=2 ttl=49 ...

3633 3 5

换源 OpenWrt clash

scss 实现星星效果

木灵鱼儿 8月前 SASS

scss 实现星星效果

前言这个是无意间看到b站的一个视频，发现挺好的，css实现本身还不吃太高的配置，视频链接如下：【Sass实现星空效果【渡一教育】】教程中使用了scss的除法运算法，但是这个用法在新版本中已经弃用了，现在推荐使用math语法，如果你的scss版本是新版本的，比如1.77.1，使用这种方式会报错。教程配置Math语法支持在vite的scss中配置如下;// vite.config.ts export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData:...

2777 1 2

函数 Math 星星

vue3 hooks redirect重定向处理

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

vue3 hooks redirect重定向处理

前言当我们访问一些需要登录才能访问的页面，通过路由守卫我们会被重定向到登录页，同时会在链接参数里携带一个redirect字段，表示登录完成后跳转到redirect的路由。单独考虑这个问题，我们只需要在登录页处理这个问题就行了，但是随着业务的变化，有时候不一定只在登录页使用，这个重定向的功能可以在多处使用。总不能在每个要用到重定向的地方加if判断是否存在redirect字段吧。为此我封装了一个专门处理重定向的hooks：useRedirect.ts代码[hide]// useRedirect.ts import type { RouteLocationRaw } from "vu...

2531 0 1

vue 重定向 hooks

解决Object.keys之后遍历的key是string类型而不是对象的属性key导致的警告

木灵鱼儿 8月前 TypeScript

解决Object.keys之后遍历的key是string类型而不是对象的属性key导致的警告

前言当我们使用Object.keys获取某个对象的key数组的时候，ts推导出来的类型是string[]，当我们再通过forEach去遍历这个key数组时，由于string类型与对象具体的key不一致，导致报错：素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型。我感觉ts这里的推导能力太差了，明明已经把具体的对象传递给他了，结果它直接返回一个string[]类型来一劳永逸，导致后续通过string类型去拿对象的value，就导致类型不匹配了。解决办法以前的我会这样写：const kindMap = { balance: 1, gpu: 2 };...

2302 16 0

类型 TypeScript Object.keys

【精华】使用策略模式处理vue-router 登录鉴权

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

【精华】使用策略模式处理vue-router 登录鉴权

常规的路由鉴权在前端的路由鉴权中，简单的鉴权会根据用户的登录状态可以控制路由的访问，比如常见的：登录状态可访问的路由未登录状态可访问的路由他们在路由守卫中代码示意如下： const routes = [ { path: '/', redirect: '/dashboard', }, { path: '/dashboard', component: Dashboard, }, { path: '/profile', component: Pr...

2187 0 4

策略路由鉴权 Context

pad平板打开网站字体变大的解决方案

木灵鱼儿 9月前 CSS

pad平板打开网站字体变大的解决方案

前言这是个非常有意思的情况，由于我一直没有平板设备，所以这个问题一直都没有遇到，我一直相信在pc端通过媒体查询就可以适配到所有的机型，加上我用手机查看的时候，也是没有问题的，所以一直相信至今。结果我最近收了一台二手平板来帮助我学习的时候，发现出了一个大问题，在pad端访问我的主题，首页文章的卡片字体会突然被放大了，我以为是css的问题，结果调试的时候发现css没有变化，但是实际渲染的字体大小由原来的13px变成了20.0549px，这显然有问题。而且我发现只有p元素字体会发生这种情况，贼奇怪，难道语义标签会带着隐性的兼容问题？这是在平板中的效果，p元素的字体比标题还大了。这张是我在电脑端...

4101 7 7

css 字体变大平板

vite5 打包体积分析（对标webpack包体分析）

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

vite5 打包体积分析（对标webpack包体分析）

前言之前的vite很多文章一直推荐使用的是rollup-plugin-visualizer插件，但是这个插件真的一点都不好用，和webpack的体积分析差太多了。这次新项目中也需要用到体积分析，需要我找了很久，找到一个新的插件，基本上可以和webpack的体积分析差不多体验了。插件：vite-bundle-analyzer效果图：相比较之前的还是挺好用的。教程先安装依赖：pnpm i vite-bundle-analyzer -D然后去vite.config.ts中配置：import { defineConfig } from "vite"; import { ana...

3162 107 0

vite 包体分析

git 拉取仓库的时候默认rebase

木灵鱼儿 9月前 Git 笔记

git 拉取仓库的时候默认rebase

前言git仓库如果有人提交了一次改动，然后你本次改动也修改了相同的文件，提交数据时就会触发文件diff，此时git会产生一条merge记录，我们需要手动调整好冲突保存在push到仓库。如果merge产生太多了会对整个git历史记录变得复杂，实际上大部分情况下这个meger内容是不重要的，有的公司会要求我们在拉取数据时使用rebase，用于去除meger的产生。命令一般是：git pu11 -r命令中的 -r 选项实际上是 --rebase 的简写形式。它告诉 Git在从远程仓库拉取更新时，使用rebase 而不是默认的 merge 策略。下面解释-下 rebase 和 merge 的区别...

1886 0 0

git rebase

事件代理中如何快速排除指定元素

木灵鱼儿 9月前 JavaScript

事件代理中如何快速排除指定元素

前言在事件代理中，往往有的时候我们需要生效的部分会存在其他元素影响，比如我可能需要响应一个卡片的点击事件，但是这个卡片里面自身又有其它link元素，比如卡片的分类，tag标签等，当我们点击分类或者tag标签，由于事件冒泡的原因，他也会触发事件代理的click事件，也就是父级元素的click事件。但是显然我们不需要响应他们，如果单纯通过event.target去排查，是不够完善的，有可能这个target是一个无class的元素，或者是同时存在多个的元素，我们可能还希望通过指定他们的父级元素class来进行排除。教程const blackClassList = ["article-...

1441 71 0

javascript 事件代理

JavaScript 接口和面向接口编程

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 接口和面向接口编程

什么是接口接口是对象能响应的请求的集合我们经常说一个库或者模块对外提供了某某 API 接口。通过主动暴露的接口来通信，可以隐藏软件系统内部的工作细节。这也是我们最熟悉的第一种接口含义。第二种接口是一些语言提供的关键字，比如 Java 的 interface。interface 关键字可以产生一个完全抽象的类。这个完全抽象的类用来表示一种契约，专门负责建立类与类之间的联系。第三种接口即是我们谈论的“面向接口编程”中的接口，接口的含义在这里体现得更为抽象。Java中的抽象类java中为了实现对象的多态性会使用向上转型的超类型来作为值的约束，这个向上转型的超类型就是抽象类或者inter...

1716 1 0

接口 JavaScript模式

JavaScript 设计原则

木灵鱼儿 9月前 JavaScript设计模式与开发实践

JavaScript 设计原则

单一职责 SRP个类应该仅有一个引起它变化的原因。更具体地说，单一职责原则意味着一个类应该只负责一项职责或功能。如果一个类承担了过多的职责，那么在软件的修改过程中，修改某一功能可能会影响到由这一类管理的其他功能。遵循单一职责原则可以使类更加独立，从而容易理解、维护和扩展。在JavaScript中类往往是弱化的，因此单一职责往往更多的应用在对象和方法上。代理模式中的单一职责我们实现一个图片的懒加载它需要做两件事件，第一件是创建img图片并添加到页面中，第二件就是占位图设置和实际图片加载完成后重新赋值src。利用单一职责，我们将其拆分成两个方法：var myImage = (function...

1585 11 0

JavaScript模式设计原则

Proxmox VE（PVE）安装windows11精简版ESD

木灵鱼儿 9月前运维

Proxmox VE（PVE）安装windows11精简版ESD

前言最近在阿里云盘上搞到了几份视频资源，由于挺大的，就不想长时间开电脑下载，加上已有pve主机了，直接在pve上下载并存到pve自己的磁盘上不就行了。于是我一开始就通过Alist这个网盘聚合的工具来实现下载，但是发现有一个很蛋疼的问题，当我通过alist将网盘的文件复制到挂载的本地磁盘上时，虽然文件确实有在下载，但是没有任何提示，没有进度条，我唯一能拿来做判定条件的就是pve的网络波动，但是这样也不是万能的，因为下载到一半突然直接网络波动消失了。我心想完蛋，怕是白下了，估计是哪个文件下载失败报错了啥的。为了解决这个问题，我能想到的最佳方案就是用pve去虚拟一个windows系统，然后wi...

4595 4 0

windows PVE esd

木灵鱼儿

Windows安装Starship

微信如何判断是否关注公众号

Node后端发送请求如何关闭SSL验证

OAuth2中Client Credentials客户端模式如何发送请求

Nestjs 使用barrelsby一键生成引用入口文件index.ts（桶文件）

Nestjs 使用swagger生成API文档

解决Nestjs中使用swagger但是返回的类型是存在继承和泛型导致的循环依赖项错误

vite+vue3和nuxt3实现低版本浏览器兼容的解决方案（白屏问题）

解决vscode端口转发（内网穿透）无法启动的问题

“可乐云”机场

Nuxt3 解决出现两份css样式问题

PostCSS另一种css兼容处理方式（支持nuxt3）：postcss-preset-env

vue实现nuxt的动态布局Dynamic Layout

OpenWrt 换源

scss 实现星星效果

vue3 hooks redirect重定向处理

解决Object.keys之后遍历的key是string类型而不是对象的属性key导致的警告

【精华】使用策略模式处理vue-router 登录鉴权

pad平板打开网站字体变大的解决方案

vite5 打包体积分析（对标webpack包体分析）

git 拉取仓库的时候默认rebase

事件代理中如何快速排除指定元素

JavaScript 接口和面向接口编程

JavaScript 设计原则

Proxmox VE（PVE）安装windows11精简版ESD

最近评论

博客文章RSS订阅

博客评论RSS订阅