开发前端界面

本文为您介绍如何在BizWorks中建设一个完整的轻应用,包括创建应用、管理模型、编排服务及页面、完成应用部署等。

前提条件

  • 已完成项目创建。

  • 当前账号拥有项目权限。

步骤一:创建轻应用

轻应用能够在BizWorks底层模型的基础上,通过模型关联、服务编排及页面编排,以可视化方式搭建前端页面,完成前端应用和服务的打通。本文以创建销售管理中心为例,复用交易域已实现的能力,在Web前端应用中实现基础订单及销售额的管理能力。

  1. 登录BizWorks,在选择平台下拉列表中选中微服务开发平台image.png

  2. 单击页面右上角a7.png图标或其文本框区域,在下拉列表中单击目标项目名称,单击应用页签。在应用列表页面,单击新增应用

  3. 创建轻应用面板,完成相关配置后(例如,应用名称填写为销售管理平台),单击保存

    更多信息,请参见参数配置

    页面提示保存成功,你可以在应用列表页面查看所创建的轻应用。

步骤二:管理模型

管理当前轻应用对模型的依赖,定义并管理应用内可使用的结构对象。

(可选)关联数据源

您可以选择关联一个或多个当前应用依赖的数据源,选择版本号及实现该数据源的中心应用版本。在关联数据源后,轻应用即可使用数据源中的结构对象及应用服务方法,实现能力的直接复用。

  1. 单击页面右上角a7.png图标或其文本框区域,在下拉列表中单击目标项目名称后,单击应用页签。在应用列表页面单击目标轻应用名称。image.png

  2. 在目标轻应用导航栏中,选择服务管理 > 依赖数据源

  3. 依赖数据源页面,单击关联数据源。在关联数据源面板,完成相关配置项选择和设置后,单击保存

    更多信息,请参见关联依赖数据源

    依赖数据源页面,您可以查看所关联的依赖数据源。

新建结构对象

您可根据在页面编排、服务编排中的需求定义轻应用所需的结构对象。

  1. 在目标轻应用导航栏中,选择服务管理 > 结构对象

  2. 结构对象页面,单击新建结构对象。在新建结构对象面板,完成基本信息字段设置。结构对象基本信息

    更多信息,请参见新建结构对象

  3. 单击保存

    您可以在结构对象列表中查看、编辑或删除您所创建的结构对象。

步骤三:编排服务

从数据源批量创建服务方法

对于想直接复用的关联数据源中已构建完成的应用服务方法,轻应用提供了快速复用的功能。通过对数据源内应用服务方法的勾选,即可批量生成对应的服务方法,后续即可在应用内直接调用。

  1. 在目标轻应用导航栏中,选择服务管理 > 服务编排

  2. 服务方法页面中,单击从数据源批量创建。在从数据源批量创建服务方法面板的左侧导航栏中,选中目标应用服务方法。

    更多信息,请参见可视化编排服务方法

  3. 单击保存

    系统提示保存成功,您可以在服务方法页面查看所创建的服务方法。

新建服务方法

在定义服务方法的入参及出参类型后,即可进入设计器,对服务方法进行可视化编排。设计器内支持服务调用节点,能够调用限界上下文内的应用服务方法、轻应用自定义的服务方法及预置的服务方法;也支持多种流程节点,在对已有的服务能力做进一步编排和组装。

  1. 服务方法页面,单击新建服务方法。在新建服务方法面板,完成相关配置。

    更多信息,请参见可视化编排服务方法

  2. 单击创建

    服务方法保存成功后系统会自动打开服务方法编排设计器,您可以直接编排服务方法,具体操作,请参见可视化编排服务方法。您也可以在服务方法页面查看所创建的服务方法。

步骤四:管理页面

您可以通过低代码可视化方式搭建前端页面,对预置的页面框架进行自定义设置,并通过拖拽的方式对应用菜单进行配置。

BizWorks平台支持通过可视化编排前端全代码两种模式进行页面开发。

编排页面:可视化编排

在页面编排设计器:

  • 通过逻辑流、JS方法,完成页面上交互动作设置。

  • 在逻辑流节点中,可调用已编排的服务方法。

  • 在画布中使用开发管理中上传的自定义组件。

  1. 在目标轻应用导航栏中,选择应用开发 > 页面编排

  2. 页面编排页面,单击目标页面名称右侧操作列下的编辑页面。在编辑页面画布中,进行页面的可视化编排。1

    具体操作,请参见可视化编排页面

编排页面:前端全代码

开发管理中允许您上传自定义页面,在完成线下开发并打包页面代码至平台后,也可将代码映射至应用内页面,后续即可和其他编排出的页面一样被调用。

  1. 页面编排页面,单击新建页面

  2. 新建页面面板,编码需填写为自定义页面config.json文件中定义的pageId开发模式选择前端全代码,完成相关配置项设置后,单击创建1

    关于pageId的更多信息,请参见创建页面

配置页面框架

  1. 页面编排页面,单击导航与框架配置

  2. 配置页面框架页面,配置导航栏和用户信息。

    具体操作,请参见可视化编排页面

管理菜单

菜单项可指向应用内开发的页面,也可指向外部链接。在对菜单项设置完成后,您即可通过拖拽菜单项的方式对应用菜单进行配置。

  1. 菜单管理页面的应用菜单配置页签,单击新增菜单配置

  2. 新增菜单配置面板,您可以参考下图配置导航菜单内容及显示顺序,完成相关参数配置后单击保存1

    更多信息,请参见新增和管理菜单配置

步骤五:部署应用

  1. 在目标轻应用导航栏中,单击应用部署

  2. 应用部署页面,选择需要部署的环境,单击目标环境下的虚线框。在应用部署面板,完成相关参数配置后,单击开始部署

    单实例资源配置支持1vCPU/2GB2vCPU/4GB两种配置。更多信息,请参见部署轻应用实例