Web前端开发网

web.fly63.com

首页资源工具文章教程栏目

Appsmith

网站地址:https://www.appsmith.com

GitHub:https://github.com/appsmithorg/appsmith

描述信息:搭建企业级后台管理系统的开源利器

访问官网

GitHub

现在很多公司都在做数字化转型，需要大量内部工具：订单管理系统、客户信息看板、数据仪表盘、资产管理工具等等。传统开发方式时间太长，成本太高。买现成的SaaS产品又不够灵活，不能完全满足需求。有没有又快又好又灵活的方法呢？

今天介绍的Appsmith，就是解决这个问题的开源低代码平台。

一、企业开发内部工具的痛点

企业面临的挑战

1. 开发时间太长
一个简单的管理后台，从需求分析、设计、前后端开发到测试上线，常常要几周甚至几个月。

2. 维护成本高
业务需求经常变化，每次修改都要重新开发、测试、部署，技术债务越积越多。

3. 技术门槛高
需要前端、后端、数据库、部署运维全都会，小团队很难做到。

4. 数据分散
企业数据分散在MySQL、MongoDB、PostgreSQL、REST API、Google Sheets等不同地方，整合困难。

5. 安全顾虑
用第三方工具担心数据泄露，自己开发又费时费力。

Appsmith的解决方案

1. 开发速度快10倍
拖拽式UI设计+可视化数据绑定，10分钟能完成原本需要几天的工作。

2. 支持25+种数据源
原生支持25多种数据库和API，包括PostgreSQL、MongoDB、MySQL、REST API等。

3. 灵活支持JavaScript
任何地方都可以写JavaScript代码，实现复杂的业务逻辑。

4. 完全开源免费
基于Apache 2.0协议，可以部署在自己的服务器上，数据完全自己掌控。

5. 企业级安全
支持角色权限、审计日志、数据加密，满足企业安全要求。

二、Appsmith是什么？

项目背景

Appsmith是GitHub上最受欢迎的开源低代码平台之一，已经获得超过38,000个星标。

它的目标是找到一个平衡点：既不像React那样需要从零开始，也不像完全可视化平台那样限制灵活性。Appsmith提供中间方案——减少重复工作，同时保留代码级的灵活性和控制力。

核心特性

1. 拖拽式UI设计器
提供45+个预置组件，都可以自定义：

数据显示：表格、图表、列表
表单输入：输入框、下拉选择、日期选择器
交互控件：按钮、弹窗、标签页
高级组件：文件上传、富文本编辑器、地图
自定义组件：可以用HTML/CSS/JavaScript创建完全自定义的组件

2. 强大的数据集成
原生支持：

关系数据库：PostgreSQL、MySQL、SQL Server、Oracle
NoSQL数据库：MongoDB、Redis
云存储：Amazon S3、Google云存储
搜索引擎：Elasticsearch
数据仓库：Snowflake、Redshift

3. 到处都能写JavaScript
在Appsmith的任何地方都可以用JavaScript：

在{{ }}里引用数据和计算
写复杂的数据转换逻辑
创建可重用的JavaScript函数
实现高级业务流程控制

4. 版本控制和协作

原生Git支持（GitHub、GitLab、Bitbucket）
多环境管理（开发、测试、生产）
团队协作和权限控制
审计日志

5. 灵活的部署方式

云端部署：一键部署到Appsmith Cloud（免费）
自己部署：Docker、Kubernetes、AWS
企业版：提供额外安全和支持功能

AI新功能：Appsmith Agents

Appsmith Agents是一个AI助手平台，它把最新的AI模型和企业私有数据结合起来。不用复杂的配置，团队就能问业务相关的问题，配置自动化任务。

三、怎么使用Appsmith？

第一步：注册和创建应用

选择部署方式

方式A：云端快速开始（推荐新手）

访问 https://appsmith.com
点击"Sign up"免费注册
验证邮箱就能用了

方式B：本地自己部署（推荐企业）
用Docker快速部署：

docker pull appsmith/appsmith-ce
docker run -d --name appsmith -p 80:80 appsmith/appsmith-ce

访问 http://localhost 完成设置。

创建第一个应用

登录后进入工作区
点击右上角"Create New" → "Application"
给应用起名，比如"客户管理系统"
自动进入编辑器

第二步：连接数据源

例子：连接PostgreSQL数据库

添加数据源
- 点击左侧"Data"
- 选择"+ New Datasource"
- 选择"PostgreSQL"
填写连接信息

主机地址: your-database-host.com
端口: 5432
数据库名: your_database
用户名: your_username
密码: ********

测试连接
- 点击"Test"验证
- 成功就点"Save"

创建查询

点击"Queries/JS"
点击"+ New Query"
选刚才的数据库
写SQL：

SELECT id, name, email, phone 
FROM customers 
ORDER BY created_at DESC

点击"Run"测试
命名保存为"getCustomers"

第三步：设计界面

添加表格显示数据

拖拽表格组件
- 点左侧"UI"
- 找到"Table"
- 拖到页面上
绑定数据
- 选中表格
- 右侧属性面板的"Table Data"输入：{{getCustomers.data}}
- 表格自动显示查询结果
配置表格
- 重命名为"customersTable"
- 开启分页
- 设置列宽和显示内容

添加表单操作

拖拽表单组件
- 找到"Form"拖到页面
- 添加输入框：姓名、邮箱、电话
- 添加提交按钮
创建插入查询

INSERT INTO customers (name, email, phone)
VALUES (
  {{nameInput.text}},
  {{emailInput.text}},
  {{phoneInput.text}}
);

设置按钮功能
- 选中提交按钮
- 在"onClick"选"Execute a query"
- 选插入查询
- 成功后刷新表格数据

第四步：添加交互逻辑

用JavaScript处理数据
创建JavaScript对象封装逻辑：

export default {
  // 格式化日期
  formatDate: (date) => {
    return new Date(date).toLocaleDateString('zh-CN');
  },
  
  // 验证邮箱
  validateEmail: (email) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  }
}

配置高级交互

// 条件显示
{{customersTable.selectedRow.orders > 0}}

// 动态样式
{{status === 'completed' ? 'green' : 'orange'}}

// 级联更新
{{
  customersTable.onRowSelected(() => {
    getOrders.run({
      customerId: customersTable.selectedRow.id
    });
  });
}}

四、实际应用场景

1. 电商订单管理系统

功能：

订单列表和详情
订单状态更新
库存管理
销售数据分析
客户管理

技术：

数据库：PostgreSQL
支付接口：Stripe API
物流追踪：REST API

2. 贷款审批平台

功能：

申请表单处理
信用评分查询
审批流程管理
风险评估
贷款发放记录

3. 数据分析仪表盘

适用场景：

营销团队：广告效果分析
运营团队：用户增长监控
财务团队：收入成本分析
产品团队：用户行为分析

特色：

多维度数据筛选
实时数据刷新
图表联动
报表导出

4. IT资产管理系统

管理内容：

硬件设备清单
软件许可证
资产分配回收
维护记录
成本统计

五、使用技巧和最佳实践

1. 数据缓存优化

// 缓存数据
storeValue('customerCache', customersTable.data);

// 读取缓存
{{appsmith.store.customerCache}}

2. 错误处理

getCustomers.run()
  .then(() => {
    showAlert('数据加载成功', 'success');
  })
  .catch((error) => {
    showAlert('加载失败：' + error.message, 'error');
  });

3. 使用模板加速

Appsmith提供很多模板：

客户关系管理
订单管理系统
IT资产追踪
数据分析仪表盘
支持工单系统

创建应用时选择"Use Template"快速开始。

4. 自定义组件

内置组件不够用时，可以自己创建：

<div id="custom-widget">
  <h3>自定义组件</h3>
  <button onclick="handleClick()">点击</button>
</div>

<style>
#custom-widget {
  padding: 20px;
  background: blue;
  border-radius: 8px;
  color: white;
}
</style>

<script>
function handleClick() {
  appsmith.triggerEvent("onButtonClick");
}
</script>