远小帅-CSDN博客

原创 WebSocket封装（TypeScript、单例模式、自动重连、事件监听、Vue中使用）

可以在不同的 Vue 组件/页面中通过 SocketService.getInstance() 获取同一个 WebSocket 连接，监听数据接收以及发送消息。

2024-04-24 11:12:01 214

原创 Windows端口被占用

netstat -ano | findstr :，然后打开任务管理器，搜索 PID，找到对应的任务，右键 ‘结束任务’

2024-02-20 16:22:04 234

原创 Linux(CentOS)安装PostgreSQL数据库(外网访问)

本文介绍了如何在CentOS上安装和配置PostgreSQL数据库，并设置默认密码以及允许外部网络访问。通过以下步骤，您可以完成安装和配置：1. 下载并安装PostgreSQL。2. 设置默认密码。3. 允许外部访问，并配置防火墙和PostgreSQL的配置文件。4. 测试连接。通过这些步骤，您可以在CentOS上成功安装和配置PostgreSQL数据库，并通过Navicat等工具进行连接和管理。

2024-01-19 11:28:38 477

原创 CSS水平垂直居中(最常见的三种方案flex、grid、absolute)

本文简单介绍一下现代 CSS 中最常见的三种水平垂直居中方案。

2024-01-11 15:08:06 670

原创在Next.js渲染Markdown竟然如此简单

在这篇文章中，我详细介绍了如何在 Next.js 中渲染 Markdown 和 MDX 文件。希望这篇文章能够帮助你更好地理解和使用 Markdown 和 MDX 在 Next.js 中的应用，为你的开发工作带来便利。下一篇文章我将开发一个具有 SEO 优化的博客实战项目，使用 MDX 渲染，有感兴趣的小伙伴可以关注一下。

2023-12-19 15:41:49 1271 2

原创在React中实现好看的动画Framer Motion(案例：滚动进度条)

Framer Motion 是一个适用于 React 网页开发的动画库，它可以让开发者轻松地在他们的项目中添加复杂和高性能的动画效果。该库提供了一整套针对 React 组件的动画、过渡和手势处理功能，使得通过声明式的 API 来创建动画变得简单直观。接下来我将带你使用 Framer Motion 实现一个滚动进度条案例，用于实时显示滚动进度。

2023-12-19 07:00:00 692

原创 JavaScript数组分组groupBy

JavaScript 最近发布了一个方法 Object.groupBy，可以对可迭代对象中的元素进行分组。

2023-12-17 16:07:34 362

原创 Vue3+Setup+TypeScript实现主题切换(浅色、深色、跟随系统)

使用 Vue 3 的 Composition API、 TypeScript 以及 `` 语法糖，实现动态主题切换，能够在 'light'（明亮）、'dark'（暗黑）和 'system'（系统）主题之间切换，并且使用 `localStorage` 做了状态缓存。代码十分精简，提供 JavaScript 和 TypeScript 版本，也可以在线体验此功能。

2023-12-16 15:57:13 884

原创在React中实现好看的动画Framer Motion(案例：跨DOM元素平滑过渡)

Framer Motion 是一个适用于 React 网页开发的动画库，它可以让开发者轻松地在他们的项目中添加复杂和高性能的动画效果。该库提供了一整套针对 React 组件的动画、过渡和手势处理功能，使得通过声明式的 API 来创建动画变得简单直观。接下来我将带你使用 Framer Motion 实现一个选中样式平滑过渡的案例。

2023-12-16 11:27:05 966

原创使用JavaScript转换图片格式

我们可以在现代浏览器中直接转换图片和格式，不需要上传服务器或者使用服务器脚本。

2023-12-15 22:42:10 522

原创在Node.js中停止使用dotenv

dotenv 是一个从 `.env` 文件中加载环境变量的包，npm 周下载量有三千五百万。在 Node.js `v20.6.0` 中，已经内置了对 `.env` 文件的支持，这篇文章将演示如何在 Node.js 中访问 `.env` 中的环境变量。

2023-12-15 17:07:10 686

原创 Linux系统安装NVM管理多版本Node.js（两行代码）

nvm (Node Version Manager) 是一个非常实用的工具，它允许您在同一台机器上安装和使用多个版本的 Node.js。

2023-12-14 22:03:23 412

原创 React渲染Markdown & 代码高亮显示 & 代码块复制

使用 react-markdown 实现 markdown 的渲染，使用 @tailwindcss/typography 实现好看的样式。项目基于 Vite + React + TypeScript搭建，包管理工具使用的是 pnpm，需要安装。首先安装和react-markdown 用于解析 markdown 语法，rehype-highlight 和 highlight.js 用于突出高亮显示代码块。

2023-12-14 17:59:32 1329

原创 Vue通过拖拽改变容器大小

通过拖拽改变大小是一个很常见的业务场景，比如我们常用的编辑器（Jetbrains 系列、VSCode），都有一些可以通过拖拽改变宽高的窗口，当我们鼠标悬停在边缘时，鼠标变为水平或者垂直的双向箭头，通过拖拽来改变宽高。为了简化操作，接下来我将使用 Vue3 实现类似的功能，代码并不局限于框架，通过简单的修改也可以在 JavaScript 或者 React 中实现同样的效果。样式我使用了 Tailwind CSS，如果有不理解的类，可以去 Tailwind CSS 查阅。

2023-12-13 17:59:05 782

原创 Next.js加载异步组件 & 骨架屏

Next.js 中有两种处理页面加载的方式，一种是 Loading UI 一种是 Streaming。接下来我将介绍这两种的区别，以及实际的业务场景。当我们进入某个页面时，需要获取页面数据，可能是从数据库读取也有可能是 API 服务，总之这是一个异步任务，我们可以在获取数据过程中提示用户数据正在加载，比如放置一些骨架屏，提升用户的体验。如果不对这些进行处理，使用体验会大打折扣。假设我们有一个场景，进入 /posts 页面后获取所有的文章数据。可以解开上面的注释延长加载时间。

2023-12-13 15:49:32 1808 1

原创 React+TailwindCSS快速实现暗黑模式切换

使用 React Context API、React hooks 和 TailwindCSS 的 Dark Mode 快速实现网页浅色模式和深色模式之间的切换。此教程需要对 React 的 Context Api 有一定的了解，如果您还不了解，可以前往 react.dev 学习。

2023-12-08 17:31:22 698

原创 Next.js使用Supabase实现Github登录

Next.js 有许多 OAuth 认证方案来实现 Github 或者 Google 登录，比较常见的有等。Supabase提供了很多的核心服务，包括 PostgreSQL 数据库、身份验证、文件存储等。

2023-12-08 12:01:17 1018

原创使用TypeScript搭建Express项目

使用TypeScript快速搭建Express项目

2023-10-23 15:47:57 293

原创 pnpm安装最新Next.js报错TypeError: Cannot read properties of undefined (reading ‘config‘)

使用 `pnpm dlx create-next-app@latest` 安装最新的 Next.js 项目运行后报错 TypeError: Cannot read properties of undefined (reading 'config')

2023-10-12 09:58:03 329 1

原创 Koa2简明笔记

分别对应 MongoDB 数据库和 MySQL 数据库。此外，sequelize 还支持 MariaDB，SQLite 和 PostgreSQL 数据库。可以使用 postman 、apifox 等 api 调试工具进行测试，或者使用 jetbrains 开发工具的 .http 文件进行测试。koa2 中常使用 orm 框架来操作数据库，其中最常见的两个框架为。，此时可以看到页面输出内容。对错误进行处理，返回。来运行我们的开发环境。接收 post 传参。postman 测试。

2023-10-06 22:19:15 55 1

原创在Next.js中使用Prisma

Prisma是一个用于Node.js和TypeScript的下一代ORM（对象关系映射）工具，它可以让你以一种直观、高效和安全的方式读写数据库中的数据。

2023-09-07 15:57:02 306

原创 WSL迁移到非系统盘

手摸手教你如何将WSL从C盘迁移到其他盘，学不会作者下跪

2023-06-20 17:45:55 216

原创在Ubuntu22.04中构建Tauri App应用

Tauri是一个开源的框架，用于构建跨平台的原生应用程序。Tauri能够将Web技术（例如JavaScript、HTML和CSS）与本地操作系统API结合起来，以创建高性能、安全、可靠和易于维护的桌面应用程序。

2023-06-09 11:09:15 421

原创在QEMU虚拟机和宿主机之间传输文件

首先需要在虚拟机上安装SSH服务器（如果没有的话），然后通过虚拟机的IP地址（例如，使用-user-net选项配置的虚拟机网络）访问它。现在，在虚拟机的/mnt/iso目录中，可以访问宿主机中的文件。通过挂载ISO，可以将宿主机上的文件传输到虚拟机。但是，如果要将虚拟机上的文件传输回宿主机，需要创建一个新ISO映像。此时，/mnt/shared目录将指向宿主机上的/tmp/shared目录，可以在两者之间传输文件。首先，在宿主机上创建一个共享目录，然后使用QEMU的-virtfs选项将其挂载到虚拟机上。

2023-06-01 12:17:56 8007

远小帅的博客