Skip to main content

如何将 Prisma ORM 与 SvelteKit 结合使用

15 min

介绍​

¥Introduction

Prisma ORM 通过类型安全的查询简化了数据库访问，与 SvelteKit 配合使用时，可创建健壮且可扩展的全栈架构。

¥Prisma ORM simplifies database access with type-safe queries, and when paired with SvelteKit, it creates a robust and scalable full-stack architecture.

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

¥In this guide, you'll learn to integrate Prisma ORM with a Prisma Postgres database in a SvelteKit project from scratch. You can find a complete example of this guide on GitHub.

先决条件​

¥Prerequisites

1. 设置你的项目​

¥ Set up your project

你将使用 Svelte CLI 而不是 npx create svelte@latest。此 CLI 提供了更具交互性的设置，并内置了对 ESLint 和 Prettier 等流行工具的支持。

¥You'll be using Svelte CLI instead of npx create svelte@latest. This CLI provides a more interactive setup and built-in support for popular tooling like ESLint and Prettier

创建一个新的 Svelte 项目：

¥Create a new Svelte project:

npx sv create sveltekit-prisma

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

¥It will prompt you to customize your setup. Here are the options you'll choose:

信息

  • 你想要哪个模板？SvelteKit minimal

    ¥Which template would you like? SvelteKit minimal

  • 是否使用 TypeScript 添加类型检查？Yes, using TypeScript syntax

    ¥Add type checking with TypeScript? Yes, using TypeScript syntax

  • 你想在项目中添加什么？

    ¥What would you like to add to your project?

    • prettier

    • eslint

  • 你想使用哪个软件包管理器来安装依赖？npm

    ¥Which package manager do you want to install dependencies with? npm

设置完成后，导航到你的项目并启动开发服务器：

¥Once the setup completes, navigate into your project and start the development server:

cd sveltekit-prisma
npm run dev

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

¥That's it! Svelte makes it a very simple process to get up and running. At this point, your project is ready to integrate Prisma and connect to a Prisma Postgres database.

2. 安装和配置 Prisma​

¥ Install and Configure Prisma

2.1.安装依赖​

¥2.1. Install dependencies

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

¥To get started with Prisma, you'll need to install a few dependencies:

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

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

¥Once installed, initialize Prisma in your project:

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

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

¥You'll need to answer a few questions while setting up your Prisma Postgres database. Select the region closest to your location and a memorable name for your database like "My SvelteKit Project"

这将造成：

¥This will create:

  • 一个包含 schema.prisma 文件的 prisma 目录。

    ¥A prisma directory with a schema.prisma file.

  • A prisma.config.ts file for configuring Prisma

  • 一个 Prisma Postgres 数据库。

    ¥A Prisma Postgres database.

  • 一个位于项目根目录、包含 DATABASE_URL 文件的 .env 文件。

    ¥A .env file containing the DATABASE_URL at the project root.

  • 用于生成的 Prisma 客户端的 output 目录，用作 src/generated/prisma。

    ¥An output directory for the generated Prisma Client as src/generated/prisma.

2.2.定义 Prisma Schema​

¥2.2. Define your Prisma Schema

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

¥In the prisma/schema.prisma file, add the following models and change the generator to use the prisma-client provider:

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，它们之间存在一对多关系。

¥This creates two models: User and Post, with a one-to-many relationship between them.

2.3 Add dotenv to prisma.config.ts​

To get access to the variables in the .env file, they can either be loaded by your runtime, or by using dotenv.Include an import for dotenv at the top of the prisma.config.ts

import 'dotenv/config'
import { defineConfig, env } from 'prisma/config';
export default defineConfig({
  schema: 'prisma/schema.prisma',
  migrations: {
    path: 'prisma/migrations',
  },
  engine: 'classic',
  datasource: {
    url: env('DATABASE_URL'),
  },
});

2.4.配置 Prisma 客户端生成器​

¥2.4. Configure the Prisma Client generator

现在，运行以下命令创建数据库表并生成 Prisma 客户端：

¥Now, run the following command to create the database tables and generate the Prisma Client:

npx prisma migrate dev --name init

2.5.种子数据库​

¥2.5. Seed the database

添加一些种子数据，以便使用示例用户和帖子填充数据库。

¥Add some seed data to populate the database with sample users and posts.

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

¥Create a new file called seed.ts in the prisma/ directory:

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

现在，通过更新 prisma.config.ts 来告诉 Prisma 如何运行此脚本：

¥Now, tell Prisma how to run this script by updating your prisma.config.ts:

prisma.config.ts
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`,
  },
  engine: 'classic',
  datasource: {
    url: env('DATABASE_URL'),
  },
});

运行种子脚本：

¥Run the seed script:

npx prisma db seed

打开 Prisma Studio 检查你的数据：

¥And open Prisma Studio to inspect your data:

npx prisma studio

3. 将 Prisma 集成到 SvelteKit​

¥ Integrate Prisma into SvelteKit

3.1.创建 Prisma 客户端​

¥3.1. Create a Prisma Client

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

¥Inside your /src/lib directory, rename index.ts to prisma.ts. This file will be used to create and export your Prisma Client instance.

提示

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

¥Files in src/lib can be accessed from anywhere using the $lib alias.

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

¥The DATABASE_URL is stored in the .env file. To access it, you'll need to import it from the $env/static/private namespace.

按如下方式设置 Prisma 客户端：

¥Set up the Prisma client like this:

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 加速）来高效管理数据库连接。

¥We recommend using a connection pooler (like Prisma Accelerate) to manage database connections efficiently.

如果你选择不使用 PrismaClient，请避免在长期存在的环境中全局实例化 PrismaClient。请改为按请求创建并释放客户端，以防止耗尽数据库连接。

¥If you choose not to use one, avoid instantiating PrismaClient globally in long-lived environments. Instead, create and dispose of the client per request to prevent exhausting your database connections.

3.2.创建服务器路由​

¥3.2. Create a server route

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

¥To fetch data from the database on the server side, create a +page.server.ts file in your routes directory. This file should export a load function, which runs on the server before your page renders.

在基本 load 函数中使用 findMany() 方法获取用户列表。

¥Use the findMany() method within a basic load function to get a list of users.

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

¥Update your +page.server.ts file like this:

src/routes/+page.server.ts
import prisma from '$lib/prisma';

export async function load() {
	const users = await prisma.user.findMany({});
	return {
		users
	};
}

此时，你只能直接获取 User 模型上的数据 - 尚未包含帖子之类的关系。

¥At this point, you're only getting data directly on the User model — no relations like posts are included yet.

为了获取每个用户的帖子，我们可以使用 include 选项扩展查询。这会告诉 Prisma 将相关的 Posts 表加入结果中。

¥To also fetch each user's posts, we can expand the query using the include option. This tells Prisma to join the related Posts table in the result.

像这样更新你的 findMany() 调用：

¥Update your findMany() call like this:

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 数组。

¥Now, every user in the result will also include a posts array.

3.3.填充页面​

¥3.3. Populate the page

在 src/routes/+page.svelte 中，将文件精简到最基本的内容，并添加一个 <script> 片段。文件应如下所示：

¥In src/routes/+page.svelte, strip the file down to the basics and add a <script> fragment. The file should look like this:

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

<h1>SvelteKit + Prisma</h1>

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

¥We need to grab the data exported from +page.server.ts:

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

<h1>SvelteKit + Prisma</h1>

现在我们有了数据，让我们使用 Svelte 的 each 块来映射用户及其帖子：

¥Now that we have the data, let's map through the users and their posts with Svelte's each block:

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 应用。以下是一些后续步骤，以及一些可帮助你开始扩展项目的资源。

¥You're done! You've just created a SvelteKit app with Prisma ORM. Below are some next steps to explore, as well as some more resources to help you get started expanding your project.

后续步骤​

¥Next Steps

现在你已经拥有一个连接到 Prisma Postgres 数据库的可运行 SvelteKit 应用，你可以：

¥Now that you have a working SvelteKit app connected to a Prisma Postgres database, you can:

  • 使用更多模型和关系扩展你的 Prisma 模式

    ¥Extend your Prisma schema with more models and relationships

  • 添加创建/更新/删除路由和表单

    ¥Add create/update/delete routes and forms

  • 探索身份验证和验证

    ¥Explore authentication and validation

  • 使用 Prisma Postgres 启用查询缓存以获得更好的性能

    ¥Enable query caching with Prisma Postgres for better performance

更多信息​

¥More Info


Stay connected with Prisma

Continue your Prisma journey by connecting with our active community. Stay informed, get involved, and collaborate with other developers:

We genuinely value your involvement and look forward to having you as part of our community!