欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全棧輕量級(jí)搭配之Remix Prisma Sqlite使用分析

 更新時(shí)間:2023年05月06日 11:38:26   作者:喬治_x  
這篇文章主要為大家介紹了全棧輕量級(jí)搭配之Remix Prisma Sqlite使用示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

一、為什么是 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)選擇框

    react實(shí)現(xiàn)動(dòng)態(tài)選擇框

    這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)動(dòng)態(tài)選擇框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • React項(xiàng)目中不需要jQuery原因分析

    React項(xiàng)目中不需要jQuery原因分析

    在Web開發(fā)的早期,jQuery是一個(gè)革命性的庫,它極大地簡化了DOM操作、事件處理、動(dòng)畫制作以及Ajax請求等任務(wù),React的出現(xiàn),jQuery在新項(xiàng)目中的必要性開始受到質(zhì)疑,本文將探討為什么在React應(yīng)用中不需要jQuery,感興趣的朋友可以參考下
    2024-02-02
  • 教你使用vscode 搭建react-native開發(fā)環(huán)境

    教你使用vscode 搭建react-native開發(fā)環(huán)境

    本文記錄如何使用vscode打造一個(gè)現(xiàn)代化的react-native開發(fā)環(huán)境,旨在提高開發(fā)效率和質(zhì)量。本文給大家分享我遇到的問題及解決方法,感興趣的朋友跟隨小編一起看看吧
    2021-07-07
  • react使用websocket實(shí)時(shí)通信方式

    react使用websocket實(shí)時(shí)通信方式

    這篇文章主要介紹了react使用websocket實(shí)時(shí)通信方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • React onBlur回調(diào)中使用document.activeElement返回body完美解決方案

    React 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)示例詳解

    這篇文章主要為大家介紹了比ant更豐富Modal組件功能實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • react-native-tab-navigator組件的基本使用示例代碼

    react-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)

    這篇文章主要介紹了使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState),具有很好的參考價(jià)值,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • React中redux的使用詳解

    React中redux的使用詳解

    Redux 是一個(gè)狀態(tài)管理庫,它可以幫助你管理應(yīng)用程序中的所有狀態(tài),Redux的核心概念之一是Store,它表示整個(gè)應(yīng)用程序的狀態(tài),這篇文章給大家介紹React中redux的使用,感興趣的朋友一起看看吧
    2023-12-12
  • React組件里this指向了undefined原理解析

    React組件里this指向了undefined原理解析

    這篇文章主要為大家介紹了React組件里this指向了undefined原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03

最新評(píng)論