在 Lobechat 中使用 IndexedDB 包裝器 Dexie

在本文中，我們分析了 Lobechat 中 Dexie 的使用情況。

如果你檢查lobechat中的[資料庫資料夾，它有2個資料夾：

1. 客戶

2. 伺服器

在這個 Lobechat 的自架文件中，提到了 LobeChat

預設使用客戶端資料庫（IndexedDB）。這就是為什麼你有兩個資料夾，一個用於客戶端，一個用於伺服器。

database/client/core/db.ts 導入 Dexie。

Dexie 是 indexedDB 的簡約包裝器。讓我們來看看入門教程中提供的一個簡單的 dexie 範例。

// db.ts
import Dexie, { type EntityTable } from 'dexie';
interface Friend {
 id: number;
 name: string;
 age: number;
}
const db = new Dexie('FriendsDatabase') as Dexie & {
 friends: EntityTable;
};
// Schema declaration:
db.version(1).stores({
 friends: '++id, name, age' // primary key "id" (for the runtime!)
});
export type { Friend };
export { db };

重要提示：

應用程式通常有一個 Dexie 實例聲明為其自己的模組。您可以在此處聲明所需的表以及每個表的索引方式。 Dexie 實例是整個

中的單例 應用程式 - 您不需要按需創建它。從模組中匯出產生的資料庫實例，以便元件或其他模組可以使用它來查詢或寫入資料庫。

使用如下所示的這一行，Lobechat 建立 BrowserDB 的單例實例。

export class BrowserDB extends Dexie {
 public files: BrowserDBTable;
 public sessions: BrowserDBTable;
 public messages: BrowserDBTable;
 public topics: BrowserDBTable;
 public plugins: BrowserDBTable;
 public sessionGroups: BrowserDBTable;
 public users: BrowserDBTable;
constructor() {
 this.version(1).stores(dbSchemaV1);
 this.version(2).stores(dbSchemaV2);
 this.version(3).stores(dbSchemaV3);
 this.version(4)
 .stores(dbSchemaV4)
 .upgrade((trans) => this.upgradeToV4(trans));
 // … more code
export const browserDB = new BrowserDB();

建構函式中編寫的版本顯示了客戶端資料庫架構如何隨時間演變，閱讀有關 Dexie.version() 的更多資訊以了解版本。

關於我們：

在 Thinkthroo，我們研究大型開源專案並提供架構指南。我們開發了使用 tailwind 建立的 resubale 元件，您可以在您的專案中使用它們。我們提供 Next.js、React 和 Node 開發服務。

與我們預約會面討論您的專案。

參考資料：

1. https://github.com/lobehub/lobe-chat/blob/main/src/database/client/core/db.ts

2. https://dexie.org/

3. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

4. https://web.dev/articles/indexeddb

5. https://lobehub.com/docs/self-hosting/server-database

6. https://dexie.org/docs/Tutorial/React

以上是在 Lobechat 中使用 IndexedDB 包裝器 Dexie的詳細內容。更多資訊請關注PHP中文網其他相關文章！