AppCube实践之标准页面开发丨【玩转应用魔方】
本博文主要记录AppCube平台提供的前端页面开发两种类型中的标准页面,包括标准页面的开发流程、常用的标准页面组件、常用的标准页面API以及如何自定义标准页面组件。
一、标准页面开发流程
标准页面的一般开发流程,主要包含页面布局、组件模型、数据绑定以及事件编排等。标准页面是通过平台预置的基础组件或模板快速拖拽式开发的一种方式,主要用于表格、表单类的后端管理页面,当不满足要求时也可以通过自定义组件进行扩展。基于模型驱动的标准页面开发流程图如下:
标准页面是基于平台预置的组件来完成的,当前平台预置的主要组件类型如下:
组件分类 | 说明 |
---|---|
布局 | 用于控制页面的布局,即将页面设计几行几列,如表单、表格、基础容器、分栏、模态框等 |
表单 | 用于信息的输入、选择等,表单中经常用到的组件,如输入框、下拉框、复选框等 |
基本 | 用于信息呈现的基础组件,如按钮、图片、标签、标题等 |
高级 | 一些扩展组件,如选项树、步骤条、走马灯等 |
标准页面是基于Vue框架,在完成拖拽式布局后需要定义相关模型进行跟布局组件的绑定,完成数据双向绑定,当前平台标准页面数据模型有以下四种:
模型分类 | 说明 |
---|---|
自定义 | 由用户自定义的前端模型,可以在模型树上快速创建自定义字段 |
对象 | 由后台对象模型映射创建,支持选择字段 |
服务 | 由后台服务的出入参数模型创建,分别生成inputParam和outputParam节点 |
事件 | 由后台事件的字段映射创建,并且支持websocket刷新模型数据 |
注:当组件本身的属性需要模型绑定时称为属性值绑定,即对该组件所有属性的动态设置。当某一属性被动态绑定时,以绑定值为准。
二、标准页面实践
1、进入AppCube开发环境
2、选中轻应用
3、创建空白轻应用
4、输入标签和名称点击创建
5、创建新的标准页面
6、添加后页面如下
7、可以对组件进行数据绑定,选中表单组件,进入数据绑定页面,点新增模型
8、输入模型名称,点击下一步
9、编辑字段属性
10、这里可以根据需要添加方法,不需要的话可以不添加
11、选中刚添加的模型属性,与表单组件进行绑定
12、给表单内部组件分别绑定上对应的属性即可
13、页面添加按钮,并给按钮绑定事件
14、添加事件页面右侧有很多内置动作,可以直接选择进行添加
15、至此,一个简单的AppCube标准页面就创建好了。
【玩转应用魔方】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/306271
- 点赞
- 收藏
- 关注作者
评论(0)