跳到主要内容

如何在 SvelteKit 中使用 Prisma ORM

15 分钟

简介​

Prisma ORM 通过类型安全的查询简化了数据库访问，与 SvelteKit 结合使用时，它构建了一个强大且可扩展的全栈架构。

在本指南中，你将从头开始学习如何在 SvelteKit 项目中集成 Prisma ORM 和 Prisma Postgres 数据库。你可以在 GitHub 上找到本指南的完整示例。

前提条件​

1. 设置你的项目​

你将使用 Svelte CLI 来代替 npx create svelte@latest。此 CLI 提供了更具交互性的设置，并内置支持流行的工具，如 ESLint 和 Prettier。

创建一个新的 Svelte 项目

npx sv create sveltekit-prisma

它会提示你自定义设置。以下是你将选择的选项：

提示
  • 你想要哪个模板？ SvelteKit minimal
  • 是否添加 TypeScript 类型检查？ Yes, using TypeScript syntax
  • 你想为项目添加什么？ prettier, eslint
  • 你想使用哪个包管理器安装依赖项？ npm

设置完成后，进入项目目录并启动开发服务器

cd sveltekit-prisma
npm install
npm run dev

就是这样！Svelte 让启动和运行变得非常简单。此时，你的项目已准备好集成 Prisma 并连接到 Prisma Postgres 数据库。

2. 安装和配置 Prisma​

2.1. 安装依赖项​

要开始使用 Prisma，你需要安装一些依赖项

npm install prisma --save-dev
npm install tsx --save-dev
npm install @prisma/extension-accelerate
提示

如果你没有使用 Prisma Postgres 数据库，可以跳过安装 @prisma/extension-accelerate。

安装完成后，在你的项目中初始化 Prisma

npx prisma init --db --output ../src/generated/prisma
提示

如果你没有使用 Prisma Postgres 数据库，可以跳过 --db 标志。

设置 Prisma Postgres 数据库时，你需要回答几个问题。选择离你位置最近的区域，并为你的数据库选择一个容易记住的名称，例如 "My SvelteKit Project"。

这将创建

  • 一个包含 schema.prisma 文件的 prisma/ 目录
  • 一个已设置 DATABASE_URL 的 .env 文件 (如果你使用的是 Prisma Postgres)

2.2. 定义你的 Prisma Schema​

在 prisma/schema.prisma 文件中，添加以下模型并将生成器更改为使用 prisma-client provider

prisma/schema.prisma
generator client {
  provider = "prisma-client"
  provider = "prisma-client-js"
  output   = "../generated/prisma"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

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. 配置 Prisma Client 生成器​

现在，运行以下命令创建数据库表并生成 Prisma Client

npx prisma migrate dev --name init

2.4. 填充数据库 (Seed the database)​

让我们添加一些 seed 数据来用示例用户和帖子填充数据库。

在 prisma/ 目录中创建一个名为 seed.ts 的新文件

prisma/seed.ts
import { PrismaClient, Prisma } from "../src/generated/prisma";

const prisma = new PrismaClient();

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();

现在，通过更新 package.json 文件告诉 Prisma 如何运行此脚本

package.json
"prisma": {
  "seed": "tsx prisma/seed.ts"
}

运行 seed 脚本

npx prisma db seed

并打开 Prisma Studio 检查你的数据

npx prisma studio

3. 将 Prisma 集成到 SvelteKit​

3.1. 创建一个 Prisma Client​

在你的 /src/lib 目录中，将 index.ts 重命名为 prisma.ts。此文件将用于创建和导出你的 Prisma Client 实例。

提示

src/lib 中的文件可以使用 $lib 别名从任何地方访问。

按如下方式设置 Prisma client

src/lib/prisma.ts
import { PrismaClient } from "../generated/prisma";
import { withAccelerate } from "@prisma/extension-accelerate";

const prisma = new PrismaClient().$extends(withAccelerate());

export default prisma;
警告

我们建议使用连接池 (例如 Prisma Accelerate) 来有效地管理数据库连接。

如果你选择不使用连接池，请避免在长生命周期的环境中全局实例化 PrismaClient。相反，请为每个请求创建并释放 client，以防止耗尽数据库连接。

3.2. 创建一个服务器路由​

要在服务器端从数据库获取数据，请在 routes 目录中创建一个 +page.server.ts 文件。此文件应导出一个 load 函数，该函数在页面渲染之前在服务器上运行。

从一个基本的 load 函数开始

src/routes/+page.server.ts
export async function load() {}

使用 findMany() 方法获取包含基本字段的用户列表。

像这样更新你的 +page.server.ts 文件

src/routes/+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() 调用

src/routes/+page.server.ts
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> 片段

src/routes/+page.svelte
<script lang="ts">
</script>

<h1>SvelteKit + Prisma</h1>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.net.cn/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

我们需要获取从 +page.server.ts 导出的数据

src/routes/+page.svelte
<script lang="ts">
	let { data } = $props();
</script>

<h1>SvelteKit + Prisma</h1>

现在我们有了数据，让我们使用 Svelte 的 each 块来遍历用户及其帖子。

src/routes/+page.svelte
<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 之旅： 我们的活跃社区。了解最新信息，参与其中，并与其他开发者协作

我们非常重视你的参与，并期待你成为我们社区的一员！