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

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

Data description method of front-end interface and generation method of front-end interface

The invention discloses a data description method of the front-end interface and a generation method of the front-end interface. The data description method includes multi-level segmentation of the front-end interface to obtain multi-level blocks; according to the order of composition, the description of blocks and components carried in blocks is made in JSON data format to form a tree shaped JSON data group; wherein, the description of components includes type, name Lower level and style. The description of block includes the definition of interface structure and segmentation interface. The definition of segmentation interface includes block length and block height. The generation method of the front-end interface includes storing the data description of the front-end interface on the server side; the client obtains the data description from the server side, analyzes it, and then maps it to the interface label to generate the front-end interface. This data description method can clearly describe the structure of the front-end interface, so that the client can automatically produce the front-end interface and dynamic rendering front-end interface according to the 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(JavaScriptObjectNotation，JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。下面列举了一些描述实例。实例中用到的数据标识如下表：type组件类型name组件名称icon组件图标content组件内容style样式定义key组件标志model组件模型名称span删格宽度config界面配置项options属性配置实例一：空界面定义<本文档来自技高网...

【技术保护点】
1.一种前端界面的数据描述方法，其特征在于，包括：/n将前端界面进行多级切分获得多级区块；以及/n按照构成顺序，用JSON数据格式对区块和区块内承载的组件进行描述，形成一个树形的JSON数据组，所述树形的JSON数据组即为前端界面的数据描述；/n其中，组件的描述包括类型、名称、下级和样式，区块的描述包括界面结构定义和切分界面定义，切分界面定义包括区块长度和区块高度。/n

【技术特征摘要】
1.一种前端界面的数据描述方法，其特征在于，包括：
将前端界面进行多级切分获得多级区块；以及
按照构成顺序，用JSON数据格式对区块和区块内承载的组件进行描述，形成一个树形的JSON数据组，所述树形的JSON数据组即为前端界面的数据描述；
其中，组件的描述包括类型、名称、下级和样式，区块的描述包括界面结构定义和切分界面定义，切分界面定义包括区块长度和区块高度。


2.根据权利要求1所述的前端界面的数据描述方法，其特征在于，所述的将前端界面进行多级切分获得多级区块的步骤中，...

【专利技术属性】
技术研发人员：王鹏，
申请(专利权)人：深圳科蓝金信科技发展有限公司，
类型：发明
国别省市：广东;44