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

全棧輕量級搭配之Remix Prisma Sqlite使用分析

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

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

最主要的一個原因就是輕量級別，輕量級體現(xiàn)在只需要一個 Remix 服務(wù)即可。

  • Remix 輕量級 React 全?？蚣?/li>
  • 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ù)庫進行相應(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的詳細內(nèi)容，更多關(guān)于全棧輕量級搭配：Remix/Prisma/Sqlite的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • react實現(xiàn)動態(tài)選擇框

    react實現(xiàn)動態(tài)選擇框

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

    React項目中不需要jQuery原因分析

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

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

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

    react使用websocket實時通信方式

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

    React onBlur回調(diào)中使用document.activeElement返回body完美解決方案

    這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-04-04
  • 比ant更豐富Modal組件功能實現(xiàn)示例詳解

    比ant更豐富Modal組件功能實現(xiàn)示例詳解

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

    react-native-tab-navigator組件的基本使用示例代碼

    本篇文章主要介紹了react-native-tab-navigator組件的基本使用示例代碼，具有一定的參考價值，有興趣的可以了解一下
    2017-09-09
  • 使用react在修改state中的數(shù)組和對象數(shù)據(jù)的時候(setState)

    使用react在修改state中的數(shù)組和對象數(shù)據(jù)的時候(setState)

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

    React中redux的使用詳解

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

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

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

最新評論