跳到主要内容

如何在 Nuxt 中使用 Prisma ORM

10 分钟

Prisma Nuxt 模块通过简化初始设置过程,帮助您在Nuxt应用中开始使用 Prisma。本指南介绍了如何设置 Nuxt 应用,使用 Prisma Nuxt 模块配置Prisma Postgres,并将项目部署到Vercel进行生产环境部署。

您将学到什么

  • 如何使用 Prisma Nuxt 模块设置 Nuxt 项目。
  • 如何在 Nuxt 应用中使用 Prisma Nuxt 模块配置和使用 Prisma Postgres。
  • 如何将项目部署到 Vercel。

先决条件

要按照本指南进行操作,请确保您具备以下条件

1. 创建新的 Nuxt 项目并设置 Prisma Nuxt 模块

  1. 初始化新的 Nuxt 项目,选择 npm 作为包管理器并初始化 git

    npm create nuxt hello-world
    注意

    我们建议使用 npm,因为它是 @prisma/nuxt 模块最稳定的选项。

  2. 导航到项目目录并安装 @prisma/nuxt 模块

    cd hello-world
    npm i @prisma/nuxt
  3. 安装Prisma Accelerate 客户端扩展,这是使用 Prisma Postgres 所必需的

    npm i @prisma/extension-accelerate
  4. @prisma/nuxt 模块及以下配置添加到您的 nuxt.config.ts 文件中

    // https://nuxtjs.org.cn/docs/api/configuration/nuxt-config
    export default defineNuxtConfig({
    compatibilityDate: "2024-11-01",
    modules: ["@prisma/nuxt"],
    experimental: {
    componentIslands: true,
    },
    devtools: { enabled: true },
    });

2. 通过在本地运行开发服务器来设置 Prisma ORM

在为您的 Nuxt 项目配置了 Prisma 模块后,下一步是设置 Prisma ORM。这个过程从启动开发服务器开始,它会自动使用SQLite 数据库配置 Prisma。

运行以下命令启动开发服务器

npm run dev

运行此命令后,您将收到提示,要求使用Prisma Migrate运行数据库迁移

? Do you want to migrate database changes to your database? › (Y/n)

通过在键盘上按 Y 确认您要迁移数据库并创建初始表。

设置流程终止后,它将

  1. 安装了Prisma CLI
  2. 使用 SQLite 数据库初始化了 Prisma 项目。
  3. schema.prisma 文件中创建了示例 UserPost 模型
    prisma/schema.prisma
    // This is your Prisma schema file,
    // learn more about it in the docs: https://pris.ly/d/prisma-schema

    generator client {
    provider = "prisma-client-js"
    }

    datasource db {
    provider = "sqlite"
    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)
    author User @relation(fields: [authorId], references: [id])
    authorId Int
    }
  4. 从上一步创建了 UserPost 模型的数据库表。
    注意

    如果不存在 migrations 文件夹,第一次启动模块时数据库会自动迁移。之后,您需要在 CLI 中手动运行 npx prisma migrate dev 以应用任何 schema 更改。手动运行 npx prisma migrate dev 命令可以更轻松、更安全地管理迁移,并且排除任何与迁移相关的错误。

  5. 安装并生成了Prisma Client,使您能够查询数据库。
  6. 安装了Prisma Studio

Prisma 设置完成后,开发服务器应在 https://localhost:3000 启动。

接下来,停止服务器,因为我们需要进行一些代码更改。

4. 更新应用代码

配置好 Prisma 后,下一步是更新您的应用代码以从数据库中获取并显示数据。

  1. 在项目的根目录中,创建一个名为 components 的文件夹。

  2. components 文件夹内,创建一个名为 User.server.vue 的文件。这个服务器组件将从数据库中获取并显示第一个用户的名称

    components/User.server.vue
    <script setup>
    import { withAccelerate } from "@prisma/extension-accelerate";
    const prisma = usePrismaClient().$extends(withAccelerate());
    const user = await prisma.user.findFirst();
    </script>

    <template>
    <p>{{ user?.name ?? "No user has been added yet." }}</p>
    </template>
    注意

    我们使用 withAccelerate() 扩展方法扩展了 usePrismaClient() 可组合函数,以确保与 Prisma Postgres 兼容。此扩展还将允许您缓存您的查询

  3. 修改根目录中的 app.vue 文件,使用 Nuxt Islands 引入新的服务器组件

    app.vue
    <template>
    <div>
    <NuxtIsland name="User"></NuxtIsland>
    </div>
    </template>
  4. 再次运行以下命令启动开发服务器

    npm run dev
  5. 通过在浏览器中打开您的应用(地址为 https://localhost:3000)来验证应用代码是否正常工作。
    由于数据库中还没有用户,应用将显示

    No user has been added yet.

    当用户添加到您的数据库时,此消息将动态更新。

完成这些步骤后,您的应用现在能够从 Prisma 数据库中获取数据并在前端渲染。

5. 创建一个 Prisma Postgres 实例

要存储您的应用数据,您将使用 Prisma Data Platform 创建一个 Prisma Postgres 数据库实例。

按照以下步骤创建您的 Prisma Postgres 数据库

  1. 登录到并打开 Console。
  2. 在您选择的工作区中,点击 New project 按钮。
  3. Name 字段中输入项目名称,例如 hello-ppg
  4. Prisma Postgres 部分,点击 Get started 按钮。
  5. Region 下拉菜单中,选择离您当前位置最近的区域,例如 US East (N. Virginia)
  6. 点击 Create project 按钮。

此时,您将被重定向到 Database 页面,您需要等待几秒钟,直到数据库的状态从 PROVISIONING 变为 CONNECTED

一旦出现绿色的 CONNECTED 标签,您的数据库就可以使用了!

然后,在 Set up database access 部分找到您的数据库凭据,复制 DATABASE_URL 环境变量。

DATABASE_URL=<your-database-url>

在接下来的步骤中需要 DATABASE_URL 环境变量。

6. 在您的 Nuxt 应用中设置 Prisma Postgres

现在 Prisma Postgres 实例已准备就绪,更新您的 Nuxt 应用以使用此数据库

  1. 更新 .env 文件,用您之前复制的值替换现有的 DATABASE_URL 值。它将类似于这样

    .env
    DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"
  2. 修改 schema.prisma 文件,更改位于 prisma 文件夹中的 schema.prisma 文件 datasource 块中的数据库提供者

    prisma/schema.prisma
    datasource db {
    provider = "postgresql"
    url = env("DATABASE_URL")
    }
  3. 删除 SQLite 数据库文件(dev.dbdev.db-journal)以及 migrations 文件夹,它们都位于 prisma 目录中。这将清理现有的 SQLite 设置,并准备您的项目迁移到 PostgreSQL。

  4. 通过运行 prisma migrate 命令为 Postgres 数据库手动创建新的迁移

    npx prisma migrate dev --name init
  5. 再次启动开发服务器

    npm run dev
  6. 打开 Nuxt DevTools(通过按 Shift+Option+ D)并点击左侧导航栏中的 Prisma 徽标以打开 Prisma Studio。然后通过为 nameemail 字段指定值来添加新的 User 记录。

  7. 通过刷新您在 https://localhost:3000 的应用来验证应用中的数据。页面应显示您在 Prisma Studio 中添加的用户的名称。例如,如果您添加了一个名为 Jon 的用户,应用将在浏览器中显示 Jon

恭喜,您的 Nuxt 应用现已与 Prisma Postgres 完全集成!

7. 部署到 Vercel

按照以下步骤将您的 Nuxt 应用与 Prisma Postgres 集成部署到 Vercel

  1. 确保您的项目已进行版本控制并推送到 GitHub 仓库。如果您还没有仓库,请在 GitHub 上创建一个。仓库准备好后,运行以下命令
    git add .
    git commit -m "Initial commit with Prisma Postgres integration"
    git branch -M main
    git remote add origin https://github.com/<your-username>/<repository-name>.git
    git push -u origin main
    注意

    <your-username><repository-name> 替换为您的 GitHub 用户名和仓库名称。

  2. 登录到Vercel 并导航到您的仪表盘
  3. 创建一个新项目。按照 Vercel 的导入现有项目指南进行操作,但在步骤 3 停止,您将在点击 Deploy 之前配置环境变量。
  4. 配置 DATABASE_URL 环境变量
    1. 展开 Environment variables 部分。
    2. 添加 DATABASE_URL 环境变量
      • Key: DATABASE_URL
      • Value: 粘贴您的 Prisma Postgres 连接 URL,例如从您的 Nuxt 项目中的 .env 文件复制。
      警告

      在未设置 DATABASE_URL 变量的情况下不要部署。如果应用无法连接到数据库,您的部署将会失败。

  5. 点击 Deploy 按钮。Vercel 将构建您的项目并将其部署到实时 URL。
  6. 打开 Vercel 提供的实时 URL 并验证您的应用是否正常工作
    • 如果您在 Prisma Studio 中添加了用户,他们的名字应该会显示在实时站点上。
    • 如果不存在用户,应用将显示
      No user has been added yet.
  7. 添加或管理数据
    1. 通过Prisma Data Platform 或本地实例打开 Prisma Studio。
    2. 在数据库中添加或更新用户数据。
    3. 刷新您的实时站点以确认更改。

恭喜!您的 Nuxt 应用与 Prisma Postgres 集成现已在 Vercel 上实时运行并完全可用。

注意事项

本指南帮助您开始使用 Prisma Nuxt 模块搭配 Prisma Postgres。由于 Nuxt 模块仍在积极发展中,它并未涵盖 Prisma 的所有功能或支持所有边缘情况。对于更高级的功能或边缘部署,请考虑直接使用 Prisma。


保持与 Prisma 的联系

通过以下方式继续您的 Prisma 之旅 加入我们活跃的社区。保持关注,参与其中,与其他开发者协作

我们非常珍视您的参与,并期待您成为我们社区的一员!