CN110471661A - 前端界面的数据描述方法及前端界面的生成方法 - Google Patents

Abstract

本发明公开了一种前端界面的数据描述方法及前端界面的生成方法，该数据描述方法包括将前端界面进行多级切分获得多级区块；按照构成顺序，用JSON数据格式对区块和区块内承载的组件进行描述，形成一个树形的JSON数据组；其中，组件的描述包括类型、名称、下级和样式，区块的描述包括界面结构定义和切分界面定义，切分界面定义包括区块长度和区块高度。该前端界面的生成方法包括在服务器端存储前端界面的数据描述；客户端从服务器端获取所述数据描述，解析，然后映射到界面标签生成前端界面。本数据描述方法可清晰的描述前端界面的结构，便于客户端根据该描述自动生产成前端界面以及动态渲染前端界面。

Description

前端界面的数据描述方法及前端界面的生成方法

技术领域

本发明涉及软件开发领域，具体涉及一种前端界面的数据描述方法，还涉及前端界面的生成方法。

背景技术

为了满足前端界面的快速开发与后台部署以及界面变更的维护工作，实现由后台管理界面直接管理前端界面，达到实时同步的维护修改前端界面，需要通过一种规范的报文结构与客户端进行通信。

发明内容

本发明的第一目的是提供一种前端界面的数据描述方法。

本发明的第二目的是提供一种前端界面的生成方法。

为达上述目的，本发明采用的技术方案如下：

一种前端界面的数据描述方法，本前端界面的数据描述方法包括以下步骤：

将前端界面进行多级切分获得多级区块；以及

按照构成顺序，用JSON数据格式对区块和区块内承载的组件进行描述，形成一个树形的JSON数据组，所述树形的JSON数据组即为前端界面的数据描述；

其中，组件的描述包括类型、名称、下级和样式，区块的描述包括界面结构定义和切分界面定义，切分界面定义包括区块长度和区块高度。

在所述的将前端界面进行多级切分获得多级区块的步骤中，优选地，区块的切分规则包括同一区块内的组件的类型相近或功能相近。

在所述的将前端界面进行多级切分获得多级区块的步骤中，优选地，最末级的区块中的组件的类型相同或功能相同。

通过上述方法生成了由多级区块和组件构成的、用JSON数据格式描述的报文结构，即树形的JSON数据组。该报文结构清晰的描述了前端界面的结构，客户端从服务器端获取该报文结构后，通过解析，即可生成前端界面以及动态渲染前端界面。

一种前端界面的生成方法，本前端界面的生成方法包括以下步骤：

在服务器端存储前端界面的数据描述，所述的前端界面的数据描述是按照上述的前端界面的数据描述方法生成的树形的JSON数据组；

客户端从服务器端获取所述的树形的JSON数据组，解析，然后映射到界面标签生成前端界面。

与现有技术相比，本发明至少具有以下有益效果：

本发明前端界面的数据描述方法通过对界面多级切分，然后对切分后的区块及区块承载的组件进行描述，可清晰的描述前端界面的结构，方便客户端根据该描述自动生产成前端界面以及动态渲染前端界面。其采用JSON数据格式对区块和组件描述，数据结构简单，且可以支持不同的开发语言，可以避免因不同客户端开发语言不同而无法根据前端界面的描述自动生成前端界面的问题。

附图说明

图1为本发明的一种应用环境的示意图；

图2为前端界面的数据描述方法的流程图；

图3为一个前端界面的实例；

图4为对图3中的前端界面的切分结果；

图5为一个实例中定义的空界面；

图6为水平切分界面实例的展示效果；

图7为垂直切分界面实例的展示效果；

图8为界面元素实例的展示效果；

图9为组件的分类图；

图10为报文结构的示意图。

具体实施方式

下面结合附图和实施例对本发明做进一步说明。

图1示出了本发明的一种应用环境。参照图1，该应用环境包括服务器端1和至少一个客户端3，各客户端3通过通信网络2与服务器端1连接，其中的客户端3可以是智能手机、PC等，通信网络2可以是有线网，也可以是无线网。

本发明中所称的前端指客户端3，后端和后台指服务器端1。

本发明提供的前端界面的数据描述方法旨在对前端界面进行描述，生成一种报文结构，使得客户端3从服务器端1获取该报文结构后，能够自动生成前端界面。从而可以实现由后台管理界面直接管理前端界面，达到实时同步的维护修改前端界面。

图2示出了前端界面的数据描述方法的流程图。参照图2，本前端界面的数据描述方法包括以下步骤：

步骤S1、将前端界面进行多级切分获得多级区块；

首先对前端界面进行分析，按照分析结果制定界面切分计划，然后根据切分计划进行实施。

一种切分方法为：首先进行水平切分，获得多个纵向区块；再按需对水平切分形成的区块进行垂直切分，获得多个横向区块。重复以上操作步骤，先水平切分，后垂直切分,获得多个嵌套的区块，即多级区块。

在制定切分计划时遵循以下规则：1、水平切分时要将同一业务类型或者功能相近的内容划在一个区块中，即，同一区块内的组件的类型相近或功能相近，这样转换后的JOSN数据结构不会太深，方便递归。同理，垂直切分也遵循这样的规则。2、在最末级的区块中的组件的类型相同或功能相同。3、根据界面的复杂程度确定切分级数，逐级向下切分。

切分后的区块优选用数组结构表示，第一次切分后获得一维数组结构[{},{}]，数组的维度随着切分级数的增加而增加。

图3示出了一个前端界面的实例。图4示出了对图3中的前端界面的切分结果。

由图3可见，该前端界面包括三部分，分别归属不同的功能，即：头部为广告，中间为栅格菜单，底部为推荐信息。因此，对该前端界面的水平切分方案为切分为区块A、区块B和区块C，如图4所示。数组表示为[{A},{B},{C}]。区块A内部只有广告图，无需切分。区块B中有四个相对独立元素，因此将区块B垂直切分为B1、B2、B3、B4四个区块，数组表示为[{B1},{B2},{B3},{B4}]，区块B与区块B1、区块B2、区块B3、区块B4为父子关系。同理，区块C中有三个相对独立元素，因此将区块C垂直切分为C1、C2、C3三个区块，数组表示为[{C1},{C2},{C3}]，区块C与区块C1、区块C2、区块C3为父子关系。整个区块结构用二维数组表示为：

[{A},{[{B1},{B2},{B3},{B4}]},{[{C1},{C2},{C3}]}]。

步骤S2、按照构成顺序，用JSON数据格式对区块和区块内承载的组件进行描述，形成一个树形的JSON数据组，所述树形的JSON数据组即为前端界面的数据描述。其中，组件的描述包括类型、名称、下级和样式，区块的描述包括界面结构定义和切分界面定义，切分界面定义包括区块长度和区块高度。

JSON(JavaScript Object Notation，JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

下面列举了一些描述实例。实例中用到的数据标识如下表：

type	组件类型
		name	组件名称
icon	组件图标
		content	组件内容
style	样式定义
		key	组件标志
model	组件模型名称
		span	删格宽度
config	界面配置项
		options	属性配置

实例一：空界面定义

定义了空界面的基本要素，list为未切分的状态，config配置了空界面的样式。

该空界面的展示效果见图5。

实例二：水平切分界面定义

水平切分后，list内由对象填充，type定义组件类型，columns定义了水平切分的内容默认，其中的list＝null,span＝24。Options项定义了区块的属性信息，包括长度，高度，边距等。

该水平切分界面的展示效果见图6。

实例三：垂直切分界面定义

垂直切分后，columns的数组宽度为切分的大小，数组中的每个元素容纳垂直切分的区块，其他属性与水平切分类似。

该垂直切分界面的展示效果见图7。

实例四：界面元素(组件)以及属性定义

界面元素是区块内承载的组件，用来填充界面内容。

界面元素的展示效果见图8。

在最末级的区块中承载的是具体的界面展示元素，本发明中将其抽象为界面组件，简称为组件。如图9所示，依据组件的构成方式，分为基础组件和业务组件两大类。其中，基础组件分为表单组件、数据组件、消息组件、导航组件。表单组件：封装交互组件，输入框，文本域等。数据组件：绑定服务器返回的数据。消息组件：各种信息的展示。导航组件：页面跳转，页面切换。业务组件分为独立组件、聚合组件。独立组件：独立承载所有业务功能件。聚合组件：由多个组件聚合在一起完成某一业务功能。

实例五：一种栅格组件的描述

实例六：一种文本组件的描述

通过上述前端界面的数据描述方法，生成了由多级区块和组件构成的、用JSON数据格式描述的报文结构，如图10所示。该报文结构清晰的描述了前端界面的结构，客户端从服务器端获取该报文结构后，通过解析，即可生成前端界面以及动态渲染前端界面。

一种前端界面的自动生成方法，该方法包括以下步骤：

步骤一、在服务器端存储前端界面的数据描述。

所述的前端界面的数据描述为如上述的前端界面的数据描述方法生成的树形的JSON数据组。可以在其它终端生成后存储至服务器端，也可以直接在服务器端生成并保存。具体的，可以在报文定义定义场景下，采用ajax的方式提交数据到服务器，通信方式为post。具体程序如下：

步骤二、客户端从服务器端获取所述的树形的JSON数据组，解析，然后映射到界面标签生成前端界面。客户端可采用ajax从服务器获取数据，通信方式为get。具体程序如下：

这个树形JSON数据组就是对界面结构的描述，在使用时只需按找节点逐级递归便可获得前端界面的完整的数据内容。在自动化生成界面的场景中，将解析后的JSON映射到界面标签即可生成页面；在动态展示页面场景下，将JSON数据组压缩后直接通过报文传递到客户端(移动终端或者PC终端)进行解析和渲染。

上述通过具体实施例对本发明进行了详细的说明，这些详细的说明仅仅限于帮助本领域技术人员理解本发明的内容，并不能理解为对本发明保护范围的限制。本领域技术人员在本发明构思下对上述方案进行的各种润饰、等效变换等均应包含在本发明的保护范围内。

Claims (4)

1.一种前端界面的数据描述方法，其特征在于，包括：

将前端界面进行多级切分获得多级区块；以及

按照构成顺序，用JSON数据格式对区块和区块内承载的组件进行描述，形成一个树形的JSON数据组，所述树形的JSON数据组即为前端界面的数据描述；

其中，组件的描述包括类型、名称、下级和样式，区块的描述包括界面结构定义和切分界面定义，切分界面定义包括区块长度和区块高度。

2.根据权利要求1所述的前端界面的数据描述方法，其特征在于，所述的将前端界面进行多级切分获得多级区块的步骤中，区块的切分规则包括同一区块内的组件的类型相近或功能相近。

3.根据权利要求2所述的前端界面的数据描述方法，其特征在于，所述的将前端界面进行多级切分获得多级区块的步骤中，最末级的区块中的组件的类型相同或功能相同。

4.一种前端界面的生成方法，其特征在于，包括：

在服务器端存储前端界面的数据描述，所述的前端界面的数据描述为如权利要求1所述的方法生成的树形的JSON数据组；

客户端从服务器端获取所述的树形的JSON数据组，解析，然后映射到界面标签生成前端界面。