一、为什么是 Remix/Prisma/Sqlite ?

最主要的一个原因就是轻量级别，轻量级体现在只需要一个 Remix 服务即可。

  • Remix 轻量级 React 全栈框架
  • Prisma 轻量级 ORM 库
  • Sqlite 嵌入式无需发动服务的数据库

二、Prisma 指令提早看

假如你还不了解 Prisma 的常用指令，那么下面盘点的常用指令，提早了解，后边会用到：

指令 阐明
prisma init 初始化一个新的Prisma项目
prisma migrate dev 将数据模型应用于数据库
prisma migrate reset 回滚数据库到开始状况
prisma studio 发动一个Web界面，用于检查和修改数据库中的数据
prisma generate 生成Prisma客户端代码，用于衔接和操作数据库
prisma format 格式化Prisma模型文件
prisma validate 验证Prisma模型文件的正确性
prisma db seed 开发环境将种子数据增加到数据库中
npx prisma migrate reset 重置您的数据库并将其恢复到搬迁历史中的开始状况

三、在 Remix 中增加 Sqlite 和 Prisma 的流程如下：

全栈轻量级搭配：Remix/Prisma/Sqlite

快速初始化一个 Remix 项目：

pnpm dlx create-remix@latest <app_name>

全栈轻量级搭配：Remix/Prisma/Sqlite

1、装置依靠

pnpm install prisma -g # 全局装置

2、用 sqlite 初始化 prisma

prisma init --datasource-provider sqlite

全栈轻量级搭配：Remix/Prisma/Sqlite

指令自动生成文件如下：

  • .env 文件
DATABASE_URL="file:./dev.db"
  • prisma/schema.prisma 文件
generator client {
  provider = "prisma-client-js"
}
datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

3、在 Schema 文件中增加模型

model User {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
  posts Post[]
}
model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String
  author    User?    @relation(fields: [authorId], references: [id])
  authorId  Int?
}

4、生成客户端代码

“prisma generate” 依据 Prisma schema 文件生成 Prisma Client 代码，该代码供给了一种类型安全的方法来访问数据库，简化了应用程序与数据库交互的进程，减少了手动编写重复代码的作业量。

全栈轻量级搭配：Remix/Prisma/Sqlite

5、运用搬迁指令

全栈轻量级搭配：Remix/Prisma/Sqlite

npx prisma migrate dev --name init

每一次 Schema 发生变化的时候，都要调用此指令生成新的搬迁文件（生成 sql 文件，数据文件件，装置包）

生成文件：

├── dev.db
├── dev.db-journal
├── migrations
│   ├── 2x23x42x1x3x4x_init
│   │   └── migration.sql
│   └── migration_lock.toml

同时自动装置了 npm 包：

  • prisma
  • @prisma/client

6、在 studio 中检查

npx prisma studio

会发动一个 web 服务，在浏览器中操作数据库，不需要一个单独的客户端。

  • 初始界面

全栈轻量级搭配：Remix/Prisma/Sqlite

  • 模型中

全栈轻量级搭配：Remix/Prisma/Sqlite

在 stdio 也可以对数据库进行相应的增删改查作业。

7、在 Remix 中运用

①. 对外暴露 db

  • db.server.ts 文件
import { PrismaClient } from "@prisma/client";
let prisma: PrismaClient;
declare global {
  var __db__: PrismaClient;
}
if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!global.__db__) {
    global.__db__ = new PrismaClient();
  }
  prisma = global.__db__;
  prisma.$connect();
}
export { prisma };

②. 抽象模型层

在 app/models 下面界说模型，所以一个示例：

import { prisma } from "~/db.server";
export async function getUserById(id: User["id"]) {
  return prisma.user.findUnique({ where: { id } });
}
export async function getUserByEmail(email: User["email"]) {
  return prisma.user.findUnique({ where: { email } });
}

③. 在 action/loader 中运用模型层操作数据库

import { createUser, getUserByEmail } from "~/models/user.server";
export const action = async ({ request }: ActionArgs) => {
    // ...
    const existingUser = await getUserByEmail(email);
    // ...
    const user = await createUser(email, password);
}

④. 额定的 seed 初始化

假如需要在初始化的时候，初始化一些数据，那么可以界说 prisma/seed.ts 文件。

import { PrismaClient } from "@prisma/client";
const db = new PrismaClient();
async function seed() {
    // use db write data ...
}
seed();

然后在 package.json 中界说 seed 字段

{
  "name": "my-project",
  "version": "1.0.0",
  "prisma": {
    "seed": "ts-node prisma/seed.ts"
  },
  "devDependencies": {
    "@types/node": "^14.14.21",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}

然后合作指令: npx prisma db seed 初始出初始化数据

四、流程总结

  • prisma init –source-provider sqlite
  • 增加 model
  • 生成客户端
  • prisma migrate dev –name init
  • npx prisma studio
  • 运用客户端操作
  • 外额的 seed 初始化

五、小结

prisma 能供给了新的 ORM 操作数据库，cli 指令生成的内容相对较多。了解之后会变得简略容易。而且供给 studio 在浏览器中访问数据库，而不需要装置剩余的客户端，对前端友好，是轻量级全栈开发很好挑选。