一种基于JSON自描述结构的网页界面生成方法及装置制造方法及图纸

本发明专利技术涉及计算机技术领域，公开了一种基于JSON自描述结构的网页界面生成方法，包括：定义模板页类型；进行模板页的标准页面描述结构的定义，生成核心内容块，形成渲染模板；生成设计界面结构描述的JSON结构；渲染引擎载入该设计界面的JSON结构，载入对应的渲染模板；渲染引擎递归调用渲染模板，将设计界面的JSON结构中的组件元素生成为界面控件，并将交互事件脚本写入控件API函数；渲染引擎根据页面id将该设计界面缓存在LRU中，并输出页面HTML到浏览器；浏览器端执行js组件框架，渲染并最终呈现该设计界面。本发明专利技术让数据绑定不再仅限于开发阶段，在实施、试运行阶段也可根据需求进行调整，大幅降低了页面开发中的错误率和部署周期，节约了研发工时。

A web page interface generation method and device based on JSON self describing structure

The invention relates to the field of computer technology, and discloses a method for generating Web page interface based on JSON self-description structure, including: defining template page type; defining standard page description structure of template page; generating core content blocks to form rendering templates; generating JSON structure for design interface structure description; and rendering engine. Load the JSON structure of the design interface and load the corresponding rendering template; the rendering engine recursively calls the rendering template, generates the component elements in the JSON structure of the design interface into the interface control, and writes the interactive event script to the control API function; the rendering engine caches the design interface in LRU according to the page id, and outputs the page. Face HTML to browser; browser side executes JS component framework, rendering and finally rendering the design interface. The invention enables data binding not only to the development stage, but also to be adjusted according to requirements in the implementation and commissioning stages, which greatly reduces the error rate and deployment cycle in page development and saves research and development time.

【技术实现步骤摘要】
一种基于JSON自描述结构的网页界面生成方法及装置
本专利技术涉及计算机
，特别是一种基于JSON自描述结构的网页界面生成方法及装置。
技术介绍
随着B/S技术的流行，软件开发人员经常遇到不定期地更新界面JS框架，修改界面风格等情况。由于界面布局、风格元素和交互动作、数据逻辑分属于页面美工和前端开发。同时，由于目前流行的UI框架越来越复杂、越来越庞大，组件布局和基本事件交互费事费力，每次升级都需要大量的人员培训和熟悉周期。如何更好地隔离业务开发与UI呈现，重用重组现有组件、让业务开发仅仅聚焦于业务交互过程，提高研发效率是亟待解决的紧迫问题。
技术实现思路
为了解决上述现有技术的不足，本专利技术公开了一种基于JSON自描述结构的网页界面生成方法及装置，让数据绑定不再仅限于开发阶段，在产品实施、试运行部署中运维人员都可以随时根据客户需求调整展示需求，大幅降低了页面开发中的错误率和部署周期，节约了研发工时。为实现上述技术目的，达到上述技术效果，本专利技术公开了一种基于JSON自描述结构的网页界面生成方法，所述方法包括如下步骤：S1：提炼业务系统中的固化的页面结构，定义模板页类型；S2:根据S1中提炼出的模板页类型，进行模板页的标准页面描述结构的定义，生成核心内容块，形成渲染模板；S3：获取并解析用户需求，进行界面设计，生成设计界面结构描述的JSON结构，存储在数据库中，并在数据库生成该设计界面的页面id和该设计界面所对应的模板页类型；S4：当该设计界面发起初次界面请求时，渲染引擎从步骤S3所述的数据库中载入该设计界面的JSON结构，并根据模板页类型进行资源适配，载入步骤S2中对应的渲染模板；S5：渲染引擎递归调用逐级引用的渲染模板，将设计界面的JSON结构中的组件元素生成为界面控件，并将交互事件脚本写入该设计界面控件API函数；S6：渲染引擎根据页面id将该设计界面缓存在LRU中，并输出页面HTML到浏览器；S7：浏览器端执行js组件框架，渲染由步骤S6输出的界面结构，最终呈现该设计界面。进一步地，步骤S1中所述的模板页类型包括列表式界面、单纯表单式界面和报表式图表界面。进一步地，步骤S2中所述的标准页面描述结构用于定义模板页的不同组件元素的关联关系和组件属性。进一步地，步骤S3中所述的JSON结构用于定义设计界面的不同组件元素的关联关系和组件属性。进一步地，所述的组件元素属性配置为基本属性、事件交互属性和扩展属性。进一步地，所述的基本属性包括组件的类型和组件的名称；所述的事件交互属性包括组件大小、点击事件、校验正则表达式、数据源、选中方式；所述的扩展属性包括与用户需求、js界面框架相关的额外属性,扩展属性可以根据用户需求不同和终端渲染组件库的不同进行额外配置。进一步地，步骤S6中所述的LRU可以为渲染引擎提供缓存，合并多次界面请求为单次渲染。进一步地，修改设计界面时，提取步骤S3中数据库内的该设计界面的JSON结构，对需要修改或增减的组件元素的基本属性、事件交互属性或扩展属性进行重新配置，不需修改的部分保持不变，重新执行步骤S3-S7。本专利技术还公开了一种基于JSON自描述结构的网页界面生成装置，包括：模板页定义模块，用于提炼业务系统中的固化的页面结构，定义模板页类型；渲染模板生成模块，用于根据模板页定义模块中提炼出的模板页类型，进行模板页的标准页面描述结构的定义，生成核心内容块，形成渲染模板；设计界面定义模块，用于获取并解析用户需求，进行界面设计，生成设计界面结构描述的JSON结构，存储在数据库中，并在数据库生成该设计界面的页面id和该设计界面所对应的模板页类型；模板适配模块，用于当该设计界面发起初次界面请求时，渲染引擎从步骤S3所述的数据库中载入该设计界面的JSON结构，并根据模板页类型进行资源适配，载入对应的渲染模板；界面组装模块，用于渲染引擎递归调用逐级引用的渲染模板，将设计界面的JSON结构中的组件元素生成为界面控件，并将交互事件脚本写入该设计界面控件API函数；界面渲染模块，用于渲染引擎根据页面id将该设计界面缓存在LRU中，并输出页面HTML到浏览器；界面生成模块，用于浏览器端执行js组件框架，渲染由界面渲染模块输出的界面结构，最终呈现该设计界面。本专利技术具有以下有益效果：（1）本专利技术的基于JSON自描述结构的网页界面生成方法，通过从大量业务系统中提炼出相对固化的页面结构，包括列表式界面、单纯表单式界面和报表式图表界面，建立模板页，节约了研发工时；（2）本专利技术用JSON作为DSL描述结构，通过服务端渲染生成核心内容块，通过嵌入到已有界面或直接输出，即可与复杂界面融合，也可实现输出所见即所得，大幅降低了页面开发中的错误率、部署周期；（3）本专利技术的基于JSON自描述结构的网页界面生成方法借由标准页面描述结构DSL的灵活性，研发人员可以非常灵活地对界面查询条件、绑定数据列、表单元素进行拖拉式快速定制。附图说明图1为本专利技术的网页界面生成方法的流程图。图2为本专利技术的实施例一的列表式界面的标准页面描述结构示意图。图3位本专利技术的网页界面生成装置的示意结构图。具体实施方式为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。本专利技术公开了一种基于JSON自描述结构的网页界面生成方法，如图1所示，包括如下步骤：S1：提炼业务系统中的固化的页面结构，定义模板页类型。对目前普遍应用的业务系统，采集大量样本，从中提取相对固化的页面结构，总结出如下模板页类型，包括列表式界面、单纯表单式界面和报表式图表界面。其中列表式界面是指用户提供数据逐行逐页查看、筛选、和操作按钮的页面；单纯表单式界面是指布局相对简单，通过HTML表单数据控件布局收集、修改数据库记录的界面；报表式图表界面是指进行数据汇总分析，提供数据报表明细，并同时在顶部展示饼形图、柱形图等基本图例的页面。S2:根据步骤S1中提炼出的模板页类型，进行模板页的标准页面描述结构DSL的定义，生成核心内容块，形成渲染模板。步骤S2中的标准页面描述结构DSL用于定义模板页的不同组件元素的关联关系和组件属性。如图2所示，给出了本专利技术的一个实施例，为列表式界面的标准页面描述结构。其中，模板页的组件元素属性配置为基本属性、事件交互属性和扩展属性。基本属性包括组件的类型和组件的名称。事件交互属性包括组件大小、点击事件、校验正则表达式、数据源、选中方式。扩展属性包括与用户需求、js界面框架相关的额外属性,扩展属性可以根据用户需求不同和终端渲染组件库的不同进行额外配置。S3：获取并解析用户需求，进行界面设计，生成设计界面结构描述的JSON结构，存储在数据库中，并在数据库生成该设计界面的页面id和该设计界面所对应的模板页类型。具体地，步骤S3中JSON结构用于定义设计界面的不同组件元素的关联关系和组件属性。其中，设计界面的组件元素属性也配置为基本属性、事件交互属性和扩展属性。基本属性包括组件的类型和组件的名称。事件交互属性包括组件大小、点击事件、校验正则表达式、数据源、选中方式。扩展属性包括与用户需求、js界面框架相关的额外属性,扩展属性可以根据用户需求不同和终端渲染组件库的不同进行额外配置。本申请的实施例中可以通过拖拉式的界面设计，来快速地生本文档来自技高网...

【技术保护点】
1.一种基于JSON自描述结构的网页界面生成方法，其特征在于，所述方法包括如下步骤：S1：提炼业务系统中的固化的页面结构，定义模板页类型；S2: 根据S1中提炼出的模板页类型，进行模板页的标准页面描述结构的定义，生成核心内容块，形成渲染模板；S3：获取并解析用户需求，进行界面设计，生成设计界面结构描述的JSON结构，存储在数据库中，并在数据库生成该设计界面的页面id和该设计界面所对应的模板页类型；S4：当该设计界面发起初次界面请求时，渲染引擎从步骤S3所述的数据库中载入该设计界面的JSON结构，并根据模板页类型进行资源适配，载入步骤S2中对应的渲染模板；S5：渲染引擎递归调用逐级引用的渲染模板，将设计界面的JSON结构中的组件元素生成为界面控件，并将交互事件脚本写入该设计界面控件API函数；S6：渲染引擎根据页面id将该设计界面缓存在LRU中，并输出页面HTML到浏览器；S7：浏览器端执行js组件框架，渲染由步骤S6输出的界面结构，最终呈现该设计界面。

【技术特征摘要】
1.一种基于JSON自描述结构的网页界面生成方法，其特征在于，所述方法包括如下步骤：S1：提炼业务系统中的固化的页面结构，定义模板页类型；S2:根据S1中提炼出的模板页类型，进行模板页的标准页面描述结构的定义，生成核心内容块，形成渲染模板；S3：获取并解析用户需求，进行界面设计，生成设计界面结构描述的JSON结构，存储在数据库中，并在数据库生成该设计界面的页面id和该设计界面所对应的模板页类型；S4：当该设计界面发起初次界面请求时，渲染引擎从步骤S3所述的数据库中载入该设计界面的JSON结构，并根据模板页类型进行资源适配，载入步骤S2中对应的渲染模板；S5：渲染引擎递归调用逐级引用的渲染模板，将设计界面的JSON结构中的组件元素生成为界面控件，并将交互事件脚本写入该设计界面控件API函数；S6：渲染引擎根据页面id将该设计界面缓存在LRU中，并输出页面HTML到浏览器；S7：浏览器端执行js组件框架，渲染由步骤S6输出的界面结构，最终呈现该设计界面。2.如权利要求1所述的一种基于JSON自描述结构的网页界面生成方法，其特征在于，步骤S1中所述的模板页类型包括列表式界面、单纯表单式界面和报表式图表界面。3.如权利要求2所述的一种基于JSON自描述结构的网页界面生成方法，其特征在于，步骤S2中所述的标准页面描述结构用于定义模板页的不同组件元素的关联关系和组件属性。4.如权利要求3所述的一种基于JSON自描述结构的网页界面生成方法，其特征在于，步骤S3中所述的JSON结构用于定义设计界面的不同组件元素的关联关系和组件属性。5.如权利要求4所述的一种基于JSON自描述结构的网页界面生成方法，其特征在于，所述的组件元素属性配置为基本属性、事件交互属性和扩展属性。6.如权利要求5所述的一种基于JSON自描述结构的网页界面生成方法，其特征在于，所述的基本属性包括组件的...

【专利技术属性】
技术研发人员：陈碧勇，方敏，吕晔，
申请(专利权)人：厦门南讯软件科技有限公司，
类型：发明
国别省市：福建,35