好的，我们可以在上面的实例中加入 Drizzle ORM 来管理 Postgres 数据库。这个过程中，我们将把所有的文本文档存储到 Postgres 数据库中。

第二部分: 拓展项目来支持 Drizzle ORM 与 Postgres

1. 安装依赖

首先，安装 Drizzle ORM 和 PostgreSQL 相关的依赖：

bun add drizzle-orm pg

2. 配置 Drizzle ORM

在 src 目录下创建一个 db.ts 文件，用于配置 Drizzle ORM 和 Postgres 连接：

// src/db.ts
import { drizzle, NodePgClient } from 'drizzle-orm';
import { Client } from 'pg';
import { env } from 'process';
 
const client = new Client({
  connectionString: env.DATABASE_URL,
});
 
const db = drizzle(new NodePgClient(client));
 
export default db;

3. 定义数据库表

在 src 目录下创建一个 models.ts 文件，用于定义数据库表结构：

// src/models.ts
import { defineTable, bigint, text } from 'drizzle-orm';
 
export const textDocumentTable = defineTable({
  name: 'text_documents',
  columns: {
    id: bigint({ primaryKey: true, autoIncrement: true }),
    content: text(),
  },
});

4. 更新 API 操作来使用 Drizzle ORM

在 src/api.ts 中，使用 Drizzle ORM 来执行数据库操作：

// src/api.ts
import { textDocumentTable } from './models';
import db from './db';
import { TextDocument } from './types';
 
// Retrieve a document by ID
export async function getDocument(id: number): Promise<TextDocument | undefined> {
  const results = await db.select(textDocumentTable)
    .where(textDocumentTable.id.eq(id))
    .execute();
  
  return results.length ? { id: results[0].id, content: results[0].content } : undefined;
}
 
// Create a new document
export async function createDocument(content: string): Promise<TextDocument> {
  const result = await db.insert(textDocumentTable).values({ content }).execute();
  const id = result.insertId;
  return { id, content };
}
 
// Update an existing document
export async function updateDocument(id: number, content: string): Promise<TextDocument | undefined> {
  const targetDocument = await getDocument(id);
  
  if (targetDocument) {
    await db.update(textDocumentTable)
      .set({ content })
      .where(textDocumentTable.id.eq(id))
      .execute();
 
    return { id, content };
  }
 
  return undefined;
}

5. 配置 Postgres 数据库

确保你在本地或在云端有一个 PostgreSQL 数据库，并且设置了 DATABASE_URL 环境变量。例如，可以在 .env 文件中配置：

DATABASE_URL=postgres://username:password@localhost:5432/mydatabase

并在 src/db.ts 中加载环境变量：

import { drizzle, NodePgClient } from 'drizzle-orm';
import { Client } from 'pg';
import { config } from 'dotenv';
 
config(); // Load .env file
 
const client = new Client({
  connectionString: process.env.DATABASE_URL,
});
 
const db = drizzle(new NodePgClient(client));
 
export default db;

6. 更新服务器端和 API （已经完成）

7. 初始化数据库

为了确保表在数据库中存在，你需要创建一个数据库迁移脚本。这可以通过 Drizzle ORM 的迁移功能来完成。首先，编写一个简单的 SQL 脚本来创建表：

CREATE TABLE IF NOT EXISTS text_documents (
  id SERIAL PRIMARY KEY,
  content TEXT NOT NULL
);

接着，你可以通过某个工具，比如 pgAdmin 或 DBeaver，来执行这个脚本。可以根据你具体用的工具来选择合适的方法。

8. 完成前端和后端整合

前端和后端整合已在之前的步骤中完成，只需确保前端的 API 路径正确，且数据库连接方式无误。

9. 启动项目

确保 PostgreSQL 数据库正在运行，并且 .env 文件中的 DATABASE_URL 配置正确。

首先，运行数据库初始化脚本：

psql -d mydatabase -f create_table.sql

然后，启动服务器：

bun run src/server.ts

启动 Vite 开发服务器：

bun x vite

打开浏览器并访问 http://localhost:3000 ，你将看到一个文本编辑器，可以检索和保存文本文档。

总结

通过这个拓展项目，我们展示了如何使用 Drizzle ORM 来与 Postgres 数据库进行交互。关键点包括：

安装 ORM 依赖：安装 Drizzle ORM 和 pg 模块。
配置 ORM：通过 Drizzle ORM 配置 Postgres 数据连接。
定义数据库表：定义数据库表结构。
更新后端 API：使用 Drizzle ORM 进行 CRUD 操作。
配置和初始化数据库：确保数据库连接配置正确，并创建必要的表。

希望这个示例能帮助你更好地理解如何在 Bun 环境下结合 Elysia、HTMX、UnoCSS、TypeScript、React 和 Drizzle ORM 来构建功能丰富的应用。如果有任何问题或需要进一步的帮助，请随时提问！

Woodman's Second Brain | 第二大脑

探索

3.02 在上面的实例中，使用Drizzle ORM管理Postgres数据库，并将相关的文本内容存储到数据库中。