猫猫的blog

博客数据库迁移：从 SQLite 到 PostgreSQL + 1Panel 部署指南

Thu, 30 Jul 2026 00:00:00 GMT

前言

对于个人博客来说，初期开发阶段用 SQLite 是最省心的选择——零配置、单文件、随拿随走。但当博客要正式上线、长期运行时，SQLite 的局限性就显现了：并发写入能力弱、不方便做远程备份、无法多实例共享。

我的博客项目（基于 Astro + Svelte）有一套后台管理系统，用于统计访问量、管理文章和 AI 摘要等功能。本地开发时一直用 SQLite，体验很好。但部署到 VPS 后，我需要一个更可靠的数据库方案。

于是我做了一个决定：不是换掉 SQLite，而是同时支持 SQLite 和 PostgreSQL，通过环境变量一键切换。开发时继续用 SQLite，生产环境切到 PostgreSQL。

这篇文章就记录整个过程的思路和部署步骤。

架构设计：数据库驱动层

接口抽象

核心思路很简单——定义一个数据库驱动接口 DbDriver，所有数据库操作都通过这个接口完成：

export interface DbDriver {
  init(): Promise<void>;
  recordVisit(pagePath: string): Promise<void>;
  recordArticleView(slug: string): Promise<void>;
  getStats(range: "7d" | "30d" | "all"): Promise<{
    totalPageViews: number;
    totalArticleViews: number;
    dailyViews: { date: string; count: number }[];
    topArticles: { slug: string; count: number }[];
  }>;
  createAdmin(username: string, password: string): Promise<boolean>;
  verifyAdmin(username: string, password: string): Promise<boolean>;
  listAdmins(): Promise<{ id: number; username: string; createdAt: string }[]>;
  changePassword(username: string, newPassword: string): Promise<boolean>;
  deleteAdmin(username: string): Promise<boolean>;
  close(): Promise<void>;
}

两套驱动实现

基于这个接口，我分别实现了两个驱动：

SQLite 驱动（db-sqlite.ts）—— 使用 better-sqlite3，数据存储在 data/stats.db 文件中
PostgreSQL 驱动（db-postgres.ts）—— 使用 pg 库，通过连接字符串连接远程数据库

环境变量切换

通过 DB_TYPE 环境变量决定加载哪个驱动：

# DB_TYPE=sqlite（默认） → 使用 SQLite
# DB_TYPE=postgres       → 使用 PostgreSQL

这样上层代码完全不关心底层用的是哪个数据库，切换只需改一个环境变量。

本地开发：SQLite 模式

SQLite 模式是默认模式，零配置即可使用。

项目根目录下的 .env 文件中确保以下配置：

DB_TYPE=sqlite

就这么简单。启动项目后，数据库文件会自动创建在 data/stats.db。首次启动时会自动建表并创建默认管理员账号（admin / admin12345678）。

本地开发完全不需要关心数据库安装和配置的问题，这是 SQLite 模式最大的优势。

迁移到 PostgreSQL

安装 PostgreSQL

如果你使用 1Panel 部署，可以直接在应用商店中搜索并安装 PostgreSQL，非常方便。其他方式（如系统包管理器安装）也可以，这里不展开。

创建数据库和用户

安装好 PostgreSQL 后，需要创建专用的数据库和用户。通过 psql 或 1Panel 的数据库管理界面操作：

CREATE USER fuwari_user WITH PASSWORD 'your_secure_password';
CREATE DATABASE fuwari_blog OWNER fuwari_user;

修改环境变量

在项目根目录创建或编辑 .env 文件：

DB_TYPE=postgres
DATABASE_URL=postgresql://fuwari_user:your_password@localhost:5432/fuwari_blog

密码中特殊字符的 URL 编码

这里有一个容易踩的坑：DATABASE_URL 是一个连接字符串，如果密码中包含特殊字符，必须进行 URL 编码，否则连接会失败。

常见的需要编码的字符：

字符	编码
`#`	`%23`
`@`	`%40`
`*`	`%2A`
`!`	`%21`
`$`	`%24`
`%`	`%25`

举个例子，如果你的密码是 my#pass@word，那么连接字符串应该写成：

DATABASE_URL=postgresql://fuwari_user:my%23pass%40word@localhost:5432/fuwari_blog

1Panel 部署完整步骤

下面是在 1Panel 上从零部署的完整流程。

前置条件

一台 Linux VPS（推荐 Ubuntu 22.04+）
已安装 1Panel（推荐从官网安装）
Node.js 18+（可通过 1Panel 应用商店安装）
PM2 进程管理器
Nginx（1Panel 自带或应用商店安装）

第一步：安装 PostgreSQL

在 1Panel 面板中：

进入 应用商店 → 搜索 PostgreSQL
选择合适的版本安装
安装完成后记住默认端口（通常是 5432）和管理员密码

第二步：创建数据库

通过 1Panel 的数据库管理界面，或者 SSH 进入服务器用 psql 命令：

CREATE USER fuwari_user WITH PASSWORD 'your_secure_password';
CREATE DATABASE fuwari_blog OWNER fuwari_user;
GRANT ALL PRIVILEGES ON DATABASE fuwari_blog TO fuwari_user;

第三步：克隆项目并构建

# 克隆项目
git clone https://github.com/your-username/fuwari.git
cd fuwari

# 安装 pnpm（如果没有）
npm install -g pnpm

# 安装依赖
pnpm install

# 构建项目
pnpm build

第四步：配置环境变量

cp .env.example .env

编辑 .env 文件：

# 数据库配置
DB_TYPE=postgres
DATABASE_URL=postgresql://fuwari_user:your_secure_password@localhost:5432/fuwari_blog

# AI 摘要功能（可选）
OPENROUTER_API_KEY=your-key-here

第五步：配置 PM2

项目根目录已有 ecosystem.config.js：

module.exports = {
  apps: [{
    name: 'fuwari-blog',
    script: 'dist/server/entry.mjs',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '512M',
    env: {
      NODE_ENV: 'production',
      PORT: 4321,
      HOST: '0.0.0.0',
      DB_TYPE: 'postgres',
      DATABASE_URL: 'postgresql://fuwari_user:your_secure_password@localhost:5432/fuwari_blog'
    }
  }]
};

启动项目：

pm2 start ecosystem.config.js
pm2 save
pm2 startup  # 设置开机自启

第六步：配置 Nginx 反向代理

在 1Panel 中创建网站，配置 Nginx 反向代理将域名指向本地服务：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://127.0.0.1:4321;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

第七步：在 1Panel 中添加网站

进入网站 → 创建网站
填写域名（如 your-domain.com）
选择 反向代理 模式
代理地址填写 http://127.0.0.1:4321
如需 HTTPS，可在 1Panel 中申请 Let's Encrypt 证书

完成后访问你的域名，应该能看到博客首页了。首次启动时会自动初始化数据库表和默认管理员。

环境变量参考

完整的 .env 配置示例：

# 数据库类型：sqlite 或 postgres
DB_TYPE=postgres

# PostgreSQL 连接字符串
DATABASE_URL=postgresql://fuwari_user:your_secure_password@localhost:5432/fuwari_blog

# AI 摘要功能（可选）
OPENROUTER_API_KEY=your-key-here

切换回 SQLite

如果你想在本地切回 SQLite 模式，只需要修改一个环境变量：

DB_TYPE=sqlite

不需要安装任何东西，不需要其他配置。重启项目后会自动使用 data/stats.db 文件作为数据库。

这种设计让你可以在开发和部署之间自由切换，非常灵活。

注意事项

连接字符串中的特殊字符

再强调一次：PostgreSQL 连接字符串中，密码部分如果包含 #、@、*、!、$ 等特殊字符，必须做 URL 编码。这是一个很容易忽略但又很难排查的问题——连接失败时第一反应应该检查这里。

默认管理员账号

首次启动时（无论 SQLite 还是 PostgreSQL 模式），系统会自动创建默认管理员：

用户名：admin
密码：admin12345678

部署到生产环境后，请立即修改默认密码！

自动创建默认管理员

通过 .env 中的 CREATE_DEFAULT_ADMIN 配置项控制是否自动创建默认管理员账号：

# 设置为 true 时，首次启动自动创建默认管理员（默认值：true）
CREATE_DEFAULT_ADMIN=true

如果你不需要默认管理员（例如已经手动创建了其他管理员），可以将其设为 false，这样启动时不会自动创建 admin 账号。

忘记密码：邮箱重置

登录页面新增了「忘记密码」功能。管理员在登录页点击「忘记密码」后，系统会通过 Resend 邮件服务向管理员绑定的邮箱发送密码重置链接。

管理员可在管理面板中设置自己的邮箱地址
重置链接通过邮件发送，点击后即可设置新密码
需要在 .env 中配置 Resend API Key 和发件人信息

CLI 密码重置

如果邮件服务不可用，也可以通过命令行脚本直接重置密码：

node scripts/reset-admin-password.mjs

该脚本同时支持 SQLite 和 PostgreSQL 两种数据库模式，会根据 DB_TYPE 环境变量自动选择对应的数据库驱动。

数据迁移

目前 SQLite 和 PostgreSQL 之间没有自动迁移工具。如果你需要把本地 SQLite 的数据迁移到 PostgreSQL，需要手动操作：

导出 SQLite 数据（可以用 sqlite3 命令行工具导出为 SQL 或 CSV）
导入到 PostgreSQL（根据导出的格式用对应方式导入）

后续版本可能会考虑加入自动迁移功能。

端口与安全

PostgreSQL 默认监听 5432 端口，生产环境建议不要将数据库端口暴露到公网
确保 VPS 防火墙只开放必要的端口（80、443）
数据库连接使用 localhost 即可，不需要走外网

总结

通过抽象数据库驱动接口，这个项目实现了 SQLite 和 PostgreSQL 的无缝切换：

开发阶段：DB_TYPE=sqlite，零配置，data/stats.db 一个文件搞定
生产部署：DB_TYPE=postgres，配合 1Panel 快速搭建 PostgreSQL + Node.js + Nginx 的完整环境

整个过程的核心改动集中在数据库驱动层，上层业务代码完全不需要修改。如果你也在用 Astro 搭建带后台功能的博客，这种双数据库支持的架构值得参考。

部署方面，1Panel 确实简化了不少工作——从数据库安装到 Nginx 配置，基本都能在面板里完成。配合 PM2 做进程管理，稳定性和可维护性都有保障。

用 Biome 统一你的前端工具链

Fri, 12 Sep 2025 00:00:00 GMT

痛点：工具链碎片化

前端项目的工具链通常是这样的：

ESLint：代码检查
Prettier：代码格式化
stylelint：样式检查

三个工具，三套配置，三种运行方式。更麻烦的是，ESLint 和 Prettier 之间经常产生规则冲突，你需要额外安装 eslint-config-prettier 来协调。

有没有一个工具能统一这些功能？Biome 就是为此而生的。

Biome 是什么

Biome 是一个用 Rust 编写的高性能前端工具链，它同时提供了：

Linter：代码质量检查
Formatter：代码格式化
Import Sorter：导入语句排序

一个工具，一套配置，一次安装。

性能对比

Biome 最直观的优势是快。官方基准测试显示：

操作	ESLint + Prettier	Biome
格式化 1000 个文件	~12s	~0.3s
检查 1000 个文件	~8s	~0.4s

快了将近 30-40 倍。在 CI/CD 中，这意味着更短的等待时间和更低的计算成本。

快速上手

安装非常简单：

npm install --save-dev @biomejs/biome

初始化配置：

npx biome init

这会生成一个 biome.json 文件：

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

在 package.json 中添加脚本：

{
  "scripts": {
    "lint": "biome check src/",
    "format": "biome format --write src/"
  }
}

与现有工具对比

vs ESLint

Biome 的 lint 规则覆盖了 ESLint 推荐规则的大部分。对于常规项目完全够用。如果你的项目依赖某些 ESLint 插件的特殊规则，可以通过 @biomejs/eslint-plugin 桥接使用。

vs Prettier

Biome 的格式化输出与 Prettier 高度兼容。它支持相同的配置选项（缩进风格、引号、分号等），迁移成本极低。

编辑器集成

Biome 提供了 VS Code 和 JetBrains 系列 IDE 的官方插件。安装后，保存时自动格式化，体验与 Prettier 一致。

总结

如果你的项目不需要 ESLint 生态中那些复杂的插件，Biome 是一个非常好的替代方案。它更快、更简单、配置更少，而且还在快速迭代中。

工具链的简化不仅仅是少装几个包的问题——它降低了维护成本，减少了团队成员之间的配置争论，让大家都把精力集中在真正重要的事情上：写好代码。

编程三年，我学到的不只是技术

Tue, 08 Jul 2025 00:00:00 GMT

写在前面

从写下第一行 console.log("Hello World") 到现在，编程已经陪伴我走过了三年。这三年里，我学到的远不止技术本身。

1. 先跑通，再优化

刚学编程时，我花了大量时间在"最佳实践"上。一个变量命名纠结半天，代码结构反复调整，结果项目迟迟没有进展。

后来我意识到，完成比完美更重要。先让功能跑通，有了可工作的原型，再去重构和优化。这并不意味着写烂代码，而是不要在早期过度追求完美。

"Make it work, make it right, make it fast." —— Kent Beck

2. 读源码是最好的老师

遇到问题时，很多人的第一反应是搜索答案。但我发现，直接阅读相关库的源码往往能获得更深的理解。

有一次我在调试一个 CSS 布局问题，查了半天文档都没搞明白。最后我去看了 Flexbox 的规范文档，反而一次性理解了整个布局模型的本质。

源码不会骗你，它展示的是设计者真正的意图。

3. 写博客是最高效的学习方式

费曼学习法说得好：如果你不能简单地解释一件事，说明你还没有真正理解它。

写技术博客强迫我整理思路，把模糊的理解变成清晰的文字。很多时候，写着写着就发现了自己知识体系中的漏洞。

而且，博客还有一个额外的好处——它帮你建立个人品牌。我现在的几个工作机会，都跟博客有关。

4. 不要追逐所有新技术

前端社区几乎每周都有新工具、新框架出现。我曾经陷入过"什么都想学"的焦虑中，结果什么都没学精。

现在我学会了做减法：

核心技能深入学：JavaScript 基础、CSS 布局、网络协议、数据结构
框架按需学习：用到什么学什么，不用的不碰
新工具观望为主：等社区沉淀一段时间再决定是否跟进

技术的底层原理是相通的，基础扎实了，学新东西会快很多。

5. 休息和编码一样重要

曾经我以为"肝代码"是进步的捷径，熬夜写项目是常事。直到有一次连续加班两周后，代码质量明显下降，bug 反而更多。

现在我保持每天固定时间写代码，周末尽量不碰工作。令人惊讶的是，效率反而比之前更高了。

大脑需要休息来巩固记忆和整理思路。很多时候，最好的解决方案不是在电脑前想出来的，而是在散步、洗澡或者睡觉时突然冒出来的。

总结

编程教会我的不仅是如何写代码，更是如何思考、如何学习、如何平衡工作与生活。这些经验或许不够"技术"，但我相信它们对每个编程路上的同行者都有价值。

为什么我选择 Astro 构建个人博客

Tue, 20 May 2025 00:00:00 GMT

背景

去年我决定重新搭建个人博客，核心诉求很简单：加载快、写作体验好、部署方便。在对比了 Hugo、Next.js、Hexo 等方案后，我最终选择了 Astro。

Astro 的核心优势

1. 零 JavaScript 默认输出

Astro 最吸引我的特性是"默认零 JS"。它会将模板编译为纯 HTML，不会向浏览器发送不必要的 JavaScript 代码。这对于以内容为主的博客来说至关重要。

根据官方数据，Astro 站点平均比同功能的 Next.js 站点快 40% 以上。

2. 岛屿架构

Astro 独创的"岛屿（Islands）"架构允许你在静态页面中嵌入交互式组件，而且这些组件可以来自不同的框架：

---
import ReactCounter from '../components/ReactCounter.jsx';
import SvelteTimer from '../components/SvelteTimer.svelte';
---

<!-- 两个独立的交互岛屿 -->
<ReactCounter client:load />
<SvelteTimer client:visible />

这意味着你可以在同一个页面中混用 React、Vue、Svelte 组件，按需加载，互不干扰。

3. 基于内容集合的类型安全

Astro 的内容集合（Content Collections）基于 Zod 做 schema 校验，在构建时就能发现 frontmatter 中的错误：

// content/config.ts
import { defineCollection, z } from "astro:content";

const posts = defineCollection({
  schema: z.object({
    title: z.string(),
    published: z.date(),
    draft: z.boolean().optional(),
  }),
});

如果你漏写了 title 字段，构建时就会报错，而不是等到线上才发现问题。

4. 强大的 Markdown 支持

Astro 内置了对 Markdown 的全面支持，包括 frontmatter 解析、自动目录生成、以及通过 rehype/remark 插件扩展的能力。你可以轻松添加代码高亮、数学公式、自定义容器等功能。

5. 部署灵活

Astro 的输出是标准的静态文件，可以部署到任何支持静态托管的平台。我目前部署在 Vercel 上，每次 git push 后自动构建，全程零配置。

一些不足

当然，Astro 也不是完美的：

生态相对年轻：相比 Next.js，Astro 的插件和社区资源还比较少
学习成本：模板语法需要一定时间适应，尤其是从 React/Vue 转过来的开发者
SSR 支持有限：虽然 Astro 4.0 开始支持 SSR，但这并非它的强项

总结

如果你的需求是构建一个以内容为核心的网站——博客、文档站、作品集——Astro 几乎是目前最优的选择。它在性能和开发体验之间找到了一个很好的平衡点。

五个提升效率的前端开发技巧

Sat, 15 Mar 2025 00:00:00 GMT

前言

前端开发日新月异，掌握一些实用技巧可以大幅提升开发效率和代码质量。今天分享五个我在日常工作中经常用到的技巧。

1. 使用可选链操作符

在处理嵌套对象时，可选链操作符 ?. 可以避免大量的空值判断：

// 传统写法
const city = user && user.address && user.address.city;

// 使用可选链
const city = user?.address?.city;

代码瞬间简洁了很多，而且不会因为中间值为 undefined 而报错。

2. 利用 `structuredClone` 深拷贝对象

以前深拷贝通常用 JSON.parse(JSON.stringify(obj))，但它无法处理 Date、RegExp 等特殊类型。现代浏览器已原生支持 structuredClone：

const original = { name: "Alice", birthday: new Date("2000-01-01") };
const cloned = structuredClone(original);

console.log(cloned.birthday instanceof Date); // true

3. CSS 容器查询

媒体查询是基于视口宽度的，但组件往往需要基于自身容器的大小来调整样式。CSS 容器查询解决了这个问题：

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

这让组件真正做到了"自适应"，无论放在页面的哪个位置都能正确响应。

4. 用 `AbortController` 取消请求

当组件卸载或用户切换页面时，应该取消未完成的网络请求，避免内存泄漏和不必要的资源消耗：

const controller = new AbortController();

fetch("/api/data", { signal: controller.signal })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === "AbortError") {
      console.log("请求已取消");
    }
  });

// 需要取消时
controller.abort();

5. 善用 `console.table` 调试

当需要查看一组结构相似的数据时，console.table 比 console.log 直观得多：

const users = [
  { name: "张三", age: 28, role: "前端" },
  { name: "李四", age: 32, role: "后端" },
];

console.table(users);

浏览器控制台会以表格形式展示数据，一目了然。

总结

这五个技巧都是我在实际项目中反复验证过的。好的代码不仅仅是"能运行"，更要追求简洁、可维护和高性能。希望这些技巧对你也有所帮助。