Nuxt 3 集成 Prisma:开源 Vue 全栈项目数据库交互与服务端 API 开发手册
·
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. 数据库配置
- 修改
prisma/schema.prisma文件,配置数据源(以 PostgreSQL 为例):datasource db { provider = "postgresql" url = env("DATABASE_URL") } - 在
.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. 数据库迁移
- 生成迁移文件:
npx prisma migrate dev --name init - 同步 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. 关键优化技巧
- 单例 Prisma 客户端
创建server/utils/prisma.ts避免重复实例化:import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() export default prisma - 类型安全
在 API 路由中使用 TypeScript 类型推导:const body = await readBody<{ name: string; email: string }>(event) - 错误处理
添加全局异常拦截: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,可高效构建企业级全栈应用。
更多推荐

所有评论(0)