木灵鱼儿

木灵鱼儿 1年前 JavaScript设计模式与开发实践

JavaScript 迭代器模式

迭代器模式是一种行为设计模式，它允许您遍历集合中的元素，而无需暴露其底层表示（列表、堆栈、树等）。简单点来说就是自己去实现一个for循环。var each = function( ary, callback ){ for ( var i = 0, l = ary.length; i < l; i++ ){ callback.call( ary[i], i, ary[ i ] ); // 把下标和元素当作参数传给 callback 函数 } }; each( [ 1, 2, 3 ], function( i, n ){ alert ( [ i, n ]...

2102 2 0

JavaScript模式迭代器模式

JavaScript 代理模式

木灵鱼儿 1年前 JavaScript设计模式与开发实践

JavaScript 代理模式

前言代理模式应用非常广泛，比如es6的proxy，接口的反代，vue的响应式数据也用到了代理模式，由于用的很平常，导致对它的认知很模糊。代理模式是一种结构型设计模式，它允许你提供对象的替代品或占位符。代理控制着对原始对象的访问，并允许在将请求传递给对象前后执行一些操作。举个例子，比如前端常用的一个性能优化的方式：事件委托（事件代理）我们给子元素的父元素绑定click事件，通过冒泡的方式统一在父元素处理事件逻辑，这样减少了事件的绑定。这种方式其实又有点像是：中介者模式中介者模式是一种行为设计模式，它通过引入一个中介对象来管理一组对象之间的交互。中介者模式可以将对象之间的复杂多对多关系简化为...

2165 4 0

代理模式 JavaScript模式

JavaScript 策略模式

木灵鱼儿 1年前 JavaScript设计模式与开发实践

JavaScript 策略模式

前言策略模式常常用于解耦代码中的多种方案实现，比如表单校验，我们将校验的规则解耦出来，封装成一个个策略，然后在需要使用的dom上，使用这些策略，从而省去在具体的校验函数中一大堆if else的判断，当然也许不是if else。再举个例子，比如代码的压缩方式，我们可以使用gzip，或者br的方式，或者其他，他们都是为了达到压缩目的，又是多种方案可选的形式。使用策略模式计算奖金很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为 S 的人年终奖有 4 倍工资，绩效为 A 的人年终奖有 3 倍工资，而绩效为 B 的人年终奖是 2 倍工资。假设财务部要求我们提供一段代码，来方...

2314 2 0

JavaScript模式一等公民策略模式

JavaScript 单例模式

木灵鱼儿 1年前 JavaScript设计模式与开发实践

JavaScript 单例模式

前言单例模式在强类型语言中常常是使用一个类来实现，哪怕在ts中，常见的单例示例也是使用class来实现，但是事实上在js中，不一定非得要用类来实现，我们不应该将实现方式看的太死板，使用class也只是手段的一种，在js中我们有很多种方式达到相同的效果。单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。拙劣的模仿在强类型语言中，会给类一个getInstance的方法用于获取实例对象，在js中我们也可以这么写：function User(name) { this.name = name; this.instance = null; } User.prototy...

2239 0 0

JavaScript模式单例模式泛用型

JavaScript 多态

木灵鱼儿 1年前 JavaScript设计模式与开发实践

JavaScript 多态

前言一直很难去真正理解JavaScript的多态到底是什么，从各种教程上对多态的解释都是：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。举例说明：移动这个功能，作用在汽车上，他能实现100公里每小时，如果作用在自行车上，只有20公里每小时，一个加油，一个用脚蹬，实现方式和结果完全不同。但是这也没能解释js中的多态到底是什么？如果从代码上去看的话，可以如下：/** 汽车 */ function Car() {} /** 自行车 */ function Bicycle() {} /** 移动 */ function move(obj) { if (obj inst...

2593 0 0

javascript 设计模式多态

Nuxt3 useFetch和$fetch的探讨以及封装请求处理

木灵鱼儿 1年前 nuxt

Nuxt3 useFetch和$fetch的探讨以及封装请求处理

探讨nuxt3采用了Hydration水合这样一个概念，用于处理服务端生成静态html与客户端js脚本的结合，实现一个可动态交互的页面应用，这个过程被称之为水合。水合的过程可能会相对复杂一些，需要考虑到脚本加载、DOM的匹配、交互的激活（事件）、状态管理等等。其中状态的管理，我目前使用的时候，发现它并不是理想中的那种状态。理想中可能是：服务端渲染时发起了一个api请求，获得了用户的数据，此时我们会将其存储到状态管理中，比如pinia之类的，然后客户端获取到服务端返回的数据，然后自己将pinia的数据恢复到内存中，如果使用了持久化存储，应该会自己将其存储到local之中。但是，实际情况是，...

10.9w 680 142

cookie Nuxt3 请求

Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

木灵鱼儿 1年前 nuxt

Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

前言配置站点地图 sitemap.xml和robots.txt有利于SEO的快速抓取，对于一些站点工具来讲，站点地图可以帮助快速分析整个站点的内容，robots则更好的控制爬虫的抓取。准备工作安装nuxt的seo整合模块：@nuxtjs/seopnpm i @nuxtjs/seo -Dnuxt.config.ts中加入该模块：export default defineNuxtConfig({ modules: ['@nuxtjs/seo'] })配置站点链接事实上我们还应该配置一下站点的链接，站点链接用于在站点地图中拼接出完整的访问链接，但是在开发模式下站点地图的...

7.2w 491 3

爬虫 Nuxt3 SEO

Nuxt3 部署与PM2集群

木灵鱼儿 1年前 nuxt

Nuxt3 部署与PM2集群

前言最近项目开发完毕后一直在折腾部署这块，尝试使用宝塔的Node项目启动Nuxt3的SSR服务，但是非常不稳定，经常半夜就崩溃了，最后还是改用了原生PM2的形式，PM2现在已经支持集群了，还有很多不错的配置项，相比较宝塔的，更加适合Nuxt3Nuxt3打包的方式[hide]在了解打包方式之前，我们先看一下nuxt3项目在package.json文件中预设了哪些命令：{ "scripts": { "build": "nuxt build", "dev": "nuxt...

1.1w 0 23

spa 部署 Nuxt3

Typecho 使用highlight.js代码高亮如何实现代码行号

木灵鱼儿 1年前 Typecho博客教程

Typecho 使用highlight.js代码高亮如何实现代码行号

前言从写博客主题至今，对于代码高亮的行号，一直是比较头疼的，以前初学前端的时候，有过一些尝试，比如利用代码里面的行高是固定的，然后创建一个伪元素，伪元素的内容就是一行一个数字，然后通过脚本生成一个9999行的内容，然后伪元素父容器再做个内容溢出剪切，实现了一个代码行号的处理。最近博客主题评论下有人想要增加代码行号，我记得之前掘金是没有代码行号的，最近打开发现有了，于是就想办法给研究出来了。于是就有了这篇教程，方法也很简单。其实这个行号甚至与highlight.js关系不大，只是作为一个关联关系，可以用其他的同类竞品替代。教程[hide]在处理行号之前，我们需要保证代码已经被highlig...

1.5w 9 30

typecho 代码高亮 highlight.js

Proxmox VE（PVE）安装OpenWrt旁路由并共用一个网口

木灵鱼儿 1年前运维

Proxmox VE（PVE）安装OpenWrt旁路由并共用一个网口

前言该文章解决了以下问题：我有一台小主机，但是它只有一个网口，于是我安装了pve来进行服务器管理，但是我又想搞点魔法，因为软件层的代理，有时候无法满足一些偏门的网络请求，哪怕设置了全局啥的。于是我们就得安装OpenWrt来搞点魔法，并通过旁路由的形式共享同一个网口。但是魔法这个东西我们不想影响整个局域网内的设备，因为我们的实际需求，可能是个别设备，甚至只是个别时段才需要用到魔法，为此本教程就是来解决这些问题的。教程[hide]定制自己的固件我们可以自己去OpenWrt的官网实现自定义定制编译，也可以使用第三方的。官网：openwrt进去后输入x86，找到Generic x86/64选项。...

2.8w 0 58

OpenWrt Proxmox VE 旁路由

如何在项目中使用一个自定义的npm模块（如何使用一个魔改后的npm模块）

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

如何在项目中使用一个自定义的npm模块（如何使用一个魔改后的npm模块）

前言一般情况下确实用不到这种极端处理方案，因为有名的插件依赖，基本上能碰到的bug情况是非常少见的。这篇文章解决的问题是：将 node_modules 中的模块自己修改后，又不想影响全局引入方式，或者说不方便去修改该模块的引入的时候使用的。教程中使用的是pnpm方式，如果你使用npm或者yarn，原理是一样的，可以参考完再自己去看对应的命令使用方式，大差不差的。[hide]教程假设我们已经将模块自己改好并打包好了，此时我们一般会得到一个dist目录，这个是模块打包后的产物，假设这个模块在node_modules中的文件夹夹名字是test，那么你就需要将dist放置在自己新创建的test目...

3152 0 4

硬链接魔改模块

Nestjs CORS配置和生产环境处理

木灵鱼儿 1年前 Nest.js

Nestjs CORS配置和生产环境处理

前言终于有机会上生产环境实战了，特意写上一篇文章方便以后使用。首先我们在本地开发的时候确实需要配置Nestjs的CORS，因为前端在开发阶段使用的api往往是我们本地起的服务，通过ip+端口的形式访问我们的后端，在浏览器中就会触发安全限制，报CORS跨域。为此在开发阶段我们就需要配置它。但是当我们上了生成环境后，就略有不同了。首先node本身没法去映射域名，所以我们需要通过Nginx或者其他做一个反向代理，想域名映射到本地的node服务上去，但是这就产生了问题，就是前端实际上请求的是nginx，nginx再跟nestjs沟通，但是nginx本身就是后端的，所以它不存在跨域的问题，反倒是前...

6270 1 8

跨域 nginx CORS

Debian12 SSH连接报错：Error Handshake failed no matching host key format

木灵鱼儿 1年前运维

Debian12 SSH连接报错：Error Handshake failed no matching host key format

前言最近重置debian12后，ssh连接发现报了错：Error: Handshake failed: no matching host key format于是我用运营商的vnc去查看ssh的配置文件，发现已经将PermitRootLogin yes开启了。就很奇怪，问了下ai发现是协议问题。教程输入：sudo -i先提权，再输入：nano /etc/ssh/sshd_config在配置文件末尾添加以下内容：HostKeyAlgorithms ssh-rsa然后CTRL + O保存，CTRL + X退出编辑。重启下ssh服务：service ssh restart此时再用root账号连...

3333 0 0

ssh debian12 协议

Prisma 使用MongoDB创建数据时报错：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.

木灵鱼儿 1年前 Nest.js

Prisma 使用MongoDB创建数据时报错：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.

前言当我在使用prisma配合MongoDB来创建数据的时候，发现后端报错了，提示：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.https://pris.ly/d/mongodb-replica-set主要原因是因为prisma在创建数据的时候需要使用到事务，但是MongoDB使用事务就需要副本集，副本集类似于一份数据存多份的处理方案。折腾了好久才搞定，特此分享。教程修改配置首先我们需要找到MongoDB的安装位置，在它的bin目录下...

5212 1 4

prisma MongoDB

Prisma 初始化MongoDB数据库下载报错reason unable to verify the first certificate解决方案

木灵鱼儿 1年前 Nest.js

Prisma 初始化MongoDB数据库下载报错reason unable to verify the first certificate解决方案

前言调用prisma的初始化命令并指定链接的数据库类型为MongoDB后:npx prisma init --datasource-provider mongodb它会自己去下载一些相关的依赖，但是此时报错了：Downloading Prisma engines for Node-API for windows [ ] 0%Error: request to https://binaries.prisma.sh/all_commits/efd2449663b3d73d637ea1fd226bafbcf45b3102/windows/query_eng...

2988 2 0

prisma MongoDB 证书校验

Nuxt3使用pinia并持久化处理，同时配置自动引入自定义的仓库store模块

木灵鱼儿 1年前 nuxt

Nuxt3使用pinia并持久化处理，同时配置自动引入自定义的仓库store模块

前言需要注意的是，我们的pinia仓库持久化操作只有在客户端渲染时操作才能触发，比如当第一次访问页面时，你可能直接在setup中给仓库存储内容，这是无效的，我们需要保证在客户端渲染时触发才行，比较好的办法就是在onMounted生命钩子中触发。究其原因就是服务端是没法操作local、cookie这些浏览器配置，而在setup中的代码，是会在服务端也运行的，这就可能导致部分代码到了客户端不再运行。教程安装依赖pnpm i @pinia/nuxt @pinia-plugin-persistedstate/nuxt安装成功后在nuxt.config.ts中配置模块：// nuxt.config...

6962 121 3

自动引入 pinia Nuxt3

解决由于淘宝更换了域名导致pnpm安装依赖总是卡主的bug

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

解决由于淘宝更换了域名导致pnpm安装依赖总是卡主的bug

前言自从淘宝换了源的域名后，pnpm的安装效果真的是越来越垃圾了，因为它会自己去用淘宝源下载，但是也不知道为啥，一些依赖包总是会卡住不动了，烦死了，切vpn也没用。直到我选择关闭ssl严格限制，包一下子就安装成功了，真他妈的坑。教程pnpm config set strict-ssl false大家有需要自己试试。

3653 0 0

换源 pnpm ssl

Nuxt3 环境变量配置

木灵鱼儿 1年前 nuxt

Nuxt3 环境变量配置

前言Nuxt3的环境变量配置有点和平时vue项目的不同，它为了考虑服务端渲染和客户端渲染两种情况，以及安全相关的考量，它的环境变量用起来会有点繁琐。在官方的预设中，你可以使用.env这个文件名的环境变量文件，但是它只会在开发中使用，并不会在构建生产的时候使用，所以我的建议就是放弃使用.env文件名，转而使用指定具体文件的形式。但是即便我们指定了环境变量文件，它也不会出现在Nuxt提供的useRuntimeConfig配置composable中，考虑到安全，我们在服务器渲染时可能有部分环境变量不能出现在客户端中，以防有人恶意获取从而产生破坏。所以nuxt并没有一股脑的把环境变量挂载上去，而...

5531 73 2

安全环境变量 dotenv

Nestjs 下载文件的两种方式（包含前端实现）

木灵鱼儿 1年前 Nest.js

Nestjs 下载文件的两种方式（包含前端实现）

前言实现了文件上传，自然要实现文件下载，经过我的实践总结出两个下载本地文件的方式：第一种是通过api请求，以返回文件流的形式将本地文件返给前端，前端自己接受到文件流后自己把Blob转一下；这种方式的话可以监听文件是否下载完成，完后下载完后删除本地磁盘上的文件。第二种是后端将文件存储在本地磁盘上，创建一个访客也能访问的下载目录，将文件丢到这里，再放开这个目录供访客下载，后端只需要在api返回下载地址即可。这种方式对于用户来说会更加方便，因为可以使用不同的下载工具下载文件。前端也省事，直接创建a链接元素，触发点击就是使用浏览器下载文件了。教程[hide]文件流下载我就不详细写服务了，直接在控...

1w 0 23

下载静态资源下载文件

git 强制让远程分支内容覆盖本地内容

木灵鱼儿 1年前 Git 笔记

git 强制让远程分支内容覆盖本地内容

前言当我们在服务器去拉取git仓库代码使用时候，比如生产环境中，我们去拉取代码，肯定要保证拉取成功，但是git如果本地文件有变化，就会导致拉取失败，一般情况下我们都是通过添加脚本的形式实现生产环境自动拉取，从而节省人力，如果因为本地文件与仓库不同就拉取失败，这就显然并不健壮。而且生产环境基本上都是可以让远程仓库直接覆盖本地文件的，一切以远程仓库文件为准，所以我们需要实现让远程仓库强制覆盖本地。教程假如我希望让远程的develop分支覆盖本地，就先fetch请求远程仓库对应分支的最新资源git fetch origin develop完毕后我们进行覆盖git reset --hard or...

3677 74 0

git 覆盖

Prisma中获取链表查询的类型

木灵鱼儿 1年前 Nest.js

Prisma中获取链表查询的类型

前言有时候我们查询的数据是一个链表查询的结果，示例如下：const pageData = await this.prisma.page.findUnique({ where: { id, deletedAt: null }, include: { categories: { where: { deletedAt: null }, include: { bookmarks: { ...

3008 5 0

链表 prisma Nestjs

安卓三星浏览器国内开启广告拦截支持

木灵鱼儿 1年前教程

安卓三星浏览器国内开启广告拦截支持

前言三星浏览器是我目前个人觉得用起来比较舒服的一个软件，从三星s7e一直沿用到现在，相比较谷歌浏览器，三星浏览器的视频增强功能非常好用，当然还有一个广告拦截功能，需要安装专门的插件，但是这两年即便是从谷歌商店下载的三星浏览器还是beta版本，都不能启用abp插件。解决的方式就是需要手动调整一下，具体教程如下：教程在浏览器地址栏输入：internet://debug/此时会进入到一个页面此时在点击浏览器设置，翻到最底下就会出现一个Debug settings选项，点击进去。找到选项：Feature variation test，点击进入点击Sales code选项，翻到最底下点击Other...

7385 4 0

安卓三星浏览器广告拦截

Nestjs DTO实战需要掌握的技术：继承、异步校验的问题

木灵鱼儿 1年前 Nest.js

Nestjs DTO实战需要掌握的技术：继承、异步校验的问题

前言最近在实际项目运用中，发现之前学习的DTO还是太浅显了，在实战后了解了两个非常重要的知识，特此分享出来。[hide]继承在代码中，复用是一个很重要的部分，如果编写的代码没有任何可复用的部分，只能说编写代码的能力太差，业务代码中，极大部分都是可以复用的，而复用的手段之一就是继承。在Nestjs中DTO是与class-validator配合做校验使用的，如果我们简单的使用extends继承的话，就会丢失class-validator的校验规则。import { IsNotEmpty, IsNumber, Min, Max } from "class-validator"...

5609 1 10

异步校验 Nestjs DTO

Nestjs 使用passport-google-oauth20实现谷歌登录

木灵鱼儿 1年前 Nest.js

Nestjs 使用passport-google-oauth20实现谷歌登录

前言对接第三方登录，最有名的肯定是谷歌了，全球大部分web程序，都有对接谷歌登录的功能。在之前的文章中我们通过passport的jwt策略，实现了本地jwt鉴权登录处理，passport本身就是一种策略模式，通过调用不同的策略实现不同的效果，其中就有关于谷歌登录的处理，这就大大的减少了我们的心智负担。但是需要注意，谷歌登录对网络要求非常高，因为咱们是国内环境，我尝试使用windows下的clash进行fq处理，哪怕是全局规则，nestjs这边还是无法访问到谷歌的服务，从而导致报错：Failed to obtain access token我最终通过路由器的OpenClash解决这个问题，...

1w 0 25

谷歌登录 Nestjs passport

如何声明一个NodeJs服务的环境变量类型ProcessEnv声明

木灵鱼儿 1年前 TypeScript

如何声明一个NodeJs服务的环境变量类型ProcessEnv声明

前言在做node后端服务开发的时候，使用环境变量已经是基操了，但是在ts中默认的环境变量是第一个非常宽泛的类型：interface Dict<T> { [key: string]: T | undefined; } interface ProcessEnv extends Dict<string> { /** * Can be used to change the default timezone at runtime */ TZ?: string; }这就导致我们自定义的环境变量是没有属性提示的，有点难受，所以需要我们自己去声明一个...

4543 5 1

环境变量 env TypeScript

木灵鱼儿

JavaScript 迭代器模式

JavaScript 代理模式

JavaScript 策略模式

JavaScript 单例模式

JavaScript 多态

Nuxt3 useFetch和$fetch的探讨以及封装请求处理

Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

Nuxt3 部署与PM2集群

Typecho 使用highlight.js代码高亮如何实现代码行号

Proxmox VE（PVE）安装OpenWrt旁路由并共用一个网口

如何在项目中使用一个自定义的npm模块（如何使用一个魔改后的npm模块）

Nestjs CORS配置和生产环境处理

Debian12 SSH连接报错：Error Handshake failed no matching host key format

Prisma 使用MongoDB创建数据时报错：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.

Prisma 初始化MongoDB数据库下载报错reason unable to verify the first certificate解决方案

Nuxt3使用pinia并持久化处理，同时配置自动引入自定义的仓库store模块

解决由于淘宝更换了域名导致pnpm安装依赖总是卡主的bug

Nuxt3 环境变量配置

Nestjs 下载文件的两种方式（包含前端实现）

git 强制让远程分支内容覆盖本地内容

Prisma中获取链表查询的类型

安卓三星浏览器国内开启广告拦截支持

Nestjs DTO实战需要掌握的技术：继承、异步校验的问题

Nestjs 使用passport-google-oauth20实现谷歌登录

如何声明一个NodeJs服务的环境变量类型ProcessEnv声明

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

JavaScript 迭代器模式

JavaScript 代理模式

JavaScript 策略模式

JavaScript 单例模式

JavaScript 多态

Nuxt3 useFetch和$fetch的探讨以及封装请求处理

Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

Nuxt3 部署与PM2集群

Typecho 使用highlight.js代码高亮如何实现代码行号

Proxmox VE（PVE）安装OpenWrt旁路由并共用一个网口

如何在项目中使用一个自定义的npm模块（如何使用一个魔改后的npm模块）

Nestjs CORS配置和生产环境处理

Debian12 SSH连接报错：Error Handshake failed no matching host key format

Prisma 使用MongoDB创建数据时报错：Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.

Prisma 初始化MongoDB数据库下载报错reason unable to verify the first certificate解决方案

Nuxt3使用pinia并持久化处理，同时配置自动引入自定义的仓库store模块

解决由于淘宝更换了域名导致pnpm安装依赖总是卡主的bug

Nuxt3 环境变量配置

Nestjs 下载文件的两种方式（包含前端实现）

git 强制让远程分支内容覆盖本地内容

Prisma中获取链表查询的类型

安卓 三星浏览器国内开启广告拦截支持

Nestjs DTO实战需要掌握的技术：继承、异步校验的问题

Nestjs 使用passport-google-oauth20实现谷歌登录

如何声明一个NodeJs服务的环境变量类型ProcessEnv声明

最近评论

博客文章RSS订阅

博客评论RSS订阅

安卓三星浏览器国内开启广告拦截支持