如何在 Astro 中使用 Prisma ORM
介绍
本页面回答的问题
- 如何将 Prisma 与 Astro 集成？
- 如何在 Astro 中设置 Prisma Postgres？
- 如何在 Astro 页面中查询数据？
Prisma ORM 提供类型安全的数据库访问，而 Astro 则以性能为设计宗旨。结合 Prisma Postgres，您将获得一个快速、内容优先的堆栈，零冷启动，端到端速度飞快。
在本指南中，您将学习如何在 Astro 项目中从头开始将 Prisma ORM 与 Prisma Postgres 数据库集成。您可以在 GitHub 上找到本指南的完整示例。
先决条件
1. 设置项目
创建一个新的 Astro 项目
npx create-astro@latest
- 我们应该在哪里创建您的新项目？
astro-prisma - 您想如何开始您的新项目？
使用最小（空）模板 - 安装依赖项？（推荐）
Yes - 初始化一个新的 git 仓库？（可选）
是
进入新创建的项目目录
cd astro-prisma
2. 安装和配置 Prisma
2.1. 安装依赖项
要开始使用 Prisma，您需要安装一些依赖项
npm install prisma tsx @types/pg --save-dev
npm install @prisma/client @prisma/adapter-pg dotenv pg
如果你使用的是其他数据库提供程序（MySQL、SQL Server、SQLite），请安装相应的驱动程序适配器包，而不是 @prisma/adapter-pg。有关更多信息，请参阅 数据库驱动程序。
安装后，在项目中初始化 Prisma
npx prisma init --db --output ../prisma/generated
在设置 Prisma Postgres 数据库时，您需要回答几个问题。选择离您最近的区域，并为您的数据库选择一个易记的名称，例如“我的 Astro 项目”
这将创建
- 一个包含
schema.prisma文件的prisma/目录 - 一个用于配置 Prisma 的
prisma.config.ts文件 - 一个已设置
DATABASE_URL的.env文件
2.2. 定义 Prisma Schema
在 prisma/schema.prisma 文件中，添加以下模型并更改生成器以使用 prisma-client 提供程序
generator client {
provider = "prisma-client"
output = "../prisma/generated"
}
datasource db {
provider = "postgresql"
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
authorId Int
author User @relation(fields: [authorId], references: [id])
}
这将创建两个模型：User 和 Post，它们之间存在一对多关系。
2.3 将 dotenv 添加到 prisma.config.ts
要访问 .env 文件中的变量，它们可以由您的运行时加载，或者通过使用 dotenv 加载。在 prisma.config.ts 顶部包含 dotenv 的导入
import 'dotenv/config'
import { defineConfig, env } from 'prisma/config';
export default defineConfig({
schema: 'prisma/schema.prisma',
migrations: {
path: 'prisma/migrations',
},
datasource: {
url: env('DATABASE_URL'),
},
});
2.4. 运行迁移并生成 Prisma Client
现在，运行以下命令来创建数据库表
npx prisma migrate dev --name init
然后生成 Prisma Client
npx prisma generate
2.5. 填充数据库
让我们添加一些种子数据来用示例用户和帖子填充数据库。
在 prisma/ 目录中创建一个名为 seed.ts 的新文件
import { PrismaClient, Prisma } from "../prisma/generated/client";
import { PrismaPg } from "@prisma/adapter-pg";
const adapter = new PrismaPg({
connectionString: process.env.DATABASE_URL!,
});
const prisma = new PrismaClient({
adapter,
});
const userData: Prisma.UserCreateInput[] = [
{
name: "Alice",
email: "alice@prisma.io",
posts: {
create: [
{
title: "Join the Prisma Discord",
content: "https://pris.ly/discord",
published: true,
},
{
title: "Prisma on YouTube",
content: "https://pris.ly/youtube",
},
],
},
},
{
name: "Bob",
email: "bob@prisma.io",
posts: {
create: [
{
title: "Follow Prisma on Twitter",
content: "https://www.twitter.com/prisma",
published: true,
},
],
},
},
];
export async function main() {
console.log("Starting to seed...");
for (const u of userData) {
await prisma.user.upsert({
where: { email: u.email },
update: {},
create: u,
});
}
console.log("Seeding finished.");
}
main()
.catch((e) => {
console.error(e);
process.exit(1);
})
.finally(async () => {
await prisma.$disconnect();
});
现在，通过更新 prisma.config.ts 来告诉 Prisma 如何运行此脚本
import 'dotenv/config'
import { defineConfig, env } from 'prisma/config';
export default defineConfig({
schema: 'prisma/schema.prisma',
migrations: {
path: 'prisma/migrations',
seed: `tsx prisma/seed.ts`,
},
datasource: {
url: env('DATABASE_URL'),
},
});
运行种子脚本
npx prisma db seed
并打开 Prisma Studio 检查您的数据
npx prisma studio
3. 将 Prisma 集成到 Astro
3.1. 创建 TypeScript 环境变量定义
首先，在您的 src 目录中创建一个 env.d.ts 文件，为环境变量提供 TypeScript 定义
interface ImportMetaEnv {
readonly DATABASE_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
3.2. 创建 Prisma Client
在 /src 内部，创建一个 lib 目录并在其中创建一个 prisma.ts 文件。此文件将用于创建和导出您的 Prisma Client 实例。
mkdir src/lib
touch src/lib/prisma.ts
像这样设置 Prisma 客户端
import { PrismaClient } from "../../prisma/generated/client";
import { PrismaPg } from "@prisma/adapter-pg";
const adapter = new PrismaPg({
connectionString: import.meta.env.DATABASE_URL,
});
const prisma = new PrismaClient({
adapter,
});
export default prisma;
我们建议使用连接池（如 Prisma Accelerate）来有效地管理数据库连接。
如果您选择不使用一个，请**避免**在长生命周期环境中全局实例化 PrismaClient。相反，请为每个请求创建和处置客户端，以防止耗尽数据库连接。
3.3. 创建 API 路由
API 路由是在 Astro 应用中从数据库获取数据的最佳方式。
在 src/pages 目录中创建一个名为 api/users.ts 的新文件
mkdir src/pages/api
touch src/pages/api/users.ts
现在，创建一个 GET 路由，从数据库中获取 Users 数据，确保通过将每个用户的 Posts 添加到 include 字段中来包含它们
import type { APIRoute } from "astro";
import prisma from "../../lib/prisma";
export const GET: APIRoute = async () => {
const users = await prisma.user.findMany({
include: { posts: true },
});
return new Response(JSON.stringify(users), {
headers: { "Content-Type": "application/json" },
});
};
3.4. 从 API 路由获取数据（推荐方法）
Astro 建议直接导入端点函数，而不是使用 fetch() 进行 HTTP 请求。这种方法更高效，并避免了 URL 解析问题。
首先创建一个名为 UserWithPosts 的新类型，它结合了 User 和 Post 模型
---
import type { User, Post } from "../../prisma/generated/client";
import { GET } from "./api/users.ts";
type UserWithPosts = User & { posts: Post[] };
const response = await GET(Astro);
const users: UserWithPosts[] = await response.json();
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro + Prisma</title>
</head>
<body>
<h1>Astro + Prisma</h1>
<ul>
{users.map((user: UserWithPosts) => (
<li>
<h2>{user.name}</h2>
<ul>
{user.posts.map((post: Post) => (
<li>{post.title}</li>
))}
</ul>
</li>
))}
</ul>
</body>
</html>
3.5. 运行您的应用
现在启动您的开发服务器，查看您的 Astro 应用的实际效果
npm run dev
在浏览器中打开 https://:4321，查看页面上显示的用户及其帖子。
总结
您完成了！您刚刚创建了一个与 Prisma Postgres 数据库连接的 Prisma Astro 应用。下面是一些可以探索的后续步骤，以及一些可以帮助您扩展项目的更多资源。
下一步
既然您已经有一个与 Prisma Postgres 数据库连接的 Astro 应用，您可以
- 使用更多模型和关系扩展您的 Prisma schema
- 添加创建/更新/删除路由和表单
- 探索身份验证和验证
- 使用 Prisma Postgres 启用查询缓存以获得更好的性能
更多信息
与 Prisma 保持联系
通过以下方式与我们保持联系，继续你的 Prisma 之旅： 我们的活跃社区。保持信息灵通，参与其中，并与其他开发人员协作。
- 在 X 上关注我们 获取公告、直播活动和实用技巧。
- 加入我们的 Discord 提问、与社区交流，并通过对话获得积极支持。
- 在 YouTube 上订阅 获取教程、演示和直播。
- 在 GitHub 上参与 加星收藏存储库、报告问题或为问题做出贡献。