一种自动化实现Web系统可视化复用的装置制造方法及图纸

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

【技术实现步骤摘要】
一种自动化实现Web系统可视化复用的装置
本专利技术涉及信息
，尤其是Web前端技术，Web前端可视化技术和复用装置领域。
技术介绍
时下的Web前端技术发展非常快，Web前端底层的html、JavaScript以及CSS三大技术都处在一个重要的更新换代时期，同时基于这三种技术的上层的Web前端的各类组件、框架等技术也是日新月异，层出不穷。在市场这块，随着互联网日益普及，人们对于各类IT应用都非常的熟悉，特别是互联网公司基于雄厚的技术实力，开发出了越来越多跟大众生活密不可分的各类应用，这就导致用户对于展示的要求越来越高。以上两因素的叠加，对于从事Web系统开发的IT企业，Web前端技术也逐渐被企业越来越重视，Web前端的相关技术人员的人力成本也越来越高，企业对于Web前端需求的快速响应能力也是要求越来越高，因此从事Web系统研发的IT企业急需一种新型的Web前端技术治理模式，本专利技术装置就是解决此类需求而设计研发的。本专利技术装置主要解决以下在企业级从事Web前端开发中所面临的难题：难题1：Web前端的技术主要是指浏览器相关的技术，因为Web前端的产出是人们能够看见的页面，那么Web前端技术在逻辑概念是包含展示和逻辑两类技术，在生产实践中展示技术的变化更新最大，而在实际开发中，因为展示技术而导致整个展示与逻辑都全部重构的现象是比比皆是，因此如何让Web前端系统在需求变更的情况下只用修改需要修改的地方，这就需要一种新型的Web前端系统架构把展示和逻辑有效的分离，增强整个系统的复用性。难题2：一个生产级别的页面最终制作完毕，一般会经历如下环节：展示需求→原型设计→平面设计→页面开发→系统集成；由以上环节我们发现一个页面的生产环节的链条较长，如果这些环节中牵涉多个不同的人或者组织，很容易导致页面的最终产出偏离最早的展示需求，或者是最终产出的质量远低于设计稿，如何有效地以自动化方案解决全环节的质量问题，也是本专利技术装置要解决的重要问题之一。难题3：不同的IT企业对于Web前端技术的组织形式是多种多样，但是归结起来无外乎三类，一类是Web前端技术人员都是各个项目组，一类是企业有独立的Web前端团队，只要是项目研发中需要Web前端开发都会由独立的Web前端团队完成，最后一类是项目团队里有Web前端开发人员，企业也有独立的Web前端团队的混搭模式，不管企业采用那种Web前端组织模式，都说明企业在寻求有效的Web前端技术管理模式，本专利技术装置将会提供一套与之相对应的Web前端技术治理模式，该治理模式配合本专利技术装置可以有效的提升企业级Web前端技术研发的生产效率。难题4：一家企业制定了公司级别的统一Web前端复用框架，会导致公司Web前端技术无法快速适应发展变化的技术发展趋势，同时大多数公司级别定义的统一Web前端框架会让公司的Web前端技术有别于业界的通用Web前端技术，这样不利于项目团队人力的招聘同时也不利于项目团队相关技术人员对于技术学习的诉求，如何平衡以上问题，也是本专利技术装置需要解决的技术难题。本专利技术装置就是基于以上4个难题来设计和专利技术的，业界对于Web前端技术的解决往往都是针对单个问题解决的，而本专利技术是以一家企业整体的诉求以及企业如何管理全公司Web前端技术的角度来思考问题，因此本专利技术的是一个全栈式的Web前端技术解决方案，其中还包含一套企业综合治理Web前端技术的管理思想，这套管理思想和本专利技术装置配合使用，让企业的Web前端技术变得更加高效。本专利技术装置所需要解决的技术问题主要是针对上面技术背景里的4大难题进行说明，具体内容如下：解决难题1：Web前端系统里如何有效的分离展示技术和逻辑技术，该问题在业界已经有了十分成熟的技术方案，时下最为流行的Web前端系统架构思想MVVM，主要是致力于解决该问题的。在MVVM框架里，VIEW即代表展示，model即代表逻辑，它们之间通过MV即modelView来衔接，一般而言，MVVM框架本身会提供完整的MV的实现，在开发中程序员只需要完成VIEW和MODEL的开发即可。但是在实际开发中，展示技术和逻辑技术还是会经常耦合在一起，其耦合的根本原因有些专业人士认为是大多数MVVM框架的使用者没有掌握好MVVM框架的精髓，MVVM框架里做展示的开发应该是开发者定义好各种自定义的组件，这些组件里包裹了底层的html和css技术，当到了具体开发某个页面时候，开发者只需要调用定义好的组件，这样在业务开发页面里就没有太多展示的代码，这样就可以做到真正意义上的展示和逻辑的解耦，但是实际开发者往往很少有人能做好这点。实际开发中大部分情况下大家都很难贯彻这样的思想，那么就说明该解决方案的技术难度比较高，很难做成一套普世的原则，需要对其有所改进。解决该难题的核心就是如何有效的管理Web前端开发中控制展示的核心技术CSS技术。具体控制CSS技术的方案，在
技术实现思路
中说明。解决难题2：讨论如何解决难题2我们还是需要再看看页面开发中碰到了全部环节，如下所示：展示需求→原型设计→平面设计→页面开发→系统集成；下面我们需要分析下这些环节，环节中的平面设计和页面开发两个才属于真正的Web前端工作环节，平面设计主要是由美工完成，而页面开发主要有专业的Web前端研发工程师完成。在Web前端工作的上游是展示需求和原型设计，上游工作在企业中一般由产品经理或者是项目经理来完成，他们最终会制作一份页面原型的文件，Web前端团队里的美工会根据原型进行相关的页面平面设计。上游工作的最大问题是，原型的设计组没有专业的设计能力，美工可能并不能很好的理解实际的业务需求，这就导致从原型到平面设计存在认知的差异性，而导致整体设计质量的下降。在Web前端工作的下游是系统的集成也就是将开发好的页面集成到Web系统中，Web前端的下游工作最大的问题是系统集成的人员和页面按设计开发的人员不是同一个人，一般系统集成人员的前端开发能力会薄弱写同时系统集成页面基本都会牵涉页面的二次开发，这就导致页面在二次开发后质量下降，这样的情况是实际开发中是非常常见的。以上此类问题产生的原因是各环节里不同人活组织对于Web前端的专业能力有差异所致，因此如果有种方法可以屏蔽专业知识差异的工具，那么就可以达到全环节里的Web前端工作质量不下降的问题了。解决难题3：一个企业如何有效的组织Web前端人力资源对于任何一家从事Web应用开发的企业都是非常重要的，但是组合的方式本专利技术人认为不仅仅是一个管理问题，它同时还包含一定的技术问题。一般企业对于Web前端资源利用的思路都是企业里某个项目组在项目研发中需要Web前端的资源才会去招聘Web前端相关的技术人员，但是当一家企业里项目越来越多之后，那么Web前端的资源的冗余性就变得非常高了，企业的管理者就会感到Web前端的利用率非常低，而且不同项目组之间资源的复用阻碍很多。因此许多大型企业都会考虑建立独立的Web前端团队，但是将所有的Web前端资源都独立出项目组，这种做法在实际操作中往往又会影响到项目组的日常的研发和运维工作。由此可见最为合理的方式应该是公司既要组建独立的Web前端团队，项目组内也应该保留一定的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页面模式；可编辑大屏资源库是大屏页面资源集合，大屏页面是专门制作的可视化效果很高的专有页面；页面快速制作工具主要是将原型制作出来的页面快速...

【技术特征摘要】
1.一种自动化实现Web系统可视化复用的装置，其特征是由底层模块集和上层应用集组成；底层模块集由组件模块、页面布局模块、样式管理模块、Nodejs服务模块、自定义模板解析模块和系统构建模块组成；上层应用集由页面原型制作工具、可编辑大屏资源库、页面快速制作工具、自定义模板开发工具、开源技术页面开发工具组成；组件模块由Web组件库集合形成，Web组件可以理解是对HTML功能的扩展，组件模块的实现步骤包括：步骤1，集成共有组件库，包括包括bootstrap、饿了么公司开源的elementUI、蚂蚁金服开源antdesigner组件；步骤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请求后，将请求转...

【专利技术属性】
技术研发人员：林飞，夏俊，王娜，古元，毛华阳，华仲锋，
申请(专利权)人：北京亚鸿世纪科技发展有限公司，
类型：发明
国别省市：北京,11