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

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

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

---

創(chuàng)建項(xiàng)目

開始之前，請(qǐng)確保您的計(jì)算機(jī)上安裝了 Node.js（v20 或更高版本）。

要?jiǎng)?chuàng)建新項(xiàng)目，請(qǐng)運(yùn)行以下命令：

npx @kottster/cli new

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

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

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

一切設(shè)置完畢后，您將看到“

開始使用”頁(yè)面：

---

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

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

連接”。

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

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

---

生成頁(yè)面

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

生成頁(yè)面”選項(xiàng)卡：

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

如果您啟用“

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

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

---

頁(yè)面的工作原理

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

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

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

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

“用戶”表生成的頁(yè)面示例：

npx @kottster/cli new

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

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

---

部署

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

為此，請(qǐng)通過(guò)運(yùn)行 npm run build 在本地構(gòu)建您的應(yīng)用程序：

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

---

免費(fèi)部署到 Vercel

在本文中，我將介紹最受歡迎的免費(fèi)選項(xiàng)之一：將 Kottster 應(yīng)用程序部署到 Vercel。

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

選擇存儲(chǔ)庫(kù)后，單擊“部署”。只需幾分鐘，您的應(yīng)用程序就會(huì)在免費(fèi)的 Vercel 域上上線。

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

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

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

---

最后的筆記

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

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

感謝您的閱讀，祝您的項(xiàng)目順利！

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