CN109901838A - 基于组件化的前端开发方法、装置、设备及存储介质 - Google Patents

Abstract

本发明属于开发辅助技术领域，公开了一种基于组件化的前端开发方法、装置、设备及存储介质。该方法包括：接收用户触发的前端应用合成请求，从前端应用合成请求中获取待合成的前端应用的业务流程需求；根据业务流程需求，确定合成前端应用需要使用的功能组件的类型；根据类型，从预先封装的功能组件库中查找符合业务流程需求的目标功能组件；利用预设的前端开发工具集对目标功能组件进行实时编译，得到至少一个前端页面；按照业务流程需求，将各前端页面进行组合，得到前端应用。通过上述方式，不仅可以有效降低Web客户端的开发和维护成本，还显著的提升了Web客户端的开发效率。

Description

基于组件化的前端开发方法、装置、设备及存储介质

技术领域

本发明涉及开发辅助技术领域，尤其涉及一种基于组件化的前端开发方法、装置、设备及存储介质。

背景技术

随着前端技术的发展，与万维网(World Wide Web，Web)相关的框架、开发工具集层出不穷，大大丰富了Web客户端的功能，更好的满足了用户需求，提升了用户体验。

但是，在实际情况中，开发一个完整的Web客户端所需的工作量较大，即使目前有各种优秀的框架来简化Web客户端的编程，但代码的编写量依然很庞大。这就需要大量专业性的技术人员参与到Web客户端的开发，因而大大增加了Web客户端的开发成本。并且，由于技术人员编码能力和编码风格的不同，也给后期的维护带来了困难，增加了Web客户端的维护成本。此外，目前每启动一个新的Web客户端项目，都需要根据各自的项目需求重新编写所有的代码，严重影响了Web客户端的开发效率。

所以，亟需提供一种能够降低Web客户端开发和维护成本，提升Web客户端开发效率的前端开发方法。

上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。

发明内容

本发明的主要目的在于提供一种基于组件化的前端开发方法、装置、设备及存储介质，旨在降低Web客户端开发和维护成本，提升Web客户端开发效率。

为实现上述目的，本发明提供了一种基于组件化的前端开发方法，所述方法包括以下步骤:

接收用户触发的前端应用合成请求，从所述前端应用合成请求中获取待合成的前端应用的业务流程需求；

根据所述业务流程需求，确定合成所述前端应用需要使用的功能组件的类型；

根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件；

利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到至少一个前端页面；

按照所述业务流程需求，将各前端页面进行组合，得到所述前端应用。

优选地，所述根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件，包括：

根据所述业务流程需求，确定合成所述前端应用所需的前端用户界面框架；

根据所述类型和所述前端用户界面框架，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件。

优选地，所述利用预设的前端开发工具集对所述目标功能组件进行实时编译，包括：

根据所述业务流程需求，将所述目标功能组件设置到所述前端用户界面框架的指定位置；

为所述前端开发工具集分配编译所述目标功能组件时需要的测试数据；

利用所述前端开发工具集对所述目标功能组件进行实时编译。

优选地，所述根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件之前，所述方法还包括：

判断所述功能组件库是否已经构建完成；

若判定所述功能组件库未构建完成，则构建所述功能组件库。

优选地，所述构建所述功能组件库之后，所述方法还包括：

判断所述功能组件库中是否存在所述类型的功能组件；

若判定所述功能组件库中不存在所述类型的功能组件，则构建所述类型的功能组件。

优选地，所述得到所述前端应用之后，所述方法还包括：

获取用户提供的部署所述前端应用的站点信息；

根据所述站点信息，部署所述前端应用。

优选地，所述根据所述站点信息，部署所述前端应用，包括：

对所述前端应用的代码进行自动编译并打包，得到所述前端应用的安装包；

建立所述安装包与所述站点信息的对应关系，得到映射关系表；

将所述安装包添加到采用的应用容器引擎的容器仓库中，将所述站点信息和所述映射关系表发送至管理所述容器仓库的容器管理平台，以使所述容器管理平台根据所述映射关系表，将所述容器仓库中的安装包下载到所述站点信息中规定的站点服务器上，安装并启动，实现对所述前端应用的部署。

此外，为实现上述目的，本发明还提出一种基于组件化的前端开发装置，所述装置包括：

获取模块，用于接收用户触发的前端应用合成请求，从所述前端应用合成请求中获取待合成的前端应用的业务流程需求；

确定模块，用于根据所述业务流程需求，确定合成所述前端应用需要使用的功能组件的类型；

查找模块，用于根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件；

编译模块，用于利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到至少一个前端页面；

组合模块，用于按照所述业务流程需求，将各前端页面进行组合，得到所述前端应用。

此外，为实现上述目的，本发明还提出一种基于组件化的前端开发设备，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于组件化的前端开发程序，所述基于组件化的前端开发程序配置为实现如上文所述的基于组件化的前端开发方法的步骤。

此外，为实现上述目的，本发明还提出一种存储介质，所述存储介质上存储有基于组件化的前端开发程序，所述基于组件化的前端开发程序被处理器执行时实现如上文所述的基于组件化的前端开发方法的步骤。

本发明通过预先构建功能组件库，并在功能组件库中添加开发前端应用时需要用到的功能组件，从而在根据用户提供的业务流程需求确定合成该前端应用需要使用的功能组件的类型后，直接根据确定的类型从预先构建的功能组件库中查找符合当前业务流程需求的目标功能组件，然后利用预设的前端开发工具集对目标功能组件进行实时编译，并按照当前业务流程需求，将实时编译获得的各前端页面进行组合，即可得到用户所需的前端应用。整个前端开发过程，用户只需提供待合成的前端应用的业务流程需求，需要用户正在编写的代码量相对较少，且较为简单，故对技术人员专业技能的要求相对较低，因此在实现过程中既可以减少专业技术人员的参与，降低开发成本，又可以提升开发效率。并且，由于前端应用是基于功能组件合成的，因而在后期维护过程中，可以仅根据调整后的业务流程需求对某一功能组件进行调整，从而既方便了后期维护，也降低了维护成本。

附图说明

图1是本发明实施例方案涉及的硬件运行环境的基于组件化的前端开发设备的结构示意图；

图2为本发明基于组件化的前端开发方法第一实施例的流程示意图；

图3为本发明基于组件化的前端开发方法第二实施例的流程示意图；

图4为本发明基于组件化的前端开发装置第一实施例的结构框图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

参照图1，图1为本发明实施例方案涉及的硬件运行环境的基于组件化的前端开发设备结构示意图。

如图1所示，该基于组件化的前端开发设备可以包括：处理器1001，例如中央处理器(Central Processing Unit，CPU)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(WIreless-FIdelity，WI-FI)接口)。存储器1005可以是高速的随机存取存储器(RandomAccess Memory，RAM)存储器，也可以是稳定的非易失性存储器(Non-Volatile Memory，NVM)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的结构并不构成对基于组件化的前端开发设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种存储介质的存储器1005中可以包括操作***、网络通信模块、用户接口模块以及基于组件化的前端开发程序。

在图1所示的基于组件化的前端开发设备中，网络接口1004主要用于建立用户终端与存放功能组件库的服务器之间的通信连接；用户接口1003主要用于与用户进行数据交互；本发明基于组件化的前端开发设备中的处理器1001、存储器1005可以设置在基于组件化的前端开发设备中，所述基于组件化的前端开发设备通过处理器1001调用存储器1005中存储的基于组件化的前端开发程序，并执行本发明实施例提供的基于组件化的前端开发方法。

本发明实施例提供了一种基于组件化的前端开发方法，参照图2，图2为本发明一种基于组件化的前端开发方法第一实施例的流程示意图。

本实施例中，所述基于组件化的前端开发方法包括以下步骤：

步骤S10，接收用户触发的前端应用合成请求，从所述前端应用合成请求中获取待合成的前端应用的业务流程需求。

具体的说，在本实施例中执行主体为预先构建的前端应用开发平台，即部署有本实施例所说的基于组件化的前端开发流程的一个开发平台。

应当理解的是，在实际应用中，该平台可以是传统的物理服务器(需要占用实际物理空间)，也可以是虚拟云服务器，此处不做限制。

此外，由于前端应用合成请求是由用户触发的，并且在合成前端应用的时候需要用户提供相应的业务流程需求，即前端应用开发平台需要与用户进行交互，在本实施例中，用户具体可以通过终端设备中自带的或自己安装的Web浏览器来实现与前端应用开发平台的交互，具体的触发方式，及提供待合成的前端应用的业务流程需求的方式，本领域的技术人员可以根据需要进行设置，此处不做限制。

此外，本实施例中所说的业务流程需求，可以是由需求工程师根据项目需求设计的Web前端应用的用例图、流程图、产品原型等，此处不再一一列举，对此也不做限制。

关于上述所说的用例图(User Case)，具体是指由参与者(Actor)、用例(UseCase)，边界以及它们之间的关系构成的用于描述***功能的视图，在用例图中展示的为外部用户(被称为参与者)所能观察到的***功能的模型图。

流程图，则是用来表示Web前端应用在使用过程中，每个前端页面的跳转顺序、或者组件的关联、用户操作的一个实现流程。

产品原型，则可以概括的说是整个前端应用产品面市之前的一个框架设计。以网站注册作为例子，整个前期的交互设计流程图之后，就是原型开发的设计阶段，简单的来说是将前端页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达，通过产品原型就可以知道需要合成的前端应用所能实现的功能、前端应用需要包含的前端页面的数量及各页面的风格等。

步骤S20，根据所述业务流程需求，确定合成所述前端应用需要使用的功能组件的类型。

具体的说，由于获取到的所述业务流程需求中会包含产品原型，因而通过对产品原型的分析，便可以快速的确定所述待合成的前端应用在合成过程中需要涉及到的功能组件类型。

关于功能组件的类型，具体是由功能组件的功能属性决定的，比如可以将用作头部导航栏的功能组件的类型统一命名为header，将用作切换的功能组件的类型统一命名为tab，将用作展示信息的列表的类型统一命名为list，将用作前端页面页脚的功能组件的类型统一命名为footer。

需要说明的是，以上给出的功能组件的类型的命名，仅仅为一种具体的分类方式，在实际应用中，本领域的技术人员可以根据需要进行设置，此处不做限制。

因而，通过业务流程需求中的产品原型中每个前端页面中显示的内容，便可以确定每一个前端页面中需要使用哪些类型的功能组件，最终通过汇总各个前端页面需要使用的功能组件的类型，便可以确定合成所述前端应用需要使用的功能组件的类型。

比如，所述业务流程需求中规定了需要合成的前端应用需要包含两个前端页面，分别为前端页面A和前端页面B。

若前端页面A是用于展示新闻信息的，则需要使用到的功能组件为新闻列表功能组件，根据上述的命名可以发现其类型应该是list；若前端页面B中需要显示导航栏，则确定的功能组件为头部导航栏功能组件，根据上述的命名可以发现其类型应该是header。

需要说明的是，以上仅为举例说明，对本发明的技术方案并不构成限定，在实际应用中，本领域的技术人员可以根据需要进行设置，此处不做限制。

步骤S30，根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件。

具体的说，为了能够快速、准确的从预先封装的功能组件库中查找到符合所述业务流程需求的目标功能组件，可以预先构建功能组件的类型和功能组件在功能组件库中的存储路径之间的对应关系，得到两者之间的映射关系表；然后，根据映射关系表来查找。

此外，为了方便用户理解各个功能组件的用途，以及方便后期定定位负责开发每一类型的功能组件的技术人员，还可以在映射关系表中设置功能组件的描述及技术人员的字段，具体的格式可以如表1给出的映射关系表来记录。

表1映射关系表

类型	存储路径	功能组件描述	技术人员
				header	Components/Header	头部导航	张三
tab	Components/Tab	Tab切换	张三
				list	Components/List	新闻列表	李四
footer	Components/Footer	页脚组件	王五

其中，存储路径中记载的内容，Components表示的是功能组件库的地址，跟在Components之后的Header则为专门用于存储header类型的功能组件的区域；跟在Components之后的Tab则为专门用于存储tab类型的功能组件的区域；Components之后的List则为专门用于存储list类型的功能组件的区域；Components之后的Footer则为专门用于存储footer类型的功能组件的区域。

此外，由于每一种类型的功能组件往往不止一个，因而还可以为同一类型下的功能组件分配标识其唯一性的编号，并记录每一个功能组件的技术人员的信息。

此外，为了方便用户或者各种功能组件的样式，还可以在映射关系表中添加功能组件样式图。

需要说明的是，以上仅为举例说明，对本发明的技术方案并不构成限定，在具体实现中，本领域的技术人员可以根据需要进行设置，此处不做限制。

此外，应当理解的是，由于不同的前端应用往往显示风格和适用的开发框架会有所差异，因而为了使得查找到的目标功能组件能够与合成所述前端应用所需的用户界面框架匹配，在根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件的时候，具体可以通过如下操作实现，如：先根据所述业务流程需求，确定合成所述前端应用所需的前端用户界面框架；然后，根据所述类型和所述前端用户界面框架，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件。

需要说明的是，本实施例中所说的前端用户界面框架也是由开发前端应用的技术人员开发维护的，相当于前端页面的显示风格，就好比在制作演示文稿(以下称为：PPT)时，用户可以根据个人喜好先选取一个自己喜好或者符合当前PPT内容的模板，然后在这个模板的基础上制作PPT的每一个界面，这样制作出的PPT所有界面的风格都是统一的。因此，本实施例中在合成前端应用的时候，通过根据用业务流程需求中给出的信息，如该前端应用面向的对象、应用场合等，先确定前端用户界面框架，从而使得最终开发出的前端应用的每一个前端界面的风格都是相同的，只是每一个页面显示的内容以及使用的功能组件有各自的不同。

步骤S40，利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到至少一个前端页面。

具体的说，在对所述目标功能组件进行实时编译时，需要先根据所述业务流程需求，将所述目标功能组件设置到所述前端用户界面框架的指定位置；然后为所述前端开发工具集分配编译所述目标功能组件时需要的测试数据，最后利用所述前端开发工具集对所述目标功能组件进行实时编译。

需要说明的是，上述所说的前端开发工具集，具体为技术人员根据需要预先封装的。在本实施例中，前端开发工具集主要用来执行代码编译打包、持续集成，项目模板，单元测试、安装包分析等功能，在具体实现中，技术人员可以根据需要封装前端开发工具集，此处不做限制。

此外，本实施例中所说的测试数据，可以是伪数据，即利用伪数据生成器，按照业务流程需求规定的需要展示在各前端页面的内容的数据格式，虚拟出来的数据；也可以是后端服务器提供的真实操作数据。

在本实施例中，优选采用伪数据来编译前端页面，这样不论与前端页面配合的后端服务器是否已经开发完成，都不会影响前端应用的开发进度。也就是说，合成前端应用的操作在后端服务器的开发任务没有完成的情况下，也可以独立开发测试，无需等待后端服务器中的数据，从而大大提升了前端应用的开发速度。

步骤S50，按照所述业务流程需求，将各前端页面进行组合，得到所述前端应用。

需要说明的是，在实际应用中，组合前端页面的操作，具体可以是根据所述业务流程需求中包含的各前端页面之间的连接关系来组合，即流程图。

比如，在业务流程需求中规定的3个前端页面的连接关系为在待合成的前端应用启动后，先显示前端页面C，在点击了前端页面C中的tab切换按键1后，跳转到前端页面B，在点击了前端页面C中的tab切换按键2后，跳转到前端页面A。

此外，值得一提的是，在具体实现中为了确保合成前端应用的操作能够顺利进行，在根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件之前，还可以先进行判断所述功能组件库是否已经构建完成的操作。若判定所述功能组件库未构建完成，则通知技术人员构建所述功能组件库；若判定所述功能组件库构建完成，则执行从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件的操作。

关于功能组件库的构建方式，在具体实现中，可以是由前端应用开发平台在本地服务器或云端服务器中预设的存储区域中创建一个功能组件库，然后从约定的存储区域获取功能组件并添加到该功能组件库中。

此外，若约定的存储区域不存在功能组件，可以设置前端应用开发平台向技术人员发送通知，通知技术人员尽快将功能组件导入该存储区域。

需要说明的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。

进一步地，在完成功能组件库的构建操作之后，为保证能够从功能组件库中查找到符合所述业务流程需求的目标功能组件，还可以执行判断所述功能组件库中是否存在所述类型的功能组件的操作。若判定所述功能组件库中不存在所述类型的功能组件，则通知技术人员构建所述类型的功能组件；若判定所述功能组件库中存在所述类型的功能组件，则执行从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件的操作。

值得一提的是，为了尽可能的降低功能组件之间的耦合性，从而提高可维护性及多人协同开发效率。在构建功能组件库中缺少的所述类型的功能组件时，具体可以根据分治策略来进行编译。

所谓分治策略，是指对于一个规模为n的问题，若该问题可以容易地解决(比如说规模n较小)则直接解决，否则将其分解为k个规模较小的子问题，这些子问题互相独立且与原问题形式相同，递归地解这些子问题，然后将各子问题的解合并得到原问题的解。

需要说明的是，上述所说的n和k在实际应用中的取值均为大于0的整数，并且n与k满足如下关系：1＜k≤n。

也就是说，在编译功能组件时，尽可能的将功能组件进行细化。比如，在编译的功能组件为用于展示新闻消息的新闻列表时，可以将该新闻列表功能组件拆分为用于调整新闻列表背景的子组件、用于调整新闻列表滑动样式的子组件、用于调整新闻列表每一行显示内容布局的子组件等，此处不再一一列举，对此也不做具体限制。

应当理解的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。

此外，在完成前端应用的开发操作，得到所述前端应用后，还可以根据预设的开发工具集对得到的前端应用进行自动化测试，已验证合成的前端应用的可用性。并在测试通过后，生成所述前端应用对应的应用程序设计接口文档(Application ProgrammingInterface，API文档)。

通过上述描述不难发现，本实施例中提供的基于组件化的前端开发方法，通过预先构建功能组件库，并在功能组件库中添加开发前端应用时需要用到的功能组件，从而在根据用户提供的业务流程需求确定合成该前端应用需要使用的功能组件的类型后，直接根据确定的类型从预先构建的功能组件库中查找符合当前业务流程需求的目标功能组件，然后利用预设的前端开发工具集对目标功能组件进行实时编译，并按照当前业务流程需求，将实时编译获得的各前端页面进行组合，即可得到用户所需的前端应用。整个前端开发过程，用户只需提供待合成的前端应用的业务流程需求，需要用户正在编写的代码量相对较少，且较为简单，故对技术人员专业技能的要求相对较低，因此在实现过程中既可以减少专业技术人员的参与，降低开发成本，又可以提升开发效率。

并且，由于前端应用是基于功能组件合成的，因而在后期维护过程中，可以仅根据调整后的业务流程需求对某一功能组件进行调整，从而既方便了后期维护，也降低了维护成本。

参考图3，图3为本发明一种基于组件化的前端开发方法第二实施例的流程示意图。

基于上述第一实施例，本实施例基于组件化的前端开发方法在所述步骤S50之后，还包括：

步骤S60，获取用户提供的部署所述前端应用的站点信息，根据所述站点信息，部署所述前端应用。

关于所述前端应用部署模块根据所述站点信息，部署所述前端应用的操作，具体可以基于目前较为常用的开源的应用容器引擎Docker来实现，具体的实现过程大致如下：

首先，对所述前端应用的代码进行自动编译并打包，得到所述前端应用的安装包。

然后，建立所述安装包与所述站点信息的对应关系，得到映射关系表。

最后，将所述安装包添加到所述Docker的容器仓库中，将所述站点信息和所述映射关系表发送至管理所述容器仓库的容器管理平台，这样前期的部署工作便完成了。剩下的部署工作，只需交给所述容器管理平台，由所述容器管理平台根据所述映射关系表，将所述容器仓库中的安装包下载到所述站点信息中规定的站点服务器上，安装并启动，实现对所述前端应用的部署即可。

需要说明的是，在实际应用中，在将所述安装包添加到所述Docker的容器仓库中的时候，需要先调用Docker提供的API文档中的镜像创建接口，创建Docker镜像，然后根据创建好的Docker镜像创建Docker容器，接着将所述安装包添加到所述Docker容器中，最后调用所述API文档中的Docker容器推送接口，将所述Docker容器推送到所述容器仓库，便可实现将所述安装包添加到所述Docker的容器仓库的操作，

此外，上述所说的容器管理平台具体可以是开源的企业级容器管理平台Rancher。

关于Docker和Rancher的具体使用，可以通过查看各自对应的API文档来使用，此处不再赘述。

需要说明的是，以上给出的仅为一种具体的自动部署前端应用的方法，在具体实现中，本领域的技术人员可以根据需要合理选择，比如采用虚拟机部署方式，此处不做限制。

通过上述描述不难发现，本实施例中提供的基于组件化的前端开发方法，通过采用开源的应用容器引擎Docker，根据预先建立的前端应用的安装包与站点信息的对应关系来实现前端应用的自动部署，整个过程快速简洁，大大降低了前端开发的门槛和难度，同时也减少了技术人员的参与，进而降低了开发和维护成本。

此外，本发明实施例还提出一种存储介质，所述存储介质上存储有基于组件化的前端开发程序，所述基于组件化的前端开发程序被处理器执行时实现如上文所述的基于组件化的前端开发方法的步骤。

参照图4，图4为本发明基于组件化的前端开发装置第一实施例的结构框图。

如图4所示，本发明实施例提出的基于组件化的前端开发装置包括：获取模块4001、确定模块4002、查找模块4003、编译模块4004和组合模块4005。

具体的说，获取模块4001，用于接收用户触发的前端应用合成请求，从所述前端应用合成请求中获取待合成的前端应用的业务流程需求；确定模块4002，用于根据所述业务流程需求，确定合成所述前端应用需要使用的功能组件的类型；查找模块4003，用于根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件；编译模块4004，用于利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到至少一个前端页面；组合模块4005，用于按照所述业务流程需求，将各前端页面进行组合，得到所述前端应用。

应当理解的是，由于不同的前端应用往往显示风格和适用的开发框架会有所差异，因而为了使得查找到的目标功能组件能够与合成所述前端应用所需的用户界面框架匹配，所述查找模块4003具体可以通过如下方式实现查找符合所述业务流程需求的目标功能组件的操作，如：先根据所述业务流程需求，确定合成所述前端应用所需的前端用户界面框架；然后，根据所述类型和所述前端用户界面框架，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件。

相应地，所述编译模块4004在利用预设的前端开发工具集对所述目标功能组件进行实时编译时，需要先根据所述业务流程需求，将所述目标功能组件设置到所述前端用户界面框架的指定位置；然后为所述前端开发工具集分配编译所述目标功能组件时需要的测试数据，最后利用所述前端开发工具集对所述目标功能组件进行实时编译。

此外，在具体实现中为了确保合成前端应用的操作能够顺利进行，所述基于组件化的前端开发装置还可以包括功能组件库判断模块和功能组件库构建模块。

其中，所述功能组件库判断模块主要用于判断所述功能组件库是否已经构建完成；若判定所述功能组件库未构建完成，则通知所述功能组件库构建模块构建所述功能组件库；若判定所述功能组件库构建完成，则通知所述查找模块4003根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件。

关于功能组件库的构建方式，在具体实现中，可以是由前端应用开发平台在本地服务器或云端服务器中预设的存储区域中创建一个功能组件库，然后从约定的存储区域获取功能组件并添加到该功能组件库中。

此外，若约定的存储区域不存在功能组件，可以设置前端应用开发平台向技术人员发送通知，通知技术人员尽快将功能组件导入该存储区域。

需要说明的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。

进一步地，在完成功能组件库的构建操作之后，为保证能够从功能组件库中查找到符合所述业务流程需求的目标功能组件，所述基于组件化的前端开发装置还可以包括功能组件类型判断模块和功能组件构建模块。

其中，所述能组件类型判断模块主要用来判断所述功能组件库中是否存在所述类型的功能组件；若判定所述功能组件库中不存在所述类型的功能组件，则通知所述功能组件构建模块构建所述类型的功能组件；若判定所述功能组件库中存在所述类型的功能组件，则通知所述查找模块4003根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件。

值得一提的是，为了尽可能的降低功能组件之间的耦合性，从而提高可维护性及多人协同开发效率。在构建功能组件库中缺少的所述类型的功能组件时，具体可以根据分治策略来进行编译。

所谓分治策略，是指对于一个规模为n的问题，若该问题可以容易地解决(比如说规模n较小)则直接解决，否则将其分解为k个规模较小的子问题，这些子问题互相独立且与原问题形式相同，递归地解这些子问题，然后将各子问题的解合并得到原问题的解。

需要说明的是，上述所说的n和k在实际应用中的取值均为大于0的整数，并且n与k满足如下关系：1＜k≤n。

也就是说，在编译功能组件时，尽可能的将功能组件进行细化。比如，在编译的功能组件为用于展示新闻消息的新闻列表时，可以将该新闻列表功能组件拆分为用于调整新闻列表背景的子组件、用于调整新闻列表滑动样式的子组件、用于调整新闻列表每一行显示内容布局的子组件等，此处不再一一列举，对此也不做具体限制。

应当理解的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。

此外，应当理解的是，本实施例中所涉及到的各模块均为逻辑模块，在实际应用中，一个逻辑单元可以是一个物理单元，也可以是一个物理单元的一部分，还可以以多个物理单元的组合实现。此外，为了突出本发明的创新部分，本实施例中并没有将与解决本发明所提出的技术问题关系不太密切的单元引入，但这并不表明本实施方式中不存在其它的单元。

通过上述描述不难发现，本实施例中提供的基于组件化的前端开发装置，通过预先构建功能组件库，并在功能组件库中添加开发前端应用时需要用到的功能组件，从而在根据用户提供的业务流程需求确定合成该前端应用需要使用的功能组件的类型后，直接根据确定的类型从预先构建的功能组件库中查找符合当前业务流程需求的目标功能组件，然后利用预设的前端开发工具集对目标功能组件进行实时编译，并按照当前业务流程需求，将实时编译获得的各前端页面进行组合，即可得到用户所需的前端应用。整个前端开发过程，用户只需提供待合成的前端应用的业务流程需求，需要用户正在编写的代码量相对较少，且较为简单，故对技术人员专业技能的要求相对较低，因此在实现过程中既可以减少专业技术人员的参与，降低开发成本，又可以提升开发效率。

并且，由于前端应用是基于功能组件合成的，因而在后期维护过程中，可以仅根据调整后的业务流程需求对某一功能组件进行调整，从而既方便了后期维护，也降低了维护成本。

此外，需要说明的是，以上所描述的工作流程仅仅是示意性的，并不对本发明的保护范围构成限定，在实际应用中，本领域的技术人员可以根据实际的需要选择其中的部分或者全部来实现本实施例方案的目的，此处不做限制。

另外，未在本实施例中详尽描述的技术细节，可参见本发明任意实施例所提供的基于组件化的前端开发方法，此处不再赘述。

基于上述基于组件化的前端开发装置的第一实施例，提出本发明基于组件化的前端开发装置第二实施例。

在本实施例中，所述基于组件化的前端开发装置还包括站点信息获取模块和前端应用部署模块。

其中，所述站点信息获取模块，用于获取用户提供的部署所述前端应用的站点信息。

所述前端应用部署模块，用于根据所述站点信息，部署所述前端应用。

关于所述前端应用部署模块根据所述站点信息，部署所述前端应用的操作，具体可以基于目前较为常用的开源的应用容器引擎Docker来实现，具体的实现过程大致如下：

首先，对所述前端应用的代码进行自动编译并打包，得到所述前端应用的安装包。

然后，建立所述安装包与所述站点信息的对应关系，得到映射关系表。

最后，将所述安装包添加到所述Docker的容器仓库中，将所述站点信息和所述映射关系表发送至管理所述容器仓库的容器管理平台，这样前期的部署工作便完成了。剩下的部署工作，只需交给所述容器管理平台，由所述容器管理平台根据所述映射关系表，将所述容器仓库中的安装包下载到所述站点信息中规定的站点服务器上，安装并启动，实现对所述前端应用的部署即可。

需要说明的是，在实际应用中，在将所述安装包添加到所述Docker的容器仓库中的时候，需要先调用Docker提供的API文档中的镜像创建接口，创建Docker镜像，然后根据创建好的Docker镜像创建Docker容器，接着将所述安装包添加到所述Docker容器中，最后调用所述API文档中的Docker容器推送接口，将所述Docker容器推送到所述容器仓库，便可实现将所述安装包添加到所述Docker的容器仓库的操作，

此外，上述所说的容器管理平台具体可以是开源的企业级容器管理平台Rancher。

关于Docker和Rancher的具体使用，可以通过查看各自对应的API文档来使用，此处不再赘述。

通过上述描述不难发现，本实施例中提供的基于组件化的前端开发装置，通过采用开源的应用容器引擎Docker，根据预先建立的前端应用的安装包与站点信息的对应关系来实现前端应用的自动部署，整个过程快速简洁，大大降低了前端开发的门槛和难度，同时也减少了技术人员的参与，进而降低了开发和维护成本。

需要说明的是，以上所描述的工作流程仅仅是示意性的，并不对本发明的保护范围构成限定，在实际应用中，本领域的技术人员可以根据实际的需要选择其中的部分或者全部来实现本实施例方案的目的，此处不做限制。

另外，未在本实施例中详尽描述的技术细节，可参见本发明任意实施例所提供的基于组件化的前端开发方法，此处不再赘述。

此外，需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者***不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者***所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者***中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如只读存储器(Read Only Memory，ROM)/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种基于组件化的前端开发方法，其特征在于，所述方法包括：

接收用户触发的前端应用合成请求，从所述前端应用合成请求中获取待合成的前端应用的业务流程需求；

根据所述业务流程需求，确定合成所述前端应用需要使用的功能组件的类型；

根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件；

利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到至少一个前端页面；

按照所述业务流程需求，将各前端页面进行组合，得到所述前端应用。

2.如权利要求1所述的方法，其特征在于，所述根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件，包括：

根据所述业务流程需求，确定合成所述前端应用所需的前端用户界面框架；

根据所述类型和所述前端用户界面框架，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件。

3.如权利要求2所述的方法，其特征在于，所述利用预设的前端开发工具集对所述目标功能组件进行实时编译，包括：

根据所述业务流程需求，将所述目标功能组件设置到所述前端用户界面框架的指定位置；

为所述前端开发工具集分配编译所述目标功能组件时需要的测试数据；

利用所述前端开发工具集对所述目标功能组件进行实时编译。

4.如权利要求1至3任一项所述的方法，其特征在于，所述根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件之前，所述方法还包括：

判断所述功能组件库是否已经构建完成；

若判定所述功能组件库未构建完成，则构建所述功能组件库。

5.如权利要求4所述的方法，其特征在于，所述构建所述功能组件库之后，所述方法还包括：

判断所述功能组件库中是否存在所述类型的功能组件；

若判定所述功能组件库中不存在所述类型的功能组件，则构建所述类型的功能组件。

6.如权利要求1至3任一项所述的方法，其特征在于，所述得到所述前端应用之后，所述方法还包括：

获取用户提供的部署所述前端应用的站点信息；

根据所述站点信息，部署所述前端应用。

7.如权利要求6所述的方法，其特征在于，所述根据所述站点信息，部署所述前端应用，包括：

对所述前端应用的代码进行自动编译并打包，得到所述前端应用的安装包；

建立所述安装包与所述站点信息的对应关系，得到映射关系表；

将所述安装包添加到采用的应用容器引擎的容器仓库中，将所述站点信息和所述映射关系表发送至管理所述容器仓库的容器管理平台，以使所述容器管理平台根据所述映射关系表，将所述容器仓库中的安装包下载到所述站点信息中规定的站点服务器上，安装并启动，实现对所述前端应用的部署。

8.一种基于组件化的前端开发装置，其特征在于，所述装置包括：

获取模块，用于接收用户触发的前端应用合成请求，从所述前端应用合成请求中获取待合成的前端应用的业务流程需求；

确定模块，用于根据所述业务流程需求，确定合成所述前端应用需要使用的功能组件的类型；

查找模块，用于根据所述类型，从预先封装的功能组件库中查找符合所述业务流程需求的目标功能组件；

编译模块，用于利用预设的前端开发工具集对所述目标功能组件进行实时编译，得到至少一个前端页面；

组合模块，用于按照所述业务流程需求，将各前端页面进行组合，得到所述前端应用。

9.一种基于组件化的前端开发设备，其特征在于，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于组件化的前端开发程序，所述基于组件化的前端开发程序配置为实现如权利要求1至7中任一项所述的基于组件化的前端开发方法的步骤。

10.一种存储介质，其特征在于，所述存储介质上存储有基于组件化的前端开发程序，所述基于组件化的前端开发程序被处理器执行时实现如权利要求1至7任一项所述的基于组件化的前端开发方法的步骤。