一种面向web的页面构建系统

摘要

本发明公开了一种面向web的页面构建系统，包括：可视化界面操作单元，用于在可视化的界面中形成组件选择区域、组件属性配置区域以及页面预览区域，以供用户通过对组件的操作来实现页面编辑以及页面预览，生成设计视图；数据字典单元，用于指定元数据与组件的属性绑定关系；UI库接入单元，用于接入UI框架；中间件配置转换单元，用于根据所述设计视图、所述数据字典单元定义的元数据与组件的属性绑定关系以及所述UI框架进行数据转换，转换为适于进行页面构建的样式、组件、布局、事件和方法；页面生成单元，用于根据转换后的数据生成HTML文件；页面导出单元，用于将所述页面生成单元生成的HTML文件导出至本地，形成运行web程序。

权利要求

1.一种面向web的页面构建系统，其特征在于，包括：

可视化界面操作单元，用于在可视化的界面中形成组件选择区域、组件属性配置区域以及页面预览区域，以供用户通过对组件的操作来实现页面编辑以及页面预览，生成设计视图；

数据字典单元，用于指定元数据与组件的属性绑定关系；

UI库接入单元，用于接入UI框架；

中间件配置转换单元，用于根据所述设计视图、所述数据字典单元定义的元数据与组件的属性绑定关系以及所述UI框架进行数据转换，转换为适于进行页面构建的样式、组件、布局、事件和方法；配置单元，用于接收用户输入的用于配置组件属性的json配置信息，并将所述json配置信息发送至中间件配置转换单元；

页面生成单元，用于根据转换后的数据生成HTML文件；其中，所述页面生成单元具体用于：将转换后的数据一一与页面元素进行对应，生成对应标签，并引入资源文件；将布局、组件、事件均作为全局静态对象，采取插件注册的方式，把属性和对应的预定义组件相绑定；

其中，每个组件自行在事件响应中通过事件创建方法，最后调用事件；方法的参数从json配置信息中取得；在创建所有组件后，传递给布局对象负责对控件进行布局，以最终生成对应的HTML文件；

页面导出单元，用于将所述页面生成单元生成的HTML文件导出至本地，形成运行web程序。

2.根据权利要求1所述的面向web的页面构建系统，其特征在于，所述运行web程序包含引入的服务器文件以及json配置信息。

3.根据权利要求1所述的面向web的页面构建系统，其特征在于，还包括：导入单元，用于读取导入运行web程序至所述中间件配置转换单元；

所述中间件配置转换单元还用于，将导入的运行web程序转回为设计视图，以方便返工重新编辑构建页面。

4.根据权利要求1所述的面向web的页面构建系统，其特征在于，所述UI库接入单元通过接入第三方框架来获得UI框架；所述第三方框架包括Vue、React、Angular、Jquery。

5.根据权利要求1所述的面向web的页面构建系统，其特征在于，所述数据字典单元定义的元数据与组件的属性绑定从业务系统获得；

所述业务系统预先定义好数据模型，指定页面组件，根据业务需要进行协议约定，根据元数据格式规范进行数据的传递。

说明书

一种面向web的页面构建系统

技术领域

[0001] 本发明涉及计算机技术领域，尤其涉及一种面向web的页面构建系统。

背景技术

[0002] Web页面是万维网上的一个按照HTML格式组织起来的文件，在通过万维网进行信息查询时，以信息页面的形式出现，它可包括图形、文字、声音和视像等信息。Web页面是用户访问万维网的入口，因此Web页面的构建好坏直接影响用户对网站的第一印象。

[0003] Web页面的构建涉及前端开发和后端开发两部分，现有技术在构建web页面时存在如下问题：

[0004] 1、对后端开发人员的前端开发能力要求较高，除了开发业务代码，还需要处理用户体验和界面细节，应对不同需求的定制化设计，存在专业门槛和工作分工的问题；

[0005] 2、现有各开源框架对使用者的要求高，从框架引入搭建、到组件添加、到属性配置，维护更新等，有较多的学习成本；

[0006] 3、现有众多框架对组件的设计规范大同小异，有的过于灵活，有的限制过多，对使用者的实操性、定制化要求高，缺乏便捷接入第三方框架的能力，缺少统一规范；

[0007] 4、现有众多框架只提供基础组件功能，而在实际业务和场景中应用，缺乏快速构建的能力，缺少对场景的整套案例；

[0008] 5、现有众多技术并无提供视图、预览等可视化操作界面，调试难度大，开发效率较低。

发明内容

[0009] 针对上述问题，本发明的目的在于提供一种面向web的页面构建系统，能够快速简便的构建出符合要求的web页面。

[0010] 本发明实施例提供了一种面向web的页面构建系统，包括：

[0011] 可视化界面操作单元，用于在可视化的界面中形成组件选择区域、组件属性配置区域以及页面预览区域，以供用户通过对组件的操作来实现页面编辑以及页面预览，生成设计视图；

[0012] 数据字典单元，用于指定元数据与组件的属性绑定关系；

[0013] UI库接入单元，用于接入UI框架；

[0014] 中间件配置转换单元，用于根据所述设计视图、所述数据字典单元定义的元数据与组件的属性绑定关系以及所述UI框架进行数据转换，转换为适于进行页面构建的样式、组件、布局、事件和方法；

[0015] 页面生成单元，用于根据转换后的数据生成HTML文件；

[0016] 页面导出单元，用于将所述页面生成单元生成的HTML文件导出至本地，形成运行web程序。

[0017] 优选地，还包括：

[0018] 配置单元，用于接收用户输入的用于配置组件属性的json配置信息，并将所述json配置信息发送至所述中间件配置转换单元。

[0019] 优选地，所述页面生成单元具体用于：

[0020] 将转换后的数据一一与页面元素进行对应，生成对应标签，并引入资源文件；

[0021] 将布局、组件、事件均作为全局静态对象，采取插件注册的方式，把属性和对应的预定义组件相绑定；其中，每个组件自行在事件响应中通过事件创建方法，最后调用事件；方法的参数从json配置信息中取得；

[0022] 在创建所有组件后，传递给布局对象负责对控件进行布局，以最终生成对应的HTML文件。

[0023] 优选地，所述运行web程序包含引入的服务器文件以及json配置信息。

[0024] 优选地，还包括：

[0025] 导入单元，用于读取导入运行web程序至所述中间件配置转换单元；

[0026] 所述中间件配置转换单元还用于，将导入的运行web程序转回为设计视图，以方便返工重新编辑构建页面。

[0027] 优选地，所述UI库接入单元通过接入第三方框架来获得UI框架；所述第三方框架包括Vue、React、Angular、Jquery。

[0028] 优选地，所述数据字典单元定义的元数据与组件的属性绑定从业务系统获得；

[0029] 所述业务系统预先定义好数据模型，指定页面组件，根据业务需要进行协议约定，根据元数据格式规范进行传递。

[0030] 与现有技术相比，本发明具有如下优点：

[0031] 1、本发明通过简单的配置即可以完成页面的构建，方便对对不同需求的定制化设计，提高用户体验和界面细节，降低专业门槛和工作分工的问题。

[0032] 2、本发明简化开源框架对使用者的要求，优化框架引入搭建、到组件添加、到属性配置，维护更新等等流程，重新划分布局和组件，降低学习成本。

[0033] 3、本发明通过中间件配置转换单元的转换从而形成统一规范，规避众多框架对组件的设计规范大同小异，方便不同UI框架的接入。

[0034] 4、本发明提供各业务常用配套样例，解决了现有众多框架只提供基础组件功能，缺乏快速构建和统一的标准。

[0035] 5、现有众多技术并无提供视图，预览等可视化操作界面，本发明提供拖拽功能，组件属性配置区域，页面预览区域，页面构建管理功能，页面整体配置数据的导入导出，说明文档和案例等，提高开发调试效率。

附图说明

[0036] 为了更清楚地说明本发明的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

[0037] 图1是本发明实施例提供的面向web的页面构建系统的结构示意图。

具体实施方式

[0038] 下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

[0039] 请参阅图1，本发明实施例提供了一种面向web的页面构建系统，包括：

[0040] 可视化界面操作单元10，用于在可视化的界面中形成组件选择区域、组件属性配置区域以及页面预览区域，以供用户通过对组件的操作来实现页面编辑以及页面预览，生成设计视图。

[0041] 在本实施例中，可视化界面操作单元10提供有设计交互界面，设计交互界面上形成有组件选择区域、组件属性配置区域、页面预览区域，并能实现页面构建管理以及页面整体配置数据的导入导出。用户可以通过将一些预先设定好的组件(如进度条、控件等)通过拖拽的方式放入到设计交互界面的预定位置来直观的实现组件的摆放。此外，所述可视化界面操作单元10还可以提供不同的规格，比如，提供了标准化的大中小三种规格，在编辑页面中实现简单的尺寸调整。在用户调整或者摆放组件的过程中，页面预览区域同时更新视图，展示设计页面的最终效果；比如选择进度条组件，拖拽放到设计视图中，自动提示进度条组件的相关属性，配置录入数据后即可展示最终效果。

[0042] 数据字典单元20，用于指定元数据与组件的属性绑定关系。

[0043] 在本实施例中，可根据业务系统的实际需要，指定好元数据与组件的属性绑定关系。比如根据业务需要进行增删改查、分页、树状格式数据等，然后根据预先设定的协议约定，根据元数据格式规范进行数据的传递。

[0044] 配置单元30，用于接收用户输入的用于配置组件属性的json配置信息，并将所述json配置信息发送至所述中间件配置转换单元。

[0045] 在本实施例中，配置单元提供最原始的数据配置方法，即允许人工输入代码的方式进行配置。例如允许使用json格式作为配置的格式(json是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，这些特性使JSON成为理想的数据交换语言)。

[0046] 即在本实施例中，可以是通过系统自动配置或用户手动配置(手动输入代码)的方式进行属性配置，从而可以满足不同用户的配置需求。

[0047] UI库接入单元40，用于接入UI框架。

[0048] 在本实施例中，UI库接入单元40可接入第三方UI框架，例如蚂蚁金服ant design、bootstrap、iView等等，接入后即可获得各种所需的UI框架，提供更多UI风格的选择。

[0049] 中间件配置转换单元50，用于根据所述设计视图、所述数据字典单元定义的元数据与组件的属性绑定关系以及所述UI框架进行数据转换，得到为适于页面生成单元60进行页面构建的样式、组件、布局、事件和方法。

[0050] 在本实施例中，中间件配置转换单元50主要用于接收数据以及完成数据转换，转换为适于页面生成单元60的样式、组件、布局、事件和方法等。如将json配置信息，UI框架以及设计页面进行数据转换。中间件配置转换单元50作为桥梁，将所有对接的方式统一转成页面生成单元60能识别的模式。

[0051] 页面生成单元60，用于根据中间件配置转换单元50转换后的数据生成HTML文件。

[0052] 具体地，页面生成单元60将中间件配置转换单元50转换后的数据一一与页面元素进行对应，生成对应标签，并引入资源文件，如样式，图片，脚本等。然后将布局、组件、事件均作为全局静态对象，采取插件注册的方式，把一个属性参数和对应的预定义组件绑定。例如：通过组件把具体的UI套件(比如ant design)与页面生成单元60的主体隔离开来。每个组件自行在事件响应中通过事件创建方法(参数可从json配置信息中取得)，最后再调用事件。页面生成单元50在创建所有组件后，传递给布局对象负责对控件进行布局。

[0053] 在本实施例中，在完成控件布局后即可生成相应的HTML文件。

[0054] 页面导出单元70，用于将所述页面生成单元60生成的HTML文件导出至本地，形成运行web程序。

[0055] 在本实施例中，页面导出单元70将通过页面生成单元60生成的HTML文件导出本地，即生成一个完整的运行web程序，运行web程序里面包含引入的服务器文件，如js，css，图片文件，并包含相应的json配置信息。

[0056] 优选地，还包括：

[0057] 导入单元80，用于读取导入运行web程序至所述中间件配置转换单元50；

[0058] 所述中间件配置转换单元50还用于，将导入的运行web程序转回为设计视图，以方便返工重新编辑构建页面。

[0059] 其中，本实施例还允许将完整的运行web程序转换回设计视图，以供用户进行修改调整。比如HTML5的FireReader，可将文件中配置信息放入中间件配置转换单元40进行转为设计视图，方便返工重新编辑构建页面。

[0060] 与现有技术相比，本发明具有如下优点：

[0061] 1、本发明通过简单的配置即可以完成页面的构建，方便对对不同需求的定制化设计，提高用户体验和界面细节，降低专业门槛和工作分工的问题。

[0062] 2、本发明简化开源框架对使用者的要求，优化框架引入搭建、到组件添加、到属性配置，维护更新等等流程，重新划分布局和组件，降低学习成本。

[0063] 3、本发明通过中间件配置转换单元50的转换从而形成统一规范，规避众多框架对组件的设计规范大同小异，方便不同UI框架的接入。

[0064] 4、本发明提供各业务常用配套样例，解决了现有众多框架只提供基础组件功能，缺乏快速构建和统一的标准。

[0065] 5、现有众多技术并无提供视图，预览等可视化操作界面，本发明提供拖拽功能，组件属性配置区域，页面预览区域，页面构建管理功能，页面整体配置数据的导入导出，说明文档和案例等，提高开发调试效率。

[0066] 示例性的，所述面向web的页面构建系统可以通过执行计算机程序来实现，所述计算机程序可以被分割成一个或多个模块，所述一个或者多个模块被存储在所述存储器中，并由所述处理器执行，以完成本发明。所述一个或多个模块可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序在所述医疗服务项目成本核算设备中的执行过程。

[0067] 所述面向web的页面构建系统可以部署于桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算设备可包括，但不仅限于，处理器、存储器、显示器。本领域技术人员可以理解，上述部件仅仅是示例，并不构成对计算设备的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述计算设备还可以包括输入输出设备、网络接入设备、总线等。

[0068] 所称处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述医疗服务项目成本核算设备的控制中心，利用各种接口和线路连接整个所述计算设备的各个部分。

[0069] 所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述面向web的页面构建系统的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、文字转换功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、文字消息数据等)等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

[0070] 其中，所述面向web的页面构建系统如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一个计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

[0071] 需说明的是，以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。另外，本发明提供的装置实施例附图中，模块之间的连接关系表示它们之间具有通信连接，具体可以实现为一条或多条通信总线或信号线。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

[0072] 以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。