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

## 这是什么

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

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

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


https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.liu.appsmith


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

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

### 第一步：注册用户

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/8ed0bbb3-27d6-4efc-99f8-faad1d516856.png "image.png")

这里选左侧的 free 模式

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/6a50e79b-c149-4f10-a27b-e604a342c5fb.png "image.png")

### 第二步：连接数据库

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/0f40a02f-efe7-4f4a-aa9b-0bbd14eb82a3.png "image.png")
点 **+ New Datasource**，选你的数据库类型（比如 MySQL）
 填上数据库地址、端口、用户名、密码
 
![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c2678eca-e480-4038-8bd9-b075f3794e3a.png "image.png")
点 **Test** 测试一下，成功了就点 **Save**

### 第三步：创建查询

1. 点 **Queries/JS**，选 **+ New Query**

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/b309c612-cedf-497e-9023-9281cc04274a.png "image.png")
写条查询语句，比如：
   ```sql
   SELECT * FROM users WHERE name LIKE '%{{Input1.text}}%' LIMIT 10;
   ```
   这里的 `{{Input1.text}}` 是动态参数，等会儿会用到
给这个查询起个名字，比如 `getUsers`
点 **Run** 测试一下，能看到数据就对了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/fae50937-5376-4d97-86dd-64723d764494.png "image.png")
### 第四步：拖组件搭界面

**放个搜索框：**
- 拖一个 **Input** 组件到页面上

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/f5cdb6b2-f4b5-42b7-b5fa-2b9dc659900d.png "image.png")
- 在右边属性面板把 Property Name 改成 `Input1`
- Placeholder 写 "输入用户名搜索"

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/9719e1a2-fd62-4e29-a282-9ef7fd1fdb87.png "image.png")
**放个搜索按钮：**
- 拖一个 **Button**

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/2303593d-2ee2-45f4-84f0-f8f7cbd5a0de.png "image.png")
- Label 改成 "搜索"
- onClick 事件选择 `getUsers.run()`

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/d9003dcd-db74-4ee1-a987-c0eb02b775dc.png "image.png")

**放个表格显示数据：**
- 拖一个 **Table** 组件
![image.png](https://dl.playground.lazycat.cloud/guidelines/496/7c92b2e8-3500-478c-8546-c8db2ff1558e.png "image.png")
- Table Data 填 `{{getUsers.data}}`
- 这时候表格就会显示查询结果了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/2628b733-fe2e-47a2-9294-05577b3ef08d.png "image.png")

**做个新增按钮：**
- 再拖一个 **Button**，Label 改成 "新增数据"

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/97fe0317-e20b-4452-8589-2b7869119e4e.png "image.png")
- onClick 选择 `showModal('Modal1')`

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/8a836a56-96d7-4a01-81c3-03fcdb48c30d.png "image.png")
- 拖一个 **Modal** 组件到页面（默认就叫 Modal1）

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/ac82c3d5-2257-49e5-a238-97ab25a30187.png "image.png")
- 在 Modal 里放几个 **Input** 组件（姓名、邮箱、手机等）

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/983e37fc-1c3b-42ca-a1a6-07c4a8876c1c.png "image.png")
- 再放个提交按钮

### 第五步：写新增逻辑

1. 创建一个新查询 `addUser`：
   ```sql
   INSERT INTO users (name, email, phone) 
   VALUES ('{{Input_Name.text}}', '{{Input_Email.text}}', '{{Input_Phone.text}}');
   ```

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/43bb995d-17d5-4750-852e-82aa7e24c211.png "image.png")
2. 在提交按钮的 onClick 里写：
   ```javascript
   addUser.run()
     .then(() => {
       showAlert('添加成功', 'success');
       closeModal('Modal1');
       getUsers.run(); // 刷新列表
     })
     .catch(() => {
       showAlert('添加失败', 'error');
     });
   ```

### 第六步：搞定编辑和删除

**编辑功能：**
- 在表格里添加一个自定义列
- 类型选 **Icon Button**

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/14e69805-566b-481d-913d-90b1d371ddb1.png "image.png")


![image.png](https://dl.playground.lazycat.cloud/guidelines/496/84e352a5-07f6-4288-9948-cbd0a1f6cdaa.png "image.png")
- onClick 写：
  ```javascript
  storeValue('editingUser', Table1.selectedRow);
  showModal('EditModal');
  ```
- 再做一个编辑的 Modal，逻辑跟新增差不多，就是 SQL 换成 UPDATE

**删除功能：**
- 再加一列删除按钮
图标可以搜 delete

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c2f8d2a1-25cf-4b2a-9d7d-69829a199e66.png "image.png")
- onClick 写：
  ```javascript
  showModal('ConfirmModal'); // 先弹个确认框
  ```
- 在确认框里的确定按钮执行删除查询：
  ```sql
  DELETE FROM users WHERE id = {{Table1.selectedRow.id}};
  ```

## 实用小技巧

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/d791f66c-56ee-472a-9ceb-e22b02f54787.png "image.png")
### 2. 数据验证
Input 组件都有 **Regex** 属性，可以写正则表达式做验证。比如邮箱验证：
```regex
^[^\s@]+@[^\s@]+\.[^\s@]+$
```

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/b85fedbd-d6e1-45c9-be39-97d9287e7d08.png "image.png")
### 3. 权限控制
表格的列可以设置 **Visible** 属性，结合 JS 判断：
```javascript
{{appsmith.user.email === 'admin@example.com'}}
```
这样就能控制某些按钮只有管理员能看到。

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/9153b902-e8a9-4b4a-8601-0c2b77cfb29a.png "image.png")
  
最后点击右上角的 deploy 发布，就可以看到新建的页面了

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/db94243f-1b9e-49f9-a53b-ea6a1a827973.png "image.png")

## 最后说两句

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

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

GitHub 地址：https://github.com/appsmithorg/appsmith