低代码开源框架Appsmith
什么是 Appsmith ？
Appsmith是一个用于构建内部应用程序的低代码、开源框架。通过拖放组件来构建完全自定义的管理面板、CRUD应用程序和工作流。使用30多个React组件来构建没有HTML/CSS的页面。构建速度提高10倍。
其工作原理👇并不复杂
前期准备
因为需要数据来演示，所以老苏在 https://dev.mysql.com/doc/index-other.html 下载了 world database，解压出来的 SQL 脚本可以在 phpMyAdmin 中直接导入
至于
MariaDB的版本无所谓，老苏还是用了MariaDB 5
虽然只有 3 张表，但都是有数据的
安装
在群晖上以 Docker 方式安装。
在注册表中搜索 appsmith-ce ，选择第一个 appsmith/appsmith-ce，版本选择 latest。
卷
在 docker 文件夹中，创建一个新文件夹，并将其命名为 appsmith，并在 appsmith 目录下建一个子目录 stacks
| 文件夹 | 装载路径 | 说明 |
|---|---|---|
docker/appsmith/stacks |
/appsmith-stacks |
存放设置 |
端口
端口不冲突就可以
| 本地端口 | 容器端口 |
|---|---|
9280 |
80 |
9243 |
443 |
9201 |
9001 |
运行
稍等一会儿（应该不超过 1 分钟吧），在浏览器中输入 http://群晖IP:9280 就能看到主界面
点橘黄色的按钮 GET STARTED ，首先需要填写一些信息，主要是 Email 和 Password
默认两个都是启用的，老苏给取消了
完成后进入了主界面
第一个应用
点正中间的橘黄色按钮 BUILD MY FIRST APP 开始我们的第一个应用
数据源
首先要选择数据源
前面我们已经准备好了，所以选择 Mysql，如果 Test 没问题，就可以点 Save 保存了
页面
点 GENERATE NEW PAGE 就可以开始创建新页面了
你要做的就是在下拉框中选表和要查询的字段
点 Generate Page 创建页面
生成的页面中有一个 Table 来显示、增加和删除数据，可以在 Form 中进行修改
点右上角的 Deploy 发布即可生成一个页面
组件
但是这种页面是固定格式的，返回的是所有的数据，如果你需要个性化的应用，就需要通过拖拽 Widget ，搭建自己的应用界面
设定一个目标 –> 根据选定的国家，显示属于这个国家的城市
新建页面，选择 Build with Drag & Drop
首先需要通过顶部的菜单确定应用的类型
然后建 2 个查询
一个是 get_Country，用来查询所有的国家名称
1 | SELECT `Name` FROM `country` |
在右侧 Suggested widgets 中绑定到 SELECT 组件
SELECT 组件的属性
再建一个查询 get_City，根据选定的国家来显示这个国家的城市
1 | SELECT * FROM `city` WHERE `CountryCode` = (SELECT `Code` FROM `country` WHERE country.Name = {{Select1.selectedOptionValue}} ) |
在右侧 Add New Widget 中绑定到 TABLE 组件
TABLE 组件的属性
为了实现联动，也就是当 SELECT 组件下拉框中的国家发生变化时，TABLE 组件中的城市能同步变化，需要在 SELECT 组件的 Action 中的 onOptionChage 事件中，触发 get_City.run() 查询这个国家的所有城市
最终的 UI 效果
老苏录制了一张动图，这样更容易理解和展示已实现的效果
发布和分享
右上角有 Share 和 Deploy
发布（Deploy）后，可以在不同的页面进行切换
邀请（Share ）：把链接发给别人来使用你发布的应用
还可以给邀请用户设置不同的权限
小结
通过上面的案例，总结出在 Appsmith 中创建应用程序的五个简单步骤：
- 连接任何数据源：您可以将任何数据库与
Appsmith集成，包括REST API、MySQL、Postgres、MongoDB、Google Sheets等； - 构建
UI：使用预构建的小部件，您可以在几秒钟内创建UI； - 创建和执行查询：在
SQL或JS编辑器中编写查询和业务逻辑，然后绑定响应； - 轻松定制：随处编写
JS，甚至在您的数据库查询中，以定制您的应用程序； - 协作和部署：只需单击一下，即可邀请您的同事和朋友与您合作并部署您的应用程序。
其他
如果你打开 http://群晖IP:9201，你会看到一个 Supervisor 进程管理界面，可以用来启停服务
参考文档
appsmithorg/appsmith: Build completely custom admin panels and internal tools. Use 30+ react components to build pages without HTML/CSS.
地址：https://github.com/appsmithorg/appsmithAppsmith
地址：https://www.appsmith.com/appsmith-docs/docker.md at v1.3 · appsmithorg/appsmith-docs
地址：https://github.com/appsmithorg/appsmith-docs/blob/v1.3/setup/docker.mdDocker - Appsmith
地址：https://docs.appsmith.com/setup/docker