AppSmith(安装与练习4套)

news2024/11/26 0:27:45

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或容器名

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/480317.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Linux】第二站：Linux基本指令（一）

【Linux】第二站：Linux基本指令（一）

文章目录 一、操作系统OS概念1.OS是什么？2.为什么要有OS?1.一个好的操作系统，他的衡量指标是什么？2.操作系统的核心工作 3.理解我们在计算机上的操作4.Linux和Windows的特点 二、Linux基本指令1. 指令概述2.ls指令1> ls -l2> ls -a3&g…
阅读更多...
ChatGPT其实并不想让开发人员做这5件事情

ChatGPT其实并不想让开发人员做这5件事情

前言 ChatGPT已经火爆了快半年了吧，紧接着国内也开始推出了各种仿制品，我甚至一度怀疑，如果人家没有推出ChatGPT，这些仿制品会不会出现。而很多人也嗨皮得不行，利用各种方法开始科学上网，用ChatGPT做各种觉…
阅读更多...
不得不说的行为型模式-解释器模式

不得不说的行为型模式-解释器模式

解释器模式： 解释器模式（Interpreter Pattern）是一种行为型设计模式，它定义了一种语言，用于解释执行特定的操作，例如正则表达式、查询语言、数学表达式等。该模式通过定义一个解释器来解释语言中的表达式…
阅读更多...
分治与减治算法实验：题目6 淘汰赛冠军问题

分治与减治算法实验：题目6 淘汰赛冠军问题

目录 前言 实验内容 实验流程 实验分析 实验过程 流程演示 写出伪代码 实验代码 运行结果 改进算法 总结 前言 淘汰赛冠军问题是一个经典的算法设计与分析的问题，它要求我们在给定的n个参赛者中，通过一系列的比赛，找出最终的冠军…
阅读更多...
nginx负载均衡+RabbitMq集群及镜像队列（2）

nginx负载均衡+RabbitMq集群及镜像队列（2）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、nginx是什么？二、搭建步骤1.软件和环境2.安装nginx3.负载均衡配置nginx.conf4.应用程序配置 总结 前言 提示：这里可以添加本文要记…
阅读更多...
Linux套接字编程-3

Linux套接字编程-3

在之前的套接字编程内容中，我们讲述完了UDP和TCP的主要内容，但是对于TCP通信中具体的实现还存在一些问题没有解决，所以我们本篇博客将对进行分析和解决。 目录 1.引入 2.多进程 3.多线程 1.引入 在上一篇博客中，当我们使用T…
阅读更多...
sed进阶之模式替换

sed进阶之模式替换

shell脚本编程系列 &符号可以代表替换命令中的匹配模式，不管模式匹配到了什么样的文本，都可以使用&符号代表这些内容。这样就能处理匹配模式的任何单词了。 echo "The cat sleeps in his hat." | sed s/.at/"&"/g&…
阅读更多...
告别低效繁琐的Prometheus告警管理，Nightingale助你快速响应故障！

告别低效繁琐的Prometheus告警管理，Nightingale助你快速响应故障！

Prometheus的告警规则、记录规则都是采用配置文件管理，适合奉行Infrastructure as Code的公司或团队内部使用。但如果要把监控能力开放给全公司，就要支持协同操作的 UI，让各个团队互不干扰的同时共享成果。 开源方案： Grafana 擅…
阅读更多...
No.053＜软考＞《（高项）备考大全》【冲刺7】《软考之 119个工具 （5）》

No.053＜软考＞《（高项）备考大全》【冲刺7】《软考之 119个工具 （5）》

《软考之 119个工具 （5）》 84.文档审查:85.信息收集技术:86.核对表分析:87.假设分析:88.图解技术:89.SWOT 分析:90.风险概率和影响评估:91.概率和影响矩阵(包含在风险管理计划中):92.风险数据质量评估:93.风险分类(包含在风险管理计划中):94.风险紧迫性评…
阅读更多...
快速多关键字统计

快速多关键字统计

实例需求：在每个章节中统计关键字（“√”, “”, “〇”, “空缺”）的个数，B列中的章节编号作为章节划分的标识，例如1.1.1 ~ 1.1.5为第1.1章节，对应工作表的12 ~ 16行，其中黄色列为需要统计的数…
阅读更多...
【软考数据库】第五章 计算机网络

【软考数据库】第五章 计算机网络

目录 5.1 网络功能和分类 5.2 OSI七层模型 5.3 TCP/IP协议 5.4 传输介质 5.5 通信方式和交换方式 5.6 IP地址 5.7 IPv6 5.8 网络规划和设计 5.9 其他考点补充 5.10 网络安全技术 5.11 网络安全协议 前言： 笔记来自《文老师软考数据库》教材精讲&#xff…
阅读更多...
从张鑫旭的demo中，我学到了图像拉伸的原理

从张鑫旭的demo中，我学到了图像拉伸的原理

文章收录： 个人网址：http://linglan01.cn/Github仓库：https://github.com/CatsAndMice/blog/issues 产品经理又有新需求啦，其中有一个图片上传后用户拉伸图像宽高的功能，评估后因要卡上线时间来不及砍掉了。保不准下一…
阅读更多...
Java 基础进阶篇（四）—— 抽象类与模板方法设计模式

Java 基础进阶篇（四）—— 抽象类与模板方法设计模式

文章目录 一、抽象类、抽象方法概述二、抽象类的特征三、模板方法设计模式3.1使用场景3.2 实现步骤3.3 写作文案例 补充：final 和 abstract 是什么关系? 一、抽象类、抽象方法概述 在 Java 中 abstract 是抽象的意思，可以修饰类、成员方法。 abstract …
阅读更多...
【LeetCode股票买卖系列:122. 买卖股票的最佳时机 II | 贪心 | 暴力递归=＞记忆化搜索=＞动态规划】

【LeetCode股票买卖系列:122. 买卖股票的最佳时机 II | 贪心 | 暴力递归=＞记忆化搜索=＞动态规划】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持，因为它具有很高的价值，算法就是这样✨ 🌲 作者简介：硕风和炜，…
阅读更多...
基于 GS232 搭建的 SoC_up 说明

基于 GS232 搭建的 SoC_up 说明

1.1 GS232 开源版本简介 GS232 开源版本不包含 DSP、浮点部件等。 TLB 大小为 32 项。 指令和数据 Cache 为 4 路组相连，每路大小为 4KB，Cache 行大小为 32 bytes。 对外接口为 32 位 AXI 接口。 1.2 1，soc_up结构 SoC_up 如上图所示。开源 GS232 对外有一个 AXI 接口，连…
阅读更多...
「Codeforces」771-div2 E. Colorful Operations

「Codeforces」771-div2 E. Colorful Operations

E. Colorful Operations https://codeforces.com/contest/1638/problem/E 题目描述 给你一个数组，默认初始元素为 0 ，颜色为 1，有三种操作： Color l r c：将 [l, r] 区间内的颜色修改为 cAdd c x：将所有颜…
阅读更多...
Human Pose as Compositional Tokens 阅读笔记

Human Pose as Compositional Tokens 阅读笔记

人体姿态作为合成 token —— CVPR2023 论文链接 代码链接 摘要： 人体姿态常由身体关节的坐标向量或其热图embedding表示。虽然数据易于处理，但由于身体关节间缺乏依赖建模，即使是不现实的姿态也被接受。本文提出了一种结构化表示&#xff1…
阅读更多...
el-form-renderer 使用指南

el-form-renderer 使用指南

目录 前言 起步 使用 update-form && getFormValue 表单项动态显示或隐藏(hidden) 表单数据联动(on) 输入/输出格式化(inputFormat/outputFormat) set-options el-form-renderer 实践案例 案例一 案例二 自定义组件接入指南 前言 el-form-renderer是基于e…
阅读更多...
Starting Windows PowerShell (启动 Windows PowerShell)

Starting Windows PowerShell (启动 Windows PowerShell)

Starting Windows PowerShell (启动 Windows PowerShell) Windows PowerShell is a scripting engine .DLL that’s embedded into multiple hosts. The most common hosts you’ll start are the interactive command-line powershell.exe and the Interactive Scripting Envi…
阅读更多...
【Java笔试强训 26】

【Java笔试强训 26】

🎉🎉🎉点进来你就是我的人了博主主页：🙈🙈🙈戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔🤺🤺🤺 目录 一、选择题 二、编程题 🔥跳台阶扩…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023