在阿里云快速启动Appsmith搭建前端页面

简介: 本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。

本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。

什么是Appsmith

Appsmith是一个开源的低代码开发平台,它使得开发者能够快速地构建内部工具、业务管理系统、CRM系统等。Appsmith通过提供一系列预建的UI组件(如表格、图表、表单等),以及对数据库、API调用的直接支持,简化了开发过程。开发者可以使用这些组件和服务来构建复杂的业务应用,而无需从头开始编写大量代码。

截止2024年11月15日,GitHub Star数已达到34.7K,可见其火爆程度。

更多信息,请查看官网

Appsmith有什么优势

  • 开源和自托管: Appsmith可以在自己的服务器上托管,这对于需要完全控制数据和应用环境的企业来说非常重要。
  • 低代码开发: 通过拖放组件和简单的逻辑配置,即使是非专业开发者也可以构建应用。
  • 支持多种数据源: 可以连接到各种数据库(如PostgreSQL、MySQL、MongoDB等)和API服务,使得数据集成变得简单。
  • 自定义JavaScript代码: 虽然Appsmith是一个低代码平台,但它还允许开发者在需要时编写自定义JavaScript代码,以增强应用的功能或实现特定的业务逻辑。
  • 丰富的UI组件库: 提供了丰富的UI组件,可以快速构建用户界面,并通过配置来满足特定的需求。
  • 安全性和权限管理: Appsmith提供了内置的安全特性和细粒度的权限管理,帮助企业保护数据并确保只有授权用户才能访问应用。

快速入门Appsmith

Appsmith页面如下:

整个界面分左中右三部分:

  • 左侧:有项目的页面(pages);部件(widgets),例如按钮、表格;查询(queries),例如刷新表格数据、数据库相关(datasources)
  • 中央:项目的ui
  • 右侧:配置,例如配置按钮的颜色、显示文字、事件等

如何制作一个hello world按钮

需求:点击按钮,弹出信息

做法是:

  • 左侧拖拽 BUTTON 部件到舞台中央
  • 点击舞台中央的按钮
  • 在右侧进行配置,例如修改Label、添加事件(onClick)等

点击舞台中央的按钮,或右上角的Deploy(部署)进行测试。结果如下图所示:

更多信息,可参考文档

如何部署Appsmith

前提条件

  • 已开通阿里云账号
  • 确保账户余额超过100元

重要

使用阿里云资源,需要收费,请仔细阅读阿里云控制台的订单信息,然后再进行下一步操作。

操作步骤

  1. 访问计算巢Appsmith社区版部署链接,按提示填写部署参数,确认参数后点击下一步:确认订单

  1. 确认订单完成后同意服务协议并点击立即创建 进入部署阶段。

  1. 等待部署完成后就可以开始使用服务,进入服务实例详情点击立即使用链接。

  1. 输入基本信息,即可开始使用Appsmith。

了解更多

本文通过计算巢服务完成了Appsmith的快速部署,什么是计算巢服务?

计算巢是一个开放给企业应用服务商、IT集成服务商、交付服务商、管理服务提供商(以上都统称为服务商)和最终用户的服务管理PaaS平台。服务商能通过计算巢服务更好地在阿里云上部署服务、交付服务及管理服务。最终用户能通过计算巢管理在阿里云上订阅的各类服务商提供的服务。计算巢为服务商和用户提供了更高效、便捷、安全的服务使用体验。点击计算巢服务官方文档了解更多。

参考资料

计算巢服务官方文档

更多信息,请访问计算巢官网

相关实践学习
2048小游戏
基于计算巢&ECS云服务器快速部署,带您畅玩2048小游戏。
相关文章
|
15天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
7 1
.自定义认证前端页面
|
1月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
38 18
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
85 2
前端JS读取文件内容并展示到页面上
|
1月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
29 1
|
1月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
21 1
|
3月前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
70 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
2月前
|
前端开发 JavaScript
前端基础(一)_前端页面构成
本文介绍了前端页面的基本构成,包括HTML(负责页面的结构和语义)、CSS(负责页面的样式和表现)和JavaScript(负责页面的行为和动态效果)。文章通过示例代码展示了如何使用这三种技术来创建一个简单的网页,并解释了HTML文档的结构和语法。
36 0
|
3月前
|
监控 前端开发 数据挖掘
微店商品详情数据接口:接入淘宝代购系统的连接桥梁,展示前端页面
微店API让开发者获取商品详尽信息,如名称、价格等。作为淘宝代购系统的桥梁,它支持数据同步、商品及订单管理。通过多平台API,实现实时商品数据抓取,提供一致购物流程。此外,还能进行价格比较、库存监控,提升用户交互体验,并辅助数据分析以优化采购策略。开发者需按规范对接API,并参考官方文档获取最新信息。
|
3月前
|
开发框架 前端开发 API
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
133 2
下一篇
无影云桌面