如何在 SvelteKit 中使用 Prisma ORM
介绍
Prisma ORM 通过类型安全的查询简化了数据库访问，当与 SvelteKit 结合使用时，它会创建一个健壮且可扩展的全栈架构。
在本指南中，您将学习如何从零开始将 Prisma ORM 与 Prisma Postgres 数据库集成到 SvelteKit 项目中。您可以在 GitHub 上找到本指南的完整示例。
先决条件
- Node.js 20+
- Svelte VSCode 扩展（Svelte 推荐）
1. 设置项目
您将使用 Svelte CLI，而不是 npx create svelte@latest。此 CLI 提供了更具交互性的设置以及对 ESLint 和 Prettier 等流行工具的内置支持
创建新的 Svelte 项目
npx sv create sveltekit-prisma
它将提示您自定义设置。以下是您将选择的选项
- 您想要哪个模板？
SvelteKit minimal - 添加 TypeScript 类型检查？
是，使用 TypeScript 语法 - 您想向项目添加什么？
prettiereslint
- 您想使用哪个包管理器安装依赖项？
npm
设置完成后，进入您的项目并启动开发服务器
cd sveltekit-prisma
npm run dev
就是这样！Svelte 使启动和运行的过程变得非常简单。此时，您的项目已准备好集成 Prisma 并连接到 Prisma Postgres 数据库。
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 src/generated/prisma
在设置 Prisma Postgres 数据库时，您需要回答几个问题。选择离您位置最近的区域，并为您的数据库选择一个容易记住的名称，例如“我的 SvelteKit 项目”
这将创建
- 一个包含
schema.prisma文件的prisma目录。 - 一个用于配置 Prisma 的
prisma.config.ts文件 - 一个 Prisma Postgres 数据库。
- 项目根目录中包含
DATABASE_URL的.env文件。 - 生成的 Prisma Client 的
output目录为src/generated/prisma。
2.2. 定义 Prisma Schema
在 prisma/schema.prisma 文件中，添加以下模型并更改生成器以使用 prisma-client 提供程序
generator client {
provider = "prisma-client"
output = "../src/generated/prisma"
}
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 生成器
现在，运行以下命令创建数据库表并生成 Prisma Client
npx prisma migrate dev --name init
npx prisma generate
2.5. 填充数据库
添加一些填充数据以使用示例用户和帖子填充数据库。
在 prisma/ 目录中创建一个名为 seed.ts 的新文件
import { PrismaClient, Prisma } from "../src/generated/prisma/client.js";
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() {
for (const u of userData) {
await prisma.user.create({ data: u });
}
}
main();
现在，通过更新 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 集成到 SvelteKit
3.1. 创建 Prisma Client
在您的 /src/lib 目录中，将 index.ts 重命名为 prisma.ts。此文件将用于创建和导出您的 Prisma Client 实例。
可以使用 $lib 别名从任何地方访问 src/lib 中的文件。
DATABASE_URL 存储在 .env 文件中。要访问它，您需要从 $env/static/private 命名空间导入它。
像这样设置 Prisma 客户端
import { PrismaClient } from '../generated/prisma/client.js';
import { DATABASE_URL } from '$env/static/private';
import { PrismaPg } from '@prisma/adapter-pg';
const adapter = new PrismaPg({
connectionString: DATABASE_URL,
});
const prisma = new PrismaClient({
adapter,
});
export default prisma;
我们建议使用连接池（如 Prisma Accelerate）来有效地管理数据库连接。
如果您选择不使用一个，请**避免**在长生命周期环境中全局实例化 PrismaClient。相反，请为每个请求创建和处置客户端，以防止耗尽数据库连接。
3.2. 创建服务器路由
要在服务器端从数据库获取数据，请在 routes 目录中创建一个 +page.server.ts 文件。此文件应导出一个 load 函数，该函数在页面渲染之前在服务器上运行。
在基本 load 函数中使用 findMany() 方法获取用户列表。
像这样更新您的 +page.server.ts 文件
import prisma from '$lib/prisma';
export async function load() {
const users = await prisma.user.findMany({});
return {
users
};
}
此时，您只直接获取 User 模型上的数据——不包括帖子等关系。
为了同时获取每个用户的帖子，我们可以使用 include 选项扩展查询。这告诉 Prisma 在结果中连接相关的 Posts 表。
像这样更新您的 findMany() 调用
import prisma from '$lib/prisma';
export async function load() {
const users = await prisma.user.findMany({
include: {
posts: true
}
});
return {
users
};
}
现在，结果中的每个用户也将包含一个 posts 数组。
3.3. 填充页面
在 src/routes/+page.svelte 中，将文件简化为基本内容并添加一个 <script> 片段。文件应如下所示
<script lang="ts">
</script>
<h1>SvelteKit + Prisma</h1>
我们需要获取从 +page.server.ts 导出的数据
<script lang="ts">
let { data } = $props();
</script>
<h1>SvelteKit + Prisma</h1>
现在我们有了数据，让我们使用 Svelte 的 each 块遍历用户及其帖子
<script lang="ts">
let { data } = $props();
</script>
<h1>SvelteKit + Prisma</h1>
{#each data.users as user}
<h2>{user.name}</h2>
{#each user.posts as post}
<ul>
<li><a href={post.content}>{post.title}</a></li>
</ul>
{/each}
{/each}
您完成了！您刚刚创建了一个带有 Prisma ORM 的 SvelteKit 应用程序。以下是一些值得探索的后续步骤，以及一些有助于您开始扩展项目的更多资源。
下一步
现在您有一个连接到 Prisma Postgres 数据库的 SvelteKit 应用程序，您可以
- 使用更多模型和关系扩展您的 Prisma schema
- 添加创建/更新/删除路由和表单
- 探索身份验证和验证
- 使用 Prisma Postgres 启用查询缓存以获得更好的性能
更多信息
与 Prisma 保持联系
通过以下方式与我们保持联系，继续你的 Prisma 之旅： 我们的活跃社区。保持信息灵通，参与其中，并与其他开发人员协作。
- 在 X 上关注我们 获取公告、直播活动和实用技巧。
- 加入我们的 Discord 提问、与社区交流，并通过对话获得积极支持。
- 在 YouTube 上订阅 获取教程、演示和直播。
- 在 GitHub 上参与 加星收藏存储库、报告问题或为问题做出贡献。