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

## 这是什么 简单讲，Appsmith 就是个开源的低代码平台，专门用来快速搭建管理后台、内部工具和数据看板这些东西。 想象一下，以前你要做个后台管理系统，得写前端、写后端、调样式，折腾半天。现在用 Appsmith，拖拖拽拽组件，连连数据库，基本就搞定了。 截止 2025 年 10 月，GitHub 上已经有 38.1K 的 Star 了，说明用的人还挺多的。而且它已经被 100 多个国家的 5000 多家企业用上了，靠谱程度还行。 https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.liu.appsmith ## 实战：快速搭建一个用户管理页面 下面带你实际做一个简单的用户管理系统，包括查询、新增、编辑、删除功能。 ### 第一步：注册用户 应用安装后，需要先注册个账号。  这里选左侧的 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** 组件  - Table Data 填 `{{getUsers.data}}` - 这时候表格就会显示查询结果了  **做个新增按钮：** - 再拖一个 **Button**，Label 改成 "新增数据"  - onClick 选择 `showModal('Modal1')`  - 拖一个 **Modal** 组件到页面（默认就叫 Modal1）  - 在 Modal 里放几个 **Input** 组件（姓名、邮箱、手机等）  - 再放个提交按钮 ### 第五步：写新增逻辑 1. 创建一个新查询 `addUser`： ```sql INSERT INTO users (name, email, phone) VALUES ('{{Input_Name.text}}', '{{Input_Email.text}}', '{{Input_Phone.text}}'); ```  2. 在提交按钮的 onClick 里写： ```javascript addUser.run() .then(() => { showAlert('添加成功', 'success'); closeModal('Modal1'); getUsers.run(); // 刷新列表 }) .catch(() => { showAlert('添加失败', 'error'); }); ``` ### 第六步：搞定编辑和删除 **编辑功能：** - 在表格里添加一个自定义列 - 类型选 **Icon Button**   - onClick 写： ```javascript storeValue('editingUser', Table1.selectedRow); showModal('EditModal'); ``` - 再做一个编辑的 Modal，逻辑跟新增差不多，就是 SQL 换成 UPDATE **删除功能：** - 再加一列删除按钮 图标可以搜 delete  - onClick 写： ```javascript showModal('ConfirmModal'); // 先弹个确认框 ``` - 在确认框里的确定按钮执行删除查询： ```sql DELETE FROM users WHERE id = {{Table1.selectedRow.id}}; ``` ## 实用小技巧 ### 1. 数据刷新 很多时候需要在操作后刷新数据，可以在查询的 Settings 里开启 **Run query on page load**，或者在代码里手动调用 `yourQuery.run()`。  ### 2. 数据验证 Input 组件都有 **Regex** 属性，可以写正则表达式做验证。比如邮箱验证： ```regex ^[^\s@]+@[^\s@]+\.[^\s@]+$ ```  ### 3. 权限控制 表格的列可以设置 **Visible** 属性，结合 JS 判断： ```javascript {{appsmith.user.email === 'admin@example.com'}} ``` 这样就能控制某些按钮只有管理员能看到。  最后点击右上角的 deploy 发布，就可以看到新建的页面了  ## 最后说两句 Appsmith 不是银弹，但确实能省不少事儿。特别是那种快速搭建内部工具的场景，真的挺香。你不用从零开始搭框架、配组件库、写各种模板代码，专注在业务逻辑上就行。 上手建议：先做个最简单的查询页面，熟悉下操作。然后慢慢加功能，多试试组件之间的联动。官方文档写得还行，碰到问题去看看，基本都能找到答案。 GitHub 地址：https://github.com/appsmithorg/appsmith