在幾分鐘內為您的專案建立一個管理面板

Kottster 是一款免費工具，可協助開發人員快速建置和部署管理面板。只需 5 分鐘，您就可以產生功能齊全的管理面板，將其部署到雲端，並與您的團隊共用。

當您使用 Kottster 建立應用程式時，它們會在 Remix 上運行，這是一個使用 React 和 Node.js 環境建立全端應用程式的 Web 框架。

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

---

創建專案

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

要建立新項目，請執行以下指令：

npx @kottster/cli new

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

要在本機啟動應用程式，打開建立的資料夾並執行 npm run dev：

應用程式載入時，您將看到登入頁面。點擊「建立帳戶」在 Kottster 上註冊。註冊後，輸入應用程式的名稱，然後按一下「建立應用程式」。這將創建您的應用程式並讓您登入。

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

---

連接您的資料庫

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

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

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

---

生成頁面

連接資料庫後，您將看到「產生頁面」標籤：

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

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

做出選擇後，點選「產生頁面」。該工具將自動產生頁面檔案並使用新項目更新側邊欄選單。

---

頁面的工作原理

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

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

當您為特定資料庫表產生頁面時，它將包含以下內容：

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

「使用者」表格產生的頁面範例：

npx @kottster/cli new

您可以了解更多有關 createTableRpc 和

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

---

部署

準備好後，您可以部署 Kottster 應用程式以使其在線可用。在部署之前，請確保應用程式已正確建置並且沒有錯誤。

為此，請透過執行 npm run build 在本機上建立您的應用程式：

如果沒有錯誤，您的應用程式就可以上線了。由於它是自託管的，因此您可以將其部署在任何您喜歡的地方。在此處了解有關部署選項的更多資訊。

---

免費部署到 Vercel

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

如果您還沒有帳戶，請先在 vercel.com 上註冊帳戶。登入後，點擊“新項目”並連接包含您建立的應用程式的儲存庫。

選擇儲存庫後，按一下「部署」。只需幾分鐘，您的應用程式就會在免費的 Vercel 網域上上線。

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

就是這樣！您的管理面板現已在線可用。

您現在可以與您的團隊分享。為此，請點選應用程式左側邊欄中的「管理存取」。這將打開一個頁面，您可以在其中輸入其他使用者的電子郵件地址來設定他們的存取權限。

---

最後的筆記

您可以在我們的網站上了解更多關於 Kottster 的資訊：kottster.app

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

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

以上是在幾分鐘內為您的專案建立一個管理面板的詳細內容。更多資訊請關注PHP中文網其他相關文章！