跳到主要内容

如何在 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 类型检查吗？ 是，使用 TypeScript 语法
  • 您想为项目添加什么？
    • prettier
    • eslint
  • 您想使用哪个包管理器安装依赖？ npm

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

cd sveltekit-prisma
npm run dev

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

2. 安装和配置 Prisma​

2.1. 安装依赖​

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

npm install prisma tsx --save-dev
npm install @prisma/extension-accelerate @prisma/client

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

npx prisma init --db --output src/generated/prisma
信息

在设置 Prisma Postgres 数据库时，您需要回答几个问题。选择离您最近的区域，并为您的数据库选择一个易记的名称，例如“我的 SvelteKit 项目”

这将创建

  • 一个包含 schema.prisma 文件的 prisma 目录。
  • 一个 Prisma Postgres 数据库。
  • 项目根目录中包含 DATABASE_URL 的 .env 文件。
  • 用于生成 Prisma Client 的 output 目录，路径为 src/generated/prisma。

2.2. 定义您的 Prisma Schema​

在 prisma/schema.prisma 文件中，添加以下模型并更改生成器以使用 prisma-client 提供程序

prisma/schema.prisma
generator client {
  provider = "prisma-client"
  output   = "../src/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. 填充数据库​

添加一些种子数据，以样本用户和帖子填充数据库。

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

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

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
{
	"name": "sveltekit-prisma",
	"private": true,
	"version": "0.0.1",
	"type": "module",
	"scripts": {
    // ...
	},
  "prisma": {
    "seed": "tsx prisma/seed.ts"
  }
	"devDependencies": {
    // ...
	},
	"dependencies": {
    // ...
	}
}

运行种子脚本

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 别名从任何地方访问。

DATABASE_URL 存储在 .env 文件中。要访问它，您需要从 $env/static/private 命名空间导入它。

像这样设置 Prisma 客户端

src/lib/prisma.ts
import { PrismaClient } from '../generated/prisma/client.js';
import { DATABASE_URL } from '$env/static/private';
import { withAccelerate } from '@prisma/extension-accelerate';

const prisma = new PrismaClient({
	datasourceUrl: DATABASE_URL
}).$extends(withAccelerate());

export default prisma;

警告

我们建议使用连接池（例如 Prisma Accelerate）来高效管理数据库连接。

如果您选择不使用连接池，请**避免**在长期运行的环境中全局实例化 PrismaClient。相反，请为每个请求创建和销毁客户端，以防止耗尽数据库连接。

3.2. 创建服务器路由​

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

在基本的 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>

我们需要获取从 +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 之旅 我们活跃的社区。随时了解最新信息、参与其中并与其他开发者协作

我们真诚地珍视您的参与，并期待您成为我们社区的一员！

© . All rights reserved.