Appsmith 低代码平台：快速构建内部工具

FreeGuideOnline 最新 2026-06-18

Appsmith 低代码平台完全指南：快速构建内部工具

Appsmith 是一款开源的低代码开发平台，专为工程师和团队设计，能够通过拖拽 UI 组件并连接到任何数据源，在几分钟内构建出功能完备的内部管理工具、仪表盘和工作流。本教程将手把手带你从安装到发布第一个应用，适合零基础开发者快速上手。

什么是 Appsmith？为什么选择它？

Appsmith 将前端展示层与后端数据连接层解耦，你只需要关注业务逻辑，无需处理繁琐的认证、路由或部署细节。

  • 开源且可自托管：代码完全开放，可部署在自己的服务器或私有云上。
  • 连接任何数据源：原生支持 PostgreSQL、MySQL、MongoDB、REST API、GraphQL、Google Sheets 等。
  • 丰富的前端组件库：表格、图表、表单、列表、按钮等 45+ 组件，通过属性面板即可配置。
  • JavaScript 扩展：可以在 {{ }} 内直接编写 JS 代码，实现任意复杂逻辑。
  • 一键部署与版本控制：应用可直接发布为实链接，支持 Git 同步与多环境管理。

环境准备与安装

Appsmith 提供三种使用方式：官方托管云服务、Docker 自托管和 Kubernetes 部署。本教程推荐使用 Docker 在本地快速启动。

使用 Docker 安装（推荐本地开发）

确保已安装 Docker。

docker run -d --name appsmith -p 80:80 -p 443:443 -v appsmith_data:/appsmith-stacks appsmith/appsmith-ce

等待镜像拉取完成后，访问 http://localhost 即可进入 Appsmith 注册页面（首次需创建管理员账号）。

使用官方云服务（零运维）

直接访问 appsmith.com 注册免费账号，立即获得一个全功能的工作区。免费版支持无限用户、应用和资源，适合学习和小团队使用。

界面与核心概念

登录后进入 工作区首页，左侧为主导航：

  • 应用（Applications）：一个 Appsmith 应用就是一个完整的内部工具。
  • 数据源（Datasources）：配置数据库或 API 连接的位置。
  • 查询（Queries）：用于从数据源获取或操作数据的 SQL / API 调用。
  • 页面（Pages）：应用内的页面，可独立设置路由和布局。
  • 组件库（Widgets）：拖放到画布上的可视化元素。

创建一个新应用

点击 “Create new” → “Application”，输入名称（如“员工管理”），系统会生成一个默认页面，并进入编辑模式。

编辑界面分为：

  • 左侧组件面板：列出所有可用 Widget。
  • 中央画布：拖入组件并进行排版。
  • 右侧属性面板：设置选中组件的属性、样式和事件。
  • 底部查询编辑器：管理当前页面或全局的数据查询。

连接数据源

以连接一个示例 PostgreSQL 数据库为例，演示如何将真实数据带入应用。

添加数据源

  1. 在左侧边栏点击 “Datasources” → “+ New Datasource”。
  2. 选择 PostgreSQL。
  3. 填写连接信息：主机地址、端口、数据库名、用户名和密码。
  4. 点击 “Test” 确认连通，然后 “Save”。

对于 API 数据源，选择 REST API，配置基础 URL、请求头（如 Authorization）即可。

编写查询与数据操作

数据源配置完成后，就可以创建查询来读取或改写数据。

创建 SQL 查询

在数据源页面或编辑器底部，点击 “New Query”，选择刚才创建的 PostgreSQL 数据源。在查询框输入：

SELECT id, name, department, salary FROM employees ORDER BY id;

点击 “Run” 执行查询，下方会展示返回的 JSON 结果。将查询命名为 getEmployees，方便后续在组件中引用。

创建 REST API 查询

选择 REST 数据源后，输入 HTTP 方法和路径。例如获取用户列表：

  • Method: GET
  • Path: /api/users
  • 在 Params 或 Headers 中按需填写。同样执行并命名，如 fetchUsers。

查询可以绑定动态参数：使用 {{ Input1.text }} 可以引用输入框组件的当前值，实现参数化查询。

构建用户界面：组件介绍与实践

所有组件通过拖拽放置到画布，调整大小和位置，并在属性面板中配置具体行为。

常用核心组件

Table（表格） – 展示数据列表

  • 从组件库拖入一个 Table。
  • 选中表格，在右侧属性面板找到 Table Data，输入： 
    {{ getEmployees.data }}
  • 表格会自动根据查询结果的 JSON 数组生成列。你可以启用搜索、排序、分页，以及自定义列的显示名称和类型（如日期、标签）。

Form（表单） – 新增或编辑记录

利用 Form 组件快速构建录入界面。

  • 拖入 Form 组件，其内部已包含输入框和提交按钮。
  • 添加所需字段：拖入 Input、Select、Datepicker 等，放到表单内部，并在属性面板将其 Name 设置为有意义的字段名（如 employeeName）。
  • 设置表单的 onSubmit 事件，写入插入数据的查询。例如创建名为 addEmployee 的查询： 
    INSERT INTO employees (name, department, salary)
VALUES ({{ Form1.data.employeeName }}, {{ Form1.data.department }}, {{ Form1.data.salary }});
  • 在 Form 的 onSubmit 属性中选择 Execute a query → addEmployee，并设置调用完成后执行 getEmployees 刷新表格数据。

Button（按钮） – 触发操作

  • 拖入 Button，更改 Label 为“删除选中”。
  • 将其 onClick 事件绑定到执行删除查询的 query，使用表格选中行数据： 
    DELETE FROM employees WHERE id = {{ Table1.selectedRow.id }};
  • 在成功后通知用户：事件链中加入 Show Alert，消息设为“删除成功”。

Input（文本输入） – 搜索与过滤

  • 在表格上方放置一个 Input 组件，命名为 searchName。
  • 修改 getEmployees 查询为： 
    SELECT * FROM employees WHERE name ILIKE '%{{ searchName.text }}%';
  • 在 Input 的 onTextChanged 事件中执行 getEmployees，实现实时搜索。

组件属性绑定语法

Appsmith 中所有被 {{ }} 包裹的内容都会被解析为 JavaScript 表达式。你可以访问：

  • 组件的属性：{{ Table1.selectedRow.id }}
  • 查询结果：{{ getEmployees.data }}
  • 全局变量：{{ appsmith.store }}、{{ appsmith.user }}
  • JS 逻辑：{{ moment().format('YYYY-MM-DD') }}（内置 moment 库）

页面参数与路由

在多页面应用中，不同页面之间通过 URL 参数传递数据，实现详情页等功能。

  • 使用 Navigate To 动作从一个页面跳转到另一个，并在 URL 中携带参数：
    • Action: Navigate To
    • Page Name: “EmployeeDetail”
    • Query Parameters: employeeId = {{ Table1.selectedRow.id }}
  • 在目标页面，通过 {{ appsmith.URL.queryParams.employeeId }} 获取该参数，并用于数据查询： 
    SELECT * FROM employees WHERE id = {{ appsmith.URL.queryParams.employeeId }};

应用发布与分享

点击右上角的 “Deploy” 按钮，系统会生成一个可公开访问的链接（云版为 https://app.appsmith.com/app/your-app-name，自托管则为你的域名）。你可以把链接分发给团队成员，无需他们登录 Appsmith 编辑环境。

在 Share & Permissions 中，可以邀请用户，并设置角色（查看者、编辑者），还能设置密码保护或特定邮箱域限制。

所有已发布的应用会出现在工作区的 “Published” 标签下，随时可以点击编辑按钮回到开发模式。

拓展与进阶

Git 版本同步

上线生产之前，建议将应用连接到 Git 仓库：

  • 在应用设置 → Git Settings，配置远程仓库地址、分支等信息。
  • 提交和拉取变更，实现团队协作。

自定义 JS 库与模块

在应用设置中启用 Custom JS Library，可以引入第三方库（如 Lodash、xlsx 等），在所有 JS 表达式中直接使用。

环境变量与配置

对于不同环境（开发、测试、生产）的 API 地址或数据库，Appsmith 支持通过环境变量动态切换，避免硬编码。

最佳实践与常见问题

  • 查询命名规范：使用类似 getXxx、createXxx 的命名方式，便于识别。
  • 善用查询的“onSuccess”回调：在数据发生变更后自动刷新相关查询，保证界面与数据库一致。
  • 避开大循环查询：不要在一个循环内调用多个查询，考虑使用 SQL 批量操作或后端 API 一次完成。
  • 调试技巧：使用 console.log() 在浏览器控制台输出，也可以直接在查询结果面板查看原始响应。

结语

通过本教程，你已经掌握了 Appsmith 的核心使用流程：安装、连接数据、编写查询、拖拽组件、配置交互与发布。无论是构建一个简单的数据列表工具，还是复杂的业务后台，Appsmith 都能用极少的代码量和开发时间完成传统方式几天才能实现的工作。现在就打开 Appsmith，构建你的第一个内部应用吧！