如何在 Appsmith 中构建简单的 CRUD 应用

从零开始构建内部工具会浪费你本就不多的时间。你需要的是一个快速的管理面板或数据管理界面,而不是一个为期三个月的开发项目。Appsmith 让你能够连接数据源、拖入组件,并在一小时内完成创建、读取、更新和删除操作的配置。

本教程将介绍标准的 Appsmith CRUD 应用工作流程:连接数据库、在 Table 组件中显示数据、通过表单处理记录的创建和更新,以及在数据变更后刷新数据。

连接数据源

首先在 Appsmith 中创建一个新应用。从左侧边栏点击 Datasources 旁边的 + 号,选择你的数据库类型——PostgreSQL、MySQL 或 REST API。

对于 SQL 数据库,输入连接凭证:主机、端口、数据库名称、用户名和密码。将敏感值存储在 Appsmith 的加密数据源配置和环境设置中,而不是在查询或组件中硬编码。查询在服务器端执行,因此凭证永远不会暴露给浏览器。

你可以在官方数据源文档中找到支持的数据库完整列表和配置选项。

保存前测试连接。如果失败,请检查防火墙规则、SSL 要求和凭证准确性。

使用查询读取数据

创建第一个查询来获取记录。点击 Queries/JS 旁边的 + 号,选择你的数据源,并编写 SELECT 语句:

SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT 100;

将此查询命名为 getUsers 并运行以验证响应。

对于较大的数据集,实现服务器端分页。Appsmith 的 Table 组件原生支持此功能——你将根据表格的分页状态向查询传递偏移量和限制参数。

在 Table 组件中显示数据

将 Table 组件拖到画布上。在组件属性中,将 Table data 属性设置为:

{{getUsers.data}}

表格会自动从查询响应生成列。根据需要重命名列、调整宽度并隐藏内部 ID 等字段。

这种 Appsmith 数据库集成模式——查询到组件绑定——构成了你将构建的每个低代码 CRUD 前端的基础。Table 组件的完整配置选项在 Table 组件文档中有详细说明。

使用表单或模态框创建记录

添加一个标记为”添加新记录”的 Button 组件,并将其 onClick 操作设置为打开 Modal。在模态框内,为每个字段添加 Input 组件:nameInput、emailInput。

创建一个名为 createUser 的 INSERT 查询:

INSERT INTO users (name, email) VALUES ({{nameInput.text}}, {{emailInput.text}});

将模态框的提交按钮配置为运行 createUser。成功后,触发 getUsers.run() 刷新表格,然后关闭模态框。

对于验证,使用 Input 组件的内置验证属性,或编写一个在提交前检查字段值的 JSObject。

使用选中行更新记录

在 Table 组件上启用行选择。当用户点击一行时,Table1.selectedRow 会暴露该记录的数据。

创建一个名为 updateUser 的 UPDATE 查询:

UPDATE users
SET name = {{nameInput.text}}, email = {{emailInput.text}}
WHERE id = {{Table1.selectedRow.id}};

你可以通过使用 Table1.selectedRow.name 作为默认值预填充输入框,从而重用同一个模态框进行编辑。使用 JSObject 变量在”创建”和”编辑”模式之间切换。

更新成功运行后,调用 getUsers.run() 刷新显示。

带确认的删除记录

为表格添加一个 Button 列用于删除操作。将列类型设置为 Button,并配置 onClick 运行 DELETE 查询:

DELETE FROM users WHERE id = {{Table1.triggeredRow.id}};

注意区别:triggeredRow 捕获点击按钮所在的行,而 selectedRow 捕获高亮的行。

在查询设置中启用运行前请求确认以防止意外删除。成功后刷新表格数据。

Appsmith 表格表单工作流

你构建的模式——Table 组件显示查询结果、Form 或 Modal 处理输入、参数化查询进行数据变更,以及成功后刷新数据——可扩展到任何 CRUD 用例。无论你管理的是用户、库存、支持工单还是任何其他记录,这种 Appsmith 表格表单工作流都适用。

对于生产应用,请考虑:

• 基于角色的访问控制:Appsmith 支持在应用、页面和数据源级别的细粒度权限
• 环境和凭证:在开发、预发布和生产环境中安全存储数据库密码和 API 密钥
• 包(Packages):使用 Appsmith Packages 在多个应用间共享可重用的查询和 JSObject
• 服务器端分页:对于包含数千条记录的表格至关重要

结论

你现在拥有了一个功能完整的 CRUD 界面:在表格中显示数据、用于创建和编辑记录的表单、带确认的删除功能,以及每次数据变更后的自动数据刷新。

从这里开始,可以通过搜索过滤器、附加页面扩展应用,或连接到 Appsmith Workflows 进行后端自动化。你构建的低代码 CRUD 前端可作为更复杂内部工具的基础——无需从零开始编写 UI 和数据层。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.