# 标准页面
相对于高级页面，标准页面主要用于对前端页面的样式要求相对简单的场景，这种页面一般只是针对业务数据的增、删、改、查等基础功能。
标准页面主要是通过对前端页面组件的组合编排，以及为组件配置属性、关联事件实现业务功能的，在[组装"编辑设备"页面](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_07_1028.html)章节，则会详细介绍组件、组件属性以及事件之间的调用及相关配置。
标准页面的编辑环境也称为UI Builder，UI Builder是图形化、无码化的前端页面在线开发工具。借助标准页面，您只需要了解基本前端编码知识，通过将页面组件拖拽至"设计视图"的画布中，再进行必要的属性、事件配置，就可以完成页面的开发。
#### 设计视图
标准页面中预置了多种组件，在开发页面时，可以直接从左侧组件区域，将这些组件拖拽到右侧"页面内容"中。
图1标准页面编辑界面（UI Builder）   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911673.png "点击放大")
**配置组件属性**
- 了解组件使用场景及配置方法 在配置使用组件前，可以将光标放在每个组件上后，组件右上角将显示帮助信息的问号图标。单击问号图标，即可进入该组件介绍页面，了解并学习华为云Astro轻应用预置前端组件的使用场景及参数配置方法。
  图2组件帮助信息入口   
  ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835154.png) 
- 选中组件，查看组件属性
  在"设计视图"中，选中一个页面组件，可以在右侧"属性"页签，设置该组件的绑定数据、样式等属性，如[图3]所示。在设计视图中选中一个文本框，可以在右侧修改这个文本框的标签名、样式、绑定的数据模型等。
  图3设置组件的属性   
  ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002092709001.png "点击放大") 
- 页面及组件的事件代码
  在"设计视图"中，选中任意组件，可以在右侧"事件"页签，设置组件的关联事件。例如，可以选择一个"按钮"，然后在按钮的"点击"事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。
  图4编辑组件的关联事件   
  ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071961.png "点击放大") 
- 利用组件导航，快速选中组件 当选中某个组件时，页面上方会在组件导航上显示它的html标签层级。因此，在组件数量比较多，位置较为紧密时，可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，在上图的组件导航中单击"页面"，可以直接选中页面上的最外层页面组件。
  
- 利用组件树，快速选中组件 在组件数量比较多，位置较为紧密时，也可以单击页面右下角的"组件树"，展开组件树，在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。
  图5利用组件树快速选中组件   
  ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991401.png "点击放大") 
 
#### 模型视图
标准页面是通过数据模型驱动的，页面所有的逻辑都是围绕数据模型展开的。在将模型与前台页面组件或者后台逻辑绑定后，开发者只需要关注模型数据的实例化和处理，不需要关注页面的渲染和展示。
在页面底部，单击"模型视图"，即可从"设计视图"切换到"模型视图"，在模型视图下，可以查看、编辑以及管理数据模型，如[图6]所示。
图6模型视图   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992782.png "点击放大")
**模型定义**
标准页面支持[表1]中四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前端组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现一定的逻辑。
 表1模型说明 
| 模型分类  | 模型说明                                    | 模型参数的定义                                      | 模型方法的定义                              | API调用方法                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
|:---|:---|:---|:---|:---|
| 自定义模型 | 自定义模型是由开发者自由定义的模型。                      | 参数由开发者自定义，可以添加子节点。                           | 开发者自定义方法。                            | *$model.ref("modelName").actionName();*                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| 对象模型  | 对象模型是直接与Object对象表映射生成的。                 | 系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。         | 平台自动生成查询、保存、删除和统计4个方法。               | - *$model.ref("modelName").query(param);*  - *$model.ref("modelName").save();*  - *$model.ref("modelName").delete();*  - *$model.ref("modelName").count();*   |
| 服务模型  | 服务模型是与后台服务映射生成的，当前支持与服务编排或Script映射。     | 参数根据后台服务的入参、出参映射生成为inputParam和outputParam节点。 | 平台自动生成了run方法 ，用于执行模型关联的服务编排或者Script。 | *$model.ref("modelName").run();*                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| 事件模型  | 事件模型是与后台事件的字段映射生成的，并且支持websocket刷新模型数据。 | 参数根据后台事件的字段映射生成。                             | 平台自动生成了run方法 ，用于执行模型关联的服务编排或者Script。 | *$model.ref("modelName").run();*                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
   
除了在模型中定义的方法，华为云Astro轻应用还提供了如下标准API：
- 获取模型数据：*$model.ref("modelName").getData();*
- 设置模型数据：*$model.ref("modelName").setData();*
- 设置模型字段值：*$model.ref("modelName").setValue(key,value);*
**模型绑定**
模型与前端组件的绑定分为值绑定和属性绑定，绑定会在指定组件上创建双向数据绑定。
- 典型的值绑定场景有：表单、表格、列表视图对应的model绑定，以及输入框、下拉框等基础组件对应的value绑定，类似Vue的v-model。
- 典型的属性绑定场景有：下拉框的选项值、步骤条的步骤值等，类似Vue的v-bind。
如[图7]所示的例子中，实现了表格DataGrid组件与值的绑定。
图7数据绑定   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991409.png "点击放大")