前端渲染方法、装置、设备、介质及程序产品制造方法及图纸

技术编号:31229229 阅读:16 留言:0更新日期:2021-12-08 09:57
本申请提供了一种前端渲染方法、装置、设备、介质及程序产品,通过根据获取到的页面加载请求确定页面配置需求,然后利用前端配置中心对页面配置需求进行渲染环境的解析,以确定目标配置,最后利用配置解析器,根据目标配置,渲染目标页面。实现了利用前端配置中心来管理无需调用后端运营数据的页面渲染的配置设置,解决了现有技术完全依赖后端系统来进行业务数据以及模板的维护和管理的模式,对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题,达到了无需依赖复杂的后端管理系统与接口程序就能实现对页面渲染的技术效果,且渲染工具简单、灵活、易扩展。易扩展。易扩展。

【技术实现步骤摘要】
前端渲染方法、装置、设备、介质及程序产品


[0001]本申请涉及计算机数据处理领域,尤其涉及一种前端渲染方法、装置、设备、介质及程序产品。

技术介绍

[0002]随着互联网技术的不断发展,对应的应用程序开发工作也越来越多,其中应用页面的渲染和配置是应用程序开发时的核心工作。
[0003]目前,应用页面的渲染和配置分为两个部分来实现,一个是负责处理交互操作和渲染逻辑的前端系统,另一个是负责对运营数据和各类模板进行维护和管理的后端系统。但是对于一些轻数据维护型的系统或者说是对于一些较少涉及到后端数据及模板管理的前端渲染,都采用统一的前后端协作的模式将使得渲染方式非常繁杂,需要对应设计接口程序以及其它的配套程序,影响开发效率以及系统整体复杂度,并且对于应用的拓展也非常麻烦。
[0004]即现有技术中完全依赖后端系统来进行业务数据以及模板的维护和管理的模式,存在对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题。

技术实现思路

[0005]本申请提供一种前端渲染方法、装置、设备、介质及程序产品,以解决现有技术完全依赖后端系统来进行业务数据以及模板的维护和管理的模式,对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题,使得前端系统能够独立地实时动态渲染页面。
[0006]第一个方面,本申请提供一种前端渲染页面的方法,应用于前端系统,包括:
[0007]根据获取到的页面加载请求确定页面配置需求;
[0008]利用前端配置中心对所述页面配置需求进行渲染环境的解析,以确定目标配置,所述目标配置用于指示目标页面的展示方式,所述渲染环境用于判断所述前端配置中心能否对应满足所述页面配置需求,以及表示满足所述页面配置需求所需的相关配置数据;
[0009]利用配置解析器,根据所述目标配置,渲染所述目标页面。
[0010]在一种可能的设计中,所述利用前端配置中心对所述页面配置需求进行渲染环境的解析,以确定目标配置,包括:
[0011]根据所述页面配置需求确定所述目标页面渲染时无需调用后端系统;
[0012]在所述前端配置中心的多个待选配置中,根据所述页面配置需求筛选出所述目标配置。
[0013]可选的,所述待选配置包括至少一个环境配置集合,所述环境配置集合为与所述目标页面的展示环境相对应的多种配置组成的集合。
[0014]在一种可能的设计中,所述在所述前端配置中心的多个待选配置中,根据所述页
面配置需求筛选出所述目标配置,包括:
[0015]根据所述页面配置需求确定所述展示环境,所述展示环境包括测试环境、预发试用环境以及线上发布环境;
[0016]根据所述展示环境以及所述与所述展示环境对应的所述环境配置集合,确定所述目标配置。
[0017]在一种可能的设计中,所述前端配置中心用于对配置的新建和维护进行管理,所述前端配置中心位于所述前端系统中,或者是与所述前端系统连接的独立系统。
[0018]可选的,所述配置中定义了各个渲染对象的展示方式,所述渲染对象包括:子页面、所述子页面中的模块,所述模块中的字段。
[0019]可选的,所述展示方式包括:显示以及隐藏。
[0020]在一种可能的设计中,所述配置是根据JSON格式对所述渲染对象的展示方式进行定义的字符串集合。
[0021]在一种可能的设计中,所述利用配置解析器,根据所述目标配置,渲染所述目标页面,包括:
[0022]利用所述配置解析器对所述目标配置进行子页面拆分,以确定子页面配置;
[0023]将所述子页面配置分发到对应的页面渲染接口或进行全局注册以建立全局子页面配置,所述全局子页面配置能够给多个所述页面渲染接口进行页面渲染操作;
[0024]利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染。
[0025]在一种可能的设计中,所述利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染,包括:
[0026]根据所述子页面中的各个模块对所述子页面配置进行拆分,以确定模块配置;
[0027]根据所述模块配置对各个所述模块进行渲染,以实现对各个所述子页面的渲染。
[0028]在一种可能的设计中,所述根据所述模块配置对各个所述模块进行渲染,以实现对各个所述子页面的渲染,包括:
[0029]根据所述模块将所述模块配置拆分为字段配置;
[0030]根据所述字段配置对所述模块中的字段进行渲染。
[0031]可选的,所述前端系统包括渐进式用户界面框架Vue,所述利用所述配置解析器对所述目标配置进行子页面拆分,以确定子页面配置,包括:
[0032]利用所述Vue的接口程序API中的计算属性computed工具对所述目标配置进行子页面拆分,以确定所述子页面配置;
[0033]对应的,所述将所述子页面配置分发到对应的页面渲染接口,包括:
[0034]通过公共的混入工具mixin将所述子页面配置引入所述目标页面的各个组件中;
[0035]所述利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染,包括:
[0036]在各个所述组件内部通过v

if函数,根据所述子页面配置,控制对应的字段的渲染。
[0037]第二个方面,本申请提供一种前端渲染装置,包括:
[0038]获取模块,用于获取页面加载请求
[0039]处理模块,用于根据所述页面加载请求确定页面配置需求;
[0040]前端配置中心模块,用于对所述页面配置需求进行渲染环境的解析,以确定目标配置,所述目标配置用于指示目标页面的展示方式,所述渲染环境用于判断所述前端配置中心模块能否对应满足所述页面配置需求,以及表示满足所述页面配置需求所需的相关配置数据;
[0041]所述处理模块,还用于利用配置解析器,根据所述目标配置,渲染所述目标页面。
[0042]在一种可能的设计中,所述前端配置中心模块,用于对所述页面配置需求进行渲染环境的解析,以确定目标配置,包括:
[0043]所述前端配置中心模块,用于根据所述页面配置需求确定所述目标页面渲染时无需调用后端系统;
[0044]所述前端配置中心模块,用于在多个待选配置中,根据所述页面配置需求筛选出所述目标配置。
[0045]可选的,所述待选配置包括至少一个环境配置集合,所述环境配置集合为与所述目标页面的展示环境相对应的多种配置组成的集合。
[0046]在一种可能的设计中,所述前端配置中心模块,用于在多个待选配置中,根据所述页面配置需求筛选出所述目标配置,包括:
[0047]所述前端配置中心模块,用于根据所述页面配置需求确定所述展示环境,所述展示环境包括测试环境、预发试用环境以及线上发布环境;
[0048]所述前端配置中本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种前端渲染方法,其特征在于,应用于前端系统,包括:根据获取到的页面加载请求确定页面配置需求;利用前端配置中心对所述页面配置需求进行渲染环境的解析,以确定目标配置,所述目标配置用于指示目标页面的展示方式,所述渲染环境用于判断所述前端配置中心能否对应满足所述页面配置需求,以及表示满足所述页面配置需求所需的相关配置数据;利用配置解析器,根据所述目标配置,渲染所述目标页面。2.根据权利要求1所述的前端渲染方法,其特征在于,所述利用前端配置中心对所述页面配置需求进行渲染环境的解析,以确定目标配置,包括:根据所述页面配置需求确定所述目标页面渲染时无需调用后端系统;在所述前端配置中心的多个待选配置中,根据所述页面配置需求筛选出所述目标配置。3.根据权利要求2所述的前端渲染方法,其特征在于,所述待选配置包括至少一个环境配置集合,所述环境配置集合为与所述目标页面的展示环境相对应的多种配置组成的集合。4.根据权利要求3所述的前端渲染方法,其特征在于,所述在所述前端配置中心的多个待选配置中,根据所述页面配置需求筛选出所述目标配置,包括:根据所述页面配置需求确定所述展示环境,所述展示环境包括:测试环境、预发试用环境以及线上发布环境;根据所述展示环境以及与所述展示环境对应的所述环境配置集合,确定所述目标配置。5.根据权利要求1

4中任意一项所述的前端渲染方法,其特征在于,所述前端配置中心用于对配置的新建和维护进行管理,所述前端配置中心位于所述前端系统中,或者是与所述前端系统连接的独立系统。6.根据权利要求5所述的前端渲染方法,其特征在于,所述配置中定义了各个渲染对象的展示方式,所述渲染对象包括:子页面、所述子页面中的模块,所述模块中的字段。7.根据权利要求6所述的前端渲染方法,其特征在于,所述展示方式包括:显示以及隐藏。8.根据权利要求7所述的前端渲染方法,其特征在于,所述配置是根据JSON格式对所述渲染对象的展示方式进行定义的字符串集合。9.根据权利要求6所述的前端渲染方法,其特征在于,所述利用配置解析器,根据所述目标配置,渲染所述目标页面,包括:利用所述配置解析器对所述目标配置进行子页面拆分,以确定子页面配置;将所述子页面配置分发到对应的页面渲染接口或进行全局注册以建立全局子页面配置,所述全局子页面配置能够给多个所述页面渲染接口进行...

【专利技术属性】
技术研发人员:陆辉
申请(专利权)人:北京京东世纪贸易有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1