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

天天吖
485 阅读3分钟

这是什么

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

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

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

GitHub 地址：github.com/appsmithorg…

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

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

第一步：注册用户

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

image.png

这里选左侧的 free 模式

image.png

第二步：连接数据库

image.png

点  + New Datasource，选你的数据库类型（比如 MySQL）
填上数据库地址、端口、用户名、密码

image.png

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

第三步：创建查询

    1. 点 Queries/JS，选  + New Query

image.png

写条查询语句，比如：

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

这里的 {{Input1.text}} 是动态参数，等会儿会用到
给这个查询起个名字，比如 getUsers
点 Run 测试一下，能看到数据就对了

image.png

第四步：拖组件搭界面

放个搜索框：

  • • 拖一个 Input 组件到页面上

image.png

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

image.png

放个搜索按钮：

  • • 拖一个 Button

image.png

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

image.png

放个表格显示数据：

  • • 拖一个 Table 组件

    image.png

  • • Table Data 填 {{getUsers.data}}

  • • 这时候表格就会显示查询结果了

image.png

做个新增按钮：

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

image.png

  • • onClick 选择 showModal('Modal1')

image.png

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

image.png

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

image.png

  • • 再放个提交按钮

第五步：写新增逻辑

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

image.png

  1. 在提交按钮的 onClick 里写：
addUser.run()
  .then(() => {
    showAlert('添加成功', 'success');
    closeModal('Modal1');
    getUsers.run(); // 刷新列表
  })
  .catch(() => {
    showAlert('添加失败', 'error');
  });

第六步：搞定编辑和删除

编辑功能：

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

image.png

image.png

  • • onClick 写：

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

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

删除功能：

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

image.png

  • • onClick 写：

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

  • • 在确认框里的确定按钮执行删除查询：

    DELETE FROM users WHERE id = {{Table1.selectedRow.id}};

实用小技巧

1. 数据刷新

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

image.png

2. 数据验证

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

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

image.png

3. 权限控制

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

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

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

image.png

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

image.png

最后说两句

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

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

avatar
文章
阅读
粉丝