前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

前面我们学习了数据库和接口的设计,是时候编写一些接口获取并返回数据。但是还是有个问题,我们可能对数据库查询语言 SQL 不是很熟悉,编写和调试 SQL 语句是非常耗时的工作。

还好,社区有很多 ORM(对象关系映射) 库,可以很好规避这个问题,例如本节我要给大家介绍的 Prisma,就是一个 ORM 库,它可以大幅简化数据库操作。本节涉及内容如下:

  • 什么是 Prisma;
  • 快速体验 Prisma;
  • 整合 Prisma 到 Nuxt 项目。

# 什么是 Prisma?

Prisma 是一个使用 TypeScript 和 Node.js 开发的 ORM (对象关系映射) 库,用于简化对数据库的访问和操作。它提供了一种高级语言来定义数据模型,并且可以生成数据库架构和数据访问代码。

# 快速体验 Prisma

Prisma 通过以下流程简化我们的开发工作:

首先我们创建一个 Prisma schema(结构):下面 schema 描述了我们要用 prisma-client-js 客户端和 MySQL 数据库交互。同时我们准备创建两个模型 Post 和 User,它们代表了未来要创建的数据库表结构。server/database/schema.prisma:

kotlin
复制代码        datasource db {
          provider = "mysql"
          url      = env("DATABASE_URL")
        }

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

        model Post {
          id        Int     @id @default(autoincrement())
          title     String
          content   String?
          published Boolean @default(false)
          author    User?   @relation(fields: [authorId], references: [id])
          authorId  Int?
        }

        model User {
          id    Int     @id @default(autoincrement())
          email String  @unique
          name  String?
          posts Post[]
        }
@前端进阶之旅: 代码已经复制到剪贴板

添加环境变量 DATABASE_URL,.env

ini
复制代码DATABASE_URL="mysql://root:rootpassword@localhost:3306/test"
@前端进阶之旅: 代码已经复制到剪贴板

然后通过定义生成数据库表结构,我们需要执行 prisma migrate CLI 命令,这个命令同时会生成 prisma client:

css
复制代码npx prisma migrate dev --name init --schema server/database/schema.prisma
@前端进阶之旅: 代码已经复制到剪贴板

image.png

最后在代码中通过 client 访问数据库:

javascript
复制代码import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function main(
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏