全棧輕量級(jí)搭配之Remix Prisma Sqlite使用分析
一、為什么是 Remix/Prisma/Sqlite ?
最主要的一個(gè)原因就是輕量級(jí)別,輕量級(jí)體現(xiàn)在只需要一個(gè) Remix 服務(wù)即可。
- Remix 輕量級(jí) React 全??蚣?/li>
- Prisma 輕量級(jí) ORM 庫
- Sqlite 嵌入式無需啟動(dòng)服務(wù)的數(shù)據(jù)庫
二、Prisma 命令提前看
如果你還不熟悉 Prisma 的常用命令,那么下面盤點(diǎn)的常用命令,提前熟悉,后面會(huì)用到:
命令 | 說明 |
---|---|
prisma init | 初始化一個(gè)新的Prisma項(xiàng)目 |
prisma migrate dev | 將數(shù)據(jù)模型應(yīng)用于數(shù)據(jù)庫 |
prisma migrate reset | 回滾數(shù)據(jù)庫到最初狀態(tài) |
prisma studio | 啟動(dòng)一個(gè)Web界面,用于查看和修改數(shù)據(jù)庫中的數(shù)據(jù) |
prisma generate | 生成Prisma客戶端代碼,用于連接和操作數(shù)據(jù)庫 |
prisma format | 格式化Prisma模型文件 |
prisma validate | 驗(yàn)證Prisma模型文件的正確性 |
prisma db seed | 開發(fā)環(huán)境將種子數(shù)據(jù)添加到數(shù)據(jù)庫中 |
npx prisma migrate reset | 重置您的數(shù)據(jù)庫并將其恢復(fù)到遷移歷史中的最初狀態(tài) |
三、在 Remix 中添加 Sqlite 和 Prisma 的流程如下:
快速初始化一個(gè) Remix 項(xiàng)目:
pnpm dlx create-remix@latest <app_name>
1、安裝依賴
pnpm install prisma -g # 全局安裝
2、用 sqlite 初始化 prisma
prisma init --datasource-provider sqlite
命令自動(dòng)生成文件如下:
- .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ù)庫交互的過程,減少了手動(dòng)編寫重復(fù)代碼的工作量。
5、使用遷移命令
npx prisma migrate dev --name init
每一次 Schema 發(fā)生變化的時(shí)候,都要調(diào)用此命令生成新的遷移文件(生成 sql 文件,數(shù)據(jù)文件件,安裝包)
生成文件:
├── dev.db
├── dev.db-journal
├── migrations
│ ├── 2x23x42x1x3x4x_init
│ │ └── migration.sql
│ └── migration_lock.toml
同時(shí)自動(dòng)安裝了 npm 包:
- prisma
- @prisma/client
6、在 studio 中查看
npx prisma studio
會(huì)啟動(dòng)一個(gè) web 服務(wù),在瀏覽器中操作數(shù)據(jù)庫,不需要一個(gè)單獨(dú)的客戶端。
- 初始界面
- 模型中
在 stdio 也可以對(duì)數(shù)據(jù)庫進(jìn)行相應(yīng)的增刪改查工作。
7、在 Remix 中使用
①. 對(duì)外暴露 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 下面定義模型,以是一個(gè)示例:
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í)候,初始化一些數(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)容相對(duì)較多。熟悉之后會(huì)變得簡單容易。并且提供 studio 在瀏覽器中訪問數(shù)據(jù)庫,而不需要安裝多余的客戶端,對(duì)前端友好,是輕量級(jí)全棧開發(fā)很好選擇。
以上就是全棧輕量級(jí)搭配:Remix/Prisma/Sqlite的詳細(xì)內(nèi)容,更多關(guān)于全棧輕量級(jí)搭配:Remix/Prisma/Sqlite的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
react實(shí)現(xiàn)動(dòng)態(tài)選擇框
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)動(dòng)態(tài)選擇框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08教你使用vscode 搭建react-native開發(fā)環(huán)境
本文記錄如何使用vscode打造一個(gè)現(xiàn)代化的react-native開發(fā)環(huán)境,旨在提高開發(fā)效率和質(zhì)量。本文給大家分享我遇到的問題及解決方法,感興趣的朋友跟隨小編一起看看吧2021-07-07react使用websocket實(shí)時(shí)通信方式
這篇文章主要介紹了react使用websocket實(shí)時(shí)通信方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09React onBlur回調(diào)中使用document.activeElement返回body完美解決方案
這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04比ant更豐富Modal組件功能實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了比ant更豐富Modal組件功能實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11react-native-tab-navigator組件的基本使用示例代碼
本篇文章主要介紹了react-native-tab-navigator組件的基本使用示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)
這篇文章主要介紹了使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState),具有很好的參考價(jià)值,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09