检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在左侧插件栏中，单击，展开资源管理页面。 单击，进入添加工具类页面。 工具类型选择“function”。 输入工具类的名称，并编写函数代码。 图1 添加function工具类 单击“保存”，完成function工具类添加。 添加npm工具类 对于一些简单的公共函数来说，直接添加function工具类会很方便，但是对于
录页面中包括图片、文本、输入框和按钮四个基础组件，且用到Box布局容器组件，便于整体排版布局。在AstroPro中，构建一个上述登录页面的流程，如图图1所示。 图1 应用页面开发 前提条件 已将页面设计所需要的图片上传到已创建的OBS桶中备用，并获取存储路径。上传图片，请参考上传对象。
使用工具类方法 添加工具类 npm utils使用示例 function utils使用示例 父主题： 前端应用管理
单击，进入添加工具类页面。 工具类型选择“function”。 输入工具类的名称，并编写函数代码。 function isNil(value) { return value == null } 图1 添加function工具类 单击“保存”，完成function工具类添加。 在JS面板的函数中使用function
在物料资产包中选择按钮组件，并拖拽至中心画布中。 添加npm utils 在左侧插件栏中，单击，展开资源管理页面。 单击，进入添加工具类页面。 工具类型选择“npm”。 参考表1配置工具类的参数。 表1 参数说明 参数 示例 名称 Loading 包名 @opentiny/vue 导出名称 Loading
应用可以由一个或多个页面组成一个完整的业务系统。 本入门为创建一个简单的登录页面，帮助您快速上手AstroPro前端应用开发。登录页面中包括图片、文本、输入框和按钮四个基础组件，且用到Box布局容器组件，便于整体排版布局。在AstroPro中，构建一个上述登录页面的流程，如图图1所示。
初识应用设计器 AstroPro设计器可以分为顶部工具栏、左侧插件栏、中间画布区和右侧属性设置面板四个主要界面模块。 图1 AstroPRO设计器 顶部工具栏 设计器顶部的工具栏从左到右包括： ：撤销上一步的操作。 ：恢复上次撤销的内容。 ：保存当前页面数据。 ：发布页面模板。 ：清空当前画布内容。
设置组件样式 图8 设置组件高级属性 步骤五：生成代码 根据配置的页面设计，生成应用的基本代码。代码生成后，会下载至本地，供您使用。 单击顶部工具栏的“下载源码”按钮。 选择下载路径。 选择生成到本地的文件。 图9 选择生成文件 单击“确定”，代码将下载至本地路径。 父主题： 前端应用管理
# 配置类（必填项） |-- utils # 工具类（必填项） |-- exception # 异常类（必填项） |--
用户预先定义好的数据传输对象（可选项） |-- utils # 工具类（必填项） |-- resources # 资源目录结构 |--
这样，其他服务可以通过这些客户端库以统一和简化的方式调用已有服务的接口，无需关心服务的具体实现细节。生成的客户端库可以作为服务间通信的标准工具，减少了重复的代码编写，提高了开发效率和代码的可重用性。 约束与限制 配置连接器为Astro Pro企业版功能，如果您需要使用此功能，请升级Astro
ents两个子文件夹。 assets：作为存放项目特定资源的地方。 components：用来存放应用程序的组件代码，如自定义的类、服务、工具类等。 模板文件介绍 所有的自定义组件都在src/components文件夹里面内开发，模板内提供了两个预置模板componentA和co
单击，进入页面设置页面。 单击“添加页面生命周期”，选择setup。 在setup函数使用getA()，单击“保存”。 出码结果 在顶部工具栏单击“下载源码”，查看出码结果。 <template> <div> <span>{{ state.testValue }}
设计前端应用流程 前端开发视频指导 管理前端应用 页面管理 使用组件 配置属性设置 配置样式设置 配置高级设置 查看大纲树 数据源管理 使用工具类方法 国际化资源管理 使用JS面板 配置变量 生成业务代码 发布页面模板 使用模板创建页面 页面模板管理 物料中心
troPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 选择待操作应用，单击模块内的“开发应用”，进入设计器。 单击顶部工具栏的“下载源码”按钮。 选择下载路径。 选择生成到本地的文件。 您可以选择全量或指定部分文件内容。 图1 选择生成文件 单击“确定”，代码将下载至本地路径。
# 配置类（必填项） |-- utils # 工具类（必填项） |-- exception # 异常类（必填项）
在左侧导航栏中，选择“前端开发平台 > 前端应用”。 选择待操作应用，单击模块内的“开发应用”，进入设计器。 选择已设计完成的页面，单击顶部工具栏。 在弹框中输入页面模板标题及模板描述。 图1 设置模板信息 单击“确定”，完成发布页面模板。发布完成后，可在模板管理中查看。 图2 查看页面模板
前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在设计器中可根据您的需求设计前端页面，可参考设计前端应用流程进行开发。 单击顶部工具栏的“下载源码”按钮，可根据配置的页面设计，生成应用的基本代码。 代码生成后，会下载至本地，供您使用。 删除前端应用 参考登录AstroP
Objects，普通的Java对象）映射成数据库中的记录。 MyBatis/MyBatisPlus：MyBatis-Plus是一个MyBatis的增强工具，为MyBatis提供了一些高效、实用、开箱即用的特性，使用MyBatis-Plus可以有效的节省开发时间。 安全认证设置。 图6 安全认证设置
样式管理 通过样式面板配置样式 直接编写样式代码 使用状态选择器 行内绑定状态变量 高级配置管理 条件渲染 循环渲染 绑定事件 使用数据源 添加工具类 国际化资源管理 使用JS面板 添加变量 物料中心 自定义组件开发指南 上传自定义组件物料包 更新自定义组件物料包 下载自定义组件物料包
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
