前端组件处理方法、装置、终端及存储介质制造方法及图纸

本发明专利技术公开了一种前端组件处理方法、装置、终端及存储介质，该方法包括：根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；根据第一配置信息在栏位中输出第一业务组件；根据第一配置信息对页面中输出的第二业务组件进行调整。在页面中新增栏位组件，适用方即第一用户能够在配置栏位中运行的第一业务组件以及第一配置信息，根据用户配置的第一配置信息在页面中输出第一业务组件，然后同步调整页面中的第二业务组件，使第一用户能够对页面中的组件进行快速配置。根据第一配置信息对第二业务组件进行调整，实现前端组件的实时调整。件的实时调整。件的实时调整。

【技术实现步骤摘要】
前端组件处理方法、装置、终端及存储介质


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

技术介绍

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

技术实现思路

[0004]本专利技术提供一种前端组件处理方法、装置、终端及存储介质，以实现提高前端组件的调整效率。
[0005]第一方面，本专利技术实施例提供了一种前端组件处理方法，包括：
[0006]根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；
[0007]获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；
[0008]根据第一配置信息在栏位中输出第一业务组件；
[0009]根据第一配置信息对页面中输出的第二业务组件进行调整。
[0010]第二方面，本专利技术实施例还提供了一种前端组件处理装置，包括：
[0011]栏位输出模块，用于根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；
[0012]第一业务组件配置模块，用于获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；
[0013]第一业务组件输出模块，用于根据第一配置信息在栏位中输出第一业务组件；
[0014]第二业务组件调整模块，用于根据第一配置信息对页面中输出的第二业务组件进行调整。
[0015]第三方面，本专利技术实施例还提供了一种前端组件处理终端，前端组件处理终端包括：
[0016]一个或多个处理器；
[0017]存储装置，用于存储一个或多个程序，
[0018]当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如本专利技术实施例所示的前端组件处理方法。
[0019]第三方面，本专利技术实施例还提供了一种包含计算机可执行指令的存储介质，计算
机可执行指令在由计算机处理器执行时用于执行如本专利技术实施例所示的前端组件处理方法。
[0020]本专利技术提供的前端组件处理方法，根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件；获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及第一业务组件的第一配置信息；根据第一配置信息在栏位中输出第一业务组件；根据第一配置信息对页面中输出的第二业务组件进行调整。相对于目前只能由开发方对页面中的组件进行调整，本专利技术提供的前端组件处理方法，在页面中新增栏位组件，适用方即第一用户能够在配置栏位中运行的第一业务组件以及第一配置信息，根据用户配置的第一配置信息在页面中输出第一业务组件，然后同步调整页面中的第二业务组件，使第一用户能够对页面中的组件进行快速配置。根据第一配置信息对第二业务组件进行调整，实现前端组件的实时调整。
附图说明
[0021]图1是本专利技术实施例一中的前端组件处理方法的流程图；
[0022]图2是本专利技术实施例一中的栏位配置文件的规范示意图；
[0023]图3是本专利技术实施例一中的栏位界面示意图；
[0024]图4是本专利技术实施例一中的框架示意图；
[0025]图5是本专利技术实施例一中的业务组件开发流程示意图；
[0026]图6是本专利技术实施例一中的业务组件项目结构示意图；
[0027]图7是本专利技术实施例一中的组件配置文件的规范示意图；
[0028]图8是本专利技术实施例二中的前端组件处理装置的结构示意图；
[0029]图9是本专利技术实施例三中的前端组件处理终端的结构示意图。
具体实施方式
[0030]下面结合附图和实施例对本专利技术作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本专利技术，而非对本专利技术的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本专利技术相关的部分而非全部结构。
[0031]实施例一
[0032]图1为本专利技术实施例一提供的前端组件处理方法的流程图，本实施例可适用于对应用程序前端组件进行开发调整的情况，该方法可以由电子设备来执行，如智能手机、平板电脑、个人电脑、笔记本电脑等，该方法具体包括如下步骤：
[0033]步骤110、根据栏位配置文件在页面中目标位置输出栏位，栏位用于容纳业务组件。
[0034]栏位配置文件以及栏位可以位于组件仓库中。目标位置记录在栏位配置文件中，属于默认的栏位输出位置。页面初始化时，根据栏位配置文件对栏位进行初始化。栏位中可以运行有某个组件，该组件配置有栏位标记的业务组件，运行于栏位中。第一用户作为应用的使用者，业务人员可以作为第一用户，在栏位中对业务组件进行配置。
[0035]进一步的，在步骤110之前，可以在应用项目中新增栏位，具体可通过下述步骤实施：
[0036]在应用项目目录中增加栏位配置文件；将栏位配置为全局组件，配置目标位置；应用项目引入业务组件依赖包；将栏位的代码发送至组件仓库。
[0037]具体的：步骤1)在应用项目页面同级目录下新增slot.json栏位配置文件，slot.json是描述页面栏位信息的基础文件，提供持续集成过程和业务组件市场需要的栏位信息。如图2所示的slot文件的详细配置规则。步骤2)接入slot，应用在初始化时候，组件市场插件为其注册全局组件padding
‑
slot。在页面所需位置使用padding
‑
slot标签，并将当前页面slots.json文件中对应此slot的描述信息的name传入。步骤3)项目中引入业务组件依赖包。步骤4)录入组件市场：与业务组件项目代码提交过程类似，代码提交到git指定分支触发Gitlab
‑
CI后，执行build脚本时，会将当前项目中包含的所有slot写入组件市场数据库。
[0038]在完成应用项目栏位设置之后，组件市场管理端可从组件市场数据库中获取该应用项目的所有栏位信息以及该栏位可配置的业务组件信息。至此业务组件市场管理端即可分别对业务组件配置信息进行修改、对应用项目的栏位中使用的业务组件进行修改，并且可设置栏位的布局来改变业务组件的布局方式。组件市场管理端栏位可视化配置界面如图3所示。业务人员完成组件市场管理端栏位信息配置之后，将栏位配置信息写入组件市场数据库。在应用项目初始化时，组件市场插件自动获取组件市场数据库中配置的栏位信息，并根据栏位配置信息编排padding
‑
slot栏位组件中显示业务组件。
[0039]进一步的，在步骤110、根据栏位配置文本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端组件处理方法，其特征在于，包括：根据栏位配置文件在页面中目标位置输出栏位，所述栏位用于容纳业务组件；获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及所述第一业务组件的第一配置信息；根据所述第一配置信息在所述栏位中输出所述第一业务组件；根据所述第一配置信息对所述页面中输出的第二业务组件进行调整。2.根据权利要求1所述的方法，其特征在于，根据栏位配置文件在页面中目标位置输出栏位之前，还包括：根据应用项目的描述文件获取页面包含的多个第二业务组件；在页面首次渲染所述第二业务组件时，将获取的第二业务组件的第二配置参数设置为全局对象；根据所述第二配置参数对已渲染的第二业务组件进行调整。3.根据权利要求1所述的方法，其特征在于，在获取第一用户根据组件仓库提供的组件清单选择的第一业务组件以及所述第一业务组件的第一配置信息之前，还包括：根据第一用户输入的栏位配置信息对所述栏位的位置进行调整、对所述栏位的尺寸进行调整或者对所述栏位进行增减。4.根据权利要求1所述的方法，其特征在于，在根据栏位配置文件在页面中目标位置输出栏位之前，还包括：在应用项目目录中增加栏位配置文件；将栏位配置为全局组件，配置目标位置；应用项目引入业务组件依赖包；将栏位的代码发送至组件仓库。5.根据权利要求2所述的方法，其特征在于，在根据栏位配置文件在页面中目标位置输出栏位之前，还包括：架构建应用项目的目录，所述应用项目的目录包括第二业务组件的入口文件以及描述文件；配置所述应用项目包含的第二业务组件的配置文件，以便第二用户根据所述配置文件进行第二业务组件的开发；根据开发得到的第二业务组件进行测试；将测试后的第二业务组件...

【专利技术属性】
技术研发人员：陈炼，周博文，黄倩倩，梁倩玉，丁玉德，
申请(专利权)人：上海浦东发展银行股份有限公司，
类型：发明
国别省市：