在几分钟内为您的项目创建一个管理面板

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中文网其他相关文章！