检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
下面将通过两个示例分别展示如何使用JS面板。 为组件添加单击事件 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 选中组件，在组件属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。
通过样式面板配置样式 使用说明 添加组件后您可以通过右侧的属性设置面板，直接对当前选中组件进行样式设置，实现零代码设计。 通过样式面板配置样式 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。
添加组件后您可以通过右侧的属性设置面板，对当前选中组件进行属性设置。 参数说明 通用参数： id：规定HTML元素的唯一的id。 className：用于属性定义元素的类名；通常用于指向样式表的类和JavaScript中。 ref：接受一个内部值，返回一个响应式的、可更改的ref对象，此对象只有一个指向其内部值的属性。
Definition Language），是SQL（结构化查询语言）的一部分，用于定义和管理数据库的结构。导入DDL通常指的是将数据库结构定义导入到数据库管理系统中，以便创建或修改数据库的模式。 本章节将为您介绍一系列核心DDL标签，帮助简化您的开发流程并提高编辑效率。 注意事项
删除类名 使用说明 当类名不再使用，可进行删除操作。 删除类名后，全局样式面板仍保留该类名及样式，其他组件仍可使用该类名。如需删除CSS中的该样式信息，可通过单击全局样式的，进入CSS面板进行删除。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
时编辑样式面板，就是相当于在编辑该类名对应状态的样式。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击待编辑应用模块内的“开发应用”，进入设计器。 画布中选中组件，在组件属性设置面板选择“样式”。
== null } 图1 添加function工具类 单击“保存”，完成function工具类添加。 在JS面板的函数中使用function utils 您可以在JS面板或者页面生命周期函数中通过this.utils.isNil方式使用自定义的函数。 代码示例： function
新增类名 使用说明 当选中一个组件，还没有自动生成类名时，您可以单击输入框手动输入类名，然后继续编辑样式面板的样式。 此时，组件会自动绑定您输入的类名，然后将在样式面板编辑的样式生成代码，写入到全局样式中。 新增类名 参考登录AstroPro界面中操作，登录AstroPro界面。
义，并且开启Redis缓存。 数据库设置。 图2 设置数据库 数据库：选择数据库的类型，支持MySQL和PostgreSQL。 分库策略：选择数据的分片算法。参考架构选择“数据库分库+分布式缓存”时，需要设置。 MOD：直接使用分片数取模，余数为分片编号（从0开始编号）。适用整数类型的字段。
用数据源之前需要先在画布中拖放入Collection组件，然后在属性面板中选择需要绑定的数据源。 在左侧插件栏中，单击，展开物料资产包。 在Collection组件，并拖拽至中心画布中。 选中组件，在属性设置面板中选择“属性”。 dataSource下拉框中选择待绑定的数据源。 图3
中心画布位于设计器中央，是可视化设计的核心模块。 您可以在插件栏的物料面板中，将组件拖拽至中心画布内进行页面设计。您还可以单击选中画布中的组件，右键直接在画布中插入组件，添加父级，删除组件，复制组件及绑定事件。 右侧属性设置面板 右侧设置面板分为属性设置、样式设置和高级设置面板。 属性设置，设置组件的属性，比如按
循环渲染 页面可能有若干份重复的、动态生成的内容，例如商品列表页、表格数据。这时候需要用到循环渲染。您可以在高级面板中指定循环数据绑定的变量、迭代的变量名、索引变量名、以及唯一的key。 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
模板类型：默认为架构模板，暂不支持修改。 模板范围：根据3选择的项目，确认模板范围。 图2 配置模板基本信息 设置模板基本配置后，单击“下一步”。 下拉框中选择模板框架。 选择是否开启客户端。 图3 设置模板基本配置 选择模板的参考架构。 图4 选择参考架构 数据库设置。 图5 设置数据库 数据库：选择数
需要进行分库，数据在所有数据分库实例上复制，一般是包含配置信息或者维度数据的小表。 根对象（ROOTED）：分库的根对象，每个服务只能有一个。支持的主键类型有UUID和雪花算法，其中雪花算法支持逻辑数据库水平扩展。 分库对象（SHARDING）：需要进行分库，所有对象实例必须有字段关联的ROOTED
直接编写样式代码 样式面板提供了可直接配置的样式，满足了大部分的基础样式需求。如果这些样式还是不能满足您的需求，AstroPro还提供了直接编写样式代码的方式来配置样式。 编写行内样式 等效于直接在html标签style属性里直接声明样式，权重高，用于覆盖样式。 参考登录Astr
通过导入DDL文件实现业务设计 本章节指导您如何通过导入DDL文件来实现业务设计。DDL文件不仅定义了数据库的结构，还确保了数据的完整性和一致性，为业务应用提供了坚实的基础。 DDL文件设计 根据业务模型，完成DDL文件设计，DDL标签使用可参考DDL标签使用指南。 示例： CREATE
BO属性操作：单击“编辑字段”，可以为对象添加所需的字段。 软删除策略：开启软删除策略后，数据删除时执行逻辑删除，数据仍然保留在数据库中。关闭软删除策略后，数据删除为物理删除，即直接从数据库中删除，不可恢复。 注意：购买AstroPro企业版实例时，才会显示“软删除策略”配置项。 恢复软删除：当开启
修改类名 使用说明 已创建的类名支持修改。 类名修改，需注意以下事项： 当前组件绑定的类名会被修改。 全局样式中同类名会被修改成新类名。 其他组件绑定的同类名不会被修改。 操作步骤 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
单击待编辑应用模块内的“开发应用”，进入设计器。 选中组件，在组件属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。 在事件列表中，单击需要绑定的事件。 在弹框中设置绑定事件。 可以选择已有方法或者添加新方法，如果选项添加新方法，单击“确定”之后将在JS面板中创建一个该名称的新方法。 方法名称：
Text组件1：在右侧属性设置面板选择“样式”，字体大小调整至11px，在右侧属性设置面板选择“属性”，文本输入“使用Astro，轻巧便捷的与您的业务一起发展、壮大”。 输入框组件1：在右侧属性设置面板选择“样式”，设置尺寸宽为100%，高度为30px；在右侧属性设置面板选择“属性”，文本输入“请输入邮箱或手机号”。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
