返回

Nuxtjs3 中使用 Prisma 操作数据库

日志

Prisma是一个现代的Nodejs ORM库，它可以让你用简洁的API来操作数据库，并提供了类型安全的数据库客户端。Nuxtjs3是一个基于Vue的框架，它可以让你构建快速的服务器端渲染和静态应用。如果你想要在Nuxtjs3中使用Prisma来操作数据库，这篇文章将教你如何做到。

安装和初始化Prisma

首先，你需要在你的Nuxtjs3项目中安装Prisma作为开发依赖，你可以运行以下命令：

npm install --save-dev prisma

然后，你需要初始化Prisma，这会在你的项目根目录下创建一个prisma文件夹，里面有一个schema.prisma文件和一个.env文件。schema.prisma文件定义了你的数据库连接和Prisma客户端生成器。.env文件定义了你的数据库连接字符串。你可以运行以下命令：

npx prisma init

在本文中，我们将使用sqlite作为数据库，因为它不需要额外的安装和配置。如果你想要使用其他类型的数据库，例如mysql或postgresql，你只需要修改provider和url字段即可。schema.prisma文件的内容如下：

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

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

定义和迁移数据模型

接下来，你需要在schema.prisma文件中定义你的数据模型，这是一种声明式的语法，用来描述你的数据库表和字段。在本文中，我们将定义一个article模型，它有以下字段：

  • id: 主键，字符串类型
  • nickname: 昵称，字符串类型
  • title: 标题，字符串类型，可空
  • releasedAt: 发布日期，字符串类型
  • detail: 详情，字符串类型
  • labels: 标签，字符串类型
  • likes: 点赞数，字符串类型
  • replies: 回复数，字符串类型
  • forwards: 转发数，字符串类型
  • province: 省份，字符串类型
  • city: 城市，字符串类型
  • picture: 图片，字符串类型
  • keywords: 关键词，字符串类型
  • decoration: 装饰，字符串类型

schema.prisma文件的内容如下：

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

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model article {
  id            String      @id
  nickname      String   
  title         String?
  releasedAt    String
  detail        String
  labels        String
  likes         String
  replies       String
  forwards      String
  province      String
  city          String
  picture       String
  keywords      String
  decoration    String
}

注意我们给title字段添加了一个?符号，表示它是可空的。

然后，你需要运行迁移命令来根据你的数据模型创建数据库表。你可以运行以下命令：

npx prisma migrate dev --name create-article-model

这会在prisma/migrations文件夹下创建一个迁移文件，并在根目录下创建一个dev.db文件作为sqlite数据库。

生成和使用Prisma客户端

最后，你需要生成Prisma客户端，这是一个自动生成的数据库访问库，它可以让你用简洁的API来操作数据库。你可以运行以下命令：

npx prisma generate

这会在node_modules/@prisma/client文件夹下生成Prisma客户端。

现在你可以在Nuxtjs3中使用Prisma客户端来操作数据库了。Nuxtjs3提供了一种叫做服务器路由的功能，它可以让你在api文件夹下创建服务器端的路由，而不需要使用Express。你可以在这些路由中导入Prisma客户端，并使用它来进行增删改查等操作。

例如，你可以在api/articles.ts文件中创建一个GET路由来获取所有文章的数据，代码如下：

import { defineNuxtServerMiddleware } from '@nuxtjs/composition-api'
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default defineNuxtServerMiddleware(async (req, res) => {
  if (req.method === 'GET') {
    const articles = await prisma.article.findMany()
    res.json(articles)
  }
})

你可以在浏览器中访问http://localhost:3000/api/articles来看到返回的数据。

同理，你可以在api/articles.ts文件中创建其他的路由来插入，更新，删除或查询文章的数据，具体的代码和用法可以参考Prisma的官方文档。

结论

本文介绍了如何在Nuxtjs3中使用Prisma操作数据库，包括如何安装和初始化Prisma，如何定义和迁移数据模型，如何生成和使用Prisma客户端，以及如何使用Nuxtjs3的服务器路由来创建API。希望本文对你有所帮助，如果你有任何问题或建议，请在下面留言。

常见问题解答

Q: Prisma支持哪些数据库？

A: Prisma目前支持PostgreSQL, MySQL, SQLite, SQL Server, CockroachDB和MongoDB。

Q: Prisma和其他ORM库有什么区别？

A: Prisma和其他ORM库的主要区别是，Prisma提供了一个类型安全的数据库客户端，它可以根据你的数据模型自动生成，并提供了简洁的API来操作数据库。Prisma还提供了一个声明式的语法来定义数据模型，以及一个强大的迁移系统来管理数据库结构的变化。

Q: Prisma有什么优势和劣势？

A: Prisma的优势是：

  • 提高了开发效率和生产力，让你更专注于业务逻辑而不是数据库操作
  • 提高了代码质量和可维护性，让你更容易编写正确和可读的代码
  • 提高了性能和可扩展性，让你更容易优化和调整数据库查询

Prisma的劣势是：

  • 需要学习一种新的语法和工具，可能有一定的学习曲线
  • 需要依赖于Prisma生成器和客户端，可能有一定的不稳定性或兼容性问题
  • 需要遵循Prisma的约定和限制，可能有一定的灵活性损失

Q: 如何在Nuxtjs3中使用Prisma进行预览或静态生成？

A: 你可以在Nuxtjs3中使用getStaticProps或getServerSideProps函数来使用Prisma进行预览或静态生成。这些函数可以让你在构建时或请求时访问数据库，并将数据作为props传递给页面组件。具体的用法可以参考Nuxtjs3的官方文档。

Q: 如何在Nuxtjs3中使用Prisma创建关联数据？

A: 你可以在schema.prisma文件中使用关键字如@relation, @id, @unique等来定义关联数据。例如，如果你想要定义一个用户模型和一个文章模型，并且一个用户可以拥有多篇文章，一个文章只能属于一个用户，你可以这样写：

model User {
  id       Int      @id @default(autoincrement())
  username String   @unique
  articles Article[]
}

model Article {
  id        Int    @id @default(autoincrement())
  title     String
  content   String
  authorId  Int
  author    User   @relation(fields: [authorId], references

源: 与必应的对话， 2023/6/19
(1) Adding an API and database to your Nuxt App with Prisma. https://dev.to/prisma/adding-an-api-and-database-to-your-nuxt-app-with-prisma-2nlp.
(2) Get Started · Nuxt Prismic. https://prismic.nuxtjs.org/.

0