[发明专利]一种自动化实现Web系统可视化复用的装置

摘要

一种自动化实现Web系统可视化复用的装置涉及信息技术领域，尤其是Web前端开发技术。本发明由底层模块集和上层应用集组成；底层模块集由组件模块、页面布局模块、样式管理模块、Nodejs服务模块、自定义模板解析模块和系统构建模块组成；上层应用集由页面原型制作工具、可编辑大屏资源库、页面快速制作工具、自定义模板开发工具、开源技术页面开发工具组成；本发明采用了服务端技术和浏览器技术结合的方式，使得Web前端代码在开发时候使用统一的开发模式，开发的时候可以集成时下最先进的Web前端技术，系统开发完毕后，通过编译工具生成符合生产要求的代码，这样让Web开发过程变得更加纯净，在开发时候不用过多考虑浏览器兼容性的相关难题，提升了开发的效率和开发的质量。

主权项

1.一种自动化实现Web系统可视化复用的装置，其特征是由底层模块集和上层应用集组成；底层模块集由组件模块、页面布局模块、样式管理模块、Nodejs服务模块、自定义模板解析模块和系统构建模块组成；上层应用集由页面原型制作工具、可编辑大屏资源库、页面快速制作工具、自定义模板开发工具、开源技术页面开发工具组成；组件模块由Web组件库集合形成，Web组件可以理解是对HTML功能的扩展，组件模块的实现步骤包括：步骤1，集成共有组件库，包括包括bootstrap、饿了么公司开源的elementUI、蚂蚁金服开源ant designer组件；步骤2，根据jQuery、VUE、React和Angular四种技术分别给出Web组件库的实现方式，以便使用本发明的开发者根据JavaScript框架选择匹配的Web组件库的实现方式；步骤3，支持使用本发明的开发者使用jQuery、VUE、React和Angular这四种实现方式开发自定义组件，自定义组件以插件的模式添加到组件模块中统一管理；页面布局模块的实现步骤包括：步骤1，存储预先定制的代表页面风格的页面模板；步骤2，页面布局模块提供页面布局接口，研发人员可以根据页面布局接口自定义新版的页面布局风格，当项目进入系统开发阶段，选择一套合适的页面布局版式加上与之对应的Web组件生成一套新的Web前端开发框架；样式管理模块就是管理CSS样式的模块，实现样式管理模块的步骤包括：步骤1，模块化管理CSS，该模块将CSS代码分成了子模块即通用变量模块，通用变量模块包括：1、需要复用的变量，2、需要根据情况变化的变量，3、根元素样式模块，4、通用布局样式模块，5、通用样式模块，6、页面级样式模块；全局的样式之所以会区分布局样式和通用样式，主要目的是为了灵活配置网站系统的展示风格以及网站的换肤功能；步骤2，样式管理模块还集成了CSS构建功能，保证CSS代码在不同浏览器的兼容性问题，并压缩CSS代码，使得上线的CSS代码体积最小，保证网页加载CSS代码的高效性；nodejs服务模块由全前后端分离器、半前后端分离器以及基于微服务的Web前端器组成；全前后端分离器提供接口定义器，由Web前端开发人员与服务器端开发人员共同完成接口定义器的接口内容约定，该模式下服务器端开发人员所提供的接口不做任何页面相关的工作，只是单纯的数据接口，页面的相关工作都由Web前端开发人员负责完成；半前后端分离器提供请求转接器，请求转接器让Web前端的请求可以直接请求到服务器端对应的接口，mock数据层不在去mock数据，而是替换成一个请求转接器的请求转接服务，即mock层接收到页面的url请求后，将请求转接到对应的服务器端接口；基于微服务的Web前端器提供微服务网关，由微服务网关将Web前端请求转发到各个服务器端的相应端口；自定义模板解析模块的实现步骤包括：步骤1，自定义模板支持时下主流的各种模板引擎，包括vue、react、angular、handlebars、Jade、pug以及原生的html；步骤2，本发明装置使用nodejs技术在上线前对于模板进行预处理即预先编译，让自定义模板最终生成一个浏览器可以直接执行的JavaScript和css代码；系统构建模块主要由nodejs实现，它可以完成如下工作：工作1，定义多种系统编译环境，包括：开发编译环境、测试编译环境和生产环境等，用户可以根据自己的实际需求选择所需的系统编译环境；工作2，编译编写的代码，包括编译自定义模板，压缩JavaScript代码，合并小图片功能；工作3，提供一种系统快速集成的方法，包括：当系统运维时候，新修改的代码可以快速编译，并将编译结果打包，快速部署到对应的测试环境或者生产环境中；页面原型制作工具支持产品经理使用拖拽开发引擎定义所需产品的原型；拖拽开发引擎包含如下内容：拖拽基本操作库、可拖拽组件库、拖拽组件配置库和页面生成引擎；页面生成引擎包括html生成引擎和自定义模板生成引擎；拖拽基本操作库主要是提供拖拽页面开发的基础功能，例如组件拖拽的相关代码；可拖拽组件库的生成方法是将Web组件抽离出可配置接口，这样拖拽组件到页面后，开发者才可以对于组件进行定制化操作；拖拽组件配置库：该库是根据可拖拽组件的可配置化接口定义的配置项，该配置项会和可视化模板对应，开发者可以对于组件做相关参数的修改，包括：组件的标题，组件的位置，组件的字体和颜色等等；页面生成引擎功能就是将拖拽开发出来的页面最终生成代码的引擎，目前支持两种代码生成，html生成引擎是静态的html页面，自定义模板生成引擎是基于自定义模板的页面；大屏页面的拖拽开发只能生成静态html页面模式；可编辑大屏资源库是大屏页面资源集合，大屏页面是专门制作的可视化效果很高的专有页面；页面快速制作工具主要是将原型制作出来的页面快速生成一个自定义模板格式的代码，不过生成的代码没有任务交互事件例如点击事件等，只是将html代码生成一个用自定义模板实现的可视化页面，该工具的作用主要是为了提升生产效率，实际的开发者还需要在生成的模板上进行二次开发；自定义模板开发工具主要是基于底层模块集里自定义模板解析模块进行页面开发的工具，自定义模板开发工具主要以demo实例和开发手册形式提供；开源技术页面开发工具是兼容传统的Web页面开发模式，目前该模式只支持vue、react两类mvvm框架。