示例:基于共享能力搭建轻应用

更新时间:
复制为 MD 格式

完成中心应用的开发和部署后,您将进入轻应用开发阶段。轻应用提供了低代码、可视化的方式对页面和服务方法进行编排,实现前端应用对后端能力的复用。本文以基于商品中心搭建商品管理平台为例介绍如何开发轻应用。

步骤一:创建轻应用

  1. 登录BizWorks,在选择平台下拉列表中选中轻应用组装平台image.png

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

  3. 创建轻应用面板,完成相关配置后,单击保存

    更多信息,请参见创建轻应用

    页面提示保存成功,你可以在应用列表页面查看所创建的轻应用。具体参数配置详情如下。

    编辑轻应用的基本信息包含以下参数:应用名称(例如商品管理后台)、应用编码(系统自动生成,只读)、描述(选填)、应用图标(可选底色和图标)、应用场景(可选PCPC端+H5)。

步骤二:关联数据源

说明

在依赖数据源页面添加依赖数据源后,您可以在服务方法的编排中使用关联的数据源的服务方法。

  1. 应用列表页面,单击目标轻应用名称。

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

  3. 依赖数据源页面,单击关联数据源

  4. 关联数据源面板,选择目标数据源,本文以关联BizWorks应用类型的数据源(示例商品中心为调用的应用)为例说明,您可以完成配置项设置,完成后单击保存。在弹出的编辑数据源对话框中,填写数据源名称(例如"商品中心"),选择范围当前项目,选择调用的应用(例如"示例商品中心"),系统自动填充应用编码应用版本。在公共固定参数配置区域,可按需在Query参数Header参数Body参数页签中单击添加参数配置公共参数。设置超时时间(秒)(默认30),然后单击保存

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

  6. 结构对象页面的左侧导航栏中,选择依赖数据源 > 商品中心(所关联数据源名称),您可以查看能够调用的数据源中的结构对象。该数据源的结构对象包括品牌(BrandDTO)、品牌分页信息(BrandPageInfo)、商品(ItemDTO)、商品分页信息(ItemPageInfo)、排序条件(OrderBy)和条件断言(Predicate),可单击详情查看具体定义。

  7. 可选:您如果需要构建轻应用内部自定义结构对象,在结构对象页面的左侧导航栏中,单击自定义,然后单击新建结构对象

    具体如何新建结构对象,请参见新建结构对象

步骤三:编排服务

说明
  • 搭建商品管理后台的目的是为了对商品列表进行查询及管理,因此在本轻应用内,需要构建查询等服务方法。

  • 商品中心(依赖数据源名称)中,对商品对象的增删改查能力均已得到实现。因此,您可以直接从数据源批量创建服务方法。

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

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

  2. 服务方法页面中,单击从数据源批量创建

  3. 从数据源批量创建服务方法面板的左侧导航栏中,选中商品中心 > 默认分组 > 商品服务节点下的所有服务方法,完成后单击保存

    BizWorks在该轻应用内创建同名称、同编码、同出入参类型的服务方法,且该服务方法能够自动调用对应的基础能力。保存后,在 服务编排 页面的 商品增删改查 分类下,可看到已批量创建的5个服务方法:createdeleteByIdfindByConditionfindByIdupdate,开发模式均为 可视化编排

步骤四:编排页面

本文以运营平台首页及商品管理页为例,介绍页面编排的能力。其中,商品管理页中对商品列表信息的展示需调用基础能力,为保证数据的正常获取,您需要确保该基础能力已被构建完成,并能够被顺利调用。

说明

在页面编排中,您可以通过对组件的拖拽实现页面内容的设计及布局,实现应用的可视化编排。

步骤一:新建页面

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

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

  3. 新建页面面板,按照下图所示的配置项完成设置后,单击创建。将页面名称设置为商品管理,勾选显示导航菜单开发模式选择可视化编排。创建完成后,在页面编排列表中可看到新建的四个业务页面:产品管理概览商品管理品牌管理,与默认的示例页面区分显示。

    更多参数相关信息,请参见参数说明

步骤二:页面编排

说明

商品列表需要使用表格组件,且表格包含商品信息,因此绑定的结构对象需为一个商品List

  1. 页面编排页面,单击页面名称商品管理右侧操作列下的编辑页面

  2. 在编辑页面画布中,单击画布左侧的1图标,在标准组件基础组件区域,您可以拖拽表格组件至画布右侧。

  3. 配置表格对话框中,为表格绑定一个结构对象类型。

    1. 绑定表格数据下拉列表中,单击新增变量

    2. 新增变量对话框中,参考下图完成相关参数配置。

      新增变量一:在新增变量弹窗中,变量名称填写 itemList变量类型依次选择集合类型 > List > 对象类型 > 关联数据源 > 商品中心 > ItemDTO,然后单击保存

      • 变量名称itemList

      • 变量类型集合类型 > List > 对象类型 > 关联数据源 > 商品中心 > ItemDTO

      新增变量二。

      • 变量名称itemQuery

      • 变量类型对象类型 > 关联数据源 > 商品中心 > ItemDTO

    3. 绑定表格数据下拉列表中,选中目标表格变量(itemList)后,单击下一步。此时配置表格对话框显示已选5个字段,包括ID(Integer)、名称(String)、标题(String)等。

    4. 完成相关项配置后,单击确定。在配置表格对话框的选择布局步骤中,开启同步生成筛选表单,将绑定筛选表单变量设置为itemQuery,开启生成新增数据按钮生成操作列,然后单击确定

  4. 单击添加一项,增加编辑查看操作项。操作列属性面板中,宽度设置为 170 像素,按钮类型选择链接,列固定选择,最大展示数量设置为 3

  5. 对表格的数据源进行配置。

    1. 选中整个画布,在右侧事件页签,单击新建动作(支持配置页面加载完成时离开页面时动作)。

    2. 页面加载完成时绑定动作。您可以调用页面JS全局JS中的内容,也可以进入逻辑流面板(本文以逻辑流编排为例说明),进行可视化逻辑流的编排操作。具体操作,请参见新建动作

      下图为逻辑流示例:image.png

      调用后端服务方法(findByCondition),复用能力。在逻辑流面板中,选中页面 - 页面加载完成时节点,配置调用后端服务节点:选择调用后端服务为 findByCondition;入参赋值中,入参 condition_body(类型 QueryCondition),赋值方式选择,值为 {};结果输出中,将字段 result.data.result(类型 List<ItemDTO>)赋值给变量 itemList。配置完成后单击保存

    说明

    完成该逻辑流编排后,应用在页面加载完时通过能力获取到相应数据,并进行前端数据显示。除了需要显示数据外,运营平台也需要具备新增商品信息的能力。

步骤五:配置导航与页面框架

说明

在页面编排的过程中,您可以对页面框架进行调整。

打开页面框架设计器,您可以根据喜好对页面框架进行相应的配置。完成对页面的设计后,您可以通过菜单管理把编排完成的页面关联至具体的菜单,有需要时还可进行分组。具体操作,请参见配置页面导航和框架。页面框架设计器的菜单管理视图分为三个区域:左侧菜单项列表展示已添加的页面菜单项,中间预览区实时展示导航布局效果,右侧属性面板可配置导航布局(左侧导航、顶部导航、顶部+左侧导航等)、导航背景色(主题色、白色、黑色)、导航默认收起开关、自动加载导航菜单开关和多页签开关等选项。页面框架设计器包含左侧工具栏、中间预览区和右侧属性面板。属性面板提供应用信息(应用logo)、导航配置(左侧导航/顶部导航)、导航背景色导航默认收起自动加载导航菜单多页签用户信息配置等配置项,预览区可实时查看导航布局效果。

步骤六:部署应用

在应用开发完成后,您可以选择环境并进行应用的部署。具体操作,请参见部署和管理轻应用