- 博客(38)
- 收藏
- 关注
RSS订阅原创 基于 Vue.js 的 PDF 文档渲染性能优化实践
PDF 文档作为一种常见的文件格式，在Web应用中的展示仍面临性能挑战，特别是对于大型文档。在浏览器中渲染大型 PDF 时，常见问题包括初次加载慢、内存占用高、滚动卡顿等。本文将分析一个基于 Vue 3 的 PDF 渲染优化方案，展示如何通过虚拟滚动、分批渲染和缓存策略来提升用户体验。
2025-03-31 15:11:30
468
原创 Vue2项目搭建：Vue2.7+Vite4+Pinia+TailwindCSS+Prettier+ESLint
目前 create-vue 和 Vite 都不提供 Vue2 项目的搭建，不想用 Vue CLI 和 webpack，于是就打算从 0 搭建一个工程化项目，支持组合式 API (Composition API) 写法，没有使用 TypeScript，有朋友需要的话我可以再完善一下。
2024-09-04 15:37:04
1238
原创 Drizzle ORM使用Azure PostgreSQL数据库迁移失败
需要在 `服务器参数` 里，将 `require_secure_transport` 修改为 `off`，点击保存后重新部署，再次执行数据库迁移命令。
2024-08-09 20:00:21
455
原创 WebSocket封装（TypeScript、单例模式、自动重连、事件监听、Vue中使用）
可以在不同的 Vue 组件/页面中通过 SocketService.getInstance() 获取同一个 WebSocket 连接，监听数据接收以及发送消息。
2024-04-24 11:12:01
1167
原创 Linux(CentOS)安装PostgreSQL数据库(外网访问)
本文介绍了如何在CentOS上安装和配置PostgreSQL数据库，并设置默认密码以及允许外部网络访问。通过以下步骤，您可以完成安装和配置：1. 下载并安装PostgreSQL。2. 设置默认密码。3. 允许外部访问，并配置防火墙和PostgreSQL的配置文件。4. 测试连接。通过这些步骤，您可以在CentOS上成功安装和配置PostgreSQL数据库，并通过Navicat等工具进行连接和管理。
2024-01-19 11:28:38
1035
原创 在Next.js渲染Markdown竟然如此简单
在这篇文章中，我详细介绍了如何在 Next.js 中渲染 Markdown 和 MDX 文件。希望这篇文章能够帮助你更好地理解和使用 Markdown 和 MDX 在 Next.js 中的应用，为你的开发工作带来便利。下一篇文章我将开发一个具有 SEO 优化的博客实战项目，使用 MDX 渲染，有感兴趣的小伙伴可以关注一下。
2023-12-19 15:41:49
2192
2
原创 在React中实现好看的动画Framer Motion(案例：滚动进度条)
Framer Motion 是一个适用于 React 网页开发的动画库，它可以让开发者轻松地在他们的项目中添加复杂和高性能的动画效果。该库提供了一整套针对 React 组件的动画、过渡和手势处理功能，使得通过声明式的 API 来创建动画变得简单直观。接下来我将带你使用 Framer Motion 实现一个滚动进度条案例，用于实时显示滚动进度。
2023-12-19 07:00:00
1133
原创 JavaScript数组分组groupBy
JavaScript 最近发布了一个方法 Object.groupBy，可以对可迭代对象中的元素进行分组。
2023-12-17 16:07:34
512
原创 Vue3+Setup+TypeScript实现主题切换(浅色、深色、跟随系统)
使用 Vue 3 的 Composition API、 TypeScript 以及 `` 语法糖，实现动态主题切换，能够在 'light'（明亮）、'dark'（暗黑）和 'system'（系统）主题之间切换，并且使用 `localStorage` 做了状态缓存。代码十分精简，提供 JavaScript 和 TypeScript 版本，也可以在线体验此功能。
2023-12-16 15:57:13
1938
原创 在React中实现好看的动画Framer Motion(案例：跨DOM元素平滑过渡)
Framer Motion 是一个适用于 React 网页开发的动画库，它可以让开发者轻松地在他们的项目中添加复杂和高性能的动画效果。该库提供了一整套针对 React 组件的动画、过渡和手势处理功能，使得通过声明式的 API 来创建动画变得简单直观。接下来我将带你使用 Framer Motion 实现一个选中样式平滑过渡的案例。
2023-12-16 11:27:05
1498
原创 在Node.js中停止使用dotenv
dotenv 是一个从 `.env` 文件中加载环境变量的包，npm 周下载量有三千五百万。在 Node.js `v20.6.0` 中，已经内置了对 `.env` 文件的支持，这篇文章将演示如何在 Node.js 中访问 `.env` 中的环境变量。
2023-12-15 17:07:10
821
原创 Linux系统安装NVM管理多版本Node.js（两行代码）
nvm (Node Version Manager) 是一个非常实用的工具，它允许您在同一台机器上安装和使用多个版本的 Node.js。
2023-12-14 22:03:23
747
原创 React渲染Markdown & 代码高亮显示 & 代码块复制
使用 react-markdown 实现 markdown 的渲染，使用 @tailwindcss/typography 实现好看的样式。项目基于 Vite + React + TypeScript搭建，包管理工具使用的是 pnpm，需要安装。首先安装和react-markdown 用于解析 markdown 语法，rehype-highlight 和 highlight.js 用于突出高亮显示代码块。
2023-12-14 17:59:32
6152
原创 Vue通过拖拽改变容器大小
通过拖拽改变大小是一个很常见的业务场景，比如我们常用的编辑器（Jetbrains 系列、VSCode），都有一些可以通过拖拽改变宽高的窗口，当我们鼠标悬停在边缘时，鼠标变为水平或者垂直的双向箭头，通过拖拽来改变宽高。为了简化操作，接下来我将使用 Vue3 实现类似的功能，代码并不局限于框架，通过简单的修改也可以在 JavaScript 或者 React 中实现同样的效果。样式我使用了 Tailwind CSS，如果有不理解的类，可以去 Tailwind CSS 查阅。
2023-12-13 17:59:05
2159
原创 Next.js加载异步组件 & 骨架屏
Next.js 中有两种处理页面加载的方式，一种是 Loading UI 一种是 Streaming。接下来我将介绍这两种的区别，以及实际的业务场景。当我们进入某个页面时，需要获取页面数据，可能是从数据库读取也有可能是 API 服务，总之这是一个异步任务，我们可以在获取数据过程中提示用户数据正在加载，比如放置一些骨架屏，提升用户的体验。如果不对这些进行处理，使用体验会大打折扣。假设我们有一个场景，进入 /posts 页面后获取所有的文章数据。可以解开上面的注释延长加载时间。
2023-12-13 15:49:32
2479
1
原创 React+TailwindCSS快速实现暗黑模式切换
使用 React Context API、React hooks 和 TailwindCSS 的 Dark Mode 快速实现网页浅色模式和深色模式之间的切换。此教程需要对 React 的 Context Api 有一定的了解，如果您还不了解，可以前往 react.dev 学习。
2023-12-08 17:31:22
1312
原创 Next.js使用Supabase实现Github登录
Next.js 有许多 OAuth 认证方案来实现 Github 或者 Google 登录，比较常见的有等。Supabase提供了很多的核心服务，包括 PostgreSQL 数据库、身份验证、文件存储等。
2023-12-08 12:01:17
1558
原创 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
859
1
原创 Koa2简明笔记
分别对应 MongoDB 数据库和 MySQL 数据库。此外，sequelize 还支持 MariaDB，SQLite 和 PostgreSQL 数据库。可以使用 postman 、apifox 等 api 调试工具进行测试，或者使用 jetbrains 开发工具的 .http 文件进行测试。koa2 中常使用 orm 框架来操作数据库，其中最常见的两个框架为。，此时可以看到页面输出内容。对错误进行处理，返回。来运行我们的开发环境。接收 post 传参。postman 测试。
2023-10-06 22:19:15
103
1
原创 在Next.js中使用Prisma
Prisma是一个用于Node.js和TypeScript的下一代ORM（对象关系映射）工具，它可以让你以一种直观、高效和安全的方式读写数据库中的数据。
2023-09-07 15:57:02
896
原创 在Ubuntu22.04中构建Tauri App应用
Tauri是一个开源的框架，用于构建跨平台的原生应用程序。Tauri能够将Web技术（例如JavaScript、HTML和CSS）与本地操作系统API结合起来，以创建高性能、安全、可靠和易于维护的桌面应用程序。
2023-06-09 11:09:15
1143
2
原创 在QEMU虚拟机和宿主机之间传输文件
首先需要在虚拟机上安装SSH服务器（如果没有的话），然后通过虚拟机的IP地址（例如，使用-user-net选项配置的虚拟机网络）访问它。现在，在虚拟机的/mnt/iso目录中，可以访问宿主机中的文件。通过挂载ISO，可以将宿主机上的文件传输到虚拟机。但是，如果要将虚拟机上的文件传输回宿主机，需要创建一个新ISO映像。此时，/mnt/shared目录将指向宿主机上的/tmp/shared目录，可以在两者之间传输文件。首先，在宿主机上创建一个共享目录，然后使用QEMU的-virtfs选项将其挂载到虚拟机上。
2023-06-01 12:17:56
17853
16
原创 nodejs使用renameSync报错Error: EXDEV: cross-device link not permitted, rename
nodejs使用fs.renameSync报错Error: EXDEV: cross-device link not permitted, rename
2023-03-04 23:41:03
1466
原创 Vue3+TypeScript实现瀑布流布局
瀑布流布局（Waterfall Flow Layout）是一种常用于网页设计的布局方式，它可以实现图片或内容的自适应排列，使页面看起来更加美观和流畅。先看实现效果：下面是使用 vue 实现瀑布流布局的一般步骤：1.定义列数、行间距、列间距2.容器设置为相对定位、item设置为绝对定位3.获取容器宽度：容器总宽度-内边距（paddingLeft+paddingRight）4.计算每列宽度：(容器宽度 - 列间距 * (列数 - 1)) / 列数5.获取每一个item的高度（需要放在nextTic
2023-02-28 10:25:28
1799
3
原创 Vue3+ElementPlus表格table/v-for表单校验
然后将 el-form-item 的 props 修改为如下（格式：表格数据 + 索引 + 需要校验的值），最后加上 rules。v-for 渲染的表单同此。Element Plus 如果需要对表格/列表数据进行表单校验，首先需要更改 form 绑定的 model 数据。
2023-02-11 16:20:49
1852
5
原创 Docker部署NodeJS项目
参考文档：https://nodejs.org/zh-cn/docs/guides/nodejs-docker-webapp安装node镜像docker pull node # 默认安装 node:latest 最新版进入node项目新建 Dockerfile 、.dockerignore文件Dockerfile:FROM node:latestWORKDIR /usr/src/appCOPY package*.json ./RUN npm installCOPY . ..
2021-08-22 11:39:16
571
原创 CentOS安装/使用Docker
CentOS安装docker# 安装必要的工具sudo yum install -y yum-utils# 配置阿里云镜像源下载sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo# 安装dockersudo yum install docker-ce docker-ce-cli containerd.io启动docker服务sudo system
2021-08-09 15:51:31
111
原创 持久化保存vuex数据-解决页面刷新后丢失vuex数据的问题
解决思路：在使用vuex存储数据时，同时使用cookie或者localstorage存储每次进入路由判断vuex数据是否为空如果为空则重新commit数据（数据从cookie或者localstorage获取）src目录下建立permission.js，引入main.jsimport router from './router'import store from './store'import Cookies from 'js-cookie'const whiteList = ['/lo
2021-08-08 20:24:42
256
原创 express错误处理
npm i http-errorsapp.jsconst createError = require('http-errors')xxxapp.use(路由中间件)xxx// 404app.use((req, res, next) => { next(createError(404, '404，Not Found'))})// 错误处理app.use((err, req, res, next) => { res.status(err.status || 500)
2021-04-18 15:06:59
191
原创 express+mongoose开发博客——实现文章归档功能
开发博客时想在侧边栏添加一个文章归档功能，这方面的资料太少了下面说说我的思路，希望对你有帮助效果大概是这样的：2021-42020-92020-8点击链接查询相应的份发布的文章首先需要拿到所有的日期，转成 2021-4 这样的格式并且去重const dateList = await Article.find({}, {createdDate: 1}).sort({createdDate: -1})const archive = []dateList.forEach(item =>
2021-04-17 02:25:04
187
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人