> For the complete documentation index, see [llms.txt](https://appsmithcns-organization.gitbook.io/pageplug-wen-dang/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appsmithcns-organization.gitbook.io/pageplug-wen-dang/gou-jian-ying-yong-cheng-xu.md).

# 构建应用程序

在本快速入门指南中，您将学习：

* 创建一个新的应用程序
* 连接到数据库
* 通过将小部件拖放到画布上来构建 UI
* 编写查询以从数据库中获取数据
* 将数据绑定到小部件
* 部署和共享应用程序

## 先决条件

在开始之前，您需要在 [pageplug 云端环境](<https://lowcode.methodot.com/ >)上创建一个帐户，或者也可以在本地或您选择的服务器实例上自行部署 pageplug。

## 创建新应用程序

* 创建新的 [pageplug 账号](https://lowcode.methodot.com/)时，首先会在新建一个**应用组。**
* 在**应用组**下创建应用会有两种应用类型，**移动应用**和**桌面应用。**

<figure><img src="https://3588285254-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBBxZUv0aTEls0dwBQ7O4%2Fuploads%2FIOt1t9jWk1uNKkE8AB2W%2F%E6%96%87%E6%A1%A31.jpg?alt=media&amp;token=56a86e5b-e540-4d2c-aa89-c814189a010b" alt=""><figcaption><p>在 pageplug 上创建应用程序</p></figcaption></figure>

* 选择一种类型应用后，会出现**采用空白页面编辑**或**使用数据表自动生成页面**两个选项
* 使用空白页面拖放构建选项以从头开始并创建您的自定义 UI
* "**Page1**"是应用程序的默认页面，可点击"**Page1**"旁的设置按钮修改应用及页面的信息

<figure><img src="https://3588285254-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBBxZUv0aTEls0dwBQ7O4%2Fuploads%2FHMzANPStdnDPSwC46Ucy%2F%E6%96%87%E6%A1%A32.jpg?alt=media&amp;token=c2035c73-4ee1-4c0f-a261-20379b1f02ad" alt=""><figcaption><p>修改 pageplug 应用程序及页面的信息</p></figcaption></figure>

## 连接数据库

我们将使用 pageplug 上名为 "users" 的模拟 PostgreSQL 数据库。

* 在"**资源管理**"选项卡上，单击"**数据源**"旁边的 + 号，在"**样例数据库**"下，选择 "**users**"。
* &#x20;"**users**"数据库将添加到"**资源管理**"选项卡里的"**数据源**"下。

<figure><img src="https://3588285254-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBBxZUv0aTEls0dwBQ7O4%2Fuploads%2FRZvGGovQtkDIbUFBgr19%2F%E6%96%87%E6%A1%A33.jpg?alt=media&amp;token=6bd547b5-961f-4b88-8ae6-6281d719b357" alt=""><figcaption><p>创建新数据源</p></figcaption></figure>

## 构建用户界面

* 导航到页面下的 "**Page1**" ，拖放 <mark style="color:orange;">表格</mark> 小部件到画布上，点击表格右上角编辑组件属性，将表格重新命名为 "**usersTable**" 。
* 拖放 <mark style="color:orange;">容器</mark> 到画布右侧，让我们添加标题为 "**用户信息**" 的标签和一些小部件来显示表上所选中的用户详细信息。
* 拖入 <mark style="color:orange;">输入框</mark> 小部件，分别设置为**名称、邮件、电话**的输入框，日期选用 <mark style="color:orange;">日期选择器</mark> 小部件，图像选用 <mark style="color:orange;">图片</mark> 小部件，最后是 <mark style="color:orange;">按钮</mark> 小部件将标签更改为 "更新"

<figure><img src="https://3588285254-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBBxZUv0aTEls0dwBQ7O4%2Fuploads%2FFPOauZlbQtZ2mCmmhsPr%2F%E6%96%87%E6%A1%A34.jpg?alt=media&amp;token=264ac61f-244d-4bd3-964a-8660350e8694" alt=""><figcaption><p>通过在画布上布置小部件来构建UI</p></figcaption></figure>

## 创建查询并将数据绑定到小组件

* 在"**资源管理**"选项卡上，导航到"**数据源**"下的数据库"**users**"。
* 单击数据源旁边的"**+新建查询**"按钮。

<figure><img src="https://3588285254-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBBxZUv0aTEls0dwBQ7O4%2Fuploads%2F9TaElGX7WfBSye5D9y1C%2F%E6%96%87%E6%A1%A35.jpg?alt=media&amp;token=a05467a7-59ed-453b-9025-dc38664c14ac" alt=""><figcaption><p>在数据源上创建新查询</p></figcaption></figure>

* 将查询重命名为"getUsers"。
* 编写一下查询以从数据库中的"users"表中提取十条记录。

```
SELECT * FROM users ORDER BY id LIMIT 10;
```

<figure><img src="https://3588285254-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBBxZUv0aTEls0dwBQ7O4%2Fuploads%2FuulWMCtFUatK2iOFHjhZ%2F%E6%96%87%E6%A1%A36.jpg?alt=media&amp;token=4b366cb0-bd19-43ca-bab7-e2235980929a" alt=""><figcaption><p>编写查询代码获取数据</p></figcaption></figure>

* 单击右上角的"**运行**"按钮，确认查询返回数据。
* 导航到"**Page1**"画布，悬停在名称为"**usersTable**"的表格上，单击右上角属性按钮以打开属性窗口，在属性的数据窗口里写入 JS 代码块 `{{getUsers.data}}`，用于在表格中显示"**getUsers**"数据源查询出的数据结果。

{% hint style="info" %}
`{{mustache}}`模块用于在小部件内查询和编写 JS
{% endhint %}

<figure><img src="https://3588285254-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBBxZUv0aTEls0dwBQ7O4%2Fuploads%2FsqxL9yQGmWLbtSMtcqwM%2F%E6%96%87%E6%A1%A37.jpg?alt=media&amp;token=572a4877-4db9-4828-9157-18c2dfd881aa" alt=""><figcaption><p><code>将查询到的数据绑定到小部件中</code></p></figcaption></figure>

* 同样，要显示表中所选中的信息，请阅读下文将相应的数据。
* 需要将小部件对应 Value 输入到小部件属性里默认值下方的框内。

| 组件    | 名称     | Value                                                     |
| ----- | ------ | --------------------------------------------------------- |
| 图片    | -      | <p><code>{{usersTable.selectedRow\.image}}</code><br></p> |
| 输入框   | 名称输入   | <p><code>{{usersTable.selectedRow\.name}}</code><br></p>  |
| 输入框   | 电子邮件输入 | <p><code>{{usersTable.selectedRow\.email}}</code><br></p> |
| 日期选择器 | 日期输入   | <p><code>{{usersTable.selectedRow\.dob}}</code><br></p>   |
| 输入框   | 电话输入   | <p><code>{{usersTable.selectedRow\.phone}}</code><br></p> |

{% hint style="info" %}
在设置日期选择器小部件需在默认日期下切换 JS 模式输入表格上的值以绑定数据&#x20;
{% endhint %}

* 在"**users**"数据库上创建另一个查询，并将其重命名为"**updateUsers**"，使用以下 update 命令将小部件上任何已修改的数据写回数据库。

```
UPDATE users SET name = '{{nameInput.text}}', email = '{{emailInput.text}}', dob = '{{dobInput.selectedDate}}', phone = '{{phoneInput.text}}' WHERE id = {{usersTable.selectedRow.id}} 
```

* 在"更新"按钮的属性窗口中，在 <mark style="color:orange;">onClick</mark> 选择执行查询 <mark style="color:orange;">updateUsers</mark>，在下一阶的 <mark style="color:orange;">onSuccess</mark> 里选择执行查询 <mark style="color:orange;">getUsers</mark>。

<figure><img src="https://3588285254-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBBxZUv0aTEls0dwBQ7O4%2Fuploads%2F03RC6br4L0azH2a4nQuj%2F%E6%96%87%E6%A1%A38.jpg?alt=media&amp;token=2c39b8c8-59fc-4fca-a8a9-1edd3f6271a6" alt=""><figcaption><p>将查询执行绑定到按钮的 onClick 事件上</p></figcaption></figure>

* 你可以通过修改表格中用户的电话号码来测试"**更新**"按钮。

> 你已完成第一个应用，该应用可以显示数据库中的信息并更新数据，所有这些操作只需要几分钟即可完成。

## 发布和共享

* 单击 pageplug 编辑器右上角的"**发布应用**"按钮，将应用发布可进行查看以及测试。
* 发布后，你可以与用户共享你的应用程序，单击 pageplug 编辑器右上角的"**共享应用**"按钮
  * 通过指定用户的电子邮件 ID 邀请
    * 为用户选择适当的角色
    * 与用户共享应用程序的 URL

{% hint style="info" %}
**恭喜！**&#x4F60;已完成 pageplug 快速入门教程。
{% endhint %}