如何在 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 和数据层。

常见问题

Appsmith 中 triggeredRow 和 selectedRow 有什么区别?

selectedRow 指的是用户通过点击高亮显示的行,而 triggeredRow 指的是点击按钮或操作所在的特定行。在表格的按钮列中使用 triggeredRow 以确保操作针对正确的记录,当你想引用当前高亮的行进行编辑或显示时使用 selectedRow。

如何在 Appsmith 查询中处理 SQL 注入?

当你使用类似 {{inputWidget.text}} 的 mustache 绑定时,Appsmith 对许多 SQL 数据源支持参数化查询,但具体行为取决于数据库驱动程序。避免在 SQL 中手动拼接字符串,使用组件验证属性验证输入,并在可能的情况下应用服务器端约束。

我可以使用同一个模态框来创建和编辑记录吗?

可以。创建一个 JSObject 变量来跟踪当前模式,例如将 formMode 设置为 create 或 edit。打开模态框创建新记录时,将 formMode 设置为 create 并清空输入字段。编辑时,将 formMode 设置为 edit 并使用 Table1.selectedRow 值填充输入框。然后你的提交按钮可以根据模式有条件地运行 createUser 或 updateUser。

如何在 Appsmith 表格中实现服务器端分页?

在 Table 组件属性中启用服务器端分页。然后修改查询以接受来自表格组件的分页值(页面大小和偏移量),并在 SQL 中使用 LIMIT 和 OFFSET 应用它们。当用户更改页面时,表格会自动处理页面导航并触发查询重新运行。