如何实现业务用户页面登录

应用登录页面开发流程

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

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

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

步骤1：自定义开发组件

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

（可选）线下开发自定义登录组件。

在“资产 > 高级页面 > 组件模板”中，单击“widgetVueTemplate”，再单击“下载”。
图2 下载组件模板
输入组件名称，单击“保存”，将组件模板保存到本地，并解压。
图3 输入组件名称
查看解压后的组件目录。
图4 解压后目录
- userLogin.js：存放vue业务逻辑的代码，请根据业务需求自行开发。
- userLogin.ftl：存放html代码，请根据业务需求自行开发。
- userLogin.css：存放样式代码，请根据业务需求自行开发。
- userLogin.editor.js、packageinfo.json：配置文件，请参考2.d和2.e修改。

修改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文件中的“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"
        }
    ]
}

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

用户开发登录组件代码，可参考已开发好的userLogin.zip中代码进行开发。

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

在AstroZero开发环境首页“项目 > 我的应用”中，单击“A”应用。
在左侧列表中，单击，选择“高级页面 > 组件”，进入组件页面。

图5 组件列表页面
单击“提交新组件”，进入提交新组件页面。
单击“上传”，选择自定义组件包“userLogin.zip”，设置“发行说明”后，单击“提交”，上传组件。

图6 上传组件

上传成功后，在后续创建的高级页面中，即可使用该自定义组件。

步骤3：创建高级页面

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

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

图7 Home页面

进入AstroZero开发环境首页，在“项目 > 我的应用”中，单击“A”应用。
单击，进入工作目录，并创建一个Page目录。

图8 创建Page目录
将鼠标放在“Page”上，单击界面上出现的“+”，在弹出菜单中选择“高级页面”。

图9 创建高级页面
设置“页面标题”和“页面路径”为“Login”，并选择“绝对布局”，单击“添加”。

图10 添加高级页面

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

在高级页面开发界面，单击左上角的，选择“全部”，在“自定义”页签，拖拽“userLogin”组件到页面编辑区。
设置自定义组件“userLogin”的位置属性。
1. 将“userLogin”组件拖拽到页面编辑区后，会在右侧显示该组件的属性配置面板。
2. 在“位置”中，设置“距离左端”、“距离顶端”为“0”，“宽度”为“1920”，“高度”为“1080”。
  图11 设置组件位置
3. 组件位置、样式等属性修改完成后，单击页面上方的，保存页面修改。
4. 在目录中，将鼠标放在“Login”上，单击“...”，然后选择“设置”，在弹窗中设置页面的拉伸属性，再单击“保存”。
  图12 页面设置
  
  图13 设置页面拉伸

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

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

“login API”为登录接口的URL后半段，“命名空间”请根据实际情况配置，“A”为应用名，登录接口是在如何实现业务用户后台登录中创建的。

图15 loginAPI地址
在“数据”页签，单击“View API Get Connector”，设置“桥接器实例”为“通用AppCube API数据桥接器”，“数据类型”为“动态数据”，“请求方法”为“get”，如下图所示。
图16 设置桥接器
- 桥接器实例：调用的桥接器名称。
- 请求方法：调用的方法名，如get（查询）、put（修改）、post（增加）和delete（删除）。
- 调用周期：此处不用配置。调用周期是每隔多少秒调用一次后台接口或者获取静态数据，默认配置为“0”，表示只调用一次或者只获取一次静态数据。

参考上一步，分别设置下图中框选的桥接器实例。

图17 设置其他桥接器

表1 桥接器实例配置
数据名	桥接器实例	数据类型	Request Method
View API Post Connector	通用AppCube API数据桥接器	动态数据	Post
View API Put Connector	通用AppCube API数据桥接器	动态数据	Put
View API Delete Connector	通用AppCube API数据桥接器	动态数据	Delete

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

图18 需要配置的事件
1. 单击“go Homepage”后的齿轮图标，选择新建动作的类型。
  图19 新建动作
2. 选择“新建动作 > 默认 > 页面跳转”，进入跳转编辑页面。
  图20 编辑页面跳转
  
  这里选择的高级页面是之前创建并发布的“Home”，在实际开发过程中，可以根据业务需要，选择跳转到需要的页面，或者执行自定义的业务逻辑。
在上述步骤完成后，单击Login页面上方的，保存页面，再单击，发布页面。
页面发布成功后，单击，即可预览发布的登录页面。

图21 预览的登录页面

当前登录页中，输入业务用户账号及密码，单击“登录”的登录逻辑是通过“自定义登录”组件，调用用户登录服务编排完成的。
在预览的登录页面中，输入配置了权限的业务用户的账号密码，单击登录后，如果页面跳转到“Home”页面，则业务用户登录成功。

图22 登录成功后的Home页面