一种实现前端应用脚手架的系统和服务器的制作方法

本发明涉及web前端开发技术领域，尤其是涉及一种实现前端应用脚手架的系统和服务器。

背景技术：

目前的程序开发中，项目开发时通常要考虑整体框架的搭建、项目源码的部署、代码更新和功能扩展等各个方面。如果上述每个过程都需要开发人员去完成，开发人员会花费大量的时间去进行环境搭建以及部署服务，对项目本身的开发效率就会减少。因此，为了提高项目开发效率，开发人员通常使用一些脚手架工具进行搭建。

前端脚手架的目的是为了减少开发人员重复性工作而引入的工具。传统前端开发的过程中，需要引入各种必须的库或者文件，这些环境的部署过程复杂且重复。而前端脚手架的出现则让上述事情简单化，开发人员无需关注配置环境和配置文件，只需对应用程序的核心流程进行开发即可，使得项目从搭建到开发再到部署的过程更加快速及规范。因此前端脚手架的出现使得开发人员的效率大大提升，逐渐成为项目开发的主流技术。

当多人开发同一个应用时，需要对开发人员进行明确分工，否则极易出现代码冲突问题。现有技术中只是提供代码冲突的解决方式，并不能从根本上避免代码冲突的出现。

在同一系统的不同平台开发过程中，不同平台的视图层经常会有不同的情况出现，因此需要构建不同平台下的对应的应用，但这些应用的基础功能是高度相似的，导致了基础功能的重复建设，使得项目构建的效率降低，增加了人工成本。现有技术中是将脚手架和视图层绑定在一起，分别构建不同系统下的应用。但这种方案在应用构建完成之后，基础功能更新时需要多次维护基础框架，效率较低。

因此，当前前端应用脚手架中存在着多人开发时的代码冲突以及多平台下基础功能维护繁琐的问题。

技术实现要素：

有鉴于此，本发明的目的在于提供一种实现前端应用脚手架的系统和服务器，以解决当前前端应用脚手架中存在着多人开发时的代码冲突以及多平台下基础功能维护繁琐的问题。

第一方面，本发明实施例提供了一种实现前端应用脚手架的系统，其中，该系统由基础框架和扩展模块组成；基础框架包括：状态管理模块，路由管理模块、视图模块和接口模块；状态管理模块、路由管理模块、视图模块和接口模块分别设置有模块化目录及模块化目录对应的组件；扩展模块用于对基础框架进行功能扩展。

结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，其中，基础框架通过vue渐进式框架实现，vue渐进式框架使用脚手架工具vue-cli搭建。

结合第一方面，本发明实施例提供了第一方面的第二种可能的实施方式，其中，状态管理模块包括状态管理目录和状态管理的入口文件；状态管理目录用于存储应用中的状态管理数据，通过状态管理目录的命名进行资源划分；状态管理的入口文件用于调用状态管理目录，以及存储基础框架中的state、mutation、action和getter状态管理事件。

结合第一方面，本发明实施例提供了第一方面的第三种可能的实施方式，其中，路由管理模块包括路由管理目录和路由管理的入口文件；路由管理目录用于存储视图模块中的页面组件，通过路由管理目录的模块化命名对资源进行划分；路由管理的入口文件用于调用路由管理模块。

结合第一方面的第三种可能的实施方式，本发明实施例提供了第一方面的第四种可能的实施方式，其中，路由管理模块还包括：vue异步组件和webpack分割接口；vue异步组件用于提供按需加载的异步接口；webpack分割接口用于对通过webpack打包后的文件进行分割。

结合第一方面，本发明实施例提供了第一方面的第五种可能的实施方式，其中，视图模块包括：视图目录和页面组件；视图目录用于存储页面组件，通过视图目录的模块化命名对资源进行划分；页面组件用于搭建vue渐进式框架。

结合第一方面，本发明实施例提供了第一方面的第六种可能的实施方式，其中，接口模块包括：接口目录、入口文件和fetch接口；接口目录用于存储异步接口请求，通过接口目录的模块化命名对资源进行划分；入口文件用于存储并调用接口模块提供的异步接口；fetch接口用于实现在每个接口目录的入口文件中进行实例化fetch引入。

结合第一方面，本发明实施例提供了第一方面的第七种可能的实施方式，其中，扩展模块由分布式版本控制系统构成，包括：开发版本存储单元和发布版本存储单元；开发版本存储单元用于存储基础框架的开发版本代码；发布版本存储单元用于存储基础框架的发布版本代码。

结合第一方面的第七种可能的实施方式，本发明实施例提供了第一方面的第八种可能的实施方式，其中，开发版本存储单元包括多个开发版本分支存储单元；发布版本存储单元包括多个发布版本分支存储单元；每个开发版本分支存储单元用于存储相应分支框架的开发版本代码；每个发布版本分支存储单元用于存储相应分支框架的发布版本代码。

第二方面，本发明实施例提供了一种服务器，包括处理器和机器可读存储介质，所述机器可读存储介质存储有能够被所述处理器执行的机器可执行指令，所述处理器执行所述机器可执行指令以实现上述系统。

本发明实施例带来了以下有益效果：

本发明提供了一种实现前端应用脚手架的系统和服务器，该系统由基础框架和扩展模块组成；基础框架包括：状态管理模块，路由管理模块、视图模块和接口模块；状态管理模块、路由管理模块、视图模块和接口模块分别设置有模块化目录及模块化目录对应的组件；扩展模块用于对基础框架进行功能扩展。通过上述系统中的扩展模块，可快速搭建多平台脚手架并减少基础功能的维护，而且开发人员可根据模块化目录及模块化目录对应的组件进行开发，避免了开发过程中的代码冲突。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

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

图1为本发明实施例提供的一种实现前端应用脚手架系统的结构示意图；

图2为本发明实施例提供的另一种实现前端应用脚手架系统的基础框架的结构示意图；

图3为本发明实施例提供的另一种实现前端应用脚手架系统的扩展模块的结构示意图；

图4为本发明实施例提供的一种服务器的结构示意图。

具体实施方式

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

考虑到当前前端应用脚手架系统中存在着多人开发时的代码冲突以及多平台下基础功能维护繁琐的问题，本发明的目的在于提供一种实现前端应用脚手架的系统和服务器，该技术可以应用于前端应用脚手架的开发等场景中。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种实现前端应用脚手架系统进行详细介绍。参见图1所示的一种实现前端应用脚手架系统的结构示意图，包括：基础框架10和扩展模块20。

基础框架10用于向前端应用脚手架开发系统提供基础功能及应用架构，包括：状态管理模块11、路由管理模块12、视图模块13和接口模块14。

状态管理模块11用于集中存储管理基础框架10中应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。

路由管理模块12用于找到与地址匹配的组件或对象并将其渲染出来。

视图模块13用于视图的显示，视图为文档对象模型，是以面向对象的方式描述的文档模型。文档对象模型定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

接口模块14用于提供异步接口请求的api(applicationprogramminginterface，应用程序编程接口)。

在状态管理模块11、路由管理模块12、视图模块13和接口模块14中，分别设置有模块化目录及对应的组件。这些模块化目录的名称根据基础框架10中所用的模块进行命名，并通过各自的组件完成引入。通过上述结构，使得资源按照模块进行了划分，而且可根据模块对应相关的开发人员完成各自的功能开发。通过利用模块内部资源的按需加载功能和名称空间的特性，进一步提高了封装度和复用性，能够避免开发人员在开发的过程中出现的代码冲突。

扩展模块20用于对基础框架进行功能性扩展，通过扩展模块进行多分支的开发，实现了基于基础框架的多平台的扩展开发，避免了多平台开发时基础框架重复开发现象，也解决了多平台下基础功能维护繁琐的问题。

进一步地，基础框架10是通过vue渐进式框架实现的。vue是多用途且性能高效的javascript框架，能够方便的创建维护性和测试性强的代码库，是渐进式的javascript框架。如果服务端应用已经完成搭建，那么可以将vue作为应用的一部分嵌入其中，带来更加丰富的交互体验。如果希望将更多的业务逻辑通过前端来实现，那么使用vue的核心库机器生态系统也可以满足需求。由于具有上述优点，vue渐进式框架越来越受到开发人员的青睐。

vue渐进式框架的搭建，使用脚手架工具vue-cli完成。vue-cli是vue官方发布的脚手架工具，可快速创建vue项目。

进一步地，基础框架10中的状态管理模块11，包括：状态管理目录和状态管理的入口文件。其中，状态管理目录用于存储应用中的状态管理数据，而且按照状态管理目录的命名进行资源划分，目录按照基础框架依赖的模块名称进行创建；状态管理的入口文件用于调用状态管理目录，提供调用的接口。

状态管理模块11存储着基础框架10中的state、mutation、action、getter状态管理事件，其中，state为单一状态树，在state事件中需要定义所需要管理的数组、对象和字符串等数据；mutation的提交是改变state状态的唯一办法，每一个mutation都有一个字符串类型的事件类型和一个回调函数，当需要改变state的值时就需要在回调函数中改变；action可以提交mutation，在action中进行异步操作请求；getter类似vue的计算属性，当需要从state中派生出一些状态时，可以使用getter事件。getter会接受state作为第一个参数，而且getter的返回值会根据它的依赖并缓存起来，只有getter的依赖值发生改变时才会被重新计算。

在状态管理模块11中加入模块命名空间namespaced，使得状态管理模块11具有更高的封装度和复用性，从而也避免开发过程中的代码冲突。

进一步地，基础框架10中的路由管理模块12，包括：路由管理目录和路由管理的入口文件。路由管理目录用于存储视图模块中的页面组件，通过路由管理目录的模块化命名对资源进行划分，目录按照基础框架依赖的模块名称进行创建；路由管理的入口文件用于调用路由管理模块。

通过路由管理目录的模块化命名，对资源进行划分，并根据模块对应相应的开发人员，利用模块内部资源的按需加载功能做到更高的封装度和复用性，可以避免开发过程的代码冲突。

进一步地，路由管理模块12中还包括：vue异步组件和webpack分割接口；vue异步组件用于提供按需加载的异步接口；webpack分割接口用于对通过webpack打包后的文件进行分割。webpack是常用的模块打包库，它可用于分析项目结果，找到javascript模块以及其它的一些浏览器不能直接运行的语言，并将其打包为合适的格式以供浏览器使用。因此通过引用vue异步组件和webpack的分割接口，可实现路由管理模块的懒加载。

懒加载也叫延迟加载，即在需要的时候进行加载。由于vue是单页面应用，如果没有使用懒加载，在运用webpack进行打包后的文件将会非常的大，造成进入应用首页时加载时间过长，用户体验不佳。而使用懒加载将页面分割成特定区域，各自区域在需要加载的时候才会加载页面所需的代码文件，可有效分担首页的加载压力，减少首屏的加载时间，提升用户体验。

进一步地，视图模块13中包括：视图目录和页面组件；视图目录用于存储页面组件，通过视图目录的模块化命名对资源进行划分，目录按照基础框架依赖的模块名称进行创建；页面组件用于搭建vue渐进式框架。

通过视图目录的模块化命名，对资源进行划分，并根据模块对应相应的开发人员，利用模块内部资源的按需加载功能做到更高的封装度和复用性，可以避免开发过程的代码冲突。

进一步地，接口模块14包括：接口目录、入口文件和fetch接口；接口目录用于存储异步接口请求，通过接口目录的模块化命名对资源进行划分，目录按照基础框架依赖的模块名称进行创建；入口文件用于存储并调用接口模块提供的异步接口；fetch接口用于实现在每个接口目录的入口文件中进行实例化fetch引入。

fetch是web前端中的一种数据处理方式，是一种新的ajax(asynchronousjavascriptandxml异步javascript和xml)交互方式，相比传统的ajax技术，fetch能够提供更加简洁的接口，更加简单易用。通过进行实例化fetch引入，可做到按需配置和拦截。

通过接口目录的模块化命名，对资源进行划分，并根据模块对应相应的开发人员，利用模块内部资源的按需加载功能做到更高的封装度和复用性，可以避免开发过程的代码冲突。

进一步地，扩展模块20由分布式版本控制系统构成，包括：开发版本存储单元和发布版本存储单元；开发版本存储单元用于存储基础框架的开发版本代码；发布版本存储单元用于存储基础框架的发布版本代码。当基础框架的开发版本代码发生更改，通过合并请求将基础框架的发布版本的代码进行改变。

分布式版本控制系统由git仓库构成，分布式版本控制相比于集中式的最大区别在于，开发者可以通过克隆，在本地机器上拷贝一个完整的git仓库，适合分布式开发，具有速度快，公共服务器压力小的优点。

进一步地，开发版本存储单元包括多个开发版本分支存储单元；发布版本存储单元包括多个发布版本分支存储单元，每个开发版本分支存储单元用于存储相应分支框架的开发版本代码，每个发布版本分支存储单元用于存储相应分支框架的发布版本代码。

当分支框架的开发版本代码发生更改，通过合并请求将相应分支框架的发布版本代码进行改变。因此基于基础框架并通过扩展模块，可对多个开发版本分支进行扩展开发，可快速搭建多平台脚手架并减少基础功能的维护。

本发明实施例还提供了另一种实现前端应用脚手架系统的结构示意图，其中该系统的基础框架的结构示意图，如图2所示。

具体的，基础框架为vue渐进式框架，通过脚手架工具vue-cli完成搭建，基础框架包括：状态管理模块202、路由管理模块204、视图模块206和接口模块208，以及脚本主入口文件main.js。

其中，状态管理模块202中设置有多个状态管理目录，记为module-1至module-n，共n个目录，这些目录按照模块名称进行建立并通过index.js文件作为入口文件。通过与index.js进行设置，使得上述目录中的模块内部的状态管理事件state、mutation、action和getter。并通过加入名称空间namespaced，使得模块具有更高的封装度和复用性。

状态管理模块202中的module-1至module-n目录是通过接口模块208进行异步引入的，接口模块208包括module-1至module-n目录以及对应的index.js文件，还包括fetch.js文件。其中fetch.js文件是二次封装的异步请求方法，在每个module文件下的index.js进行实例化fetch引入，可实现按需配置以及信息拦截。

状态管理模块202中的module-1至module-n目录引入至视图模块206中，视图管理模块206中还包括modele-1至module-n对应的视图文件page-1.vue至page-n.vue。

视图模块206中的module-1至module-n目录引入至路由管理模块204中，根据引入的页面组件进一步按照功能模块划分目录。在视图模块206中还包括入口文件index.js，可对模块中的状态进行管理，也是众多模块的入口文件。

视图模块206中可引入vue的异步组件和webpack的代码分割功能，实现路由的懒加载。

将状态管理模块202和路由管理模块204进行挂载，由脚本主入口文件main.js进行承载，通过脚本主入口完成页面的渲染和组件的调取。

由于资源按照模块进行了划分，可根据模块对应相应的开发人员，并可利用模块内部资源的按需加载及名称空间的特性做到更高的封装度和复用度，开发人员可以从根本上解决了开发过程中的代码冲突。

另一种实现前端应用脚手架系统的扩展模块结构示意图如图3所示。其中扩展模块由分布式版本控制系统构成，分布式版本控制系统由git仓库构成，更适合分布式开发模式，具有速度快，公共服务器压力小的优点。

扩展模块包括：开发版本存储单元basedev和发布版本存储单元baserelease。在git仓库中创建basedev和baserelease分支，basedev用于存储基础框架的开发版本代码，baserelease用于存储基础框架的发布版本代码。

在git仓库中创建wapdev和waprelease分支，分别存储移动端wap脚手架的开发版本和发布版本。wapdev分支的代码从baserelease同步更新基础框架中的代码，继而结合wap端的特定功能开发之后，通过合并请求将wapdev分支合并到目标分支waprelease分支中，完成移动端wap脚手架的搭建。

类似的，在git仓库中创建webdev和webrelease分支，分别存储pc端web脚手架的开发版本和发布版本。webdev分支的代码从baserelease同步更新基础框架中的代码，继而结合web端的特定功能开发之后，通过合并请求将webdev分支合并到目标分支webrelease分支。

通过上述类似方案，可提供多端应用的构建方式，基于基础框架并通过扩展模块可对多个开发版本分支进行扩展开发，可快速搭建多平台脚手架并减少基础功能的维护。

本实施例还提供一种与上述系统实施例相对应的服务器，图4为该服务器的结构示意图，如图4所示，该设备包括处理器401和存储器400；其中，存储器400用于存储一条或多条计算机指令，一条或多条计算机指令被处理器执行，以实现上述的实现前端应用脚手架系统。

图4所示的服务器还包括总线402和通信接口403，处理器401、通信接口403和存储器400通过总线402连接。该服务器可以是网络边缘设备。

其中，存储器400可能包含高速随机存取存储器(ram，randomaccessmemory)，也可能还包括非不稳定的存储器(non-volatilememory)，例如至少一个磁盘存储器。总线402可以是isa总线、pci总线或eisa总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图4中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

通信接口403用于通过网络接口与至少一个用户终端及其它网络单元连接，将封装好的ipv4报文或ipv4报文通过网络接口发送至用户终端。

处理器401可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器401中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器401可以是通用处理器，包括中央处理器(centralprocessingunit，简称cpu)、网络处理器(networkprocessor，简称np)等；还可以是数字信号处理器(digitalsignalprocessor，简称dsp)、专用集成电路(applicationspecificintegratedcircuit，简称asic)、现场可编程门阵列(field-programmablegatearray，简称fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本公开实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本公开实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器400，处理器401读取存储器400中的信息，结合其硬件完成前述实施例的方法的步骤。

本公开实施例还提供了一种机器可读存储介质，该机器可读存储介质存储有机器可执行指令，该机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现上述系统，具体实现可参见上述实施例，在此不再赘述。

本公开实施例所提供的服务器，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以用软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。