前端工程模板库构建方法和装置、电子设备、存储介质与流程

1.本发明涉及软件开发技术领域，尤其涉及前端工程模板库构建方法和装置、电子设备和存储介质。


背景技术：

2.前端即运行在pc端、移动端等浏览器上展现给用户浏览的网页。前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的html和css以及javascript/ajax，现在最新的高级版本html5、css3，以及svg等。
3.随着前端技术的发展以及html5、css3、node.js等技术的广泛应用，各类前端框架类库层出不穷，可以利用框架类库快速搭建新项目。但是相关技术中，框架类库功能比较单一，如果需要进行组件定制时，操作比较复杂，需要做大量重复性操作，效率低下，另外没有统一的接口调用管理，不方便维护和更新。


技术实现要素：

4.本发明实施例的主要目的在于提出一种前端工程模板库构建方法和装置、电子设备和存储介质，能够进行组件定制和调整，提高组件定制化效率，并且进行统一的接口调用管理，方便对组件进行维护和更新。
5.为实现上述目的，本发明实施例的第一方面提出了一种前端工程模板库构建方法，包括：
6.按照业务逻辑和功能构建文件层级，并根据所述文件层级生成模板库目录结构；
7.按照组件的调整需求对ui组件库中待调整ui组件进行调整；
8.根据组件的功能需求生成对应的功能组件；
9.生成预设规则的调用接口，所述调用接口用于根据所述目录结构调用所述ui组件和所述功能组件。
10.在一些实施例，所述组件的调整需求为修改要求，所述按照组件的调整需求对ui组件库中待调整ui组件进行调整，包括：
11.根据所述目录结构获取所述待调整ui组件的目录位置；
12.在所述目录位置根据所述修改要求对所述待调整ui组件进行修改。
13.在一些实施例，所述组件的调整需求为：span值调整需求；
14.当所述待调整ui组件为布局类组件时，所述按照组件的调整需求对ui组件库中待调整ui组件进行调整，包括：
15.根据所述span值调整需求获取所述布局类组件的组件数量；
16.根据所述组件数量计算栅格化数量；
17.根据所述栅格化数量对所述布局类组件的span值进行调整。
18.在一些实施例，当所述待调整ui组件为表单类组件时，所述组件的调整需求包括：表单宽度计算需求、表单校验需求、表单修改标记需求或表单绑定优化需求中的一种或多种。
19.在一些实施例，所述按照组件的调整需求对ui组件库中待调整ui组件进行调整，包括如下之一：
20.当所述组件的调整需求为表单宽度计算需求时，获取每一个所述表单类组件的宽度，并根据所述宽度选取得到最大宽度，利用事件广播消息发送所述最大宽度至每一个所述表单类组件，以使得所述表单类组件根据所述最大宽度进行宽度调整；
21.当所述组件的调整需求为表单校验需求时，获取校验器的message消息，并按照所述message消息对所述表单类组件进行校验；或，获取所述表单类组件的placeholder信息，并按照所述placeholder信息对所述表单类组件进行校验；或，获取所述表单类组件的label消息，并按照所述label消息对所述表单类组件进行校验；
22.当所述组件的调整需求为表单修改标记需求时，获取所述表单类组件的修改信息，并对所述修改信息进行修改标记显示；
23.当所述组件的调整需求为表单绑定优化需求时，获取所述表单类组件的关联表单信息，并在所述表单类组件中引用所述关联表单信息。
24.在一些实施例，所述根据组件的功能需求生成对应的功能组件，包括：
25.获取组件的功能需求，所述功能需求包括：区域需求、审批需求或树形选择需求中的一种或多种；
26.根据所述功能需求生成对应的功能组件，所述功能组件包括：区域组件、审批链组件或树形选择穿梭组件中的一种或多种。
27.在一些实施例，还包括：
28.获取后台接口信息；
29.将所述后台接口信息配置在urls目录下进行统一注册。
30.为实现上述目的，本发明的第二方面提出了一种前端工程模板库构建装置，包括：
31.目录结构构建模块，用于按照业务逻辑和功能构建文件层级，并根据所述文件层级生成模板库目录结构；
32.组件调整模块，用于按照组件的调整需求对ui组件库中待调整ui组件进行调整；
33.功能组件生成模块，用于根据组件的功能需求生成对应的功能组件；
34.组件调用模块，用于生成预设规则的调用接口，所述调用接口用于根据所述目录结构调用所述ui组件和所述功能组件。
35.为实现上述目的，本发明的第三方面提出了一种电子设备，包括：
36.至少一个存储器；
37.至少一个处理器；
38.至少一个程序；
39.所述程序被存储在存储器中，处理器执行所述至少一个程序以实现本发明如上述第一方面所述的方法。
40.为实现上述目的，本发明的第四方面提出了一种存储介质，该存储介质是计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指
令用于使计算机执行：
41.如上述第一方面所述的方法。
42.本发明实施例提出的前端工程模板库构建方法和装置、电子设备、存储介质，按照业务逻辑和功能构建文件层级，并根据文件层级生成模板库目录结构，然后按照组件的调整需求对ui组件库中待调整ui组件进行调整，并且根据组件的功能需求生成对应的功能组件，最后生成预设规则的调用接口，调用接口能够根据目录结构调用ui组件和功能组件。本实施例通过对ui组件库中待调整ui组件进行调整，并根据组件的功能需求生成对应的功能组件，在原有组件的基础上进行定制和调整，避免大量重复性操作，提高组件定制化效率，利用预设规则的调用接口进行统一的接口调用管理，以便方便地对组件进行维护和更新。
附图说明
43.图1是本发明实施例提供的前端工程模板库构建方法的流程图。
44.图2是本发明实施例提供的前端工程模板库构建方法的模板库目录结构示意图。
45.图3是本发明实施例提供的前端工程模板库构建方法的又一流程图。
46.图4是本发明实施例提供的前端工程模板库构建方法的又一流程图。
47.图5是本发明实施例提供的前端工程模板库构建方法的又一流程图。
48.图6是本发明实施例提供的前端工程模板库构建方法的表单校验示意图。
49.图7是本发明实施例提供的前端工程模板库构建方法的又一流程图。
50.图8是本发明实施例提供的前端工程模板库构建方法的表单修改标记示意图。
51.图9是本发明实施例提供的前端工程模板库构建装置的结构框图。
52.图10是本发明实施例提供的电子设备的硬件结构示意图。
具体实施方式
53.为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
54.需要说明的是，虽然在装置示意图中进行了功能模块划分，在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于装置中的模块划分，或流程图中的顺序执行所示出或描述的步骤。
55.除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本发明实施例的目的，不是旨在限制本发明。
56.首先，对本发明中涉及的若干名词进行解析：
57.ui(user interface)：即用户界面，是指对软件的人机交互、操作逻辑、界面美观的整体设计。用户界面是系统和用户之间进行交互和信息交换的媒介，能够实现信息的内部形式与人类可以接受形式之间的转换。用户界面是介于用户与硬件而设计彼此之间交互沟通相关软件，目的在使得用户能够方便有效率地去操作硬件以达成双向之交互，完成所希望借助硬件完成之工作，用户界面定义广泛，包含了人机交互与图形用户接口，凡参与人类与机械的信息交流的领域都存在着用户界面。
58.组件(component)：组件技术是一种软件重用方法，也是分布式计算和web服务的基础。组件技术的应用现在已经十分广泛，组件编程则重用特定功能完整的程序模块。每个组件会提供一些标准且简单的应用接口，允许使用者设置和调整参数和属性。用户可以将不同来源的多个组件有机地结合在一起，快速构成一个符合实际需要的复杂应用程序。组件区别于一般软件的主要特点，是其重用性(公用/通用)、可定制性(设置参数和属性)、自包容性(模块相对独立，功能相对完整)和互操作性(多个组件可协同工作)。可以简单方便地利用可视化工具来实现组件的集成，也是组件技术一个重要优点。
59.api(application programming interface)：是一些预先定义的接口(如函数、http接口)，或指软件系统不同组成部分衔接的约定，用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。
60.npm(node package manager)：是一种随同node.js一起安装的包管理工具，node.js是一个基于chrome v8引擎的javascript运行环境，node.js使用了一个事件驱动、非阻塞式i/o的模型解决代码部署上的问题。npm常见的使用场景有以下几种：1)允许用户从npm服务器下载别人编写的第三方包到本地使用；2)允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用；3)允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。
61.前端即运行在pc端、移动端等浏览器上展现给用户浏览的网页。前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的html和css以及javascript/ajax，现在最新的高级版本html5、css3，以及svg等。
62.随着前端技术的发展以及html5、css3、node.js等技术的广泛应用，各类前端框架类库层出不穷，可以利用框架类库快速搭建新项目。但是相关技术中，框架类库功能比较单一，如果需要进行组件定制时，操作比较复杂，需要做大量重复性操作，效率低下，另外没有统一的接口调用管理，不方便维护和更新。
63.基于此，本发明实施例提供一种前端工程模板库构建方法和装置、电子设备、存储介质，能够通过对ui组件库中待调整ui组件进行调整，并根据组件的功能需求生成对应的功能组件，在原有组件的基础上进行定制和调整，避免大量重复性操作，提高组件定制化效率，利用预设规则的调用接口进行统一的接口调用管理，以便方便地对组件进行维护和更新。
64.本发明实施例提供前端工程模板库构建方法和装置、电子设备、存储介质，具体通过如下实施例进行说明，首先描述本发明实施例中的前端工程模板库构建方法。
65.本发明实施例提供的前端工程模板库构建方法，本发明实施例提供的前端工程模板库构建方法可应用于终端中，也可应用于服务器端中，还可以是运行于终端或服务器端中的软件。在一些实施例中，终端可以是智能手机、平板电脑、笔记本电脑、台式计算机或者智能手表等；服务器可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(content delivery network，cdn)、以及大数据和人工智能平台等基础云计算服务的云服务器；软件可以是实现前端工程模板库构建方法的应用等，但并不局限于以上形式。
66.本发明可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络pc、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
67.图1是本发明实施例提供的前端工程模板库构建方法的一个可选的流程图，图1中的方法可以包括但不限于包括步骤s110至步骤s140。
68.步骤s110，按照业务逻辑和功能构建文件层级，并根据文件层级生成模板库目录结构。
69.在一实施例中，为了规整目录结构，进行清晰明了的文件层次划分，根据业务逻辑和核心功能进行整合细分，构建文件层级，并根据文件层级生成模板库目录结构，例如可以是树形结构，并且对文件进行合理的命名，便于进行文件存储和查找。
70.参照图2，为本技术一实施例中模板库目录结构示意图。从图中可见，该模板库目录结构按照文件层级划分为三级，第一级为“src”总目录，其中包含11个第二级目录，分别是：“assets(资源)”、“components(组件)”、“extends(继承)”、“lang(语言)”、“lookup(查询)”、“mock(模拟数据)”、“router(路由)”、“ruler(规则)”、“store(存储)”、“urls(链接)”、“views(展示)”等，其中第二级目录“views”还包括至少两个第三级目录，第三级目录对应具体的文件，分别是：“app.vue”和“main.js”。可以理解的是，本图中仅对模板库目录结构进行展示，并不代表本技术实施例中模板库目录结构只能是这种形式或者包含这些目录内容，在此不做具体限定。
71.得到模板库目录结构后，需要在原有组件的基础上对ui组件库中待调整ui组件进行定制和调整，以避免大量重复性操作，提高组件定制化效率，下面描述如何对待调整ui组件进行定制和调整。
72.步骤s120，按照组件的调整需求对ui组件库中待调整ui组件进行调整。
73.在一实施例中，ui组件库是整合式，通过非npm包形式引入组件整合成组件库，非npm形式能够降低定制化组件的难度。本实施例中，组件的调整需求包括：修改要求、span值调整需求、表单宽度计算需求、表单校验需求、表单修改标记需求或表单绑定优化需求中的一种或多种。
74.在一实施例中，组件调整需求是修改要求时，该调整需求主要是修改需求，具体的调整过程包括但不限于步骤s1211至步骤s1212：
75.步骤s1211，根据目录结构获取待调整ui组件的目录位置。
76.步骤s1212，在目录位置根据修改要求对待调整ui组件进行修改。
77.在一实施例中，通过获取待调整ui组件在上述模板库目录结构中的具体位置，例如图2中的“components”目录位置，根据对该组件的修改要求，对待调整ui组件进行对应的修改。
78.在一实施例中，组件调整需求是span值调整需求时，并且待调整ui组件为布局类
组件时，参照图3，按照组件的调整需求对ui组件库中待调整ui组件进行调整包括但不限于步骤s1213至步骤s1215：
79.步骤s1213，根据span值调整需求获取布局类组件的组件数量。
80.步骤s1214，根据组件数量计算栅格化数量。
81.在一实施例中，首先获取布局类组件的组件数量n1，根据组件数量n1计算得到对应的栅格化数量n2，一般来说n1＝n2。栅格化即网格化，是一种布局方式，可以同时处理行和列，由栅格容器包裹栅格元素进行使用，将预设区域绘制成网格，然后按照网格宽度将元素填充进去。
82.步骤s1215，根据栅格化数量对布局类组件的span值进行调整。
83.在一实施例中，无需对每一个组件的span值进行具体设定，本实施例中，仅需要按照栅格化数量n2将预设区域进行均等划分，按照均等分配的规则分配网格宽度，即该实施例中布局类组件的span值相同。
84.下述为相关技术中布局类组件span定义的一种示例：
[0085][0086]
上述布局类组件(例如grid-content)的组件数量n1为8个，对应的栅格化数量也是8个，对应的布局类组件的span值设定为：24、8、8、8、6、6、6、6，即相关技术中需要对每一个组件的span值进行具体设定。
[0087]
下述本实施例中布局类组件span调整的一种示例(针对上述相关技术中的内容)：
[0088][0089]
上述实施例中，无需对每一个组件的span值进行具体设定，按照均等分配的规则，每一个布局类组件的span值可以是(24 8 8 8 6 6 6 6)/8＝9，这种调整方式能够降低定制化组件的难度，提高定制效率。
[0090]
在一实施例中，当待调整ui组件为表单类组件(例如form组件)时，其调整需求包括：表单宽度计算、表单校验、表单修改标记或表单绑定优化中一种或多种。
[0091]
在一实施例中，当调整需求为表单宽度计算需求时，要实现自动计算label(标签)的宽度，以达到自适应调整label文字宽度的效果，参照图4，按照组件的调整需求对ui组件库中待调整ui组件进行调整包括但不限于步骤s1216至步骤s1218：
[0092]
步骤s1216，获取每一个表单类组件的宽度。
[0093]
在一实施例中，通过表单类组件的父组件监听表单类组件的宽度，其中将某段代码封装成一个组件，而这个组件又在另一个组件中引入，则引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。在form组件中，每一个表单域由一个form-item组件构成，本实施例中，父组件通过监听form-item事件的生成信息，由父组件记录每个表单类组件(form组件)中label(标签)的文字宽度作为该表单类组件的宽度。
[0094]
步骤s1217，根据宽度选取得到最大宽度。
[0095]
在一实施例中，父组件将获取的所有表单类组件的宽度进行比较，从中筛选得到一个最大宽度，记为labelwidth。
[0096]
步骤s1218，利用事件广播消息发送最大宽度至每一个表单类组件，以使得表单类组件根据最大宽度进行宽度调整。
[0097]
在一实施例中，父组件利用事件广播消息将上述得到的最大宽度labelwidth广播至所有的表单类组件的form-item组件，以便表单类组件利用该最大宽度重新调整其label文字宽度，实现了实现自动计算label(标签)的宽度，以达到自适应调整label文字宽度的效果，从而无须人工设定表单类组件label的对齐。
[0098]
下述为本技术一实施例中表单宽度计算示例。
[0099][0100]
该实施例中，通过设定表单类组件(form)的label-width参数的值来进行表单文字宽度的设定，以label-width＝120为例说明，120为最大宽度，如果在调整时，不确定最大宽度的值，则此处不填写，本实施例会根据步骤s1216至步骤s1218的过程自适应计算最大宽度，调整label文字宽度。
[0101]
在一实施例中，当调整需求为表单校验需求时，需要对集成进来的ui组件进行方便快捷的表单校验，表单校验的目的是对用户侧输入的表单信息进行校验。一般通过定义校验规则，根据校验规则对输入的信息进行校验判断，来过滤无效数据、假数据或者有毒数据，是数据安全的一道关卡，无论是从产品本身出发，还是考虑产品的受众，表单校验都不可或缺。以常用的用户注册表单为例：如果没有表单校验，用户费时费力地填写了大量资料，点击提交准备体验产品功能时，后台返回了数据格式错误并要求用户重新填写时，会极大的影响用户体验。
[0102]
参照图5，本实施例中按照组件的调整需求对ui组件库中待调整ui组件进行调整包括但不限于步骤s1219至步骤s1221：
[0103]
步骤s1219，获取校验器的message消息，并按照message消息对表单类组件进行校验。
[0104]
在一实施例中，通过获取校验器中的message消息，以message消息对校验规则进行提示，以完成对表单类组件进行校验的目的。例如下述定义的校验规则示例：
[0105][0106]
其中，校验器中的message消息分别是：站点名称message消息“站点名称不能为空”和站点名称长度message消息“长度在3到5个字符”，此处仅作示例，并不代表对message消息进行限定。
[0107]
步骤s1220，或，获取表单类组件的placeholder信息，并按照placeholder信息对表单类组件进行校验。
[0108]
在一实施例中，如果无法获取校验器中的message消息，则获取表单类组件的placeholder信息，在前端页面布局时，会用到input输入框，可以采用placeholder信息提示用户在该input输入框输入正确的信息。placeholder属性是html5中包含的一个属性，可以用来描述描述输入字段预期值的简短提示信息，该placeholder提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失，其中，placeholder属性适用于下面的input类型：text、search、url、tel、email和password。例如用户登录时需要输入用户名(text类型)和密码(password类型)，可以使用该placeholder信息提示用户输入用户名和输入密码的具体位置。因此本实施例中，通过获取表单类组件的placeholder信息(该信息可以包含校验规则)，并按照placeholder信息对表单类组件进行校验，判断该表单获取的输入信息是否符合校验规则。
[0109]
步骤s1221，或，获取表单类组件的label消息，并按照label消息对表单类组件进行校验。
[0110]
在一实施例中，如果如果无法获取校验器中的placeholder信息，则获取表单类组件form-item上包含的label消息，其中label消息用于对表单元素中定义标签进行说明，因此本实施例从label消息中获取校验规则，对表单类组件进行校验。
[0111]
在一实施例中，上述三种位于不同消息位置的校验规则在定义时，支持字符串名称索引校验规则，并且支持校验规则动态传参，能够进一步提高表单校验的效率。
[0112]
下述为本技术一实施例表单校验示意，在placeholder信息中定义校验规则，表示
为“rule”：
[0113][0114]
上诉后实施例中校验规则经过定义之后，可以经过多次调用，并且可以跨表单使用，能够进行全局管理，提高表单校验的适用范围。
[0115]
参照图6，为本技术一实施例表单校验一示意图，图中所述在placeholder信息中定义校验规则，根据placeholder信息获取input输入框的内容，并对该内容进行校验，判断是否符合输入要求。例如对活动名称input输入框中“xxx”进行校验等。
[0116]
在一实施例中，当调整需求为表单修改标记需求时，参照图7，按照组件的调整需求对ui组件库中待调整ui组件进行调整包括但不限于步骤s1222至步骤s1223：
[0117]
步骤s1222，获取表单类组件的修改信息。
[0118]
在一实施例中，根据表单类组件的修改日志生成对应的修改信息，修改信息可以包括：修改内容和修改位置。
[0119]
步骤s1223，对修改信息进行修改标记显示。
[0120]
在一实施例中，为了获取修改变动信息以进行重点关注或者继续修改，可以通过对修改信息进行修改标记显示实现，修改标记可以是将修改内容的文字或者背景进行高亮显示或者将修改位置进行高亮显示。可以理解的是，修改标记显示可以是高亮显示也可以是例如框线显示等多种方式，在此不做具体限定。
[0121]
参照图8，为本技术一实施例中表单修改标记示意图。图8中的修改内容包括：活动名称由“123456”修改为“789”、活动区域由“上海”修改为“南京”和活动时间由“2021h1”修改为“2021h2”，因此在修改后的表单中将修改后的活动名称、活动区域和活动时间的修改位置(图中所示的input输入框)进行框线显示，修改前为虚线框，修改后为实线框。
[0122]
在一实施例中，当调整需求为表单绑定优化需求时，按照组件的调整需求对ui组件库中待调整ui组件进行调整包括但不限于步骤s1224至步骤s1225：
[0123]
步骤s1224，获取表单类组件的关联表单信息。
[0124]
步骤s1225，在表单类组件中引用关联表单信息。
[0125]
在一实施例中，如果两个表单类组件之间存在关联信息时，为了提高定制效率，后续表单可以引用其他表单的定义，省略部分相同的信息内容，从而使得后续表单不用显示定义。
[0126]
例如下述实例中表单类组件form1和表单类组件form2之间存在关联，表示为：
[0127][0128][0129]
上述实施例中，按照步骤s1224至步骤s1225的描述，首先获取form2的关联表单信息为：form1，根据关联信息，后续表单form2可以引用表单form1的定义，从而后续表单form2不用显示相同的定义。
[0130]
步骤s130，根据组件的功能需求生成对应的功能组件。
[0131]
在一实施例中，首先需要获取组件的功能需求，例如功能需求包括：区域需求、审批需求或树形选择需求中一种或多种。然后根据功能需求生成对应的功能组件，与功能需求对应，功能组件包括：区域组件、审批链组件或树形选择穿梭组件中一种或多种。
[0132]
在一实施例中，例如一个表单中需要选择用户所在地，即存在区域需求，可生成一个区域组件，在对应的input输入框被点击时，展开可供选择的区域信息。例如：境内或境外，若用户选择其中一种之后，例如境内，则展开下一级的区域信息，例如“北京”、“上海”、“杭州”、“深圳”等，共同构成该区域组件。可以理解的是，此处仅作示意，并不代表对其进行限定。
[0133]
在一实施例中，例如一个表单中需要填写审批信息，即存在审批需求，则可生成一个审批链组件，在对应的input输入框被点击时，展开可供选择的审批类型信息。例如：“顺序审批”、“协同审批”、“并行审批”或“传阅审批”等，当用户选择其中一种审批类型之后，例如“顺序审批”，则提示“前者审批完，后者审批”，同时可以展开下一级审批人员信息，以供用户进行选择，同时支持对选取内容进行自动修正。可以理解的是，此处仅作示意，并不代表对其进行限定。
[0134]
在一实施例中，例如穿梭框组件无法满足项目需求时，可以生成树形选择穿梭组件，例如利用element中的tree树形控件重新实现穿梭框。本实施例中树形选择穿梭组件左边的选项不限于线性的数组，可以时树形结构，对左边选项选取之后，则该选取的内容会出现在右边选项中，当右边选项中删掉该选取内容后，左边选项中对该内容的选取状态也会相应取消。可以理解的是，此处仅作示意，并不代表对其进行限定。
[0135]
上述实施例对ui组件库中待调整ui组件进行定制和调整后，需要生成统一的接口
进行调用，便于管理和维护。
[0136]
步骤s140，生成预设规则的调用接口，调用接口能够根据目录结构调用ui组件和功能组件。
[0137]
在一实施例中，预设规则的调用接口示例如下：
[0138]
this.api.get(
‘
方法名’,{}).then(res＝》{}),
[0139]
或：
[0140]
this.api.post(
‘
方法名’,{}).then(res＝》{})
[0141]
或包含带错误的处理：
[0142]
this.api.getwitherror(
‘
方法名’,{}).then(res＝》{}).catch(err＝》{})
[0143]
this.api.postwietherror(“方法名“，{}).then(res＝》{}).catch(err＝》{})
[0144]
在一实施例中，定义统一规则和风格的api调用接口，该调用接口能够对ui组件和功能组件进行调用，同时由于接口风格统一，降低维护难度，能够方便地对组件进行维护和更新。
[0145]
另外，本技术一实施例中还包括步骤s150：获取后台接口信息，并将后台接口信息配置在urls目录下进行统一注册，即该实施例中将所有的后台接口，统一放在urls目录下，例如可以按功能模块对文件进行统一注册，便于对后台接口进行集中维护和管理，提高后台接口的管理效率。
[0146]
本发明实施例提出的前端工程模板库构建方法，按照业务逻辑和功能构建文件层级，并根据文件层级生成模板库目录结构，然后按照组件的调整需求对ui组件库中待调整ui组件进行调整，并且根据组件的功能需求生成对应的功能组件，最后生成预设规则的调用接口，调用接口能够根据目录结构调用ui组件和功能组件。本实施例通过对ui组件库中待调整ui组件进行调整，并根据组件的功能需求生成对应的功能组件，在原有组件的基础上进行定制和调整，避免大量重复性操作，提高组件定制化效率，利用预设规则的调用接口进行统一的接口调用管理，以便方便地对组件进行维护和更新。
[0147]
另外，本实施例中按照上述前端工程模板库构建方法构建得到的前端工程模板库可以快速启动项目，避免相关技术构建好环境之后还需要选取ui库，减少技术选型的时间，并且由于第三方ui库可能存在未知的风险，利用该模型库进行自由定制，规范组件表达，方便的进行接口维护，统一进行ajax标准化调用。同时由于按照业务逻辑和功能构建文件层级，并根据文件层级生成模板库目录结构，因此每个功能都按照模块区分，可整体开发可分散开发，在多人合作开发过程中，能显著降低开发时间，提高开发效率。
[0148]
本发明实施例还提供一种前端工程模板库构建装置，可以实现上述前端工程模板库构建方法，参照图9，该装置包括：
[0149]
目录结构构建模块910，用于按照业务逻辑和功能构建文件层级，并根据文件层级生成模板库目录结构；
[0150]
组件调整模块920，用于按照组件的调整需求对ui组件库中待调整ui组件进行调整；
[0151]
功能组件生成模块930，用于根据组件的功能需求生成对应的功能组件；
[0152]
组件调用模块940，用于生成预设规则的调用接口，调用接口用于够根据目录结构调用ui组件和功能组件。
[0153]
本实施例的前端工程模板库构建装置的具体实施方式与上述前端工程模板库构建方法的具体实施方式基本一致，在此不再赘述。
[0154]
本发明实施例还提供了一种电子设备，包括：
[0155]
至少一个存储器；
[0156]
至少一个处理器；
[0157]
至少一个程序；
[0158]
所述程序被存储在存储器中，处理器执行所述至少一个程序以实现本发明实施上述的前端工程模板库构建方法。该电子设备可以为包括手机、平板电脑、个人数字助理(personal digital assistant，简称pda)、车载电脑等任意智能终端。
[0159]
请参阅图10，图10示意了另一实施例的电子设备的硬件结构，电子设备包括：
[0160]
处理器1001，可以采用通用的cpu(centralprocessingunit，中央处理器)、微处理器、应用专用集成电路(applicationspecificintegratedcircuit，asic)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本发明实施例所提供的技术方案；
[0161]
存储器1002，可以采用rom(readonlymemory，只读存储器)、静态存储设备、动态存储设备或者ram(randomaccessmemory，随机存取存储器)等形式实现。存储器1002可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器1002中，并由处理器1001来调用执行本发明实施例的前端工程模板库构建方法；
[0162]
输入/输出接口1003，用于实现信息输入及输出；
[0163]
通信接口1004，用于实现本设备与其他设备的通信交互，可以通过有线方式(例如usb、网线等)实现通信，也可以通过无线方式(例如移动网络、wifi、蓝牙等)实现通信；和
[0164]
总线1005，在设备的各个组件(例如处理器1001、存储器1002、输入/输出接口1003和通信接口1004)之间传输信息；
[0165]
其中处理器1001、存储器1002、输入/输出接口1003和通信接口1004通过总线1005实现彼此之间在设备内部的通信连接。
[0166]
本发明实施例还提供了一种存储介质，该存储介质是计算机可读存储介质，该计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令用于使计算机执行上述前端工程模板库构建方法。
[0167]
本发明实施例提出的前端工程模板库构建方法、前端工程模板库构建装置、电子设备、存储介质，通过对ui组件库中待调整ui组件进行调整，并根据组件的功能需求生成对应的功能组件，在原有组件的基础上进行定制和调整，避免大量重复性操作，提高组件定制化效率，利用预设规则的调用接口进行统一的接口调用管理，以便方便地对组件进行维护和更新。
[0168]
存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
[0169]
本发明实施例描述的实施例是为了更加清楚的说明本发明实施例的技术方案，并不构成对于本发明实施例提供的技术方案的限定，本领域技术人员可知，随着技术的演变和新应用场景的出现，本发明实施例提供的技术方案对于类似的技术问题，同样适用。
[0170]
本领域技术人员可以理解的是，图1-8中示出的技术方案并不构成对本发明实施例的限定，可以包括比图示更多或更少的步骤，或者组合某些步骤，或者不同的步骤。
[0171]
以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
[0172]
本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、设备中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。
[0173]
本发明的说明书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
[0174]
应当理解，在本发明中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“a和/或b”可以表示：只存在a，只存在b以及同时存在a和b三种情况，其中a，b可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。
[0175]
在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
[0176]
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
[0177]
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
[0178]
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上
或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括多指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(read-only memory，简称rom)、随机存取存储器(random access memory，简称ram)、磁碟或者光盘等各种可以存储程序的介质。
[0179]
以上参照附图说明了本发明实施例的优选实施例，并非因此局限本发明实施例的权利范围。本领域技术人员不脱离本发明实施例的范围和实质内所作的任何修改、等同替换和改进，均应在本发明实施例的权利范围之内。