文档首页/ Astro轻应用 AstroZero/ 最佳实践/ 业务用户专项/ 通过AstroZero开发业务用户登录页/ 业务用户登录页前台开发实施步骤
更新时间：2024-07-30 GMT+08:00
查看PDF
分享

业务用户登录页前台开发实施步骤

业务用户在前台登录时，需要先在线下开发一个登录组件，上传到高级页面，并在高级页面中配置组件桥接器中的数据。最后在页面中，输入登录账号密码，通过调用“用户登录服务编排”，实现“业务用户”页面登录功能。

本文以“A”应用为例，介绍如何开发登录页面，具体流程如图1所示。

图1 应用登录页面开发流程

步骤一：自定义开发组件

本示例中，提供了一个已开发好的自定义登录组件userLogin，单击userLogin.zip可直接下载使用。如果想要了解自定义登录组件的开发方法，可参考本步骤执行。

  1. 进入AstroZero服务控制台。
  2. 在主页中，单击“进入首页”，进入AstroZero应用开发页面。
  3. 单击，选择“环境管理 > 环境配置”，进入环境配置。
  4. 在主菜单中，选择“维护”。
  5. 在左侧导航栏中，选择“全局元素 > 页面资产管理 > 组件模板”。
  6. 在组件模板列表中，单击widgetVueTemplate，进入模板详情页。
  7. 单击“下载”，设置组件的名称为“userLogin”，单击“保存”，将模板下载到本地。

    图2 保存模板

  8. 查看解压后的组件目录。

    图3 解压后目录
    • userLogin.js：存放vue业务逻辑的代码，请根据业务需求自行开发。
    • userLogin.ftl：存放html代码，请根据业务需求自行开发。
    • userLogin.css：存放样式代码，请根据业务需求自行开发。
    • userLogin.editor.js、packageinfo.json：配置文件，请参考9和10修改。

  9. 修改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',
                },
            ]

  10. 修改packageinfo.json文件中的“requires” 。

    代码示例如下加粗内容： 
    {
    "widgetApi": [
        {
            "name": "userLogin"
        }
    ],
    "widgetDescription": "",
    "authorName": "",
    "localFileBasePath": "",
    "requires": [
        {
            "name": "global_Vue",
            "version": "100.8.3"
        },
        {
            "name": "global_Element",
            "version": "101.0.3"
        },
        {
            "name": "global_VueI18n",
            "version": "100.7.3"
        },
        {
            "name": "global_VueRouter",
            "version": "1.0.1"
        }
    ]
}

  11. 将修改后的配置文件和自定义开发的文件，压缩成一个zip包。

步骤二：上传自定义登录组件

自定义组件开发完成后，需要上传到AstroZero组件库中，供高级页面使用。

  1. 在AstroZero环境配置页面，单击主菜单中的“维护”。
  2. 在左侧导航栏中，选择“全局元素 > 页面资产管理 > 组件”。
  3. 单击“提交新组件”，进入提交新组件页面。
  4. 单击“上传”，上传自定义组件包“userLogin.zip”。

    图4 上传自定义组件

    表1 上传组件参数说明

    参数

    说明

    名字

    新提交组件的名称，系统会根据组件包名称自动填充。

    示例：userLogin

    上传源文件

    组件源文件包，单击“请选择源文件(.zip)”，选择步骤一：自定义开发组件中的自定义组件登录包。

    场景

    选择组件包的应用场景，可同时勾选多项，勾选后，在相应类型页面开发中，才可使用该组件。

    本示例选择“高级页面”。

    发行说明

    组件的描述信息，需要配置不同语种下的描述信息。

    此处配置的信息，将会在组件详情页的“概况”页签中进行展示。

  5. 参数设置完成后，单击“提交”，完成组件的上传。

步骤三：创建高级页面

“业务用户登录”页面是一个高级页面，主要是通过引用上传的自定义登录组件，再配置相关参数，来实现登录功能。

在组装业务用户登录页面时，需要配置从登录页面登录成功后跳转的页面，所以需要提前创建一个高级页面。在本示例中，假设已创建了一个Home页面。Home页面中没有实际数据，在Home页面中拖拽了几个图表组件，然后保存发布成样例页面。在实际开发过程中，可以根据业务需要，选择跳转到需要的页面，或者执行自定义的业务逻辑。
图5 Home页面

  1. 进入AstroZero服务控制台。
  2. 在主页中，单击“进入首页”，进入AstroZero应用开发页面。
  3. 在“主页 > 全部应用”中，单击应用“A”后的编辑，进入应用“A”的设计器。
  4. 在左侧导航栏中，选择“界面”。
  5. 单击高级页面后的“+”，设置标签和名称为“Login”，并选择“绝对布局”，单击“添加”。

    图6 添加高级页面

步骤四：拖拽组件开发登录页面

  1. 在步骤三：创建高级页面中创建的高级页面中，单击左上角的，选择“全部”，在“自定义”页签，拖拽“userLogin”组件到页面编辑区。
  2. 设置自定义组件“userLogin”的位置属性。

    1. 将“userLogin”组件拖拽到页面编辑区后，会在右侧显示该组件的属性配置面板。
    2. 在“位置”中，设置“距离左端”、“距离顶端”为“0”，“宽度”为“1920”，“高度”为“1080”。
      图7 设置组件位置
    3. 组件位置、样式等属性修改完成后，单击页面上方的，保存页面修改。
    4. 在“界面 > 高级页面”中，将鼠标放在“Login”上，单击，选择“设置”。
      图8 选择设置
    5. 在页面设置中，选中拉伸属性，单击“保存”。
      图9 设置页面拉伸

  3. 设置自定义组件的桥接器。

    1. 选中“userLogin”组件，在“属性 > Parameters”中，设置“login API”为“/命名空间__A/1.0.0/Flow_login”。
      图10 添加登录服务URL

      “login API”为登录接口的URL后半段，“命名空间”请根据实际情况配置，“A”为应用名，登录接口是在业务用户登录页后端逻辑开发实施步骤中创建的。

    2. 在“数据”页签，单击“View API Get Connector”，设置“桥接器实例”为“通用AstroZero API数据桥接器”，“数据类型”为“动态数据”，“请求方法”为“get”，如下图所示。
      图11 设置桥接器
      • 桥接器实例：调用的桥接器名称。
      • 请求方法：调用的方法名，如get（查询）、put（修改）、post（增加）和delete（删除）。
      • 调用周期：此处不用配置。调用周期是每隔多少秒调用一次后台接口或者获取静态数据，默认配置为“0”，表示只调用一次或者只获取一次静态数据。
    3. 参考上一步，分别设置下图中框选的桥接器实例。
      图12 设置其他桥接器
      表2 桥接器实例配置

      数据名

      桥接器实例

      数据类型

      Request Method

      View API Post Connector

      通用AstroZero API数据桥接器

      动态数据

      Post

      View API Put Connector

      通用AstroZero API数据桥接器

      动态数据

      Put

      View API Delete Connector

      通用AstroZero API数据桥接器

      动态数据

      Delete

  4. 设置自定义组件“userLogin”的“事件”，使自定义组件与其他页面关联。

    图13 需要配置的事件
    1. 单击“go Homepage”后的齿轮图标，选择新建动作的类型。
      图14 新建动作
    2. 选择“新建动作 > 默认 > 页面跳转”，进入跳转编辑页面。
      图15 编辑页面跳转

      这里选择的高级页面是之前创建并发布的“Home”，在实际开发过程中，可以根据业务需要，选择跳转到需要的页面，或者执行自定义的业务逻辑。

  5. 在上述步骤完成后，单击Login页面上方的，保存页面，再单击，发布页面。
  6. 页面发布成功后，单击，即可预览发布的登录页面。

    图16 预览的登录页面

    当前登录页中，输入业务用户账号及密码，单击“登录”的登录逻辑是通过“自定义登录”组件，调用用户登录服务编排完成的。

  7. 在预览的登录页面中，输入配置了权限的业务用户的账号密码，单击登录后，如果页面跳转到“Home”页面，则业务用户登录成功。

    图17 登录成功后的Home页面

相关文档