# 基于UI引擎创建"工业产品问卷调查"前端项目 为帮助开发者快速上手UI引擎，我们设计了"工业产品问卷调查"开发案例。在此案例中，您将掌握如何利用UI引擎低代码能力，联动数据建模引擎完成数据对接，高效搭建出逻辑完整、交互流畅的前端应用。 #### 场景说明 本示例模拟工业产品使用情况调研场景，即面向企业最终用户收集产品使用反馈。假设存在以下账号： user001：具有UI引擎的"开发人员"权限。 #### 前提条件 - 已将工业数字模型驱动引擎-数据建模引擎（xDM Foundation，简称xDM-F）升级至可使用UI引擎的版本。 - 已完成xDM-F应用的数据建模与部署，具体操作可参见[基于数据建模引擎创建"工业产品问卷调查"应用](https://support.huaweicloud.com/qs-idme/idme_qs_0009.html)。 #### 开发流程 在使用UI引擎之前，您需要先了解在UI引擎中创建一个前端项目的大致开发流程。 图1创建"工业产品问卷调查"前端项目流程图 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531455666.png) #### 步骤1：创建xDM-F模型服务数据源 1. 使用[场景说明]中的"user001"账号登录[iDME控制台](https://console.huaweicloud.com/dme)。 2. 在左侧导航栏中，单击"数据建模引擎"，进入数据建模引擎页面。 3. （可选）如果同时有部署在公有云上和边缘云上的运行服务，请切换到公有云。 4. 在"公有云运行服务"列表中，找到已部署至基础版数据建模引擎的应用（如"QuestionnaireSurvey"），单击"登录运行态"，登录应用运行态。 5. 在左侧导航栏中，单击"UI引擎"，进入"UI引擎"。 6. 在左侧导航栏中，选择"数据源管理"，进入"数据源管理"页面。 7. 单击"创建数据源"，在弹出的窗口中，设置如下信息。 图2设置数据源 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002562132667.png "点击放大") 表1创建数据源配置信息 | 参数名称 | 参数说明 | 示例 | |:---|:---|:---| | 数据源分类 | 选择数据源类型。 | xDM-F模型服务 | | xDM-F应用来源 | 选择xDM-F应用的来源。 | xDM-F设计态 | | 数据源名称 | 自定义数据源名称。 | QuestionnaireSurvey | | xDM-F应用 | 选择目标xDM-F应用。 | 工业产品问卷调查（QuestionnaireSurvey） | | 请选择认证方式 | 选择访问数据源所需的认证方式。 | IAM鉴权 | | 鉴权配置 | 配置认证信息（可前往"iDME服务总览 \> 个人中心"获取凭证）。 | - 鉴权账号名：admin - 鉴权项目：123456 - 用户名：user001 - 用户密码：123456 | | 描述 | 填写数据源的业务用途说明。 | 工业产品问卷调查 | 8. 配置完成后，单击"保存"。 图3xDM-F模型服务列表 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531209778.png "点击放大") #### 步骤2：创建前端项目 1. 在左侧导航栏中，单击"前端项目"，进入"前端项目"页面。 2. 在"前端项目"页面，单击"创建项目"，展开"创建前端项目"页面。 3. 在展开的"创建前端项目"页面，填写如下信息，单击"完成"。 图4设置前端项目 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002562134527.png "点击放大") 表2创建项目参数 | 参数名称 | 参数说明 | 示例 | |:---|:---|:---| | 唯一标识 | 填写项目唯一标识。 | QuestionnaireSurvey_UI | | 名称 | 填写项目显示名称。 | 工业产品问卷调查前端项目 | | 描述 | 填写项目的业务用途说明。 | 工业产品问卷调查的前端项目 | #### 步骤3：配置认证源与数据源 1. 在"工业产品问卷调查前端项目"所在行，单击"项目设置"，展开"项目设置"页面。 2. 切换至"运行时认证源配置"页签，单击"编辑"。 3. 选择"认证源类型"，单击"保存"。 图5配置运行时认证源 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002562201621.png "点击放大") 表3运行时认证源配置信息 | 参数名称 | 参数说明 | 示例 | |:---|:---|:---| | 认证源类型 | 选择运行前端项目时的认证源。 | IAM认证 | 4. 切换至"运行时数据源配置"页签，单击"新增关联"，在弹出的窗口中，设置如下信息。 图6新增运行时引用数据源的关联 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531282054.png "点击放大") 表4运行时数据源配置信息 | 参数名称 | 参数说明 | 示例 | |:---|:---|:---| | 数据源分类 | 选择当前配置的数据源类型。 | xDM-F模型服务 | | 数据源名称 | 选择需要绑定的目标数据源。 | QuestionnaireSurvey | | xDM-F应用来源 | 系统根据所选"数据源名称"自动填充。 | xDM-F设计态 | | xDM-F应用 | 系统根据所选"数据源名称"自动填充。 | 工业产品问卷调查（QuestionnaireSurvey） | | 请选择认证方式 | 系统根据所选"数据源名称"自动填充。 | IAM鉴权 | | 鉴权配置 | 系统根据所选"数据源名称"自动填充。 | - 鉴权账号名：admin - 鉴权项目：123456 - 用户名：user001 - 用户密码：123456 | | 描述 | 系统根据所选"数据源名称"自动填充。 | 工业产品问卷调查 | 5. 配置完成后，单击"保存"。 #### 步骤4：开发前端项目 1. 在"项目设置"页面，单击"页面设计器"，进入项目的"页面设计器"。 图7进入页面设计器 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002562202539.png "点击放大") 2. 在弹出的"应用下暂无页面，需新建页面后体验画布功能"提示框中，单击"确定"，关闭窗口。 3. 在左侧插件栏中，单击![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002495426034.png)，展开"页面"插件面板。 图8页面插件面板 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002527547113.png "点击放大") 4. 在"页面"插件面板中，单击![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002495427562.png)，展开"页面设置"页面。 5. 在展开的"页面设置"页面中，配置如下主要信息，其他参数保持默认，单击"保存"。 图9页面设置 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531047302.png "点击放大") 表5页面的基本设置 | 参数名称 | 参数说明 | 示例 | |:---|:---|:---| | 页面名称 | 自定义页面名称。 | HomePage | | 访问路由 | 定义页面的访问路由地址。 | questionnairesurvey/ui | 6. 在左侧插件栏中，单击![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002562220297.png)，展开"页面"插件面板。 7. 在新建的"HomePage"页面所在行，单击![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531298854.png)，选择"设置为主页"。 图10设置为主页 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002562379339.png "点击放大") 8. 在弹出的提示框中，单击"确定"。 9. 根据自身业务需求，设计"HomePage"页面布局。 1. 单击左侧插件功能区的![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531051768.png)，选择"模板"或"组件"页签，将所需组件（如"模板表单"组件）拖拽至中心画布区。 图11添加组件 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002562203161.png "点击放大") 2. 选中画布区的模板表单组件，在右侧属性设置面板中，单击"模型属性"区域中"xdm模型"的"选择模型"。 3. 在弹出的"绑定数据模型"窗口中，选择对应应用、租户与数据模型。 例如："xDM-F模型服务"选择"QuestionnaireSurvey"（[步骤1：创建xDM-F模型服务数据源]创建的数据源），"租户"选择"basicTenant"，"模型名称"选择"工业产品问卷"。 图12绑定数据模型 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531193598.png "点击放大") 4. 单击"确认"，完成绑定。 10. 完成页面设计后，单击页面设计器右上方的"保存"。 图13保存设置 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002562083639.png) 11. 单击页面设计器右上方的![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531201764.png)，预览页面效果。 图14页面预览 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531212648.png "点击放大") #### 步骤5：发布与访问前端项目 页面开发完成后，需要将项目发布至生产环境以便外部访问。 1. 关闭预览页面，切换回页面设计器。 2. 单击页面设计器右上方的"发布"，弹出"项目发布"窗口。 3. 在弹出的窗口中，填写如下主要信息。 图15项目发布 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531205008.png "点击放大") 表6项目发布参数说明 | 参数名称 | 参数说明 | 示例 | |:---|:---|:---| | 发布版本生成方式 | 指定前端项目版本号的生成方式。 | 自动 | | 发布版本 | 定义前端项目当前发布的版本号。 | - | 4. 单击"确定"，执行项目发布。 系统将自动切换至"日志"窗口监控发布进度。 5. 待显示项目发布成功后，单击"点击访问"，即可在浏览器中打开前端项目。 图16项目发布成功 ![](https://support.huaweicloud.com/qs-idme/figure/zh-cn_image_0000002531284380.png "点击放大")