前端组件处理方法、装置、终端及存储介质与流程

1.本发明实施例涉及软件开发技术，尤其涉及一种前端组件处理方法、装置、终端及存储介质。


背景技术：

2.随着软件开发的不断发展，前端开发成为一种较为常见的开发方式。前端开发的组件化模式称为目前主流的开发模式。组件化开发将页面上每个独立的可视区域作为一个组件，对层叠样式(cascading style sheets，css)进行作用于隔离，实现组件复用。
3.目前前端开发方式中，用户作为页面使用者，若存在对页面改进的需求，需要联系开发方提供需求，例如页面布局的更改，由开发方进行后台的组件修改，前端组件调整效率低。


技术实现要素：

4.本发明提供一种前端组件处理方法、装置、终端及存储介质，以实现提高前端组件的调整效率。
5.第一方面，本发明实施例提供了一种前端组件处理方法，包括：
6.根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；
7.获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；
8.根据第一配置信息在栏位中输出第一业务组件；
9.根据第一配置信息对页面中输出的第二业务组件进行调整。
10.第二方面，本发明实施例还提供了一种前端组件处理装置，包括：
11.栏位输出模块，用于根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；
12.第一业务组件配置模块，用于获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；
13.第一业务组件输出模块，用于根据第一配置信息在栏位中输出第一业务组件；
14.第二业务组件调整模块，用于根据第一配置信息对页面中输出的第二业务组件进行调整。
15.第三方面，本发明实施例还提供了一种前端组件处理终端，前端组件处理终端包括：
16.一个或多个处理器；
17.存储装置，用于存储一个或多个程序，
18.当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如本发明实施例所示的前端组件处理方法。
19.第三方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，计算
机可执行指令在由计算机处理器执行时用于执行如本发明实施例所示的前端组件处理方法。
20.本发明提供的前端组件处理方法，根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；根据第一配置信息在栏位中输出第一业务组件；根据第一配置信息对页面中输出的第二业务组件进行调整。相对于目前只能由开发方对页面中的组件进行调整，本发明提供的前端组件处理方法，在页面中新增栏位组件，适用方即第一用户能够在配置栏位中运行的第一业务组件以及第一配置信息，根据用户配置的第一配置信息在页面中输出第一业务组件，然后同步调整页面中的第二业务组件，使第一用户能够对页面中的组件进行快速配置。根据第一配置信息对第二业务组件进行调整，实现前端组件的实时调整。
附图说明
21.图1是本发明实施例一中的前端组件处理方法的流程图；
22.图2是本发明实施例一中的栏位配置文件的规范示意图；
23.图3是本发明实施例一中的栏位界面示意图；
24.图4是本发明实施例一中的框架示意图；
25.图5是本发明实施例一中的业务组件开发流程示意图；
26.图6是本发明实施例一中的业务组件项目结构示意图；
27.图7是本发明实施例一中的组件配置文件的规范示意图；
28.图8是本发明实施例二中的前端组件处理装置的结构示意图；
29.图9是本发明实施例三中的前端组件处理终端的结构示意图。
具体实施方式
30.下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。
31.实施例一
32.图1为本发明实施例一提供的前端组件处理方法的流程图，本实施例可适用于对应用程序前端组件进行开发调整的情况，该方法可以由电子设备来执行，如智能手机、平板电脑、个人电脑、笔记本电脑等，该方法具体包括如下步骤：
33.步骤110、根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件。
34.栏位配置文件以及栏位可以位于组件仓库中。目标位置记录在栏位配置文件中，属于默认的栏位输出位置。页面初始化时，根据栏位配置文件对栏位进行初始化。栏位中可以运行有某个组件，该组件配置有栏位标记的业务组件，运行于栏位中。第一用户作为应用的使用者，业务人员可以作为第一用户，在栏位中对业务组件进行配置。
35.进一步的，在步骤110之前，可以在应用项目中新增栏位，具体可通过下述步骤实施：
36.在应用项目目录中增加栏位配置文件；将栏位配置为全局组件，配置目标位置；应用项目引入业务组件依赖包；将栏位的代码发送至组件仓库。
37.具体的：步骤1)在应用项目页面同级目录下新增slot.json栏位配置文件，slot.json是描述页面栏位信息的基础文件，提供持续集成过程和业务组件市场需要的栏位信息。如图2所示的slot文件的详细配置规则。步骤2)接入slot，应用在初始化时候，组件市场插件为其注册全局组件padding-slot。在页面所需位置使用padding-slot标签，并将当前页面slots.json文件中对应此slot的描述信息的name传入。步骤3)项目中引入业务组件依赖包。步骤4)录入组件市场：与业务组件项目代码提交过程类似，代码提交到git指定分支触发gitlab-ci后，执行build脚本时，会将当前项目中包含的所有slot写入组件市场数据库。
38.在完成应用项目栏位设置之后，组件市场管理端可从组件市场数据库中获取该应用项目的所有栏位信息以及该栏位可配置的业务组件信息。至此业务组件市场管理端即可分别对业务组件配置信息进行修改、对应用项目的栏位中使用的业务组件进行修改，并且可设置栏位的布局来改变业务组件的布局方式。组件市场管理端栏位可视化配置界面如图3所示。业务人员完成组件市场管理端栏位信息配置之后，将栏位配置信息写入组件市场数据库。在应用项目初始化时，组件市场插件自动获取组件市场数据库中配置的栏位信息，并根据栏位配置信息编排padding-slot栏位组件中显示业务组件。
39.进一步的，在步骤110、根据栏位配置文件在页面中目标位置输出栏位之前，还包括：
40.根据应用项目的描述文件获取页面包含的多个第二业务组件；在页面首次渲染第二业务组件时，将获取的第二业务组件的第二配置参数设置为全局对象；根据第二配置参数对已渲染的第二业务组件进行调整。
41.如图4所示，业务人员可以登录组件市场管理端。业务人员可在组件市场管理端配置指定业务参数，业务参数会经组件市场后台系统存储到组件市场数据库中。业务组件应用项目需要安装组件市场插件，针对业务组件项目，插件会在业务组件首次渲染时候获取组件市场数据库中的业务组件参数，组件市场插件将获取到的参数注册为全局对象，业务组件内部会根据获取参数进行业务逻辑的调整。当组件市场平台未配置或查询配置参数失败时返回meta.json中defaultparams项。
42.业务组件的开发本质上是服务于应用项目，应用项目中页面可视区域可能需要展示多个业务组件、并且相同位置的业务组件在不同情况下可能需要替换为其他业务组件，同时业务组件的自身的布局以及不同业务组件之间的布局也需要根据业务需求进行调整。本发明实施例在应用项目中引入栏位，栏位是页面中容纳业务组件的容器，它接收组件市场的配置信息并按配置展示业务组件。业务人员可在组件市场管理平台获取应用项目配置的栏位信息以及使用的业务组件，并对栏位中业务组件样式进行可视化地调整，于此同时，应用项目实时获取该栏位的配置信息，根据获取的样式参数进行样式的动态调整。
43.进一步的，在步骤110、根据栏位配置文件在页面中目标位置输出栏位之前，还包括：
44.架构建应用项目的目录，应用项目的目录包括第二业务组件的入口文件以及描述文件；配置应用项目包含的第二业务组件的配置文件，以便第二用户根据配置文件进行第
二业务组件的开发；根据开发得到的第二业务组件进行测试；将测试后的第二业务组件存储至组件仓库。
45.对于业务组件开发模块，为了实现高效率的业务组件开发流程，可以构建业务组件脚手架。通过业务组件脚手架可快速进行业务组件项目构建，此外脚手架还集成了ci/cd(持续集成、持续部署)功能，可自动化进行项目构建、测试，并可在构建过程中自动将组件信息发布到组件市场。业务组件脚手架的业务组件开发流程如图5所示。
46.首先利用业务组件脚手架创建业务组件骨架项目，业务组件项目结构如图6所，其中各业务组件文件夹需放在blocks一级目录下，index.js(业务组件入口文件)、meta.json(业务组件描述文件，定义业务组件的各种信息)在各业务组件文件夹一级目录下。设定业务组件开发目录的作用在于，在图9流程中执行build脚本时，通过预设脚本能自动获取该业务项目对应目录下的业务组件信息。
47.其次，编写meta文件，meta文件是描述业务组件信息的基本文件，其提供持续集成和业务组件市场需要的业务组件信息。如图图7所示，业务组件元数据文件的配置规范，其中业务组件类型可分为：普通组件(normal)和广告组件(adv)，普通组件支持参数配置功能，广告组件支持参数配置、广告配置等功能。业务组件的布局类型则可分为：常规组件(block)、悬浮组件(float)，布局类型应用项目使用该业务组件的使用方式。常规组件：必须要写明自己的所适用的宫格(即适用于几宫格布局，自身占几格)。悬浮组件：需注明自身宽高，定位和出现消失的动画效果。
48.meta文件规范配置完成后，即可进行业务组件的开发测试，完成开发测试之后，对业务组件进行单元测试，然后将通过测试的业务组件发布到组件仓库。
49.可选的，将测试后的第二业务组件存储至组件仓库，可实施为：
50.将第二业务组件的代码发送至数据仓库管理平台gitblab；数据仓库管理平台gitblab调用集群中的容器分别对应用项目的目录下的多个第二业务组件执行创建build脚本；将执行创建build脚本的第二业务组件以及第二业务组件的描述文件存储到组件仓库。
51.在完成单元测试之后，为了自动化地完成业务组件测试、构建、部署并将业务组件信息录入组件市场，采用gitlab-ci/cd进行持续集成以简化手动部署过程，当完成业务组件的开发测试后，将代码推送至gitlab时，若当前提交符合文件中指定的触发条件,会触发gitlab-ci功能，该功能会使用kubernetes中容器中运行的gitlab-runner(处理构建的应用程序)服务运行.gitlab-ci.yml(gitlab-ci.yml定义了持续集成过程中脚本的执行结构和顺序：包括代码测试、项目构建、镜像部署)中定义的脚本。当gitlab-runner执行build脚本时，在项目构建过程会将业务组件元数据信息录入组件市场中，即上送元数据信息到组件市场对应的mongodb数据库中。
52.可选的，将测试后的第二业务组件存储至组件仓库，可实施为：
53.根据命名规范对第二业务组件的名称进行重命名；
54.将重命名的第二业务组件存储至组件仓库。
55.为了方便对组件版本进行管理，组件发布必须按照严格的版本格式，业务组件的版本规范采用语义化版本控制规范(semver)：主版本号.次版本号.修订号。版本号递增规则如下：主版本号：当做了不兼容的api修改。次版本号：当做了向下兼容的功能性新增。修
订号：当做了向下兼容的问题修正。除上述三个版本外，可在修订号版本号的后面添加先行版本作为延伸，先行版本是指当要发布大版本或者核心内容时，但是又不能保证该版本功能完全正常时，可使用alpha、beta、rc来修饰即将要发布的版本。alpha:内部版本，beta:公测版本，rc(release candidate)：正式版本的候选版本。先行版本后需添加发布次数信息：例如：1.0.0-alpha.0、1.0.0-alpha.1等版本。
56.步骤120、获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息。
57.可以根据组件仓库中存储的应用项目可使用的组件清单进行输出。也可以为每个栏位配置可选的组件清单。用户可以从组件清单中选择第一业务组件，并根据需求配置第一业务组件的第一配置信息。
58.进一步的，在步骤120之前，还包括：
59.根据第一用户输入的栏位配置信息对栏位的位置进行调整、对栏位的尺寸进行调整或者对栏位进行增减。
60.第一用户可以对栏位的尺寸位置进行调整。第一用户还可以对栏位进行删除和增加，进而提高第一用户对组件调整的灵活性，提高易用性。
61.步骤130、根据第一配置信息在栏位中输出第一业务组件。
62.将用户选择的第一业务组件根据第一配置信息输出到栏位中。
63.步骤140、根据第一配置信息对页面中输出的第二业务组件进行调整。
64.当栏位中输出第一业务组件后，根据第一配置信息中的业务信息，查找使用相同业务信息的第二业务组件，根据该业务信息对第二业务组件进行调整。
65.本发明提供的前端组件处理方法，根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；根据第一配置信息在栏位中输出第一业务组件；根据第一配置信息对页面中输出的第二业务组件进行调整。相对于目前只能由开发方对页面中的组件进行调整，本发明提供的前端组件处理方法，在页面中新增栏位组件，适用方即第一用户能够在配置栏位中运行的第一业务组件以及第一配置信息，根据用户配置的第一配置信息在页面中输出第一业务组件，然后同步调整页面中的第二业务组件，使第一用户能够对页面中的组件进行快速配置。根据第一配置信息对第二业务组件进行调整，实现前端组件的实时调整。
66.实施例二
67.图8为本发明实施例二提供的前端组件处理方法的流程图，本实施例可适用于对应用程序前端组件进行开发调整的情况，该装置可以由电子设备来执行，如智能手机、平板电脑、个人电脑、笔记本电脑等，该装置具体包括：栏位输出模块210、第一业务组件配置模块220、第一业务组件输出模块230以及第二业务组件调整模块240。
68.栏位输出模块210，用于根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；
69.第一业务组件配置模块220，用于获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；
70.第一业务组件输出模块230，用于根据第一配置信息在栏位中输出第一业务组件；
71.第二业务组件调整模块240，用于根据第一配置信息对页面中输出的第二业务组件进行调整。
72.在上述实施方式的基础上，还包括第二业务组件同步模块，第二业务组件同步模块用于：
73.根据应用项目的描述文件获取页面包含的多个第二业务组件；
74.在页面首次渲染第二业务组件时，将获取的第二业务组件的第二配置参数设置为全局对象；
75.根据第二配置参数对已渲染的第二业务组件进行调整。
76.在上述实施方式的基础上，还包括栏位调整模块，栏位调整模块用于：
77.根据第一用户输入的栏位配置信息对栏位的位置进行调整、对栏位的尺寸进行调整或者对栏位进行增减。
78.在上述实施方式的基础上，还包括栏位生成模块，栏位生成模块用于：
79.在应用项目目录中增加栏位配置文件；
80.将栏位配置为全局组件，配置目标位置；
81.应用项目引入业务组件依赖包；
82.将栏位的代码发送至组件仓库。
83.在上述实施方式的基础上，还包括第二业务组件生成模块，第二业务组件生成模块用于：
84.架构建应用项目的目录，应用项目的目录包括第二业务组件的入口文件以及描述文件；
85.配置应用项目包含的第二业务组件的配置文件，以便第二用户根据配置文件进行第二业务组件的开发；
86.根据开发得到的第二业务组件进行测试；
87.将测试后的第二业务组件存储至组件仓库。
88.在上述实施方式的基础上，第二业务组件生成模块用于：
89.将第二业务组件的代码发送至数据仓库管理平台gitblab；
90.数据仓库管理平台gitblab调用集群中的容器分别对应用项目的目录下的多个第二业务组件执行创建build脚本；
91.将执行创建build脚本的第二业务组件以及第二业务组件的描述文件存储到组件仓库。
92.在上述实施方式的基础上，第二业务组件生成模块用于：
93.根据命名规范对第二业务组件的名称进行重命名；
94.将重命名的第二业务组件存储至组件仓库。
95.本发明提供的前端组件处理装置，栏位输出模块210，用于根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；第一业务组件配置模块220，用于获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；第一业务组件输出模块230，用于根据第一配置信息在栏位中输出第一业务组件；第二业务组件调整模块240，用于根据第一配置信息对页面中输出的第二业务组件进行调整。相对于目前只能由开发方对页面中的组件进行调整，本发明提供的前端组件处理装置，在
页面中新增栏位组件，适用方即第一用户能够在配置栏位中运行的第一业务组件以及第一配置信息，根据用户配置的第一配置信息在页面中输出第一业务组件，然后同步调整页面中的第二业务组件，使第一用户能够对页面中的组件进行快速配置。根据第一配置信息对第二业务组件进行调整，实现前端组件的实时调整。
96.本发明实施例所提供的前端组件处理装置可执行本发明任意实施例所提供的前端组件处理方法，具备执行方法相应的功能模块和有益效果。
97.实施例三
98.图9为本发明实施例三提供的一种前端组件处理终端的结构示意图，如图9所示，该前端组件处理终端包括处理器30、存储器31、输入装置32和输出装置33；前端组件处理终端中处理器30的数量可以是一个或多个，图9中以一个处理器30为例；前端组件处理终端中的处理器30、存储器31、输入装置32和输出装置33可以通过总线或其他方式连接，图9中以通过总线连接为例。
99.存储器31作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中的前端组件处理方法对应的程序指令/模块(例如，栏位输出模块210、第一业务组件配置模块220、第一业务组件输出模块230、第二业务组件调整模块240、第二业务组件同步模块、栏位调整模块、栏位生成模块以及第二业务组件生成模块)。处理器30通过运行存储在存储器31中的软件程序、指令以及模块，从而执行前端组件处理终端的各种功能应用以及数据处理，即实现上述的前端组件处理方法。
100.存储器31可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端的使用所创建的数据等。此外，存储器31可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器31可进一步包括相对于处理器30远程设置的存储器，这些远程存储器可以通过网络连接至前端组件处理终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
101.输入装置32可用于接收输入的数字或字符信息，以及产生与前端组件处理终端的用户设置以及功能控制有关的键信号输入。输出装置33可包括显示屏等显示设备。
102.实施例四
103.本发明实施例四还提供一种包含计算机可执行指令的存储介质，计算机可执行指令在由计算机处理器执行时用于执行一种前端组件处理方法，该方法包括：
104.根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；
105.获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；
106.根据第一配置信息在栏位中输出第一业务组件；
107.根据第一配置信息对页面中输出的第二业务组件进行调整。
108.在上述实施方式的基础上，根据栏位配置文件在页面中目标位置输出栏位之前，还包括：
109.根据应用项目的描述文件获取页面包含的多个第二业务组件；
110.在页面首次渲染第二业务组件时，将获取的第二业务组件的第二配置参数设置为全局对象；
111.根据第二配置参数对已渲染的第二业务组件进行调整。
112.在上述实施方式的基础上，在获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息之前，还包括：
113.根据第一用户输入的栏位配置信息对栏位的位置进行调整、对栏位的尺寸进行调整或者对栏位进行增减。
114.在上述实施方式的基础上，在根据栏位配置文件在页面中目标位置输出栏位之前，还包括：
115.在应用项目目录中增加栏位配置文件；
116.将栏位配置为全局组件，配置目标位置；
117.应用项目引入业务组件依赖包；
118.将栏位的代码发送至组件仓库。
119.在上述实施方式的基础上，在根据栏位配置文件在页面中目标位置输出栏位之前，还包括：
120.架构建应用项目的目录，应用项目的目录包括第二业务组件的入口文件以及描述文件；
121.配置应用项目包含的第二业务组件的配置文件，以便第二用户根据配置文件进行第二业务组件的开发；
122.根据开发得到的第二业务组件进行测试；
123.将测试后的第二业务组件存储至组件仓库。
124.在上述实施方式的基础上，将测试后的第二业务组件存储至组件仓库，包括：
125.将第二业务组件的代码发送至数据仓库管理平台gitblab；
126.数据仓库管理平台gitblab调用集群中的容器分别对应用项目的目录下的多个第二业务组件执行创建build脚本；
127.将执行创建build脚本的第二业务组件以及第二业务组件的描述文件存储到组件仓库。
128.在上述实施方式的基础上，将测试后的第二业务组件存储至组件仓库，包括：
129.根据命名规范对第二业务组件的名称进行重命名；
130.将重命名的第二业务组件存储至组件仓库。
131.当然,本发明实施例所提供的一种包含计算机可执行指令的存储介质,其计算机可执行指令不限于如上的方法操作,还可以执行本发明任意实施例所提供的前端组件处理方法中的相关操作.
132.通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(read-only memory,rom)、随机存取存储器(random access memory,ram)、闪存(flash)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。
133.值得注意的是，上述装置的实施例中，所包括的各个单元和模块只是按照功能逻
辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。
134.注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。