AppSmith 它到底好用吗?

最新推荐文章于 2025-04-10 22:07:02 发布
最新推荐文章于 2025-04-10 22:07:02 发布
阅读量1.6k 收藏 25
点赞数 27
分类专栏： 使用体验 文章标签： 前端 react.js low code 低代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XieEDeHeiShou/article/details/136845348
版权
团队尝试使用低代码平台AppSmith更新老旧管理端，发现其优点如OAuth2集成和丰富的数据源，但也存在控件布局问题、代码格式化不足和局限的JS功能。结论是，在前后端分离场景下，AppSmith不如熟悉的模板项目灵活。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

简介

前段时间公司里一个给经销商用了挺长时间的管理端需要更新一下, 补充一些功能, 于是我们把项目代码翻了出来, 发现是一个基于 Vue 2 的简易管理端和 Spring Boot 2 后端组成的项目.
简单规划了一下需要改动的范围, 确定好方案之后很快就完成了业务上需要的功能.

本着项目难得更新一次, 不如这一次一并更新一下技术栈, 避免项目腐化的想法, 我们团队内部讨论了几个方案, 包括更新到 Vue 3, 使用 Nuxt 3 进行重构, 使用低代码平台进行重构等.
讨论了一番后, 我们决定尝试一下低代码平台, 于是我们找到了 AppSmith, 当时的搜索结果页大概是这个样子:

  • AppSmith 官网
  • 最强开源低代码平台 - Appsmith 功能介绍与使用体验 - 知乎
  • Github 最火开源低代码 Appsmith: 我们是如何达到 28K Star 的?

团队成员都表示, 哇, 这个项目看起来很厉害啊, 我们试试看吧!

本着调研的心态, 我们把此次改动的管理端列表页作为参考, 打算使用 AppSmith 对这个页面进行一个 1:1 的复制.

接下来就让我们一起来看看 AppSmith v1.16 在真实项目中的表现如何吧. 🧐

Note:
由于 AppSmith 是一个仍在活跃开发的项目, 因此本文提到的内容具有时效性, 阅读时请注意当前时间与文章发布时间的间隔, 内容仅供参考.

所以 AppSmith 它到底好用吗?

让我们先来看看它的优点

  • 管理端项目免不了需要使用登录功能, 正当我们准备随便糊弄一下登录页的时候, 我们发现在新建页面时有模板页可供选择, 真是减少许多调研的工作量 👍:
    image.png
  • 支持标准的 OAuth 2 认证方式, 可以快速的将业务系统的登录功能接入进来, 配置好以后还可以将访问令牌注入到 HTTP 请求中, 并自动刷新令牌. (只可惜这个项目的 Spring Boot 后端没有用标准的 OAuth 2 认证协议 😂)
  • 数据源类型丰富, 支持直接连接到多种数据库, 使用 HTTP 请求或者使用 Open AI 服务等.
  • 可以拖拽式的进行页面布局, 方便开发者像搭积木一样将界面原型搭建出来.
  • 支持编写 JavaScript 函数作为数据源或事件监听器, 自由实现业务功能.
  • 支持导入第三方 JavaScript 库, 扩展平台能力.
    image.png
  • 支持基于 React 或原生 JavaScript 创建自定义控件.
  • 支持将项目持久化到 Git 仓库里.
  • 支持多分支, 允许开发人员在分支上进行开发而不影响已发布的版本.
  • 支持环境变量/多环境数据源, 方便开发者在测试环境的数据源上进行调试.

    商业授权起步 40 USD 每月, 附带 100 小时使用时长, 超出部分按 0.4 USD 每用户每小时按量付费, 每用户每月最多收取 20 USD, 对单个应用而言门槛相对较高.

    建议在同一个账户下创建多个应用来分摊授权成本.
    image.png

那它有哪些文档上没提到的缺点呢?

  • 我们在开发列表页时, 发现拖拽控件到页面上时有可能会打乱已有的布局: 比如拖拽中的控件穿过已有的布局时会导致其下方的控件被挤到其他地方去.

    建议拖拽过程中绕过已有的控件, 尽量从布局的边缘进入画布中间.
  • 容器控件的高度无法选择为适应窗口高度, 只能选择自动或者固定高度 (" 留白是一门艺术 ").

  • 网页编辑器上的 JavaScript 代码格式化功能约等于没有, 而且快捷键 Shift + Alt + F 很难触发:
    image.png

  • 键盘党的恶梦: 编辑 HTTP 请求时, 无法在脱离鼠标的情况下快速地填写内容, 而且你很难准确的判断按下 Enter 键以后究竟是换行还是确认当前输入的内容:
    image.png

  • 所有的数据源操作都是由 AppSmith 的代理服务器执行的, 意味着你不能像调试其他 Web 项目一样从 Chrome 控制台里直接找到你想要的 url.

    你需要打开 Chrome 的控制台, 选中 execute 请求并将 form data 设置为 view source 模式, 否则默认的 view parsed 模式下看到的都是二进制字段:
    image.png

  • JS 和 UI 的编辑器是两个互斥的页面, 导致没法像本地开发一样将 IDE 和浏览器放置在同一个窗口中进行分屏调试.

image.png

变通方案是在字段的 Computed Value 里将 JS 代码调试好, 再复制到 JS 对象里, 去引用这段代码:

  • 自带的 moment.js 没有安装中文本地化的配置, 虽然查询出来已安装了 en, zh, zh-cn 三种本地化配置, 但实际都是英语. 这也进一步引发了下一个问题.
    image.png

  • 无法从第三方库中导入任意内容. 例如: 无法从 dayjs/plugin/duration 中导入 duration 插件:
    image.png

  • 因为 JS 对象是跟页面绑定的, 所以无法很方便地创建多页面共享的工具类 JS 对象.

    可选的变通方案包括:

    • 把工具类复制到其他页面, 可能会导致潜在的工具类实现不一致/不同步的问题.
    • 花钱上企业版, 用 AppSmith 的 Packages 功能
    • 或者发布一个自定义的包到 NPM 上, 再通过安装第三方库的形式使用这个工具类.

结论

我们最终花了大概 1 周左右的时间, 一边翻文档学习 AppSmith 的基础知识, 一边弄脏双手进行实践, 最终发现 AppSmith 并没有想象中的那般美好: 目前来看 AppSmith 在前后端分离的场景下似乎并没有显著的优势, 相比接触过的几个 admin 模板项目只是多了一个拖拽式的布局生成功能, 反而是它的 JS 部分功能有限.

如果团队有比较熟悉的 admin 模板项目的话, 建议直接基于熟悉的项目进行二次开发, 自由度与灵活度要比 AppSmith 高出不少, 而且现有的前端 UI 框架也不比 AppSmith 自带的 UI 库要差.

相关内容

推广

欢迎大家尝试电脑微信多开小工具, 12 Mb 的小工具, 可以帮你在电脑上多开微信.

image.png

大家遇到什么使用问题或者有任何建议都可以私信我.

盘点12个前端低代码的框架开源项目以及前端低代码的总结调研，比如百度开源的前端低代码框架、阿里巴巴开源的低代码平台、Element UI表单设计及代码生成器、H5可视化页面配置等
念兮为美
08-12 1万+
低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。下面就来分享12个值得学习和使用的低代码开源项目，更深入地了解什么是低代码。...............
可能是西半球最好用的低代码平台 - Retool 功能介绍与使用体验
weixin_39545889的博客
06-06 1040
目录Retool 的诞生Retool 的构成程序编辑页安全连接数据源Retool 使用技巧Retool 评测码匠与 Retool 的比较Retool 是一个面向企业的低代码开发平台，它于 2017 年在美国著名创业孵化器 Y Combinator 中诞生，旨在为企业提供一个工具开发平台，让企业能够使用有限的编程语言，构建自定义业务工具。Retool 拥有 130 名员工，总部位于旧金山，目前已经完成 C 轮融资，其估值高达 19 亿美元，服务行业众多，以银行、金融和保险业为主，共占比 46%，然后是科技行业
值得关注的5款低代码平台推荐
热门推荐
weixin_39545889的博客
05-11 1万+
依靠这些低代码框架，您可以连接数据库，创建一系列数据 CRUD 操作，并将这些功能分布到 UI 界面中。这里码匠为您推荐 5 款海外目前流行的内部系统低代码平台并进行评测，为您在企业低代码平台的选择上助一臂之力。​ 码匠是一款对开发者友好的低代码平台，在支持多种数据源的同时提供了一套开箱即用的组件，帮助您快速构建功能完善的内部应用，让您专注于业务发展。相较于上述海外市场的低代码工具，码匠针对国内用户使用习惯做了大量优化，UI 界面设计更加适合国内场景，并整合了多款国内...
【开源】推荐20个开源的前端低代码项目
javaDB_EAD的专栏
09-06 1575
Amis 是百度开源的一款前端低代码框架，通过 JSON 配置就能生成各种后台页面，包括数据获取、表单提交及验证等功能，同时，Amis内置 100+ 种 UI 组件，能够满足各种页面组件展现的需求，极大减少开发成本，甚至可以不需要了解前端。借助它，我们可以获得所见即所得的可视编辑开发体验。近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了钉钉低代码，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用。
Appsmith 一款爆火的低代码平台
kcarly的专栏
03-04 798
Appsmith 成立于 2018 年，由 Trisha Mittal、Abhishek Nayak 和 Pranav Rastogi 创立。最初作为内部工具使用，后来于 2019 年正式发布，并获得了 Y Combinator 的支持。它是一个开源框架，允许用户通过拖放组件的方式快速构建应用程序，同时支持多种编程语言（如 Java、JavaScript 和 Python）。
NocoBase 与 Appsmith：哪个低代码平台更适合你？
NocoBase 的博客
10-12 1439
深入了解 NocoBase 和 Appsmith 这两大低代码/无代码开发平台的关键差异。通过我们的深度对比，全面了解它们在数据管理、集成能力、UI/UX 设计等方面的优劣，帮助您选择更适合的开发工具。
这款web前端界面设计工具，原型即应用！uiotos、nodered、amis、appsmith、codewave、goview、dataroom、iotrouter、FUXA、乐吾乐、dooring
qq_69807227的博客
10-17 247
跟WEB UI界面可视化拖拽编辑相关的关键词很多，如标题。如果算上低代码、零代码/0代码、无代码，那就更多了！现在要介绍的这款前端工具 UIOTOS，能实现前端零代码，原型即应用！产品致力于原型即应用，帮助解决前端定制开发难题，更快交付项目！面向后端、算法，以及硬件、工控、产品、实施等用户，用户可以0基础、无代码，一站式搭建。UIOTOS搭建的业务系统（智慧园区）等多类GUI应用，不止于可视化。这是一款“神奇”的前端工具，UIOTOS前端零代码编辑。UIOTOS无代码应用示例。UIOTOS支持任意层嵌套。
appsmith：一个开放源代码平台，用于构建管理面板，工作流，业务应用程序和任何内部工具
02-03
Appsmith是一个基于JavaScript的可视化开发平台，用于构建内部工具。 · Appsmith是基于JavaScript的可视化开发平台，可快速构建和启动内部工具。 拖放预构建的小部件，然后使用JavaScript将它们连接起来以创建交互式页面。 将UI连接到您的API和数据库以在几分钟内构建复杂的工作流。 UI组件：表格，图表，表单，地图，图像，视频等。 API支持：REST API 数据库支持：PostgreSQL，MongoDB，MySQL，Firestore，Redshift，Elastic Search，DynamoDB，Redis和MSFT SQL Server 托管：云
使用AppSmith（PagePlug ）低代码平台快速构建小程序应用实践
发现问题，面对问题，分析问题，解决问题，总结问题
03-04 1万+
Appsmith 是一个开源框架，可让您的团队更快、更协作地构建自定义内部应用程序，如仪表板、管理面板、CRUD 应用程序。PagePlug 是基于 AppSmith 打造的更适合中国开发者的开源前端低代码项目。无需侵入客户架构，直接连接数据源（API、DB），无需学习任何第三方概念，使用基础 js知识就可以快速生成多平台前端应用，包括 PC 端 web 应用、微信小程序等。PagePlug提供的几款模板参考。
Appsmith是一个Web框架，用于构建仪表板，工作流，表单和任何内部工具。-Node.js开发
05-27
Appsmith是一个Web框架，用于构建仪表板，工作流，表单和任何内部工具。 该框架附带UI小部件，例如表格，图表，表单，地图查看器等。 轻松连接到REST API，Postgres，Mongo和MySQL。 邀请用户并允许使用Google帐户登录。 Appsmith建立仪表盘，工作流，表单或任何内部业务工具的最快方法。 建立同情心，不仅仅是:red_heart:︎Appsmith是一种快速，轻松，安全的方式来构建任何自定义内部工具。 构建方法如下：使用预先构建的UI组件（如表格，图表，地图查看器和表单）创建页面。 将UI组件连接到任何REST API或数据库，例如MySQL，Postgres和MongoDB。 用JS编写任何逻辑。 将内部工具部署到客户
推荐开源项目：Appsmith - 快速构建内部应用的利器
gitblog_00059的博客
05-08 777
推荐开源项目：Appsmith - 快速构建内部应用的利器 appsmith appsmithorg/appsmith: Appsmith 是一个开源的无代码开发平台，允许用户通过拖拽式界面构建企业级Web应用程序，无需编写任何后端代码，简化了软件开发流程。 项目...
appsmith和budibase两款低代码平台基本使用与对比
mmlover_zsd的博客
03-16 6537
作者体验了两款低代码平台，分别是appsmith和budibase，总体来说appsmith开发更灵活，下面就简单的数据库查询并绘制曲线这一应用场景来说明。
Appsmith 的中国化项目，是一个开源的、声明式的、可视化的前端低代码框架，可以用来制作 web 应用，微信小程序
06-02
PagePlug 是 Appsmith 的中国化项目。基于Appsmith做了整体性能的优化及汉化，也集合了特色表单解决方案Formily组件、图表解决方案Echarts组件、低代码小程序开发等，是面向研发使用的一个开源的、声明式的、可视化的、符合开发者直觉的前端低代码框架。PagePlug与市面上其他的低代码（轻流、宜搭、微搭、简道云、轻流、活字格等等）面向的使用人群不同，后者更倾向于非编程人员使用，让业务线人员自行构建应用程序。而PagePlug这款低代码产品是面向To D研发人群使用的，它旨在加速开发人员的开发过程，内部系统、工具的开发更简单。
appsmith-docusaurus
05-05
网站 该网站是使用 （现代的静态网站生成器）构建的。 安装 yarn install 地方发展 yarn start 此命令将启动本地开发服务器并打开浏览器窗口。 大多数更改都可以实时反映出来，而无需重新启动服务器。 建造 yarn build 此命令将静态内容生成到build目录中，并且可以使用任何静态内容托管服务进行服务。 部署方式 GIT_USER=<Your> USE_SSH=true yarn deploy 如果您使用GitHub页面进行托管，则此命令是构建网站并推送至gh-pages分支的便捷方法。
开源低代码框架Appsmith：快速构建内部工具
AppsmithCN的博客
07-28 1779
Appsmith是目前最火的用于构建内部工具的低代码平台，与目前大多数低代码产品不同，它是完全开源的，这意味着任何人都可以在Github上下载源代码，或在本地（第三方云主机上）安装、部署以及二次开发。这将使你对你的应用有着更多的控制权，且不受任何厂商的锁定，也不需要担心任何厂商的未来。...
本地Docker部署开源低代码开发神器Appsmith与远程访问在线使用
最新发布
2501_91596413的博客
04-10 790
Appsmith 是一个开源低代码开发平台，它就像一个神奇的画板，你只需要将各种组件（如表格、图表、表单等）像拼图一样拖到你的“画布”上，就能快速构建出复杂的应用程序。而且，它还支持多种数据源和 API 调用，让你的应用连接更自由，开发更快捷。拖拽式开发：就像搭积木一样简单，你只需要把需要的组件拖到画布上，然后配置一下数据源，一个应用就诞生了！多数据源支持：MySQL、PostgreSQL、MongoDB、REST API 等，Appsmith 都能轻松连接。实时预览。
Appsmith：一个用于构建、部署和维护内部应用程序的开源低代码平台
coderroad的博客
01-20 469
低代码平台，用于创建强大的内部工具和仪表板，具有轻松的拖放功能、强大的集成和可自定义的工作流程。
appsmith创建应用
低码开发
04-16 1014
添加数据源： 新建一个查询： 新建一个组件： UI这块的内容暂时不做介绍： 添加一个API的数据源：
根据上文我添加了input框中defaulttext为{{ appsmith.store.formData?.[currentItem] || "" }}，我想显示当前table的中的对应列名的行数据该如何修改（我是在tabel中增加了一个修改按钮用于对数据库进行更新的）
04-04
<think>好的，用户现在遇到了一个问题，他们在一个输入框的defaultText属性中使用了`{{ appsmith.store.formData?.[currentItem] || "" }}`，但想要显示当前表格中对应列名的行数据。他们是在表格中添加了一个修改按钮，用于更新数据库的。 首先，我需要回顾之前的对话。用户之前的问题是关于`tableColumns`未定义的错误，我建议他们要么在本地定义变量，要么从store中获取。现在他们的问题可能涉及到如何正确绑定数据到输入框，以便在修改时显示正确的行数据。 用户提到的`currentItem`可能是指当前行的某个标识符，比如列名或字段名。他们希望当点击修改按钮时，输入框能显示该列对应的当前行的数据。现在的问题是，如何正确获取并显示这些数据。 接下来，我需要分析可能的错误点。用户可能在设置`formData`时没有正确存储当前行的数据。比如，当点击修改按钮时，应该将当前行的数据保存到`appsmith.store.formData`中，这样输入框才能通过`currentItem`来访问对应的字段值。 可能的解决方案是确保在点击修改按钮时，将当前行的数据正确存储到store中。例如，修改按钮的onClick事件应该触发一个函数，将当前行的数据存入`formData`，并将当前列名存入`currentItem`。这样，输入框的defaultText就可以正确绑定到对应的值。 此外，需要注意数据绑定的正确性。在Appsmith中，动态值通常需要用双花括号`{{}}`包裹，并且可能需要正确的路径访问。例如，如果`formData`是一个对象，那么`formData[currentItem]`需要正确的语法，可能需要使用`.`或`[]`来访问属性。 还需要考虑异步存储的问题，确保在存储数据到store之后才进行读取，避免数据未及时更新导致的显示问题。可能需要使用`async/await`或回调函数来处理存储操作。 最后，验证用户是否在按钮点击时正确触发了存储操作，以及`currentItem`是否正确传递了当前列名或字段名。如果这些步骤都正确，那么输入框应该能正确显示对应的数据。</think>根据你的场景需求，我将分步骤解释如何正确实现表格行数据绑定到输入框。以下是结构化解决方案： --- ### 一、问题核心分析 你需要在**修改按钮**被点击时： 1. 捕获当前行的数据 2. 将数据预填充到输入框中 3. 确保绑定关系正确 --- ### 二、实现步骤（关键代码示例） #### 1. 修改按钮点击处理 在表格的修改按钮 `onClick` 事件中： ```javascript // 将当前行数据存储到formData中，同时记录当前操作行ID storeValue("formData", currentRow); storeValue("currentItemId", currentRow.id); // 假设主键字段是id ``` #### 2. 输入框默认值绑定 在输入框的 `defaultText` 属性中使用： ```javascript {{ appsmith.store.formData?.[appsmith.store.tableColumns?.find(col => col.column_name === currentItem)]?.value || "" }} ``` --- ### 三、完整解决方案（两种模式） #### 方案一：单输入框绑定特定字段（推荐） ```javascript // 修改按钮 onClick 触发： storeValue("formData", currentRow); storeValue("currentColumn", "price"); // 假设当前列是price // 输入框 defaultText： {{ appsmith.store.formData?.[appsmith.store.currentColumn] || "" }} ``` #### 方案二：动态列绑定（通用型） ```javascript // 修改按钮 onClick 触发： storeValue("formData", currentRow); storeValue("currentColumnName", currentItem.column_name); // 通过上下文获取列名 // 输入框 defaultText： {{ appsmith.store.formData?.[appsmith.store.currentColumnName] || "" }} ``` --- ### 四、关键原理说明 1. **数据存储层级** ![](https://static.apexschool.com/as-docs/store-value-flow.png) （图示说明：storeValue → 组件绑定的数据流向） 2. **动态路径访问技巧** - 使用 `object?.[variable]` 语法代替 `object.variable` - 通过 `appsmith.store.tableColumns` 获取列元数据 - 结合 `Array.find()` 定位具体列 --- ### 五、常见错误排查 | 现象 | 解决方法 | |-------|----------| | 显示 `[object Object]` | 检查是否误绑定整个对象而非具体属性 | | 输入框始终为空 | 确认 `storeValue` 执行成功，添加控制台日志验证：<br>`{{ console.log("存储数据", appsmith.store.formData) }}` | | 列名不匹配 | 使用统一列名标识：<br>`columns.map(col => col.name.toLowerCase())` | --- ### 六、增强建议 ```javascript // 在按钮点击时添加数据验证 if (!currentRow || !currentItem) { showAlert("请选择要编辑的行", "error"); } else { storeValue("formData", { ...currentRow, _lastModified: Date.now() }); } ``` 通过以上步骤可实现：点击修改按钮 → 自动填充对应字段 → 修改后提交更新的完整闭环。建议优先采用方案一实现具体字段绑定，再扩展至动态列场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值