好的, 我们来实现一个使用 TypeScript、HTMX、Elysia、Drizzle ORM 和 Postgres 的小型文本编辑器应用。这个应用将允许用户在前端编辑文本, 并将更改保存到数据库中。
首先, 让我们设置项目结构:
project/
├── src/
│ ├── index.ts
│ ├── schema.ts
│ └── db.ts
├── public/
│ └── index.html
├── package.json
└── tsconfig.json
- 安装依赖:
bun add elysia @elysiajs/html drizzle-orm postgres @types/pg
bun add -d drizzle-kit- 在
src/schema.ts中定义数据库模式:
import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core';
export const documents = pgTable('documents', {
id: serial('id').primaryKey(),
content: text('content').notNull(),
updatedAt: timestamp('updated_at').defaultNow().notNull()
});- 在
src/db.ts中设置数据库连接:
import { drizzle } from 'drizzle-orm/node-postgres';
import { Pool } from 'pg';
import * as schema from './schema';
const pool = new Pool({
connectionString: process.env.DATABASE_URL
});
export const db = drizzle(pool, { schema });- 在
src/index.ts中实现 Elysia 服务器:
import { Elysia } from 'elysia';
import { html } from '@elysiajs/html';
import { db } from './db';
import { documents } from './schema';
import { eq } from 'drizzle-orm';
const app = new Elysia()
.use(html())
.get('/', () => Bun.file('./public/index.html'))
.get('/api/document/:id', async ({ params }) => {
const doc = await db.select().from(documents).where(eq(documents.id, parseInt(params.id))).limit(1);
return doc[0]?.content || '';
})
.post('/api/document/:id', async ({ params, body }) => {
const { content } = body as { content: string };
await db.update(documents).set({ content, updatedAt: new Date() }).where(eq(documents.id, parseInt(params.id)));
return 'Document updated successfully';
})
.listen(3000);
console.log(`🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`);- 在
public/index.html中创建前端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Text Editor</title>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<style>
#editor { width: 100%; height: 300px; }
</style>
</head>
<body>
<h1>HTMX Text Editor</h1>
<textarea id="editor" hx-post="/api/document/1" hx-trigger="keyup changed delay:500ms" hx-target="#message"></textarea>
<div id="message"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
htmx.ajax('GET', '/api/document/1', '#editor');
});
</script>
</body>
</html>- 创建
tsconfig.json:
{
"compilerOptions": {
"target": "ES2021",
"module": "ESNext",
"moduleResolution": "node",
"esModuleInterop": true,
"strict": true
}
}- 更新
package.json:
{
"scripts": {
"start": "bun run src/index.ts",
"dev": "bun run --watch src/index.ts",
"db:push": "bunx drizzle-kit push:pg"
}
}- 设置环境变量:
创建一个 .env 文件并添加你的 Postgres 数据库 URL:
DATABASE_URL=postgres://username:password@localhost:5432/your_database
- 运行数据库迁移:
bun run db:push- 启动应用:
bun run dev现在, 你有了一个使用 TypeScript、HTMX、Elysia、Drizzle ORM 和 Postgres 的小型文本编辑器应用。用户可以在文本区域中编辑内容, 更改会自动保存到数据库中。
这个实现包括:
- 使用 Drizzle ORM 定义数据库模式和处理数据库操作
- 使用 Elysia 创建 API 端点来获取和更新文档
- 使用 HTMX 在前端实现无刷新的文本编辑和保存功能
- 使用 TypeScript 确保类型安全
你可以根据需要进一步扩展这个应用, 例如添加多文档支持、用户认证等功能。