Kottster 是一款免費(fèi)工具，可協(xié)助開發(fā)人員快速建置和部署管理面板。只需 5 分鐘，您就可以產(chǎn)生功能齊全的管理面板，將其部署到雲(yún)端，並與您的團(tuán)隊(duì)共用。

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

在本文中，我將向您展示如何建立 Kottster 應(yīng)用程式、將其連接到資料庫、為特定表生成頁面以及將其託管在任何位置。

---

創(chuàng)建專案

開始之前，請(qǐng)確保您的電腦上安裝了 Node.js（v20 或更高版本）。

要建立新項(xiàng)目，請(qǐng)執(zhí)行以下指令：

npx @kottster/cli new

系統(tǒng)會(huì)詢問您專案名稱、是否要使用 JavaScript 還是 TypeScript，以及要使用哪個(gè)套件管理器。之後，將建立一個(gè)新的專案資料夾，其中包含開始所需的所有內(nèi)容。

要在本機(jī)啟動(dòng)應(yīng)用程式，打開建立的資料夾並執(zhí)行 npm run dev：

應(yīng)用程式載入時(shí)，您將看到登入頁面。點(diǎn)擊「建立帳戶」在 Kottster 上註冊(cè)。註冊(cè)後，輸入應(yīng)用程式的名稱，然後按一下「建立應(yīng)用程式」。這將創(chuàng)建您的應(yīng)用程式並讓您登入。

一切設(shè)定完畢後，您將看到「開始使用」頁面：

---

連接您的資料庫

在入門頁面上，選擇您的資料庫類型，輸入連接詳細(xì)信息，然後按一下「連接」。

這將安裝必要的套件並建立一個(gè)文件，其中資料來源連接到專案資料夾中的資料庫。

請(qǐng)注意，由於您的應(yīng)用程式是自架的，您的憑證始終保持私密，且 Kottster 工具無法存取您的資料庫。

---

生成頁面

連接資料庫後，您將看到「產(chǎn)生頁面」標(biāo)籤：

此頁面可協(xié)助您快速建立頁面以檢視或管理資料庫表中的資料。

如果您啟用“允許插入”或“允許更新”，則將可以使用用於新增和更新記錄的表單。啟用「允許刪除」將會(huì)新增刪除記錄的功能。

做出選擇後，點(diǎn)選「產(chǎn)生頁面」。該工具將自動(dòng)產(chǎn)生頁面檔案並使用新項(xiàng)目更新側(cè)邊欄選單。

---

頁面的工作原理

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

Kottster 應(yīng)用程式中的每個(gè)頁面檔案都應(yīng)匯出一個(gè)代表頁面本身的 React 元件 。您可以在此元件中包含任何內(nèi)容。

當(dāng)您為特定資料庫表產(chǎn)生頁面時(shí)，它將包含以下內(nèi)容：

• 呼叫 createTableRpc 函數(shù)的 Remix 操作。此函數(shù)控製表的行為並啟用其功能。
• 元件，它與操作中定義的 createTableRpc 設(shè)定緊密相關(guān)。

「使用者」表格產(chǎn)生的頁面範(fàn)例：

npx @kottster/cli new

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

的資訊。我們文件中的元件。我還建議您在官方文件中了解有關(guān) Remix 及其全端資料流的更多資訊。

---

部署

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

為此，請(qǐng)透過執(zhí)行 npm run build 在本機(jī)上建立您的應(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è)帳戶。登入後，點(diǎn)擊“新項(xiàng)目”並連接包含您建立的應(yīng)用程式的儲(chǔ)存庫。

選擇儲(chǔ)存庫後，按一下「部署」。只需幾分鐘，您的應(yīng)用程式就會(huì)在免費(fèi)的 Vercel 網(wǎng)域上上線。

您的應(yīng)用程式上線後，您可以開啟它並登入您的帳戶。

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

您現(xiàn)在可以與您的團(tuán)隊(duì)分享。為此，請(qǐng)點(diǎn)選應(yīng)用程式左側(cè)邊欄中的「管理存取」。這將打開一個(gè)頁面，您可以在其中輸入其他使用者的電子郵件地址來設(shè)定他們的存取權(quán)限。

---

最後的筆記

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

如果您有任何問題或需要協(xié)助，請(qǐng)查看我們的文件、造訪我們的 GitHub 儲(chǔ)存庫，或加入我們的 Discord 社群來提出問題並分享您的回饋。

感謝您的閱讀，祝您的專案順利！

以上是在幾分鐘內(nèi)為您的專案建立一個(gè)管理面板的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！