AppSmith(安装与练习4套)

最新推荐文章于 2024-08-11 20:35:58 发布
最新推荐文章于 2024-08-11 20:35:58 发布
阅读量2.3k 收藏 2
点赞数
文章标签： docker 容器 运维 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mogeko1/article/details/130428508
版权

AppSmith官网文档：

https://docs.appsmith.com/getting-started/setup/installation-guides/docker

安装前需要已经安装好docker，需要版本如下：
Docker ( 20.10.7或者更高)
Docker-Compose ( 1.29.2或者更高)

安装Appsmith：
准备docker-compose.yml文件：

version: "3"

services:
  appsmith:
    image: index.docker.io/appsmith/appsmith-ce
    container_name: appsmith
    ports:
      - "80:80"
      - "443:443"
    environment:
      - APPSMITH_ALLOWED_FRAME_ANCESTORS="'self' http://trusted-other.com http://*.mycompany.com"
    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 secondsversion: "3"

services:
  appsmith:
    image: index.docker.io/appsmith/appsmith-ce
    container_name: appsmith
    ports:
      - "80:80"
      - "443:443"
    environment:
      - APPSMITH_ALLOWED_FRAME_ANCESTORS="'self' http://trusted-other.com http://*.mycompany.com"
    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.
  #  command: --schedule "0 0 * ? * *" --label-enable --cleanup
  #  restart: unless-stopped
  #  depends_on:
  #    - appsmith
  #  environment:
  #    - WATCHTOWER_LIFECYCLE_HOOKS=true

通过运行以下命令启动 Docker 容器。如果用户无法访问，docker这可能需要使用 sudo 运行。docker-compose如果镜像在本地不存在，此命令将下载必要的 Docker 镜像并启动容器

linux> docker-compose up -d

清理关闭appsmith:

linux> docker-compose down

此命令下载图像并启动 Appsmith：

linux> docker run -d --name appsmith -p 80:80 -v "$PWD/stacks:/appsmith-stacks" --pull always appsmith/appsmith-ce

更新
要手动更新 Appsmith，请转到安装的根目录并运行以下命令：

linux> docker rmi appsmith/appsmith-ce -f
linux> docker pull appsmith/appsmith-ce
linux> docker rm -f appsmith
linux> docker run -d --name appsmith -p 80:80 -v "$PWD/stacks:/appsmith-stacks" appsmith/appsmith-ce

下载完成后，服务器应该很快就会启动。可以在Docker 日志中验证它是否正常工作。
以使用以下命令跟踪日志：

linux> docker logs -f appsmith

服务器日志存储在stacks/logs/backend/backend.log.
日志可以在调试或分析问题时提供帮助，因为它们提供了有关问题所在的宝贵信息。有关详细信息，请参阅如何获取容器日志。

重启:
如果 Docker 容器无法重新启动，请下载并运行restart-container.sh下面链接的脚本来启动它们：

https://docs.appsmith.com/assets/files/restart-container-883f911b6163479131f70ab231412974.sh

将脚本 ( restart-container.sh) 复制到安装文件夹并使其可执行：

linux>chmod +x restart-container.sh
linux>./restart-container.sh

查看端口:

linux> netstat -anpt

在这里插入图片描述
访问AppSmith

https://localhost:80

在这里插入图片描述
创建用户
在这里插入图片描述
用户名邮箱密码随便填写
在这里插入图片描述
创建项目:
在这里插入图片描述
进入画布：
在这里插入图片描述

BUTTON 按钮
–CONTENT
-Label(“改名字”)
-onClick 可以进行一些行为上的操作触发

例1：点击按钮后反馈信息
设置按钮onClick类型选择show message
Message内容：hello
Type:Success
在这里插入图片描述
制作完成后点击DEPLOY进行发布
在这里插入图片描述
制作完成后点击DEPLOY进行发布
在这里插入图片描述
完成后结果：
在这里插入图片描述
删除（点击最右边的小垃圾桶即可)
在这里插入图片描述

例2：连接数据库查看表与按钮集合
创建后内默认有数据，将其全部清空
在这里插入图片描述
修改字段名称不够就选择ADD 添加字段，让字段与要展示的表字段一致

在这里插入图片描述
连接mysql数据库读取表
在这里插入图片描述
输入mysql连接信息点击test进行测试检查连通，测试通过后再点击SAVE保存
在这里插入图片描述
创建查询请求
在Queries/JS下点击ADD QUERY/JS选择Select 建立查询请求
在这里插入图片描述
在Query内输入查询sql点击RUN运行下方会展示结果
在这里插入图片描述
完成后点击CONTENT下的Table Datan内输入双括号{{}} 填写Query1.data（刚刚创建的连接名字）
在这里插入图片描述
与按钮结合
将按钮BUTTON拖入画布中，点击CONTENT下的onClick点击Execute a query选择Query1，之后即可通过点击画布中的‘查询’按钮来查询画布中的表，数据发生改变可以看到变化
在这里插入图片描述

例3：制作登陆界面
修改页面名字Edit name，将CONTAINER容器拖入画布中高度可以选择Fixed手动调节
在这里插入图片描述
容器内加入TEXT内输入文本
INPUT插入输入框
BUTTON插入按钮

点击第一个INPUT插入框CONTENT下选Data Type选择Email
Placeholder提示“例：邮箱”
Error Message返回报错：“例：邮箱格式错误”
点击第二个INPUT插入框CONTENT下选Data Type选择Password
在这里插入图片描述
创建API
在Queries/JS下点击New Blank API
在这里插入图片描述

例4:图表可视化搭建
将“CHART” 拖入画布中
在这里插入图片描述
访问图表官网：

https://www.fusioncharts.com

打开后点击Developers->FusionCharts Suite XT
API Reference->Attributes->Chart Attributes
在这里插入图片描述

https://www.fusioncharts.com/dev/chart-attributes/cylinder

复制框内的代码
在这里插入图片描述
将代码粘贴到AppSmith中的CHART下Custom Fusion Chart，并修改type类型
类型是网站中显示的JavaScript alias: cylinder的cylinder
在这里插入图片描述
在这里插入图片描述
修改图形属性:在这里插入图片描述
在FusionCharts中Cylinder Properties里复制cylFillColor : Color [+] 来修改图像颜色
在这里插入图片描述
颜色码对照表网址：

https://www.sioe.cn/yingyong/yanse-rgb-16/

复制好想要颜色的十六进制码再修改图像属性
在这里插入图片描述
将“BUTTON”和“TEXT”拖入画布修改名称和颜色
在这里插入图片描述
因为文本内要输出当前电量需要实时获取值，需要创建JS Object
Queries/JS–>New JS Object
编写JSObject设置变量power、init、usePower、charge
在这里插入图片描述
修改按钮属性点击onClick旁的JS将绑定创建好的JSobject 在（）内传参
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
修改图形属性，设置cylFillColor做判断如果小于20将变色
修改value值 将值设为变量实时获取
在这里插入图片描述
错误处理：
报错：docker: Error response from daemon: Conflict. The container name “/appsmith” is already in use by container “f7c17ba24d068f10e42b199f3624ac0d321b2f484e5763f6ac4cdc0e4456b138”. You have to remove (or renam
e) that container to be able to reuse that name.See ‘docker run --help’.

解决办法：
systemctl status docker 查看服务状态
docker ps -a 查看docker容器信息
docker restart dockerID或容器名 重启服务
如果需要删除则docker rm dockerID或容器名

房石阳明i
关注
appsmith安装手记:3.appsmith安装
清风弄影
01-28 1349
安装说明见：https://docs.appsmith.com/getting-started/setup/installation-guides/docker ，建议使用 Docker Compose 进行长期的 Appsmith 部署。bash: docker-compose: command not found... 【原因是docker-compose中间的横线导致）终于到了安装appsmith，这个也简单，真是越到后面越容易。http://IP 你就可以打开你安装好的appsmith了，
appsmith安装手记:1.Docker安装
清风弄影
01-28 1268
方式二：Install using the rpm repository,离线方式安装，我联网的就不折腾了。此时查看 /etc/yum.repos.d/docker-ce.repo，里面应该都变成了阿里云的镜像站点。不想写代码，找了一个不写代码的，看评价说Appsmith最好，那就试试它。执行这个脚本会添加 docker.repo 源并安装 Docker。这里肯定不成功，试了很多次都是这个结果，卡住了，网络不给力！以为低代码省事，没想到比写代码还费事，但愿后面省事，开干。我都安装成功了，懒得折腾方式三了。
docker安装appsmith
低码开发
06-23 1382
安装命令： docker run -d --name appsmith -p 80:80 -p 9001:9001 -v "$PWD/stacks:/appsmith-stacks" appsmith/appsmith-ce
appsmith安装手记:7.第一个Appsmith应用（中）
最新发布
清风弄影
08-11 1023
使用Appsmith搭建App,使用Jsobject实现登录和报表展现
appsmith安装手记:2.安装Docker compose
清风弄影
01-28 1078
在安装Docker 已经吃过了亏，所以已经修改成阿里云的镜像。跨国这个源问题，剩下的只要两个命令就可以搞定。
appsmith-docusaurus
05-05
网站 该网站是使用 （现代的静态网站生成器）构建的。 安装 yarn install 地方发展 yarn start 此命令将启动本地开发服务器并打开浏览器窗口。 大多数更改都可以实时反映出来，而无需重新启动服务器。 建造 yarn build 此命令将静态内容生成到build目录中，并且可以使用任何静态内容托管服务进行服务。 部署方式 GIT_USER=<Your> USE_SSH=true yarn deploy 如果您使用GitHub页面进行托管，则此命令是构建网站并推送至gh-pages分支的便捷方法。
appsmith安装手记:6.第一个Appsmith应用（上）
清风弄影
08-10 792
使用Appsmith创建一个应用，连接sqlserver数据库，实现数据增删查的功能，
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本地部署教程
qq_38041439的博客
11-17 6480
Appsmith 是一个用于构建内部应用程序的低代码开源框架。使用我们基于JavaScript的可视化开发平台，构建CRUD应用程序、仪表板、管理面板等的速度提高10倍。您可以使用我们预先构建的UI小部件，将它们连接到您的API和数据库，以构建动态应用程序和复杂的工作流程。
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 的中国化项目，是一个开源的、声明式的、可视化的前端低代码框架，可以用来制作 web 应用，微信小程序
06-02
PagePlug 是 Appsmith 的中国化项目。基于Appsmith做了整体性能的优化及汉化，也集合了特色表单解决方案Formily组件、图表解决方案Echarts组件、低代码小程序开发等，是面向研发使用的一个开源的、声明式的、可视化的、符合开发者直觉的前端低代码框架。PagePlug与市面上其他的低代码（轻流、宜搭、微搭、简道云、轻流、活字格等等）面向的使用人群不同，后者更倾向于非编程人员使用，让业务线人员自行构建应用程序。而PagePlug这款低代码产品是面向To D研发人群使用的，它旨在加速开发人员的开发过程，内部系统、工具的开发更简单。
Docker 下 Appsmith 安装配置
MR.骑士道
04-06 4290
Docker 下 Appsmith 安装配置
appsmith安装手记:5.Sql server数据库容器再安装(yml)
清风弄影
02-01 1064
但是现在冒出一个带有文件夹前缀的网络 mssql_appsmith_sqlserver里面有两个容器的IP地址，也就是说，我第一步的操作无效。#SA用户密码，密码长度必须至少为8个字符，并且包含以下四组中的三组字符：大写字母、小写字母、数字和符号。即使指定了网络也不行，所以只能那两个容器都包在一个yml文件中，理论应该是可以，只是我对Docker容器网络了解还不够。建文件不难，主要要细心，否则yml文件不是这行错就是那行错，如果出错，你可以用yaml在线校验工具验证一下。于是又学习了点知识，继续再战。
低代码开源框架Appsmith
热门推荐
wbsu2004的博客
10-11 1万+
什么是 Appsmith ？ Appsmith 是一个用于构建内部应用程序的低代码、开源框架。通过拖放组件来构建完全自定义的管理面板、CRUD 应用程序和工作流。使用 30 多个 React 组件来构建没有 HTML/CSS 的页面。构建速度提高 10 倍。 其工作原理????并不复杂 前期准备 因为需要数据来演示，所以老苏在 https://dev.mysql.com/doc/index-other.html 下载了 world database，解压出来的 SQL 脚本可以在 phpMyAdmin
使用AppSmith（PagePlug ）低代码平台快速构建小程序应用实践
发现问题，面对问题，分析问题，解决问题，总结问题
03-04 8704
Appsmith 是一个开源框架，可让您的团队更快、更协作地构建自定义内部应用程序，如仪表板、管理面板、CRUD 应用程序。PagePlug 是基于 AppSmith 打造的更适合中国开发者的开源前端低代码项目。无需侵入客户架构，直接连接数据源（API、DB），无需学习任何第三方概念，使用基础 js知识就可以快速生成多平台前端应用，包括 PC 端 web 应用、微信小程序等。PagePlug提供的几款模板参考。
推荐开源项目：Appsmith - 快速构建内部应用的利器
gitblog_00059的博客
05-08 591
推荐开源项目：Appsmith - 快速构建内部应用的利器 appsmith appsmithorg/appsmith: Appsmith 是一个开源的无代码开发平台，允许用户通过拖拽式界面构建企业级Web应用程序，无需编写任何后端代码，简化了软件开发流程。 项目...
appsmith创建应用
低码开发
04-16 961
添加数据源： 新建一个查询： 新建一个组件： UI这块的内容暂时不做介绍： 添加一个API的数据源：
最强开源低代码平台 - Appsmith 功能介绍与使用体验
weixin_39545889的博客
05-30 3713
码匠在充分参考了 Appsmith、Retool、JetAdmin 等多款海外知名低代码平台的设计理念同时，针对国内用户使用习惯做了大量优化，UI 界面设计更加适合国内场景，并整合了多款国内数据源，包括 飞书、企业微信、钉钉、阿里云 OSS 等，不仅如此，码匠还提供了国内业务场景下常见的租户管理、更加细粒度的权限控制、审计日志等功能，为您的企业信息安全保驾护航。......
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值