全棧輕量級搭配之Remix Prisma Sqlite使用分析
一、為什么是 Remix/Prisma/Sqlite ?
最主要的一個原因就是輕量級別,輕量級體現(xiàn)在只需要一個 Remix 服務(wù)即可。
- Remix 輕量級 React 全棧框架
- Prisma 輕量級 ORM 庫
- Sqlite 嵌入式無需啟動服務(wù)的數(shù)據(jù)庫
二、Prisma 命令提前看
如果你還不熟悉 Prisma 的常用命令,那么下面盤點的常用命令,提前熟悉,后面會用到:
命令 | 說明 |
---|---|
prisma init | 初始化一個新的Prisma項目 |
prisma migrate dev | 將數(shù)據(jù)模型應(yīng)用于數(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ù)庫并將其恢復(fù)到遷移歷史中的最初狀態(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ù)庫,簡化了應(yīng)用程序與數(shù)據(jù)庫交互的過程,減少了手動編寫重復(fù)代碼的工作量。
5、使用遷移命令
npx prisma migrate dev --name init
每一次 Schema 發(fā)生變化的時候,都要調(diào)用此命令生成新的遷移文件(生成 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 服務(wù),在瀏覽器中操作數(shù)據(jù)庫,不需要一個單獨的客戶端。
- 初始界面
- 模型中
在 stdio 也可以對數(shù)據(jù)庫進(jìn)行相應(yīng)的增刪改查工作。
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ù)
四、流程總結(jié)
- prisma init --source-provider sqlite
- 添加 model
- 生成客戶端
- prisma migrate dev --name init
- npx prisma studio
- 使用客戶端操作
- 外額的 seed 初始化
五、小結(jié)
prisma 能提供了新的 ORM 操作數(shù)據(jù)庫,cli 命令生成的內(nèi)容相對較多。熟悉之后會變得簡單容易。并且提供 studio 在瀏覽器中訪問數(shù)據(jù)庫,而不需要安裝多余的客戶端,對前端友好,是輕量級全棧開發(fā)很好選擇。
以上就是全棧輕量級搭配:Remix/Prisma/Sqlite的詳細(xì)內(nèi)容,更多關(guān)于全棧輕量級搭配:Remix/Prisma/Sqlite的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
教你使用vscode 搭建react-native開發(fā)環(huán)境
本文記錄如何使用vscode打造一個現(xiàn)代化的react-native開發(fā)環(huán)境,旨在提高開發(fā)效率和質(zhì)量。本文給大家分享我遇到的問題及解決方法,感興趣的朋友跟隨小編一起看看吧2021-07-07React onBlur回調(diào)中使用document.activeElement返回body完美解決方案
這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04react-native-tab-navigator組件的基本使用示例代碼
本篇文章主要介紹了react-native-tab-navigator組件的基本使用示例代碼,具有一定的參考價值,有興趣的可以了解一下2017-09-09使用react在修改state中的數(shù)組和對象數(shù)據(jù)的時候(setState)
這篇文章主要介紹了使用react在修改state中的數(shù)組和對象數(shù)據(jù)的時候(setState),具有很好的參考價值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09