PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统

通过本次教程，能够先初步了解PagePlug低代码的开发流程，后端可以通过直接连接API（REST API、GraphQL API）等、数据源（MySQL、Oracle、MongoDB、PostgreSQL）等，将任何的后端数据都变成了 JS 变量，并随意转换、并配置到前端任意的视图组件，玩转PagePlug低代码平台

一、实战演示

1.1 创建新的应用

• 我们可以在工作区中，先创建一个桌面应用

• 修改下本次应用的名称，例如：运营部门用户管理系统

1.2 连接数据库

• 在左下角数据源中，点击左侧的+号，新增一个数据源，本次案例演示用的是PostgreSQL

​

• 填写相应的端口信息

主机地址:mockdb.internal.appsmith.com

端口:5432

数据库名称:users

用户名:users

密码:new-users-db-pass

填写完后，我们可以点右下角的测试，看下填写信息是否有误（无误的话会提示连接成功）

​数据库连接成功后，点击保存，数据源就创建成功了

1.3 新建查询

• 点击新建查询按钮内，我们选择Select选项，用默认的语句

• 点击运行，查询的内容生成出来了

• 我们可以在右侧选择通过什么组件展示数据，本次案例选择表格（Table）组件

数据内容就自动生成表格了

​

数据是怎么来的？

在右侧数据那里，我们会发现通过{{ }}的形式，将查询Query1的数据，连接到了表格Table中

​

1.4 搭建用户信息的查询窗口

• 我们可以在左侧组件栏中，拖入一个表单组件

• 我们可以在表单组件里面，将文本（Text1）组件，并改名为：用户详细信息

• 之后我们可以拖入一个输入框（input1）组件，用来获取表格内的信息

• 我们可以对input组件的布局做下调整（例如文本与输入框的位置、宽度大小等），并修改下文本的内容，例如修改为Name

• 我们可以在默认值那里，通过组件的方法，拿到表格当前的值，例如

{{Table1.selectedRow}}

//拿到Table组件当前行的值

那比如说，我想拿name的信息，就可以这样

{{Table1.selectedRow.name}}

• 同样的，比如说我们想拿到Email的值，可以拖入一个input组件，同理处理

{{Table1.selectedRow.email}}

• 再比如说，我们想拿到用户图片的信息，我们可以拖入一个图片（Image）组件，同样的方法

{{Table1.selectedRow.image}}

简单的查询页面就完成了

1.5 更改用户详细信息

• 我们可以对绑定的数据源，新建一个更新查询

​

• 可以将下面SQL的更新命令复制到编辑器里面

UPDATE users 
SET name = {{Input1.text}}, 
email = {{Input2.text}} 
WHERE id = {{Table1.selectedRow.id}}

注意：复制这段sql执行的时候，需要修改将{{}}内的组件名称与画布上的组件名称对应上

​回到画布上，我们对表单组件内的提交按钮设置事件

• 修改按钮的文本为：更新；在事件中，我们选择执行查询Query2

可以对执行成功和执行失败配置对应的动作事件，如成功后，执行消息提醒

• 如果想对修改后的表格内容展示出来，我们可以重新执行下Query1，点击右上角的JS

PagePlug处处皆可编写JS

{{Query2.run(() => {showAlert('成功','success'),Query1.run()} ,() => {})}}

​

10分钟的时间，其实就能快速完成一个用户系统的改查页面，快速满足业务的需要上线

1.6 演示拓展：通过数据库生成页面

这是PagePlug的特点，可以通过数据库直接生成页面

• 点击左下角的查看所有数据源，可以看到我们刚刚绑定的数据库Untitled Datasource 1，点击生成新页面

• 一个用低代码开发平台开发的用户查改系统就快速生成交付了

 二、案例体验

• 工程管理系统：优化数据源信息内容及审批流程

👩🏻‍💻线上体验地址：工程管理系统

• 跨境电商仓库管理系统案例：该系统允许用户管理多个仓库的产品和库存、以及跟踪供应商产品和管理供应商

👩🏻‍💻线上体验地址：跨境电商仓库系统

如果想了解PagePlug企业版/商业版的价格及更多功能，可放大下方图片查看

---

对PagePlug上一些功能使用讲解及介绍，可以点击下方文章查看

1、PagePlug开源低代码权限联动案例——控制组件可用、可见性

PagePlug开源低代码权限联动案例——控制组件可用、可见性_PagePlug的博客-CSDN博客面向研发使用开发的开源低代码平台，灵活开发、迭代简单的低代码平台https://blog.csdn.net/AppsmithCN/article/details/133856804

2、Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合

Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合_PagePlug的博客-CSDN博客Formily——更高效的表单解决方案与开源低代码Pageplug的融合https://blog.csdn.net/AppsmithCN/article/details/130765565?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/130765565?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/130765565?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/130765565?spm=1001.2014.3001.5501

3、国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发

国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发_低代码开发框架 开源_PagePlug的博客-CSDN博客面向研发使用、更懂国内企业的开源低代码_低代码开发框架 开源https://blog.csdn.net/AppsmithCN/article/details/131380008?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/131380008?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/131380008?spm=1001.2014.3001.5501

4、保姆级低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单

保姆级低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单_帆软对数据增删改查_PagePlug的博客-CSDN博客面向研发使用的低代码，比低代码区别很大的，相较于轻流、简道云、轻宜搭、微搭、帆软、活字格等等的低代码灵活性及维护更好_帆软对数据增删改查https://blog.csdn.net/AppsmithCN/article/details/131210730https://blog.csdn.net/AppsmithCN/article/details/1312107305、PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统

PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统_PagePlug的博客-CSDN博客PagePlug，面向研发使用的低代码平台，10分钟搭建一个用户改查系统https://blog.csdn.net/AppsmithCN/article/details/131790256https://blog.csdn.net/AppsmithCN/article/details/131790256

6、PagePlug低代码入门教程——与Websocket的集成

PagePlug低代码入门教程——与Websocket的集成_PagePlug的博客-CSDN博客通过PagePlug低代码与Websocket集成，实现前端页面的数据实时通信https://blog.csdn.net/AppsmithCN/article/details/132511483?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/132511483?spm=1001.2014.3001.5501

7、B站上也有一些案例教程，欢迎查看研究～～

​欢迎点赞、收藏、喜欢三连鼓励下哟 ，避免找不到文章啦