Kottster 是一款免費工具，可幫助開發(fā)人員快速構(gòu)建和部署管理面板。只需 5 分鐘，您就可以生成功能齊全的管理面板，將其部署到云端，并與您的團隊共享。

當您使用 Kottster 構(gòu)建應用程序時，它們會在 Remix 上運行，這是一個使用 React 和 Node.js 環(huán)境創(chuàng)建全棧應用程序的 Web 框架。

在本文中，我將向您展示如何創(chuàng)建 Kottster 應用程序、將其連接到數(shù)據(jù)庫、為特定表生成頁面以及將其托管在任何位置。

---

創(chuàng)建項目

開始之前，請確保您的計算機上安裝了 Node.js（v20 或更高版本）。

要創(chuàng)建新項目，請運行以下命令：

npx @kottster/cli new

系統(tǒng)會詢問您項目名稱、是否要使用 JavaScript 還是 TypeScript，以及要使用哪個包管理器。之后，將創(chuàng)建一個新的項目文件夾，其中包含開始所需的所有內(nèi)容。

要在本地啟動應用程序，打開創(chuàng)建的文件夾并運行 npm run dev：

應用程序加載時，您將看到登錄頁面。點擊“創(chuàng)建帳戶”在 Kottster 上注冊。注冊后，輸入應用程序的名稱，然后單擊“創(chuàng)建應用程序”。這將創(chuàng)建您的應用程序并讓您登錄。

一切設置完畢后，您將看到“

開始使用”頁面：

---

連接您的數(shù)據(jù)庫

在入門頁面上，選擇您的數(shù)據(jù)庫類型，輸入連接詳細信息，然后單擊“

連接”。

這將安裝必要的包并創(chuàng)建一個文件，其中數(shù)據(jù)源連接到項目文件夾中的數(shù)據(jù)庫。

請注意，由于您的應用是自托管的，您的憑據(jù)始終保持私密，并且 Kottster 工具無法訪問您的數(shù)據(jù)庫。

---

生成頁面

連接數(shù)據(jù)庫后，您將看到“

生成頁面”選項卡：

此頁面可幫助您快速創(chuàng)建頁面來查看或管理數(shù)據(jù)庫表中的數(shù)據(jù)。

如果您啟用“

允許插入”或“允許更新”，則將可以使用用于添加和更新記錄的表單。啟用“允許刪除”將添加刪除記錄的功能。

做出選擇后，點擊“生成頁面”。該工具將自動生成頁面文件并使用新項目更新側(cè)邊欄菜單。

---

頁面的工作原理

管理面板中的每個頁面都位于 app/routes 目錄中。這些頁面本質(zhì)上是 Remix 路由，既充當 UI 又充當 API，您可以根據(jù)需要自定義它們。

Kottster 應用程序中的每個頁面文件都應導出一個代表頁面本身的 React 組件 。您可以在此組件中包含任何內(nèi)容。

當您為特定數(shù)據(jù)庫表生成頁面時，它將包含以下內(nèi)容：

• 調(diào)用 createTableRpc 函數(shù)的 Remix 操作。此函數(shù)控制表的行為并啟用其功能。
• 組件，它與操作中定義的 createTableRpc 設置緊密相關(guān)。

“用戶”表生成的頁面示例：

npx @kottster/cli new

您可以了解有關(guān) createTableRpc 和

的更多信息。我們文檔中的組件。我還建議您在官方文檔中了解有關(guān) Remix 及其全棧數(shù)據(jù)流的更多信息。

---

部署

準備好后，您可以部署 Kottster 應用程序以使其在線可用。部署之前，請確保應用程序已正確構(gòu)建并且沒有錯誤。

為此，請通過運行 npm run build 在本地構(gòu)建您的應用程序：

如果沒有錯誤，您的應用程序就可以上線了。由于它是自托管的，因此您可以將其部署在任何您喜歡的地方。在此處了解有關(guān)部署選項的更多信息。

---

免費部署到 Vercel

在本文中，我將介紹最受歡迎的免費選項之一：將 Kottster 應用程序部署到 Vercel。

如果您還沒有帳戶，請首先在 vercel.com 上注冊一個帳戶。登錄后，單擊“新建項目”并連接包含您構(gòu)建的應用程序的存儲庫。

選擇存儲庫后，單擊“部署”。只需幾分鐘，您的應用程序就會在免費的 Vercel 域上上線。

您的應用程序上線后，您可以打開它并登錄您的帳戶。

就是這樣！您的管理面板現(xiàn)已在線可用。

您現(xiàn)在可以與您的團隊分享。為此，請點擊應用左側(cè)邊欄中的“管理訪問”。這將打開一個頁面，您可以在其中輸入其他用戶的電子郵件地址來設置他們的訪問權(quán)限。

---

最后的筆記

您可以在我們的網(wǎng)站上了解有關(guān) Kottster 的更多信息：kottster.app

如果您有任何問題或需要幫助，請查看我們的文檔、訪問我們的 GitHub 存儲庫，或加入我們的 Discord 社區(qū)來提出問題并分享您的反饋。

感謝您的閱讀，祝您的項目順利！

以上是在幾分鐘內(nèi)為您的項目創(chuàng)建一個管理面板的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！