本发明涉及计算机领域，尤其涉及一种网页可视化构件开发方法。
背景技术：
目前，基于前端网页开发过程，一般都是基于前端框架，然后通过在此框架上进行手动编码，然后进行页面开发，而且很少制定一套前端开发规范，导致不同人之间写出来的代码难以统一，不利用网页代码后期维护。一个项目中开发的网页代码，在另一个项目开发中难以重复利用，就算利用，也仅仅是通过代码复制再修改的方式，容易出现代码遗漏，改动困难的情况，需求变动，导致界面展示变化，也不能快速的响应，需要手动进行代码调转。最终会造成开发效率低下，不利于后期维护性与扩展性。
技术实现要素：
本发明的目的在于解决上述现有技术存在的缺陷，提供一种网页可视化构件开发方法。
一种网页可视化构件开发方法，包括以下步骤：
s1，网页展示提取组件；
s2，可视化构件封装，形成网页构件资源库；
s3，构件可视化嵌套；
s4，对话框进行展示属性与数据源属性配置；
s5，生成网页代码；
s6，进行网页展示。
进一步地，如上所述的网页可视化构件开发方法，s1中所述的组件包括布局组件、展示组件、展示与布局组合组件；
所述展示组件指是网页上实实在在显示的界面，如日历，表格；
布局组件为决定组件在网页上位置的摆放，一般不再网页上进行展示，包括栅格布局、表格布局；
展示与布局组合组件是既在网页上进行展示，也可以组件在网页上放置的位置，包括面板含栅格布局。
进一步地，如上所述的网页可视化构件开发方法，s2所述可视化构件封装步骤包括：将s1提取的组件代码封装成xml标签；将组件代码对应的xml标签、相关的js与css和图片资源打包封装成可视化构件，将可视化构件放入网页构件资源库中。
进一步地，如上所述的网页可视化构件开发方法，s3构件可视化嵌套包括：对布局构件进行网页站位，然后将展示构件放入布局构件中，展示构件又可嵌套布局组件，这样层层嵌套，形成最终可视化网页。
进一步地，如上所述的网页可视化构件开发方法，s4包括：进行构件网页展示相关属性配置；进行构件事件处理属性配置；进行构件数据属性配置。
进一步地，如上所述的网页可视化构件开发方法，所述网页构件资源库包括：包括基础构件、组合构件、业务构件；
基础网页构件是细粒度网页构件，功能特性比较单一，包括日历，下拉菜单；
组合网页构件是基础网页构件组合形成的，方便网页快速成型，较少实际开发组合成本，包括带面板的表单、带tab页的表格；
业务网页构件是具有一定业务含义还有的构件，通用性差，常根据某一场景定制的；包括含有用户名、用户密码的登录构件。
本发明的有益效果在于：通过可视化构件开发方式，降低了开发难度，增加了网页开发的灵活性与扩展性；提高了开发人员效率；同时构件资源库的搭建，实现了网页构件资源的复用性，降低了开发成本。
附图说明
图1是本发明的步骤流程图；
图2是本发明中层次图；
图3是本发明中使用步骤流程图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
如图1所示，本发明提供一种网页可视化构件开发方法，包含以下步骤：
s1，网页展示提取组件；
s2，可视化构件封装，形成网页构件资源库；
s3，构件可视化嵌套；
s4，对话框进行展示属性与数据源属性配置；
s5，生成网页代码；
s6，进行网页展示。
优选的，s1中所述的组件包括布局组件、展示组件、展示与布局组合组件。
优选的，s2所述可视化构件封装关键步骤包括将s1提取的组件代码封装成xml标签；将组件代码对应的xml标签、相关的js与css和图片等资源打包封装成可视化构件，将可视化构件放入网页构件资源库中。s2中所述的网页构件资源库主要包括基础网页构件、组合网页构件、业务网页构件几类。基础网页构件是细粒度网页构件，功能特性比较单一，如日历，下拉菜单；组合网页构件是基础网页构件组合形成的，方便网页快速成型，较少实际开发组合成本，如带面板的表单、带tab页的表格；业务网页构件是具有一定业务含义还有的构件，通用性差，常根据某一场景定制的，如还有用户名、用户密码的登录构件。
优选的，s3中构件可视化嵌套关键步骤是布局构件进行网页占位，然后将展示构件放入布局组合构件中，展示构件又可嵌套布局组合构件，这样层层嵌套，形成最终可视化网页。
优选的，s4中的对话框包括以下配置：
1)进行构件网页展示相关属性配置，如高度、宽度；
2)进行构件事件处理属性配置，如点击事件、值改变事件；
3)进行构件数据属性配置，如表格需要展示数据后台请求地址；
优选的，1)中所述配置主要影响网页展示大小、颜色、与位置等。
优选的，2)中所述配置主要影响网页的动态交互能力。
优选的，3)中所述配置主要影响网页动态数据来源。
实施例：
一种网页可视化构件开发方法，包含以下步骤：
s1，网页展示提取组件；组件包括：展示组件、布局组件、展示与布局组合组件。展示组件主要是网页上实实在在显示的界面，如日历，表格；布局组件主要是决定组件在网页上位置的摆放，一般不再网页上进行展示，如栅格布局、表格布局。展示与布局组合组件是既在网页上进行展示，也可以组件在网页上放置的位置，如面板含栅格布局。
s2，可视化封装，形成网页构件资源库；可视化封装主要是将展示组件、布局组件与布局组合组件对应代码、相关js与css和图片资源统一打包封装成可视化构件，实现构件拖拽自动生成相关网页组件代码与资源关联。网页构件资源库主要包括基础网页构件、组合网页构件、业务网页构件几类。基础网页构件是细粒度网页构件，功能特性比较单一，如日历，下拉菜单；组合网页构件是基础网页构件组合形成的，方便网页快速成型，较少实际开发组合成本，如带面板的表单、带tab页的表格；业务网页构件是具有一定业务含义还有的构件，通用性差，常根据某一场景定制的，如还有用户名、用户密码的登录构件。
s3，构件可视化嵌套；关键步骤是布局构件进行网页站位，然后将展示构件放入布局构件中，展示构件又可嵌套布局组件，这样层层嵌套，形成最终可视化网页。
s4，对话框进行展示、事件、数据属性配置；对话框包括以下配置：进行构件网页展示相关属性配置，如高度、宽度；进行构件事件处理属性配置，如点击事件、值改变事件；进行构件数据属性配置，如表格需要展示数据后台请求地址；
s5，生成网页代码。
s6，进行网页展示。
整个层次结构与作用如下，具体如附图2所示：
基础组件层：包括基础布局组件与基础展示组件，是一些功能单一的网页展示。主要为自定义组件与组合组件层提供材料。
组合组件层：包括布局组合组件，展示组合组件，是基础组件组合，开始使用可以减少配置成本，开发效率更高。主要为网页构件资源层提供材料。
网页构件资源库：包括基础构件、、组合构件、业务构件等，是开发使用的构件资源集，构件种类丰富。
网页可视化编辑器层：包括构件渲染、构件属性配置、数据源绑定、事件处理、逻辑操作、编译、部署，开发人员主要在此层可实现构件拖拽，并进行构件可视化展示渲染、属性配置、动态事件处理、最终生成需要的网页代码。
用户层：主要是开发人员层，用来对网页可视化编辑器层操作。
开发使用方式具体流程包含以下步骤，具体如附图3所示：
1)新建网页，建立一个新网页文件；
2)网页类型选取手机网页、pc网页等，根据选取的类型自动匹配可视化编辑器视图；
3)构件选取，根据网页要求，在构件资源库中选择合适的构件；
4)如果构件库中没有开发需要的构件，则需要进行自定义构件；
5)自定义构件，根据功能选取已有代码组件或者自定义js实现；
6)可视化构件封装，将网页代码、相关js、css等资源封装成可视化构件。
7)放入网页构件库，将封装的构件按照构件库分类放入对应目录中。
8)构件拖拽，选中需要的构件，拖拽放入编辑器中，在编辑器中进行构件可视化展示。
9)属性配置，进行构件展示属性配置，如高度、宽度、颜色。
10)数据源配置，进行构件数据来源后台地址配置，如表格请求url。
11)事件处理，绑定相关js脚本路径，脚本中实现页面动态处理。
12)编译、部署，实现最终网页代码的生成。
13)浏览访问，进行网页界面展示。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。