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

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

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

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

二、Prisma 指令提早看

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

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

快速初始化一个 Remix 项目：

pnpm dlx create-remix@latest <app_name>

1、装置依靠

pnpm install prisma -g # 全局装置

2、用 sqlite 初始化 prisma

prisma init --datasource-provider 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 代码，该代码供给了一种类型安全的方法来访问数据库，简化了应用程序与数据库交互的进程，减少了手动编写重复代码的作业量。

5、运用搬迁指令

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 服务，在浏览器中操作数据库，不需要一个单独的客户端。

• 初始界面

• 模型中

在 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 在浏览器中访问数据库，而不需要装置剩余的客户端，对前端友好，是轻量级全栈开发很好挑选。