低代码开源框架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存放设置

端口

端口不冲突就可以

本地端口容器端口
928080
9243443
92019001

运行

稍等一会儿(应该不超过 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,用来查询所有的国家名称

SELECT `Name` FROM `country`1

在右侧 Suggested widgets 中绑定到 SELECT 组件

SELECT 组件的属性

再建一个查询 get_City,根据选定的国家来显示这个国家的城市

SELECT * FROM `city` WHERE `CountryCode` = (SELECT `Code` FROM `country` WHERE country.Name = {{Select1.selectedOptionValue}} ) 1

在右侧 Add New Widget 中绑定到 TABLE 组件

TABLE 组件的属性

为了实现联动,也就是当 SELECT 组件下拉框中的国家发生变化时,TABLE 组件中的城市能同步变化,需要在 SELECT 组件的 Action 中的 onOptionChage 事件中,触发 get_City.run() 查询这个国家的所有城市

最终的 UI 效果

老苏录制了一张动图,这样更容易理解和展示已实现的效果

发布和分享

右上角有 Share 和 Deploy

发布(Deploy)后,可以在不同的页面进行切换

邀请(Share ):把链接发给别人来使用你发布的应用

还可以给邀请用户设置不同的权限

小结

通过上面的案例,总结出在 Appsmith 中创建应用程序的五个简单步骤:

  • 连接任何数据源:您可以将任何数据库与 Appsmith 集成,包括 REST APIMySQLPostgresMongoDBGoogle 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/appsmith

Appsmith
   地址: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.md

Docker - Appsmith
   地址:https://docs.appsmith.com/setup/docker

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://didaima.org/?id=646

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。