云服务器内容精选

  • 拖拽组件并关联模型 单击“设计视图”,切换到页面设计视图。 图12 切换到设计视图组件列表 将左侧组件区的“表单”拖拽到右侧“页面内容”中,在“元数据表单配置向导”弹窗底部,单击“取消”,创建一个空的表单控件。 当前不单独定义数据源,因此需要单击“取消”数据绑定。 图13 拖拽表单到页面并取消数据绑定 组装参数区域。 从左侧组件列表中,拖一个“容器”到上一步创建的“表单”。 从左侧组件列表中,拖一个“分栏”到上一步创建的“容器”中。 “分栏”默认有2个“栏”,即当前栅格中包含1行1列的区域。 选中“分栏”,在右侧属性的“行布局”中,单击,将分栏设置为3栏。 图14 设置分栏为3栏 在右侧“属性”页签中,单击“新增行”后面的图标,新增一行,如图15所示。设置后,分栏组件被设置为2行(分栏)3列(栏)。 图15 设置表格内的行列数 从左侧组件区的拖一个“输入框”到分栏组件的第1行(分栏)第1栏,并在右侧“属性”页签中将“标签”修改为“设备编码”。 图16 设备编码 分别向第1行第2栏、第2行第1栏、第2行第3栏中拖一个“输入框”,并设置“标签”为“设备名称”、第2行第1栏“设备型号”、第2行第3栏“详细地址”。 从左侧组件列表中,拖一个“下拉框”到分栏组件的第1行第3栏,并在右侧“属性”页签中将“标签”修改为“设备品牌”。 从左侧组件列表中,拖一个“级联选择框”到分栏组件的第2行第2栏,并将“标签”修改为“省/市/区”。 组装页面标题。 在左侧组件区拖拽一个“标题”组件到上一步创建的“容器”前面,并在右侧“属性”页签中将“标题内容”修改为“设备详情”,并设置“样式”的“高级设置”为“:root{text-align:center;font-size:20px;}”。 组装按钮区域。 在左侧组件区拖拽一个“容器”到3中创建的“容器”后(注意要在表单里面,两个容器在同级),并在右侧“属性”页签中将“水平对齐方式”修改为“中”,即居中对齐。 图17 拖拽容器 图18 设置居中对齐 从左侧组件区拖拽一个“按钮”到刚创建的“容器”中,并在右侧“属性”页签中,将“显示名称”修改为“保存”,将“类型”修改为“主要按钮”。 拖拽一个按钮到“保存”按钮右边,并设置为“取消”按钮,类型设置为“默认按钮”。 单击界面上方的,保存页面,可以在属性面板底部查看组件树。 图19 组装完成后页面的组件树 为页面组件关联模型。 选中“设备名称”输入框。 在右侧“属性”页签中单击,为“设备名称”输入框绑定“equipmentForm”自定义模型中的“name”参数,如图20所示。 数据绑定后,当在前台界面输入内容时,系统就会把输入框中的内容,赋值给“name”。 图20 输入框数据绑定 重复上一步,为“设备编码”、“设备型号”、“详细地址”文本输入框绑定“equipmentForm”自定义模型中的对应参数。 选中“设备品牌”下拉选择框,在右侧“属性”页签中单击,为选择框绑定“equipmentForm”自定义模型中的“HW__equipmentBrand__ CS T”参数。 选中“设备品牌”下拉选择框,在右侧“基本属性”中,单击“选项列表”的,在弹窗中输入“equipmentBrand”,在联想记录中,选择设备对象字段“HW__equipmentBrand__CST”,为选择框添加下拉选项关联的字段,如图21所示。 图21 为下拉选择框定义可选项 图22 输入字段搜索 图23 关联字段 选中“省/市/区”级联框,在右侧“属性”页签中单击,为级联框绑定“equipmentForm”自定义模型中的“cascaderAddress”参数。 单击属性值绑定后的“+”,将“属性”设置为“选择数据”,“模型字段”绑定到“cascaderOptions”,如图24所示。 数据绑定后,级联选择框的选项来自“cascaderOptions”;同时,当在前台界面选择省/市/区时,系统就会把选择结果赋值给“equipmentForm.cascaderAddress”。 图24 级联框数据绑定 单击页面上方的,保存页面。
  • 定义模型 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”中,将鼠标放在“Page”目录上,单击界面上出现的“+”,选择“标准页面”。 在“标签”和“名称”文本框中输入“editEquipment”,单击“添加”。 平台实际创建的页面名称为“HW__editEquipment”,包含前缀“HW__”,对应首次创建应用时定义的命名空间。新建创建的页面,默认是当前用户锁定状态,可以进行编辑保存等操作。 当编辑已有标准页面时,为防止编辑时多人篡改,编辑前请单击进行锁定。 定义与“省/市/区”级联框的可选项相关联的自定义模型。 在页面底部单击“模型视图”,进入模型视图页面,单击“新增模型”。 添加自定义模型,模型名称“cascaderOptions”,单击“下一步”,如图4所示。 图4 定义级联框用到的自定义模型 设置保持不变,单击“下一步”。 方法保持不变,单击“确定”。 单击页面上方的,保存设置。 定义与页面上各个输入框、选择框相关联的自定义模型。 在“模型视图”中,单击“新增模型”。 添加自定义模型,模型名称“equipmentForm”,单击“下一步”,如图5所示。 图5 定义页面组件需要关联的自定义模型 单击“新增节点”,逐一添加与页面元素对应的参数(name、HW__equipmentSN__CST、HW__equipmentBrand__CST、HW__equipmentModel__CST、cascaderAddress、HW__installationDetailAddress__CST),单击“下一步”,如图6所示。 为简化后续事件脚本,除cascaderAddress外,请确保其他5个参数的参数名与设备对象(HW__Equipment__CST)的字段名保持一致。注意这里的下划线是两个,要与表1里的字段保持一致,HW__需要修改为实际的命名空间前缀。 图6 添加模型包含的参数 方法保持不变,单击“确定”。 单击页面上方的,保存设置。 定义与API(editEquipment:1.0.0)关联的服务模型。 在“模型视图”中,单击“新增模型”。 添加服务模型,模型名称“editEquipment”,来源选择“服务”,单击“下一步”,如图7所示。 图7 定义服务模型 指定模型与API“editEquipment”关联,单击“下一步”,如图8所示。 关联API后,系统会自动显示API中脚本的输入、输出参数。 图8 为模型关联Script 方法保持不变,单击“确定”。 系统自动添加了执行的方法,如图9所示。未来,将在事件脚本中执行这个方法,即执行模型关联的API中的脚本。 图9 为模型定义方法 单击页面上方的,保存设置。 定义与API(queryEquipmentDetail)关联的服务模型。 在“模型视图”中,单击“新增模型”。 添加服务模型,模型名称“queryEquipmentDetail”,“来源”选择“服务”,单击“下一步”。 指定模型与API“queryEquipmentDetail”,单击“下一步”。 图10 为模型关联Script 方法保持不变,单击“确定”。 单击页面上方的,保存设置。 图11 新增的页面模型
  • 背景信息 本示例中创建了3种业务用户的业务权限,主要是在AstroZero预置的Portal User Profile权限基础上,进行自定义业务用户权限配置和拓展实现的。在AstroZero的权限配置功能中,基于某个权限配置的新创建的Profile,将会继承原Profile的全部权限。 在后续有新的业务用户注册时,只需要将业务用户添加到对应的权限配置中,即可获取该权限配置中的权限。 权限配置创建的大致流程:
  • 验证并发布 测试新增逻辑能否正常执行。 单击编辑器上方的,执行脚本。 如图1所示,在界面底部输入测试数据,单击测试窗口右上角执行图标。 图1 测试脚本 测试报文采用json格式,样例如下(报文中加粗斜体内容请替换为实际的字段名): { "equipment": { "name": "百草园A栋1单元1号", "HW__equipmentSN__CST": "3217890001" } } 执行成功,会在“输出”页签返回equipmentId。请保存这个返回结果,后续的测试中会用到。 { "equipmentId": "cQue000000e1qnhgtCng" } 如果执行失败,请检查之前设备对象、脚本,以及测试报文三者中的对象名、字段名是否一致。 到设备对象布局页面(Equipment Records),预览页面,检查数据是否插入成功。 在“Equipment”目录的“Object”下,单击设备对象“HW__Equipment__CST”,在“布局”页签下,单击“Equipment Records”后的预览图标。 图2 对象布局页面 在页面中,检查设备列表中是否包含刚插入的测试数据。 如果已新增数据,为了后续测试方便,建议多创建几条数据。 测试修改逻辑能否正常执行。 单击编辑器上方的,执行脚本。 在界面底部输入测试数据,单击测试窗口右上角执行图标。 如下样例报文中的加粗id值,请修改为图1的返回结果,加粗斜体字段名请替换为实际的字段名。以下报文是修改name字段。 { "equipment": { "id": "cQuXXXXXXXXng", "name": "百草园B栋2单元2号", "HW__equipmentSN__CST": "3217890001" } } 刷新设备对象布局页面(Equipment Records)的预览页面,查看测试数据是否符合预期。 测试成功,单击编辑器上方的,启用脚本。
  • 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”目录中,将鼠标放在“Script”上,单击界面上出现的“+”,在弹出菜单中选择“脚本”。 在弹窗中,选中“创建一个新脚本”,在“名称”文本框中输入“editEquipment”,单击“添加”。 系统实际创建的脚本名称为“HW__editEquipment”,“HW__”前缀由租户命名空间namespace决定。新建创建的脚本,默认是当前用户锁定状态,可以进行编辑保存等操作。 当编辑已有脚本时,为防止编辑时多人篡改,编辑前请单击,进行锁定。 在代码编辑器中,插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 //本脚本用于新增或者修改设备信息 import * as db from 'db';//导入处理object相关的标准库 import * as context from 'context';//导入上下文相关的标准库 //定义入参结构,入参包含1个参数:equipment对象,为必填字段 @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'Any', required: true, label: 'equipment' }) equipment: object; } //定义出参结构,出参包含1个参数,记录equipment的id @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'String' }) equipmentId: string; } //使用数据对象HW__Equipment__CST @useObject(['HW__Equipment__CST']) @action.object({ type: "method" }) export class EditEquipment { //定义接口类,接口的入参为ActionInput,出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public editEquipment(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例,作为返回值 let error = new Error(); //新建错误类型的实例,用于在发生错误时保存错误信息 try { let equipment = input.equipment; //将入参赋值给equipment变量,方便后面使用 let s = db.object('HW__Equipment__CST'); //获取HW__Equipment__CST这个Object的操作实例 delete equipment['cascaderAddress']; //删除入参中不需要插入HW__Equipment__CST对象的多余属性 //新增设备 if (!equipment['id']) { //必填校验 if (!equipment['HW__equipmentSN__CST']) { error.name = "EQM"; error.message = "Field 'HW__equipmentSN__CST' is required."; throw error; } let equipmentId = s.insert(equipment); //向HW__Equipment__CST插入一条数据,返回数据的唯一标识即设备ID if (equipmentId && equipmentId != "") { out.equipmentId = equipmentId; } else { error.name = "EQM"; error.message = "Equipment Cannot Be Added."; throw error; } } //编辑修改设备 else { let id = equipment['id']; delete equipment['id']; let count = s.update(id, equipment); //根据设备ID,编辑更新HW__Equipment__CST的一条数据 if (count && count == 1) { out.equipmentId = id; } else { error.name = "EQM"; error.message = "Equipment Cannot Be Updated."; throw error; } } } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; } } 单击编辑器上方的,保存脚本。
  • 验证 您可以用对象的页面布局Layout能力,检查对象的定义是否符合预期。 创建对象时,系统会自动为对象创建两个页面布局: 设备详情页面Equipment Detail:显示对象中单条记录的详细信息。如果手工创建字段时选中了“添加本字段到该页面布局”,设备详情页面包含name和添加的自定义字段。脚本创建的默认不添加,但是不影响后续的操作。 设备列表页面Equipment Records:显示对象中的记录列表。列表页面中默认只显示了name字段(设备名称)。因为后续章节的测试中,经常需要检查记录ID、设备编码和设备名称,所以将其他几个字段也添加到列表页面中。 修改设备对象的列表页面布局。 单击设备对象HW__Equipment__CST的“布局”页签。 单击“Equipment Records”,打开页面详情。 图8 对象布局 选中列表“表格”,如图9所示,再单击界面右侧“属性”页签中的。 如果当前页面已锁定,请先单击,解锁页面。 图9 绑定Records 单击Records后的编辑图标。 图10 编辑Records 选择对象及要显示在页面上的字段,如图11所示,单击“下一步”,再单击“确定”。 图11 为Records添加字段 在图10对话框中,单击选中“Records”,再单击“确定”。 单击编辑器上方的,保存设置。 预览、测试对象。 单击页面上的,进入预览页面。 单击“添加”,再输入任意测试数据,单击“保存”。 系统返回页面,并显示新插入的数据,则表示对象创建成功。
  • 更新自定义组件 当开发的自定义组件功能有变动,即组件代码发生变动后,需要更新组件版本。更新后,组件所在的页面也会随之生效。 在应用中,单击左下方的“页面设置”,再选择“插件”页签,找到需要更新的组件(例如userLogin),单击组件所在行右侧“查看详情”,进入组件详情页。 图4 页面设置下的组件列表 如果页面图标高亮,则需要先单击解锁页面。 单击“更新”按钮进入组件更新页面。 图5 选择更新按钮 单击“上传”,上传本地的组件zip包,再单击“更新”。 图6 上传本地组件包 返回“插件”页签,单击获取锁,再单击刚刚上传组件(userLogin)的升级按钮,然后单击保存升级,最后单击发布即可。 图7 更新组件
  • 自定义登录组件 进入创建“设备维修管理系统”应用中创建的应用。 在左侧资产下的组件模板中,单击widgetVueTemplate,再单击“下载”。 图1 下载组件模板 在弹出的窗口中,输入组件名称,并单击“保存”,将组件模板保存到本地,并解压。 图2 输入组件名称 查看解压后的组件目录。 目录结构如图3所示,其中userLogin.js文件是写vue业务逻辑的代码,userLogin.ftl用于写html代码,userLogin.css用于写样式代码,userLogin.editor.js以及packageinfo.json是配置文件。 图3 目录结构 在本地编辑器中打开文件夹,把userLogin.editor.js文件中的config代码改为如下代码,用于配置桥接器。 config: [ { type: 'connectorV2', name: 'FlowConnector', label: 'Flow Connector', model: 'ViewModel' }, { type: 'connectorV2', name: 'common.GetConnector', label: 'View API Get Connector', model: 'ViewModel' }, { type: 'connectorV2', name: 'common.PostConnector', label: 'View API Post Connector', model: 'ViewModel' }, { type: 'connectorV2', name: 'common.PutConnector', label: 'View API Put Connector', model: 'ViewModel' }, { type: 'connectorV2', name: 'common.DeleteConnector', label: 'View API Delete Connector', model: 'ViewModel' }, ] 把packageinfo.json文件中加入如下加粗内容。 { "widgetApi": [ { "name": "userLogin" } ], "widgetDescription": "", "authorName": "", "localFileBasePath": "", "requires": [ { "name": "global_Vue", "version": "100.8.3" }, { "name": "global_VueI18n", "version": "100.7.3" }, { "name": "global_Element", "version": "101.0.3" } ] } 将修改后的组件文件压缩成一个zip包。压缩后,即可根据需要上传到AstroZero,供高级页面使用。
  • 了解高级页面 AstroZero前端页面有标准页面、高级页面和表单三种。本节主要带您了解、学习并使用高级页面。 标准页面:对于一般的业务应用系统,其功能主要是针对业务数据的增、删、改、查,前端界面的样式相对简单的页面场景,此时,推荐您使用平台提供的“标准页面”。您可以通过拖、拉、拽页面组件,再加上少量事件代码,即可拼装出所需页面,具体介绍请参见标准页面。 高级页面:对于一些样式比较复杂的页面,例如网站、电商、园区大屏等,您可以使用平台提供的“高级页面”。 高级页面是由一个或者多个Widget(即组件)拼装而成。如图1所示,组件是可复用的页面组成元素,一个页面由一个或多个组件拼装而成。如果将一个页面看成拼图游戏的完整图案,那么组件就相当于拼图的每一小块。 图1 页面与widget(组件)的关系 Widget的运行依赖Library(库),如果缺少相应的Library(库),则Widget不能正常运行。因此在加载widget前,需要先加载必要的Library。 在操作前端页面时,经常会需要调用后台数据,例如即将开发的登录页面,需要获取业务用户信息。这时需要通过桥接器调用后台的服务编排、Script等获取后台数据。因此,在引用widget时,经常需要配置桥接器。 AstroZero高级页面中的组件分为系统预置组件和自定义组件: 系统预置组件,可以直接使用。 登录组件属于自定义组件。本示例中已经为您提供了开发好的组件包,您只需要上传到站点中即可使用。自定义登录组件的开发方法,请参考(可选)开发自定义登录组件。
  • 扩展知识 标准页面预置了二维码组件,用于生成二维码。使用该组件可将游客访问的打卡页面地址做成二维码,后续可将此二维码直接分享给其他游客(匿名用户)扫码体检。 制作二维码方法如下: 使用 开发者账号登录 AstroZero开发环境,进入一个应用,例如1创建的“mypage”应用。 鼠标放在“Page”下,单击界面上出现的“+”,在弹出菜单中选择“标准页面”。 设置页面标签和名称,例如“testcode”,单击“添加”。 参考图27,向标准页面中拖入一个二维码组件,在右侧属性面板中设置“内容或链接”为7.b改造后的地址。 https://appcuberun.cn-north-4.huaweicloud.com/magno/render/hwtest__mypage_0000000000XXXXXXX/view-mobile/mypage 图27 配置二维码组件 表1 二维码组件属性说明 属性 说明 内容或链接 设置扫描二维码后,要展示的文本内容或者跳转的链接地址。 宽度 二维码的宽度,单位像素。 默认值:150 容错级别 二维码被遮挡或残破时依然能被识别的几率,容错级别越高抗残破或遮挡的能力就越强。 空白间距 四周空白间距,单位像素。 前景色 二维码的颜色。 背景色 背景颜色。 中间Logo 二维码中间Logo图片,可不用设置。 设置Logo后,如果扫描二维码识别失败,可以调高容错级别或调大二维码 Logo大小 Logo大小,单位像素。 单击页面上方保存页面,单击预览页面。 图28 生成二维码 将上一步生成的二维码分享给游客,游客通过微信或者支付宝扫描二维码,可扫码体验,进行健康打卡。
  • 相关信息 零代码应用创建后,可以为应用创建自动化任务,实现智能化操作。自动化是高效管理应用的小助手,当表单数据新增或修改,且满足一定触发条件后,自动化小助手会同步修改或新增另一张表单的数据,从而达到自动更新数据、发起流程等智能化操作。自动化一般用于处理常见重复问题,帮助大家提升工作效率。如何结合某个场景,创建自动化任务,请参见结合典型场景设置自动化。 在出差审批申请、工单派发流程等场景的零代码应用中,需要多个角色人员按流程分步骤互相协作,这时可使用创建流程来实现。如何创建流程,请参见创建流程表单。
  • 步骤一:申请AstroZero免费试用 注册华为账号 并实名认证。 使用AstroZero前,需要先注册一个华为账号并进行实名认证。如果您已有一个华为账号,可直接执行2。 进入华为云官网,单击页面右上角的“注册”。 参考注册华为账号并开通华为云中操作,完成注册。 注册后参考个人账号如何完成实名认证或企业账号如何完成实名认证中操作,完成个人或企业账号实名认证。 申请AstroZero免费试用。 使用1中的账号,登录华为云官网,在顶部导航栏右侧单击“控制台”,进入华为云控制台。 在左侧导航栏上方,单击,选择服务实例所在的区域项目(当前仅支持华北-北京四)。 单击,在查找框中搜索“Astro轻应用”,单击查找到的结果,进入AstroZero服务控制台。 在AstroZero服务控制台,单击页面右上角的“免费试用”。 图1 免费试用 在弹出的页面,单击“免费开通”,即可免费开通AstroZero实例。 成功后,在主页中,可查看到已开通的AstroZero免费版实例。 图2 查看已开通的免费版实例
  • 场景描述 “培训报名”用于各类培训信息的收集和统计,例如收集员工个人信息、培训方式以及希望了解的内容、遇到的内容等,便于培训组织者能够了解员工的背景、水平和兴趣等,从而制定出合适的培训方案。 AstroZero零代码模板中心为您预置了“培训报名”模板,通过该模板您可以快速创建一个培训报名应用。“培训报名”模板提供了如下功能: 外部用户即匿名用户微信扫码,填报活动报名信息,支持查看自己填写的报名信息。 内部用户可在手机端微信扫码或者 WeLink 扫码填报信息,支持在PC端新窗口打开或使用链接在浏览器访问填报页,支持查看自己填写的报名信息。 培训活动管理员基于用户的填报信息,获取培训报名人员信息,以及用户希望了解的培训内容。
  • 操作流程 使用AstroZero提供的零代码能力,开发一个培训报名应用,主要包括如下几个步骤: 步骤一:申请AstroZero免费试用 注册华为账号,开通华为云。使用已注册的华为账号申请免费试用AstroZero。 步骤二:使用模板快速创建培训报名应用 使用AstroZero零代码模板中预置的模板,快速创建培训报名应用。 步骤三:创建内部用户并分配权限 培训报名问卷分享给内部用户使用时,需要先创建内部用户并分配权限,该用户才能登录应用提交问卷。
  • 操作流程 使用AstroZero开发一个Astro开发者调查问卷应用,主要包括如下几个步骤: 步骤一:申请AstroZero免费试用 注册华为账号,开通华为云。使用已注册的华为账号申请免费试用AstroZero。 步骤二:使用模板快速创建调查问卷应用 使用AstroZero低代码模板中预置的模板,快速创建Astro开发者调查问卷应用。 步骤三:模拟问卷调查 在线预览Astro开发者调查问卷应用,模拟问卷调研对象,预览并体验调查问卷应用的功能。