检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
登录页面设计开发示例 业务场景及设计流程说明 应用可以由一个或多个页面组成一个完整的业务系统。 本入门为创建一个简单的登录页面，帮助您快速上手AstroPro前端应用开发。登录页面中包括图片、文本、输入框和按钮四个基础组件，且用到Box布局容器组件，便于整体排版布局。
页面模板管理 集中管理页面模板，支持查看和删除操作，保持模板库的整洁与有序。 约束与限制 模板管理为Astro Pro专业版及企业版功能，如果您需要使用此功能，请升级Astro Pro实例版本。 查看页面模板 参考登录AstroPro界面中操作，登录AstroPro界面。
单击应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，进入“页面管理”页面。 鼠标悬浮在待复制的页面名称上，将显示设置按钮。 单击，进入页面设置页面。 单击。 图8 删除页面 在弹框中，单击“确定”，完成页面删除。
添加页面变量 使用说明 页面状态变量仅适用于当前页面。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开状态管理页面。
发布页面模板 使用说明 页面设计完成后，您可以发布为页面模板。当您的业务与模板中的场景相似度较高时，可以直接使用该模板创建页面，并在模板的基础上继续改造页面。 前提条件 已完成页面设计并保存页面。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。
使用模板创建页面 使用已创建的模板，一键生成页面，轻松实现个性化网站构建，节省时间，提高效率。 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。
设计前端应用流程 前端应用可以由一个或多个页面组成一个完整的业务系统。在AstroPro中，通过创建应用、（可选）创建文件夹、创建页面、页面设计和生成应用代码五步，即可快速完成前端应用设计，具体流程如图1所示。
初识应用设计器 AstroPro设计器可以分为顶部工具栏、左侧插件栏、中间画布区和右侧属性设置面板四个主要界面模块。 图1 AstroPRO设计器 顶部工具栏 设计器顶部的工具栏从左到右包括： ：撤销上一步的操作。 ：恢复上次撤销的内容。 ：保存当前页面数据。 ：发布页面模板。
new_name4` varchar(200) NOT NULL, `new_name5` varchar(200) NOT NULL, PRIMARY KEY (`id`) ) COMMENT = 'primaryKeyType("SNOWFLAKE")'; 导入DDL 在业务设计页面
业务场景及设计流程说明 应用可以由一个或多个页面组成一个完整的业务系统。 本入门为创建一个简单的登录页面，帮助您快速上手AstroPro前端应用开发。登录页面中包括图片、文本、输入框和按钮四个基础组件，且用到Box布局容器组件，便于整体排版布局。
实现上述业务逻辑，需要进行如下设计： 在业务设计页面，拖拽所需的对象到设计区，并修改对象名称。 AstroPro提供了BO、Abstract BO和Value Object三种类型的对象，请根据业务需求进行选择。
前提条件 根据业务模型，完成swagger文件设计，swagger标签使用可参考swagger标签使用指南 导入swagger文件 在业务设计页面，单击“导入swagger”。 选择已编辑好的swagger文件。
单击待编辑应用模块内的“开发应用”，进入设计器。 在左侧插件栏中，单击，展开JS页面。 在JS页面中添加getA方法。 在左侧插件栏中，单击，进入“页面管理”页面。 鼠标悬浮到当前页面名称上，将显示操作按钮，单击，进入页面设置页面。 单击“添加页面生命周期”，选择setup。
如果您是工作空间管理员，可单击任意项目后的“配置”，进行审批。 图9 单击对应项目后的审批 在我的待办中，单击“操作”列的“审批”，进入审批页面。 图10 单击审批图标 选择审批结果，输入审批意见，单击“确定”。
图8 单击任意一个配置按钮 在我的待办中，单击“操作”列的“审批”，进入审批页面。 图9 单击审批 选择审批结果，输入审批意见，单击“确定”。 图10 审批角色 审批后，在“工作空间角色管理”页签中，可查看到用户申请角色中用户已具有workspace_admin角色。
图1 聚合和一对多的差异 关系属性设置 在业务设计页面，拖入两个BO业务对象（命名为Bo1、Bo2）单击“relations”中的“聚合”，为对象建立聚合关系。选中已创建的关系，在右侧页面即可设置关系属性，如图2所示。 图2 聚合 关系名称：设置聚合关系的名称。
生成业务代码 使用说明 页面设计完成后，您可以根据配置生成应用的基本代码。代码生成后，会下载至本地，供您使用。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。
国际化资源管理 使用说明 同一个项目，可能需要同时支持多个语言，设计器提供了中英文切换，能够一键切换语言，提升开发效率与开发体验。 国际化是应用级别的，在任何一个页面都可以访问。 注意的是国际化只针对画布中的项目，不针对设计器本身。
属性说明 在业务设计页面，从“business”中，拖拽“BO”对象至画布空白区域。选中对象，在右侧页面设置对象属性，如图1所示。 图1 BO 对象名称：设置对象的名称，必须使用大驼峰格式，不允许存在连续的大写字母。 中文名：设置BO对象的中文名称。
图2 BO中的字段 图3 联合主键 属性说明 在业务设计页面，从“business”中，拖拽“Value Object”对象至画布空白区域。选中对象，在右侧页面设置对象属性，如图4所示。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
