Appsmith 实用指南：10分钟搞定你的管理后台

这是什么

简单讲，Appsmith 就是个开源的低代码平台，专门用来快速搭建管理后台、内部工具和数据看板这些东西。

想象一下，以前你要做个后台管理系统，得写前端、写后端、调样式，折腾半天。现在用 Appsmith，拖拖拽拽组件，连连数据库，基本就搞定了。

截止 2025 年 10 月，GitHub 上已经有 38.1K 的 Star 了，说明用的人还挺多的。而且它已经被 100 多个国家的 5000 多家企业用上了，靠谱程度还行。

GitHub 地址：github.com/appsmithorg...

实战：快速搭建一个用户管理页面

下面带你实际做一个简单的用户管理系统，包括查询、新增、编辑、删除功能。

第一步：注册用户

应用安装后，需要先注册个账号。

这里选左侧的 free 模式

第二步：连接数据库

点 + New Datasource ，选你的数据库类型（比如 MySQL）

填上数据库地址、端口、用户名、密码

点 Test 测试一下，成功了就点 Save

第三步：创建查询

1. 点 Queries/JS ，选 + New Query

写条查询语句，比如：

sql 复制代码

SELECT * FROM users WHERE name LIKE '%{{Input1.text}}%' LIMIT 10;

这里的 {{Input1.text}} 是动态参数，等会儿会用到

给这个查询起个名字，比如 getUsers

点 Run 测试一下，能看到数据就对了

第四步：拖组件搭界面

放个搜索框：

• 拖一个 Input 组件到页面上

• 在右边属性面板把 Property Name 改成 Input1
• Placeholder 写 "输入用户名搜索"

放个搜索按钮：

• 拖一个 Button

• Label 改成 "搜索"
• onClick 事件选择 getUsers.run()

放个表格显示数据：

• 拖一个 Table 组件

image.png
• Table Data 填 {{getUsers.data}}
• 这时候表格就会显示查询结果了

做个新增按钮：

• 再拖一个 Button，Label 改成 "新增数据"

• onClick 选择 showModal('Modal1')

• 拖一个 Modal 组件到页面（默认就叫 Modal1）

• 在 Modal 里放几个 Input 组件（姓名、邮箱、手机等）

• 再放个提交按钮

第五步：写新增逻辑

创建一个新查询 addUser：

sql 复制代码

INSERT INTO users (name, email, phone) 
VALUES ('{{Input_Name.text}}', '{{Input_Email.text}}', '{{Input_Phone.text}}');

在提交按钮的 onClick 里写：

scss 复制代码

addUser.run()
  .then(() => {
    showAlert('添加成功', 'success');
    closeModal('Modal1');
    getUsers.run(); // 刷新列表
  })
  .catch(() => {
    showAlert('添加失败', 'error');
  });

第六步：搞定编辑和删除

编辑功能：

• 在表格里添加一个自定义列
• 类型选 Icon Button

• onClick 写：

scss 复制代码

storeValue('editingUser', Table1.selectedRow);
showModal('EditModal');

• 再做一个编辑的 Modal，逻辑跟新增差不多，就是 SQL 换成 UPDATE

删除功能：

• 再加一列删除按钮
图标可以搜 delete

• onClick 写：

scss 复制代码

showModal('ConfirmModal'); // 先弹个确认框

• 在确认框里的确定按钮执行删除查询：
bash 复制代码
```
DELETE FROM users WHERE id = {{Table1.selectedRow.id}};
```

实用小技巧

1. 数据刷新

很多时候需要在操作后刷新数据，可以在查询的 Settings 里开启 Run query on page load ，或者在代码里手动调用 yourQuery.run()。

2. 数据验证

Input 组件都有 Regex 属性，可以写正则表达式做验证。比如邮箱验证：

ini 复制代码

^[^\s@]+@[^\s@]+.[^\s@]+$

3. 权限控制

表格的列可以设置 Visible 属性，结合 JS 判断：

ini 复制代码

{{appsmith.user.email === 'admin@example.com'}}

这样就能控制某些按钮只有管理员能看到。

最后点击右上角的 deploy 发布，就可以看到新建的页面了

最后说两句

Appsmith 不是银弹，但确实能省不少事儿。特别是那种快速搭建内部工具的场景，真的挺香。你不用从零开始搭框架、配组件库、写各种模板代码，专注在业务逻辑上就行。

上手建议：先做个最简单的查询页面，熟悉下操作。然后慢慢加功能，多试试组件之间的联动。官方文档写得还行，碰到问题去看看，基本都能找到答案。