全棧輕量級搭配之Remix Prisma Sqlite使用分析
一、為什么是 Remix/Prisma/Sqlite ?
最主要的一個原因就是輕量級別，輕量級體現(xiàn)在只需要一個 Remix 服務即可。
- Remix 輕量級 React 全棧框架
- Prisma 輕量級 ORM 庫
- Sqlite 嵌入式無需啟動服務的數(shù)據(jù)庫
二、Prisma 命令提前看
如果你還不熟悉 Prisma 的常用命令，那么下面盤點的常用命令，提前熟悉，后面會用到：
| 命令 | 說明 |
|---|---|
| prisma init | 初始化一個新的Prisma項目 |
| prisma migrate dev | 將數(shù)據(jù)模型應用于數(shù)據(jù)庫 |
| prisma migrate reset | 回滾數(shù)據(jù)庫到最初狀態(tài) |
| prisma studio | 啟動一個Web界面，用于查看和修改數(shù)據(jù)庫中的數(shù)據(jù) |
| prisma generate | 生成Prisma客戶端代碼，用于連接和操作數(shù)據(jù)庫 |
| prisma format | 格式化Prisma模型文件 |
| prisma validate | 驗證Prisma模型文件的正確性 |
| prisma db seed | 開發(fā)環(huán)境將種子數(shù)據(jù)添加到數(shù)據(jù)庫中 |
| npx prisma migrate reset | 重置您的數(shù)據(jù)庫并將其恢復到遷移歷史中的最初狀態(tài) |
三、在 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" 根據(jù) Prisma schema 文件生成 Prisma Client 代碼，該代碼提供了一種類型安全的方法來訪問數(shù)據(jù)庫，簡化了應用程序與數(shù)據(jù)庫交互的過程，減少了手動編寫重復代碼的工作量。
5、使用遷移命令
npx prisma migrate dev --name init
每一次 Schema 發(fā)生變化的時候，都要調用此命令生成新的遷移文件（生成 sql 文件，數(shù)據(jù)文件件，安裝包）
生成文件：
├── dev.db
├── dev.db-journal
├── migrations
│ ├── 2x23x42x1x3x4x_init
│ │ └── migration.sql
│ └── migration_lock.toml
同時自動安裝了 npm 包：
- prisma
- @prisma/client
6、在 studio 中查看
npx prisma studio
會啟動一個 web 服務，在瀏覽器中操作數(shù)據(jù)庫，不需要一個單獨的客戶端。
- 初始界面
- 模型中
在 stdio 也可以對數(shù)據(jù)庫進行相應的增刪改查工作。
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 中使用模型層操作數(shù)據(jù)庫
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 初始化
如果需要在初始化的時候，初始化一些數(shù)據(jù)，那么可以定義 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 初始出初始化數(shù)據(jù)
四、流程總結
- prisma init --source-provider sqlite
- 添加 model
- 生成客戶端
- prisma migrate dev --name init
- npx prisma studio
- 使用客戶端操作
- 外額的 seed 初始化
五、小結
prisma 能提供了新的 ORM 操作數(shù)據(jù)庫，cli 命令生成的內容相對較多。熟悉之后會變得簡單容易。并且提供 studio 在瀏覽器中訪問數(shù)據(jù)庫，而不需要安裝多余的客戶端，對前端友好，是輕量級全棧開發(fā)很好選擇。
以上就是全棧輕量級搭配：Remix/Prisma/Sqlite的詳細內容，更多關于全棧輕量級搭配：Remix/Prisma/Sqlite的資料請關注腳本之家其它相關文章！
相關文章
詳解react、redux、react-redux之間的關系
這篇文章主要介紹了詳解react、redux、react-redux之間的關系，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
詳解React Native開源時間日期選擇器組件(react-native-datetime)
本篇文章主要介紹了詳解React Native開源時間日期選擇器組件(react-native-datetime)，具有一定的參考價值，有興趣的可以了解一下2017-09-09
forwardRef 相當于是為 ref 傳遞的一種方式,普通的函數(shù)式組件就是 Render,而 fowardRef 多加了 Ref 參數(shù),這篇文章主要介紹了React 中的 ForwardRef的使用示例詳解,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細介紹了React如何實現(xiàn)Diff算法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-04-04
這篇文章主要介紹了react項目如何使用iconfont的方法步驟，這里介紹下如何在項目中配置。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了React中的useEffect(副作用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
props?是?React?組件通信最重要的手段，它在?React?的世界中充當?shù)慕巧鞘种匾?。學好?props?可以使組件間通信更加靈活，同時文中會介紹一些?props?的操作技巧，和學會如何編寫嵌套組件2022-10-10
React使用setState更新數(shù)組的方法示例(追加新數(shù)據(jù))
在?React?中,setState?是管理組件狀態(tài)的核心方法之一,然而,當我們需要更新狀態(tài)中的數(shù)組時,如何高效且安全地操作變得尤為關鍵,本文將詳細解析以下代碼的實現(xiàn)邏輯,幫助你掌握在?React?中追加數(shù)組數(shù)據(jù)的最佳實踐,需要的朋友可以參考下2025-03-03
在?React?開發(fā)中,props?是組件間通信的重要方式,通過?props,父組件可以向子組件傳遞數(shù)據(jù)和回調函數(shù),然而,如果對?props?的驗證不足,可能會導致類型錯誤、運行時錯誤或難以調試的問題,本文將探討?React?中?props?驗證不足的常見問題,并提供解決方案2025-03-03
這篇文章主要介紹了React 源碼中的依賴注入方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11