ToolJet：开源低代码内部应用构建器

FreeGuideOnline 最新 2026-06-18

ToolJet 入门：用开源低代码平台构建内部工具

ToolJet 是一款开源的低代码平台，专为快速构建企业内部应用而设计。它提供了拖拽式界面、预置组件以及连接多种数据源的能力，让你无需编写大量代码就能创建功能完善的管理面板、仪表盘和自动化工作流。本教程将带你从零开始，掌握 ToolJet 的核心用法。

为什么选择 ToolJet 作为内部工具搭建器

传统的内部工具开发往往耗费大量工程资源，从设计 UI、编写接口到实现各类交互，周期漫长。ToolJet 的出现改变了这一局面：

  • 开源且自托管：代码在 GitHub 完全公开，你可以部署在自己的服务器上，数据安全可控。
  • 低代码拖拽：通过 30+ 内置组件（表格、图表、表单、按钮等），像搭积木一样构建界面。
  • 多数据源连接：原生支持 PostgreSQL、MySQL、MongoDB、Firestore、REST API、Google Sheets、Airtable 等。
  • 定制化强：支持编写自定义 JavaScript 和 Python 代码片段，用于数据转换或复杂逻辑。
  • 版本控制与协作：多用户可以同时编辑应用，内置版本历史，可以随时回溯。

接下来，我们按照环境搭建、数据源连接、界面构建和部署发布的顺序，完成第一个 ToolJet 应用。

第一步：安装与启动 ToolJet

ToolJet 可以部署在本地、云服务器或使用 ToolJet Cloud 免费套餐。为了完全掌控环境，推荐使用 Docker 进行本地安装。

环境要求：确保已安装 Docker（版本 20.10.7 以上）和 Docker Compose。

  1. 打开终端，创建一个项目目录并进入：

    mkdir tooljet-demo && cd tooljet-demo

  2. 下载官方提供的 docker-compose.yml 文件：

    curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/master/docker-compose.yml

  3. 启动服务：

    docker compose up -d

    首次启动会拉取所需的服务器镜像和 PostgreSQL 数据库镜像，耐心等待。

  4. 启动完成后，在浏览器中访问 http://localhost:3000。你会看到注册页面，使用邮箱和密码创建管理员账户即可登录。

提示：如果你希望快速体验，也可以直接使用 ToolJet Cloud 的免费套餐，无需任何安装。

第二步：连接你的第一个数据源

内部工具的核心价值在于能读写真实数据。ToolJet 通过“数据源”抽象来统一管理所有连接。

假设我们有一个存储用户信息的 PostgreSQL 表 users，如何让 ToolJet 连接它？

  1. 在左侧导航栏点击 Data Sources（数据源），然后点击 + Add new datasource。
  2. 在数据库分类中选择 PostgreSQL。
  3. 填写连接信息：
    • Host：数据库主机地址（本地可用 host.docker.internal）
    • Port：默认 5432
    • Database name：你的数据库名
    • Username / Password：数据库凭证
  4. 点击 Test Connection 检查连通性，成功后保存。

对于 Google Sheets、Airtable 这类 SaaS 数据源，只需授权 OAuth 即可一键连接。而无数据的 REST API，则需提供端点 URL、Headers 和认证方式。

第三步：创建应用并设计界面

连接好数据源后，我们开始搭建一个“用户管理”工具：包含列表展示、筛选搜索和新增表单。

新建应用

点击顶部导航的 Apps → + Create new app，输入名称（如“用户管理系统”）。进入编辑器后，你会看到：

  • 左侧：组件面板
  • 中间：画布（可拖放区域）
  • 右侧：属性面板

添加数据表格

  1. 从组件面板拖拽 Table 到画布。
  2. 选中表格，在右侧属性中找到 Data 字段，点击其中的 fx 按钮进入表达式编辑器。
  3. 输入以下查询语句来获取用户数据（这里使用 PostgreSQL 数据源）： 
    SELECT id, name, email, role, created_at FROM users
  4. 点击 Preview 查看返回数据，确认后保存。现在表格已显示用户列表。

如果想对表格进行分页，可以启用 Enable server-side pagination 并设置 Total records count 为一条计数查询的结果。若需将列名显示为中文，可以直接修改 Columns 中的 Title 属性。

实现搜索筛选

  1. 拖拽一个 Text Input 组件放在表格上方，将占位符设为“搜索姓名或邮箱”。
  2. 再添加一个 Button，标签改为“搜索”。
  3. 修改表格的 SQL 查询，使其动态接收输入值。点击表格数据字段，使用表达式绑定文本输入组件的值： 
    SELECT id, name, email, role, created_at 
FROM users
WHERE name ILIKE '%' || '{{components.textinput1.value}}' || '%' 
   OR email ILIKE '%' || '{{components.textinput1.value}}' || '%'
  4. 将按钮的 onClick 事件设置为 Run Query，选择表格对应的查询。这样点击搜索时才执行 SQL，避免每次输入都触发查询。

更多交互：添加下拉筛选角色时，只需将下拉组件的选中值作为 WHERE 条件传入。

构建新增用户表单

在画布空白区域添加 Form 组件，并在其中放入：

  • 输入框（姓名、邮箱）
  • 下拉选择（角色，选项可配置为固定列表或来自另一条查询）
  • 提交按钮

配置按钮的 onClick 事件为 Run Query，新建一条 INSERT 查询：

INSERT INTO users (name, email, role)
VALUES ('{{components.form1.data.textinput1.value}}', '{{components.form1.data.textinput2.value}}', '{{components.form1.data.dropdown1.value}}')

查询成功执行后，使用 on Success 事件清空表单并刷新表格数据：添加两个事件，分别调用 Form 的 resetForm() 方法和表格查询的重新执行。

通过这几步，你已经完成了一个支持查看、筛选和新增的典型 CRUD 工具。

第四步：添加图表与仪表盘

ToolJet 内置 Chart 组件，支持柱状图、折线图、饼图等，非常适合制作数据概览页。

  1. 新建一个子页面或容器，拖拽 Chart 组件。
  2. 配置图表数据，通常需要一段聚合查询。例如统计各角色人数： 
    SELECT role, COUNT(*) as count FROM users GROUP BY role
  3. 将返回数据映射到图表轴：在 Chart 属性中设置 X-axis key 为 role，Y-axis key 为 count。
  4. 调整图表类型为饼图，并自定义颜色与标题。

你可以将多个图表组合在一个页面上，并添加 Date Picker 作为时间筛选器，让仪表盘支持动态时间范围。

第五步：自定义逻辑与事件

低代码不代表没有逻辑。ToolJet 允许你在任何地方编写 JavaScript/Python 代码来处理复杂场景。

  • JS 代码转换：比如将数据库返回的布尔值转换为“是/否”，可以在表格列的 Cell Value 表达式中写： 
    {{cellValue === true ? '是' : '否'}}
  • 自定义函数：在页面底部的 Code 面板定义全局 JS 函数，供任意地方调用。
  • Python 查询：针对数据源为 REST API 的场景，可在查询编辑器中选择 Python，编写请求逻辑，利用 requests 库完成身份认证和数据抓取。

事件系统还支持条件判断：例如管理员登录时显示隐藏菜单，可以用 {{globals.currentUser.email === 'admin@example.com'}} 控制组件可见性。

第六步：权限与发布

构建完成的应用需要分发给团队成员使用。ToolJet 提供精细的权限模型：

  • 组织层级：设置管理员、开发者、查看者角色。
  • 应用级权限：每个应用可以单独指定哪些用户或组能够编辑或查看。
  • 页面权限：可以隐藏部分页面给特定角色，让不同岗位看到不同视图。

发布应用：点击编辑器右上角的 Share → Release 生成一个唯一 URL，把链接分发给最终用户。他们无需登录 ToolJet 后台（可通过设置公开分享或要求登录），只需访问该链接即可使用。

如果应用需要嵌入到公司内部系统，可以开启 Public embedding 并获得 iframe 代码。

第七步：版本管理与回滚

每次保存都会在 Version History 中自动创建快照。你可以在应用设置中查看所有版本，标题名、保存时间和作者。当需要回退时，选中目标版本点击 Restore 即可。该功能避免了误操作导致的生产事故，成为团队协作的安全网。

进阶特性与应用场景

熟悉上述基础后，你还可以探索更多 ToolJet 高级能力：

  • 多环境：为开发、测试、生产环境配置不同的数据源和变量，一键切换。
  • 工作流自动化：使用 ToolJet 的 Webhook 或定时查询，结合通知组件实现自动告警。
  • 自定义组件：如果内置组件不够，可以上传自己的 React 组件（alpha 功能）。
  • 审计日志：企业版提供完整的操作审计，满足合规要求。

实际案例包括：客服工单面板、销售 CRM、库存管理系统、运营数据大屏等，均可在一天内交付。

常见问题排查

表格未显示数据？ 检查查询是否正确返回、表达式是否绑定了正确的组件引用，确保数据源连接测试通过。

部署后 502 错误？ docker-compose 可能因内存不足导致服务崩溃，用 docker compose ps 查看容器状态，默认前端运行在 80 端口，后端为 3000 端口。

如何更新 ToolJet 版本？ 拉取最新镜像并重建容器：

docker compose pull
docker compose up -d --remove-orphans

总结

ToolJet 将内部工具的建设门槛降到了史上最低。通过可视化拖拽、预置组件与多数据源支持，你可以像使用乐高积木一样快速构建出专业级的企业应用。无论是临时查询页面，还是完整的运营后台，ToolJet 都能大幅缩短从想法到上线的周期。

现在，打开你的终端，用 Docker 启动一个实例，动手创建第一个“用户管理系统”，体验低代码带来的敏捷开发乐趣。