Appsmith介绍

Appsmith是一个用于构建内部应用程序的低代码开源框架

介绍

Appsmith 通过拖放预置部件，在画布上构建用户界面

• 连接数据源：与数据库或 API 等数据源集成
  • Appsmith 支持许多数据库的即插即用，并提供 RESTful API 接口，可与大多数工具无缝连接
• 构建用户界面：使用可定制的内置部件构建应用程序布局
• 访问数据：通过编写查询并将数据绑定到 widget，将 UI 连接到数据源。使用 JavaScript 控制一切。
• 协作、部署、共享

实现

• 通过 widgets 实现页面编排，参考
• 插件 Lib 库支持如下模块，可以在线配置更多的库：
  • Lodash 现代 JavaScript 工具库，提供模块化、高性能和额外功能
  • moment 一个强大、现代、友好的 JavaScript 日期和时间封装器
    • 当天日期 $moment().format("YYYY-MM-DD 00:00:00")
    • 昨天日期 $moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00")
  • fast-xml-parser 可快速验证 XML、解析 XML 和构建 XML

部署

• Appsmith Cloud 在线访问

Docker

curl -L https://bit.ly/docker-compose-CE -o $PWD/docker-compose.yml
docker-compose up -d

• docker-compose.yml

version: "3"

services:
  appsmith:
    image: index.docker.io/appsmith/appsmith-ce
    container_name: appsmith
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./stacks:/appsmith-stacks
    restart: unless-stopped
    # Uncomment the lines below to enable auto-update
    #labels:
    #  com.centurylinklabs.watchtower.enable: "true"

  #auto_update:
  #  image: containrrr/watchtower
  #  volumes:
  #    - /var/run/docker.sock:/var/run/docker.sock
  #  # Update check interval in seconds.
  #  command: --schedule "0 0 * ? * *" --label-enable --cleanup
  #  restart: unless-stopped
  #  depends_on:
  #    - appsmith
  #  environment:
  #    - WATCHTOWER_LIFECYCLE_HOOKS=true

使用

• Database GUI 通过页面，快速配置增删改查
• 内置变量
  • context-object
  • appsmith.sotre.xxx 存储
    • 存储值：sotreValue("abc", 123)
    • 获取值：{{ appsmith.sotre.abc }}
• table colume control 支持 icon buttone
• js 示例

# 执行API，成功弹窗
{{
  xxx_api.run(()=>{
    showAlert('ok msg', 'success')
  })
}}

# 执行API，成功弹窗，并执行其他API
{{
  xxx_api.run(()=>{
    showAlert('ok msg', 'success') && xxx_api2.run()
  })
}}

# 执行API，执行其他API并关闭 modal
{{
  xxx_api.run(()=>{
    xxx_api2.run() && closeModal('Modal1')
  })
}}

# 获取 table 的值
{{ Table1.selectRow.id }}

扩展

• 类似软件
  • baidu/amis 前端低代码框架，通过 JSON 配置就能生成各种页面