Nuxt 3 集成 Prisma:全栈开发指南

1. 环境初始化
  • 创建 Nuxt 3 项目:
    npx nuxi init my-project
    cd my-project
    npm install
    

  • 安装 Prisma 依赖:
    npm install prisma @prisma/client
    npx prisma init
    

2. 数据库配置
  1. 修改 prisma/schema.prisma 文件,配置数据源(以 PostgreSQL 为例):
    datasource db {
      provider = "postgresql"
      url      = env("DATABASE_URL")
    }
    

  2. .env 文件中设置数据库连接:
    DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
    

3. 定义数据模型

schema.prisma 中添加模型(示例为用户模型):

model User {
  id    Int    @id @default(autoincrement())
  name  String
  email String @unique
}

4. 数据库迁移
  1. 生成迁移文件:
    npx prisma migrate dev --name init
    

  2. 同步 Prisma 客户端:
    npx prisma generate
    

5. 服务端 API 开发

server/api 目录创建 API 端点(示例:users.post.ts):

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  
  // 创建用户
  const newUser = await prisma.user.create({
    data: {
      name: body.name,
      email: body.email
    }
  })
  
  return { user: newUser }
})

6. 前端调用 API

在 Vue 组件中调用接口(示例):

<script setup>
const createUser = async () => {
  const { data } = await useFetch('/api/users', {
    method: 'POST',
    body: { name: 'Alice', email: 'alice@example.com' }
  })
  console.log(data.value) // 返回新用户数据
}
</script>

7. 关键优化技巧
  1. 单例 Prisma 客户端
    创建 server/utils/prisma.ts 避免重复实例化:
    import { PrismaClient } from '@prisma/client'
    const prisma = new PrismaClient()
    export default prisma
    

  2. 类型安全
    在 API 路由中使用 TypeScript 类型推导:
    const body = await readBody<{ name: string; email: string }>(event)
    

  3. 错误处理
    添加全局异常拦截:
    export default defineEventHandler(async (event) => {
      try {
        // 业务逻辑
      } catch (error) {
        throw createError({ statusCode: 500, message: '数据库操作失败' })
      }
    })
    

8. 部署注意事项
  • 生产环境需设置 DATABASE_URL 环境变量
  • 构建命令:
    npm run build
    npm run preview
    

  • 推荐使用 @nuxtjs/prisma 模块简化配置(需额外安装)

调试提示:使用 npx prisma studio 启动数据库管理界面,实时查看数据变化。通过组合 Nuxt 3 的服务端渲染能力与 Prisma 的类型安全 ORM,可高效构建企业级全栈应用。

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐