CN113760253A - 前端渲染方法、装置、设备、介质及程序产品 - Google Patents
前端渲染方法、装置、设备、介质及程序产品 Download PDFInfo
- Publication number
- CN113760253A CN113760253A CN202110022952.3A CN202110022952A CN113760253A CN 113760253 A CN113760253 A CN 113760253A CN 202110022952 A CN202110022952 A CN 202110022952A CN 113760253 A CN113760253 A CN 113760253A
- Authority
- CN
- China
- Prior art keywords
- configuration
- page
- rendering
- sub
- target
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 186
- 238000000034 method Methods 0.000 title claims abstract description 59
- 238000012423 maintenance Methods 0.000 claims abstract description 14
- 238000012545 processing Methods 0.000 claims description 43
- 238000004590 computer program Methods 0.000 claims description 12
- 230000006870 function Effects 0.000 claims description 7
- 238000012360 testing method Methods 0.000 claims description 7
- 238000002156 mixing Methods 0.000 claims description 5
- 230000000750 progressive effect Effects 0.000 claims description 5
- 238000012216 screening Methods 0.000 claims description 5
- 238000004364 calculation method Methods 0.000 claims description 4
- 230000000694 effects Effects 0.000 abstract description 6
- 238000013461 design Methods 0.000 description 22
- 238000007726 management method Methods 0.000 description 18
- 238000010586 diagram Methods 0.000 description 10
- 238000011161 development Methods 0.000 description 8
- 230000008569 process Effects 0.000 description 5
- 238000004458 analytical method Methods 0.000 description 3
- 238000010276 construction Methods 0.000 description 1
- 238000013523 data management Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/37—Compiler construction; Parser generation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请提供了一种前端渲染方法、装置、设备、介质及程序产品，通过根据获取到的页面加载请求确定页面配置需求，然后利用前端配置中心对页面配置需求进行渲染环境的解析，以确定目标配置，最后利用配置解析器，根据目标配置，渲染目标页面。实现了利用前端配置中心来管理无需调用后端运营数据的页面渲染的配置设置，解决了现有技术完全依赖后端系统来进行业务数据以及模板的维护和管理的模式，对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题，达到了无需依赖复杂的后端管理系统与接口程序就能实现对页面渲染的技术效果，且渲染工具简单、灵活、易扩展。
Description
技术领域
本申请涉及计算机数据处理领域，尤其涉及一种前端渲染方法、装置、设备、介质及程序产品。
背景技术
随着互联网技术的不断发展，对应的应用程序开发工作也越来越多，其中应用页面的渲染和配置是应用程序开发时的核心工作。
目前，应用页面的渲染和配置分为两个部分来实现，一个是负责处理交互操作和渲染逻辑的前端系统，另一个是负责对运营数据和各类模板进行维护和管理的后端系统。但是对于一些轻数据维护型的系统或者说是对于一些较少涉及到后端数据及模板管理的前端渲染，都采用统一的前后端协作的模式将使得渲染方式非常繁杂，需要对应设计接口程序以及其它的配套程序，影响开发效率以及系统整体复杂度，并且对于应用的拓展也非常麻烦。
即现有技术中完全依赖后端系统来进行业务数据以及模板的维护和管理的模式，存在对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题。
发明内容
本申请提供一种前端渲染方法、装置、设备、介质及程序产品，以解决现有技术完全依赖后端系统来进行业务数据以及模板的维护和管理的模式，对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题，使得前端系统能够独立地实时动态渲染页面。
第一个方面，本申请提供一种前端渲染页面的方法，应用于前端系统，包括：
根据获取到的页面加载请求确定页面配置需求；
利用前端配置中心对所述页面配置需求进行渲染环境的解析，以确定目标配置，所述目标配置用于指示目标页面的展示方式，所述渲染环境用于判断所述前端配置中心能否对应满足所述页面配置需求，以及表示满足所述页面配置需求所需的相关配置数据；
利用配置解析器，根据所述目标配置，渲染所述目标页面。
在一种可能的设计中，所述利用前端配置中心对所述页面配置需求进行渲染环境的解析，以确定目标配置，包括：
根据所述页面配置需求确定所述目标页面渲染时无需调用后端系统；
在所述前端配置中心的多个待选配置中，根据所述页面配置需求筛选出所述目标配置。
可选的，所述待选配置包括至少一个环境配置集合，所述环境配置集合为与所述目标页面的展示环境相对应的多种配置组成的集合。
在一种可能的设计中，所述在所述前端配置中心的多个待选配置中，根据所述页面配置需求筛选出所述目标配置，包括：
根据所述页面配置需求确定所述展示环境，所述展示环境包括测试环境、预发试用环境以及线上发布环境；
根据所述展示环境以及所述与所述展示环境对应的所述环境配置集合，确定所述目标配置。
在一种可能的设计中，所述前端配置中心用于对配置的新建和维护进行管理，所述前端配置中心位于所述前端系统中，或者是与所述前端系统连接的独立系统。
可选的，所述配置中定义了各个渲染对象的展示方式，所述渲染对象包括：子页面、所述子页面中的模块，所述模块中的字段。
可选的，所述展示方式包括：显示以及隐藏。
在一种可能的设计中，所述配置是根据JSON格式对所述渲染对象的展示方式进行定义的字符串集合。
在一种可能的设计中，所述利用配置解析器，根据所述目标配置，渲染所述目标页面，包括：
利用所述配置解析器对所述目标配置进行子页面拆分，以确定子页面配置；
将所述子页面配置分发到对应的页面渲染接口或进行全局注册以建立全局子页面配置，所述全局子页面配置能够给多个所述页面渲染接口进行页面渲染操作；
利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染。
在一种可能的设计中，所述利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染，包括：
根据所述子页面中的各个模块对所述子页面配置进行拆分，以确定模块配置；
根据所述模块配置对各个所述模块进行渲染，以实现对各个所述子页面的渲染。
在一种可能的设计中，所述根据所述模块配置对各个所述模块进行渲染，以实现对各个所述子页面的渲染，包括：
根据所述模块将所述模块配置拆分为字段配置；
根据所述字段配置对所述模块中的字段进行渲染。
可选的，所述前端系统包括渐进式用户界面框架Vue，所述利用所述配置解析器对所述目标配置进行子页面拆分，以确定子页面配置，包括：
利用所述Vue的接口程序API中的计算属性computed工具对所述目标配置进行子页面拆分，以确定所述子页面配置；
对应的，所述将所述子页面配置分发到对应的页面渲染接口，包括：
通过公共的混入工具mixin将所述子页面配置引入所述目标页面的各个组件中；
所述利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染，包括：
在各个所述组件内部通过v-if函数，根据所述子页面配置，控制对应的字段的渲染。
第二个方面，本申请提供一种前端渲染装置，包括：
获取模块，用于获取页面加载请求
处理模块，用于根据所述页面加载请求确定页面配置需求；
前端配置中心模块，用于对所述页面配置需求进行渲染环境的解析，以确定目标配置，所述目标配置用于指示目标页面的展示方式，所述渲染环境用于判断所述前端配置中心模块能否对应满足所述页面配置需求，以及表示满足所述页面配置需求所需的相关配置数据；
所述处理模块，还用于利用配置解析器，根据所述目标配置，渲染所述目标页面。
在一种可能的设计中，所述前端配置中心模块，用于对所述页面配置需求进行渲染环境的解析，以确定目标配置，包括：
所述前端配置中心模块，用于根据所述页面配置需求确定所述目标页面渲染时无需调用后端系统；
所述前端配置中心模块，用于在多个待选配置中，根据所述页面配置需求筛选出所述目标配置。
可选的，所述待选配置包括至少一个环境配置集合，所述环境配置集合为与所述目标页面的展示环境相对应的多种配置组成的集合。
在一种可能的设计中，所述前端配置中心模块，用于在多个待选配置中，根据所述页面配置需求筛选出所述目标配置，包括：
所述前端配置中心模块，用于根据所述页面配置需求确定所述展示环境，所述展示环境包括测试环境、预发试用环境以及线上发布环境；
所述前端配置中心模块，用于根据所述展示环境以及所述与所述展示环境对应的所述环境配置集合，确定所述目标配置。
在一种可能的设计中，所述配置中心模块，用于对配置的新建和维护进行管理，所述配置中心模块可以位于所述前端系统中，或者是与所述前端系统连接的独立控制系统模块。
可选的，所述配置中定义了各个渲染对象的展示方式，所述渲染对象包括：子页面、所述子页面中的模块组件，所述模块组件中的字段。
可选的，所述展示方式包括：显示以及隐藏。
在一种可能的设计中，所述配置是根据JSON格式对所述渲染对象的展示方式进行定义的字符串集合。
在一种可能的设计中，所述处理模块，还用于利用配置解析器，根据所述目标配置，渲染所述目标页面，包括：
所述处理模块，还用于利用所述配置解析器对所述目标配置进行子页面拆分，以确定子页面配置；
所述处理模块，还用于将所述子页面配置分发到对应的页面渲染接口或进行全局注册以建立全局子页面配置，所述全局子页面配置能够给多个所述页面渲染接口进行页面渲染操作；
所述处理模块，还用于利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染。
在一种可能的设计中，所述处理模块，还用于利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染，包括：
所述处理模块，还用于根据所述子页面中的各个模块对所述子页面配置进行拆分，以确定模块配置；
所述处理模块，还用于根据所述模块配置对各个所述模块进行渲染，以实现对各个所述子页面的渲染。
在一种可能的设计中，所述处理模块，还用于根据所述模块配置对各个所述模块进行渲染，以实现对各个所述子页面的渲染，包括：
所述处理模块，还用于根据所述模块将所述模块配置拆分为字段配置；
所述处理模块，还用于根据所述字段配置对所述模块中的字段进行渲染。
可选的，前端系统包括渐进式用户界面框架Vue，所述处理模块，还用于利用所述配置解析器对所述目标配置进行子页面拆分，以确定子页面配置，包括：
所述处理模块，还用于利用所述Vue的接口程序API中的计算属性computed工具对所述目标配置进行子页面拆分，以确定所述子页面配置；
对应的，所述处理模块，还用于将所述子页面配置分发到对应的页面渲染接口，包括：
所述处理模块，还用于通过公共的混入工具mixin将所述子页面配置引入所述目标页面的各个组件中；
所述处理模块，还用于所述利用页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染，包括：
所述处理模块，还用于在各个所述组件内部通过v-if函数，根据所述子页面配置，控制对应的字段的渲染。
第三个方面，本申请提供一种电子设备，包括：
存储器，用于存储程序指令；
处理器，用于调用并执行所述存储器中的程序指令，执行第一方面所提供的任意一种可能的前端渲染方法。
第四个方面，本申请提供一种存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序用于执行第一方面所提供的任意一种可能的前端渲染方法。
第五方面，本申请还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现第一方面所提供的任意一种可能的前端渲染方法。
本申请提供了一种前端渲染方法、装置、设备、介质及程序产品，通过根据获取到的页面加载请求确定页面配置需求，然后利用前端配置中心对页面配置需求进行渲染环境的解析，以确定目标配置，最后利用配置解析器，根据目标配置，渲染目标页面。实现了利用前端配置中心来管理无需调用后端运营数据的页面渲染的配置设置，解决了现有技术完全依赖后端系统来进行业务数据以及模板的维护和管理的模式，对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题，达到了无需依赖复杂的后端管理系统与接口程序就能实现对页面渲染的技术效果，且渲染工具简单、灵活、易扩展。
附图说明
为了更清楚地说明本申请或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本申请提供的现有应用页面管理系统的结构示意图；
图2为本申请提供的应用管理系统的结构示意图；
图3为本申请实施例提供的一种前端渲染方法的流程示意图；
图4为本申请提供的另一种前端渲染方法的流程示意图；
图5为本申请实施例提供的页面渲染接口通过页面配置渲染页面的原理示意图；
图6为本申请提供的一种前端渲染装置的结构示意图；
图7为本申请提供的一种电子设备的结构示意图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，包括但不限于对多个实施例的组合，都属于本申请保护的范围。
本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
现有的应用页面管理系统一般分为两部分组成：前端系统和后端系统。
前端系统包括：用于Web前端处理如页面显示处理的Web服务器。
后端系统包括：用于存储各类用户在前端页面中产生的业务数据，以及前端页面所涉及到的显示模板、表格、图片等相关的渲染数据。
由于目前互联网的快速普及和发展，特别是大数据时代的来临，使得在前端页面中产生的数据对于数据库的存储造成了极大的挑战，因此近年来对于后端系统的管理和开发是人们所关注的重点，出现了经典的如CMS(content management system)内容管理系统来辅助前端和后端的数据管理。这里指的“内容”可能包括文件、表格、图片、数据库中的数据甚至视频等一切用户想要发布到因特网、企业内网或者是其它外部网站的信息。可以理解的是，也可以将CMS系统分类到后端系统当中。其结构如图1所示。
图1为本申请提供的现有应用页面管理系统的结构示意图。如图1所示，前端系统11中可以包括客户端111和前端服务器112。前端服务器112用于对客户端111上展示的页面进行渲染，并收集用户在客户端111的不同页面上进行了操作后所产生的数据，然后将此数据传递给后端系统12。后端系统12中包括CMS服务器121和后台数据库122，CMS服务器121在接收到前端系统发送的数据或者是数据请求后，将数据存入后台数据库122或者是从后台数据库122中提取出数据或者是渲染模板等。
随着后端系统功能的不断增强，使得上述模式成为了目前应用程序开发的惯用模式。但是也同时滋生了附带的问题，就是CMS软件系统越来越复杂，导致在一个新系统或者新应用开发时，每一个页面的渲染都需要前端开发人员和后端开发人员共同完成，前端系统要开发用于交互的API(Application Programming Interface，应用程序接口)接口，后端也需要配合开发对应的API接口，或者是前后端开发人员一同构建一个API接口。因为现有的应用界面构建框架中，将所有的数据都放入到了后端系统中，而前端更多的至少调用后端的数据、模板等进行组装拼接即渲染显示。
上面这种完全依赖于后端系统的应用界面构建框架或者说是页面渲染方法存在以下问题：(1)需要有专门的后台管理系统；(2)后台管理系统需要前后端人员配合开发，更新大量的匹配数据、配置和模板；(3)难以扩展字段，使得系统不灵活；(4)多环境配置时，需要分别部署不同的系统，如对于测试环境是需要部署测试系统，预发试用环境时要是有所更改又要部署试用系统，最后正式线上发布后，又要重新部署正式系统。工作量大，重复工作多，开发效率低下。
因此为了解决现有技术完全依赖后端系统来进行业务数据以及模板的维护和管理的模式，对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题，使得前端系统能够独立地实时动态渲染页面。本申请发明人提出了以下前端渲染方法。
本申请的发明构思旨在：在前端系统中或者是独立配置一个轻量化的前端配置中心，用来管理页面渲染时所需要的配置数据。而这些配置数据包括公用的模板、显示数据、常用的页面、常用模块或者组件等等，而将真正需要专门人员维护和管理的数据或者模板仍然放置在后端系统当中。这样将常用的配置数据放置到配置中心的做法，所达到的效果：一是使得前端页面渲染时能够快速进行动态渲染无需与后端系统进行频繁沟通，保障了页面渲染的动态实时性，二是减轻了后端系统的工作负担，无需频繁更新维护数据或者是调用数据库中的数据或模板，使得后端系统能够将更多的运算资源分配给需要专门人员维护和管理的业务运营数据，也提高了业务运营数据的管理和维护效率。
下面结合附图来对本申请提供的前端渲染页面的方法进行详细介绍。
图2为本申请提供的应用管理系统的结构示意图。如图2所示，前端服务器112在接收到了客户端111发出的页面加载请求或者页面加载指令后，识别出页面配置需求，并通过页面配置需求辨别出是否需要调用后端的数据/模板，如果是常规页面的渲染需求，则不用调用后端数据，就可以向前端配置中心21发送页面配置需求，由前端配置中心21解析页面配置需求，判断所有保存在前端配置中心中的配置文件或者配置数据能否支持页面配置需求，即进行环境解析，如果可以，则在存储的配置中选出对应的配置发送给前端服务器112进行页面渲染。
图3为本申请实施例提供的一种前端渲染方法的流程示意图。如图3所示，该前端渲染方法的具体步骤，包括：
S301、根据获取到的页面加载请求确定页面配置需求。
在本步骤中，客户端发出的页面加载请求或者页面加载指令后，前端服务器根据页面加载请求确定需要渲染的目标页面的页面配置需求。
根据用户的动态页面加载请求来加载页面能够节省用户端的数据流量或者是页面加载时间，但是如果所有加载页面都需要前端服务器沟通后端系统调用数据那么无疑会影响加载时间，给用户加载速度较慢的不良使用体验。因此本申请采用动态加载的方式，直接从前端配置中心中调用常规的或者是公用的配置，以加快页面渲染的速度，实现页面的快速动态渲染，提高用户体验。
需要说明的是，页面加载时一般都会设置一个加载入口程序如main.js程序或函数，则在main.js中获得对应的页面配置需求，发送给前端配置中心。
S302、利用前端配置中心对页面配置需求进行渲染环境的解析，以确定目标配置。
在本步骤中，目标配置用于指示目标页面的展示方式，所述渲染环境用于判断所述前端配置中心能否对应满足所述页面配置需求，以及表示满足所述页面配置需求所需的相关配置数据。
具体的，根据页面配置需求判断目标页面渲染时是否需要调用后端系统，若否，则在前端配置中心的多个待选配置中，根据页面配置需求筛选出目标配置。
需要说明的是，前端配置中心中可以根据不同的环境配置多个环境配置集合，环境配置集合为与目标页面的展示环境相对应的多种配置组成的集合。如页面中的模块是展示还是隐藏，或者是模块中的某些字段可以根据不同的用户等级选择展示或者隐藏，从而实现对不同用户得到的不同渲染需求。又如在预发试用环境中，对于某些没有最后确定的字段，可以配置为不显示，而在正式线上环境中，配置为显示。此时可以对应设置两个环境配置集合分别对应预发试用环境和正式线上环境。
S303、利用配置解析器，根据目标配置，渲染目标页面。
在本步骤中，配置解析器是将目标配置与页面配置需求相对应进行处理的工具。
在本实施例中，为了使得前端配置中心轻量化，存储的配置可以用特殊的格式对配置进行定义，如JSON格式，然后通过配置解析器还原成对应的JavaScript对象，以使得Web服务器上的软件程序可以对应执行相应的渲染程序。
配置解析器对目标配置进行拆分，如目标页面包含了多个子页面，而子页面中包括多个模块或组件，每个模块中也可以包括多个字段，配置解析器就将对应的子页面、模块、字段是否需要渲染显示进行对应的拆分，得到对应的渲染程序参数，以完成对目标页面的渲染。
本实施例提供了一种前端渲染方法，通过根据获取到的页面加载请求确定页面配置需求，然后利用前端配置中心对页面配置需求进行渲染环境的解析，以确定目标配置，最后利用配置解析器，根据目标配置，渲染目标页面。实现了利用前端配置中心来管理无需调用后端运营数据的页面渲染的配置设置，解决了现有技术完全依赖后端系统来进行业务数据以及模板的维护和管理的模式，对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题，达到了无需依赖复杂的后端管理系统与接口程序就能实现对页面渲染的技术效果，且渲染工具简单、灵活、易扩展。
图4为本申请提供的另一种前端渲染方法的流程示意图。如图4所示，该前端渲染方法的具体步骤包括：
S401、根据获取到的页面加载请求确定页面配置需求。
在本步骤中，前端服务器接收到页面加载请求后，通过页面加载入口main.js确定需要加载的目标页面中各个页面元素所对应的参数设置即配置需求。
S402、根据页面配置需求确定目标页面渲染时无需调用后端系统，并将页面配置需求发送给前端配置中心。
在本步骤中，页面加载入口可以先判断目标页面的使用环境，使用环境可以从页面加载请求对应的信息中获取，如用户端是在预发试用环境下打开了目标页面即下达了页面加载请求，则对应的使用环境为预发试用环境，在此环境下所有页面都无需调用后端系统。
又如，对于正式发布的线上使用环境，一些常用的固定页面或者说是无需显示后端数据库中存储的数据的页面，则可以直接调用前端配置中心中存储的配置以及与配置对应的数据进行渲染。
S403、根据页面配置需求确定展示环境。
在本实施例中，展示环境包括：测试环境、预发试用环境以及线上发布环境。
S404、根据展示环境以及与展示环境对应的环境配置集合，确定目标配置。
在本实施例中，前端配置中心中存储着多个待选配置，待选配置包括至少一个环境配置集合，所述环境配置集合为与所述目标页面的展示环境相对应的多种配置组成的集合。
在一种可能的设计中，所述配置是根据JSON格式对渲染对象的展示方式进行定义的字符串集合。配置(包括目标配置)中定义了各个渲染对象的展示方式，包括：显示渲染对象或者是隐藏渲染对象，所述渲染对象包括：子页面、所述子页面中的模块，所述模块中的字段。
需要说明的是，目标页面中包括至少一个子页面，子页面中包括至少一个模块，而模块中包括至少一个字段。
S405、将目标配置发送给前端服务器。
S406、利用配置解析器对目标配置进行子页面拆分，以确定子页面配置。
在本实施例中，前端系统为渐进式用户界面框架Vue搭建的应用系统，利用Vue的接口程序API中的计算属性computed工具对所述目标配置进行子页面拆分，以确定所述子页面配置。
S407、将子页面配置分发到对应的页面渲染接口或进行全局注册以建立全局子页面配置。
在本步骤中，全局子页面配置能够给多个页面渲染接口进行页面渲染操作。
例如，通过公共的混入工具mixin将所述子页面配置引入所述目标页面的各个组件中。
S408、利用页面渲染接口根据子页面配置对目标页面的各个子页面进行渲染。
在本步骤中，具体包括：
根据子页面中的各个模块对子页面配置进行拆分，以确定模块配置；
根据模块配置对各个模块进行渲染，以实现对各个子页面的渲染：首先根据模块将模块配置拆分为字段配置，然后根据字段配置对模块中的字段进行渲染。
下面结合图5对上述过程进行举例介绍。
图5为本申请实施例提供的页面渲染接口通过页面配置渲染页面的原理示意图。如图5所示，配置解析器解析模板配置后将其传入页面渲染接口，判断目标页面是否需要展示，若否则不需要进行渲染，若是则进入到目标页面所包含的子页面中各个模块是否展示的判断，如图5中只包括一个子页面，子页面中包括多个模块，若模块1是需要展示的，那么接下来就对应判断模块中所包含的字段是否需要展示。这就是对目标配置进行从子页面到模块再到字段的拆分过程。最后根据拆分结果对目标页面进行渲染。
在本实施例中，在各个组件即子页面或模块内部通过v-if函数，根据所述子页面配置，控制对应的字段的渲染。
本实施例提供了一种前端渲染方法，通过根据获取到的页面加载请求确定页面配置需求，然后利用前端配置中心对页面配置需求进行渲染环境的解析，以确定目标配置，最后利用配置解析器，根据目标配置，渲染目标页面。实现了利用前端配置中心来管理无需调用后端运营数据的页面渲染的配置设置，解决了现有技术完全依赖后端系统来进行业务数据以及模板的维护和管理的模式，对轻数据维护页面的渲染来说结构复杂、不能灵活扩展、无法实时动态渲染且无法使用多环境配置的技术问题，达到了无需依赖复杂的后端管理系统与接口程序就能实现对页面渲染的技术效果，且渲染工具简单、灵活、易扩展。
图6为本申请提供的一种前端渲染装置的结构示意图。该前端渲染装置600可以通过软件、硬件或者两者的结合实现。
如图6所示，该前端渲染装置600包括：
获取模块601，用于获取页面加载请求
处理模块602，用于根据页面加载请求确定页面配置需求；
前端配置中心模块603，用于对页面配置需求进行渲染环境的解析，以确定目标配置，目标配置用于指示目标页面的展示方式，渲染环境用于判断前端配置中心模块603能否对应满足页面配置需求，以及表示满足页面配置需求所需的相关配置数据；
处理模块602，还用于利用配置解析器，根据目标配置，渲染目标页面。
在一种可能的设计中，前端配置中心模块603，用于对页面配置需求进行渲染环境的解析，以确定目标配置，包括：
前端配置中心模块603，用于根据页面配置需求确定目标页面渲染时无需调用后端系统；
前端配置中心模块603，用于在多个待选配置中，根据页面配置需求筛选出目标配置。
可选的，待选配置包括至少一个环境配置集合，环境配置集合为与目标页面的展示环境相对应的多种配置组成的集合。
在一种可能的设计中，前端配置中心模块603，用于在多个待选配置中，根据页面配置需求筛选出目标配置，包括：
前端配置中心模块603，用于根据页面配置需求确定展示环境，展示环境包括测试环境、预发试用环境以及线上发布环境；
前端配置中心模块603，用于根据展示环境以及与展示环境对应的环境配置集合，确定目标配置。
在一种可能的设计中，配置中心模块，用于对配置的新建和维护进行管理，配置中心模块可以位于前端系统中，或者是与前端系统连接的独立控制系统模块。
可选的，配置中定义了各个渲染对象的展示方式，渲染对象包括：子页面、子页面中的模块组件，模块组件中的字段。
可选的，展示方式包括：显示以及隐藏。
在一种可能的设计中，配置是根据JSON格式对渲染对象的展示方式进行定义的字符串集合。
在一种可能的设计中，处理模块602，还用于利用配置解析器，根据目标配置，渲染目标页面，包括：
处理模块602，还用于利用配置解析器对目标配置进行子页面拆分，以确定子页面配置；
处理模块602，还用于将子页面配置分发到对应的页面渲染接口或进行全局注册以建立全局子页面配置，全局子页面配置能够给多个页面渲染接口进行页面渲染操作；
处理模块602，还用于利用页面渲染接口根据子页面配置对目标页面的各个子页面进行渲染。
在一种可能的设计中，处理模块602，还用于利用页面渲染接口根据子页面配置对目标页面的各个子页面进行渲染，包括：
处理模块602，还用于根据子页面中的各个模块对子页面配置进行拆分，以确定模块配置；
处理模块602，还用于根据模块配置对各个模块进行渲染，以实现对各个子页面的渲染。
在一种可能的设计中，处理模块602，还用于根据模块配置对各个模块进行渲染，以实现对各个子页面的渲染，包括：
处理模块602，还用于根据模块将模块配置拆分为字段配置；
处理模块602，还用于根据字段配置对模块中的字段进行渲染。
可选的，前端系统包括渐进式用户界面框架Vue，处理模块602，还用于利用配置解析器对目标配置进行子页面拆分，以确定子页面配置，包括：
处理模块602，还用于利用Vue的接口程序API中的计算属性computed工具对目标配置进行子页面拆分，以确定子页面配置；
对应的，处理模块602，还用于将子页面配置分发到对应的页面渲染接口，包括：
处理模块602，还用于通过公共的混入工具mixin将子页面配置引入目标页面的各个组件中；
处理模块602，还用于利用页面渲染接口根据子页面配置对目标页面的各个子页面进行渲染，包括：
处理模块602，还用于在各个组件内部通过v-if函数，根据子页面配置，控制对应的字段的渲染。
值得说明的是，图6所示实施例提供的前端渲染装置，可以执行上述任一方法实施例所提供的方法，其具体实现原理、技术特征、专业名词解释以及技术效果类似，在此不再赘述。
图7为本申请提供的一种电子设备的结构示意图。如图7所示，该电子设备700可以包括：至少一个处理器701和存储器702。图7示出的是以一个处理器为例的电子设备。
存储器702，用于存放程序。具体地，程序可以包括程序代码，程序代码包括计算机操作指令。
存储器702可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
处理器701用于执行存储器702存储的计算机执行指令，以实现以上各方法实施例所述的方法。
其中，处理器701可能是一个中央处理器(central processing unit，简称为CPU)，或者是特定集成电路(application specific integrated circuit，简称为ASIC)，或者是被配置成实施本申请实施例的一个或多个集成电路。
可选地，存储器702既可以是独立的，也可以跟处理器701集成在一起。当所述存储器702是独立于处理器701之外的器件时，所述电子设备700，还可以包括：
总线703，用于连接所述处理器701以及所述存储器702。总线可以是工业标准体系结构(industry standard architecture，简称为ISA)总线、外部设备互连(peripheralcomponent，PCI)总线或扩展工业标准体系结构(extended industry standardarchitecture，EISA)总线等。总线可以分为地址总线、数据总线、控制总线等，但并不表示仅有一根总线或一种类型的总线。
可选的，在具体实现上，如果存储器702和处理器701集成在一块芯片上实现，则存储器702和处理器701可以通过内部接口完成通信。
本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random accessmemory，RAM)、磁盘或者光盘等各种可以存储程序代码的介质，具体的，该计算机可读存储介质中存储有程序指令，程序指令用于上述各方法实施例中的方法。
本申请还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的方法。
最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。
Claims (16)
1.一种前端渲染方法，其特征在于，应用于前端系统，包括：
根据获取到的页面加载请求确定页面配置需求；
利用前端配置中心对所述页面配置需求进行渲染环境的解析，以确定目标配置，所述目标配置用于指示目标页面的展示方式，所述渲染环境用于判断所述前端配置中心能否对应满足所述页面配置需求，以及表示满足所述页面配置需求所需的相关配置数据；
利用配置解析器，根据所述目标配置，渲染所述目标页面。
2.根据权利要求1所述的前端渲染方法，其特征在于，所述利用前端配置中心对所述页面配置需求进行渲染环境的解析，以确定目标配置，包括：
根据所述页面配置需求确定所述目标页面渲染时无需调用后端系统；
在所述前端配置中心的多个待选配置中，根据所述页面配置需求筛选出所述目标配置。
3.根据权利要求2所述的前端渲染方法，其特征在于，所述待选配置包括至少一个环境配置集合，所述环境配置集合为与所述目标页面的展示环境相对应的多种配置组成的集合。
4.根据权利要求3所述的前端渲染方法，其特征在于，所述在所述前端配置中心的多个待选配置中，根据所述页面配置需求筛选出所述目标配置，包括：
根据所述页面配置需求确定所述展示环境，所述展示环境包括：测试环境、预发试用环境以及线上发布环境；
根据所述展示环境以及与所述展示环境对应的所述环境配置集合，确定所述目标配置。
5.根据权利要求1-4中任意一项所述的前端渲染方法，其特征在于，所述前端配置中心用于对配置的新建和维护进行管理，所述前端配置中心位于所述前端系统中，或者是与所述前端系统连接的独立系统。
6.根据权利要求5所述的前端渲染方法，其特征在于，所述配置中定义了各个渲染对象的展示方式，所述渲染对象包括：子页面、所述子页面中的模块，所述模块中的字段。
7.根据权利要求6所述的前端渲染方法，其特征在于，所述展示方式包括：显示以及隐藏。
8.根据权利要求7所述的前端渲染方法，其特征在于，所述配置是根据JSON格式对所述渲染对象的展示方式进行定义的字符串集合。
9.根据权利要求6所述的前端渲染方法，其特征在于，所述利用配置解析器，根据所述目标配置，渲染所述目标页面，包括：
利用所述配置解析器对所述目标配置进行子页面拆分，以确定子页面配置；
将所述子页面配置分发到对应的页面渲染接口或进行全局注册以建立全局子页面配置，所述全局子页面配置能够给多个所述页面渲染接口进行页面渲染操作；
利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染。
10.根据权利要求9所述的前端渲染方法，其特征在于，所述利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染，包括：
根据所述子页面中的各个模块对所述子页面配置进行拆分，以确定模块配置；
根据所述模块配置对各个所述模块进行渲染，以实现对各个所述子页面的渲染。
11.根据权利要求10所述的前端渲染方法，其特征在于，所述根据所述模块配置对各个所述模块进行渲染，以实现对各个所述子页面的渲染，包括：
根据所述模块将所述模块配置拆分为字段配置；
根据所述字段配置对所述模块中的字段进行渲染。
12.根据权利要求9所述的前端渲染方法，其特征在于，所述前端系统包括渐进式用户界面框架Vue，所述利用所述配置解析器对所述目标配置进行子页面拆分，以确定子页面配置，包括：
利用所述Vue的接口程序API中的计算属性computed工具对所述目标配置进行子页面拆分，以确定所述子页面配置；
对应的，所述将所述子页面配置分发到对应的页面渲染接口，包括：
通过公共的混入工具mixin将所述子页面配置引入所述目标页面的各个组件中；
所述利用所述页面渲染接口根据所述子页面配置对所述目标页面的各个子页面进行渲染，包括：
在各个所述组件内部通过v-if函数，根据所述子页面配置，控制对应的字段的渲染。
13.一种前端渲染装置，其特征在于，包括：
获取模块，用于获取页面加载请求
处理模块，用于根据所述页面加载请求确定页面配置需求；
前端配置中心模块，用于对所述页面配置需求进行渲染环境的解析，以确定目标配置，所述目标配置用于指示目标页面的展示方式；
所述处理模块，还用于利用配置解析器，根据所述目标配置，渲染所述目标页面。
14.一种电子设备，其特征在于，包括：
处理器；以及，
存储器，用于存储所述处理器的计算机程序；
其中，所述处理器配置为经由执行所述计算机程序来执行权利要求1至12任一项所述的前端渲染方法。
15.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至12任一项所述的前端渲染方法。
16.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至12任一项所述的前端渲染方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110022952.3A CN113760253A (zh) | 2021-01-08 | 2021-01-08 | 前端渲染方法、装置、设备、介质及程序产品 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110022952.3A CN113760253A (zh) | 2021-01-08 | 2021-01-08 | 前端渲染方法、装置、设备、介质及程序产品 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113760253A true CN113760253A (zh) | 2021-12-07 |
Family
ID=78786273
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110022952.3A Pending CN113760253A (zh) | 2021-01-08 | 2021-01-08 | 前端渲染方法、装置、设备、介质及程序产品 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113760253A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115878923A (zh) * | 2023-01-30 | 2023-03-31 | 北京微吼时代科技有限公司 | 编排与配置可复用的交互框架构建方法及系统 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| GB0006991D0 (en) * | 2000-03-22 | 2000-05-10 | Dynamic Internet Limited | Search systems |
| WO2016177250A1 (zh) * | 2015-05-05 | 2016-11-10 | 阿里巴巴集团控股有限公司 | 客户端页面渲染方法及装置 |
| WO2018022359A1 (en) * | 2016-07-26 | 2018-02-01 | Google Llc | Web page display systems and methods |
| CN109241471A (zh) * | 2018-10-26 | 2019-01-18 | 珠海格力电器股份有限公司 | 页面渲染方法、服务器、浏览器和能源信息管理系统 |
| CN110990731A (zh) * | 2019-10-12 | 2020-04-10 | 平安国际智慧城市科技股份有限公司 | 一种静态网页的渲染方法、装置、设备及计算机存储介质 |
| CN111752594A (zh) * | 2020-06-23 | 2020-10-09 | 深圳壹账通智能科技有限公司 | 基于业务模块的数据处理方法及相关设备 |
-
2021
- 2021-01-08 CN CN202110022952.3A patent/CN113760253A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| GB0006991D0 (en) * | 2000-03-22 | 2000-05-10 | Dynamic Internet Limited | Search systems |
| WO2016177250A1 (zh) * | 2015-05-05 | 2016-11-10 | 阿里巴巴集团控股有限公司 | 客户端页面渲染方法及装置 |
| WO2018022359A1 (en) * | 2016-07-26 | 2018-02-01 | Google Llc | Web page display systems and methods |
| CN109241471A (zh) * | 2018-10-26 | 2019-01-18 | 珠海格力电器股份有限公司 | 页面渲染方法、服务器、浏览器和能源信息管理系统 |
| CN110990731A (zh) * | 2019-10-12 | 2020-04-10 | 平安国际智慧城市科技股份有限公司 | 一种静态网页的渲染方法、装置、设备及计算机存储介质 |
| CN111752594A (zh) * | 2020-06-23 | 2020-10-09 | 深圳壹账通智能科技有限公司 | 基于业务模块的数据处理方法及相关设备 |
Non-Patent Citations (2)
| Title |
|---|
| 侯俐;姚李岳;邹家矞;: "基于组件化与服务端渲染的动态内容管理系统", 电脑知识与技术, no. 09, 25 March 2020 (2020-03-25) * |
| 王成;李少元;郑黎晓;缑锦;曾梅琴;刘慧敏;: "Web前端性能优化方案与实践", 计算机应用与软件, no. 12, 15 December 2014 (2014-12-15) * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115878923A (zh) * | 2023-01-30 | 2023-03-31 | 北京微吼时代科技有限公司 | 编排与配置可复用的交互框架构建方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108388515B (zh) | 测试数据生成方法、装置、设备以及计算机可读存储介质 | |
| CN110457609A (zh) | 一种页面处理的方法、装置、计算机设备和存储介质 | |
| CN111679886A (zh) | 异构计算资源调度方法、系统、电子设备及存储介质 | |
| CN111475161A (zh) | 一种访问组件的方法、装置及设备 | |
| CN112925520A (zh) | 可视化页面的搭建方法、装置及计算机设备 | |
| CN114489610A (zh) | 一种页面可视化动态组件配置方法及系统 | |
| CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
| CN113760253A (zh) | 前端渲染方法、装置、设备、介质及程序产品 | |
| CN113448988B (zh) | 算法模型的训练方法、装置、电子设备及存储介质 | |
| Crawl et al. | Kepler webview: A lightweight, portable framework for constructing real-time web interfaces of scientific workflows | |
| CN113703893A (zh) | 一种页面渲染方法、装置、终端及存储介质 | |
| CN111314330B (zh) | 一种网络应用的运行方法和装置 | |
| CN111880789A (zh) | 页面渲染方法、装置、服务端和计算机可读存储介质 | |
| CN114238048B (zh) | 一种Web前端性能自动化测试方法及系统 | |
| CN112214704B (zh) | 页面处理方法及装置 | |
| CN111158684B (zh) | 系统创建方法、装置、电子设备及可读存储介质 | |
| CA3151093A1 (en) | System and method for gui development and deployment in a real time system | |
| CN107193670B (zh) | 一种集群工作站的远程管理方法、装置及系统 | |
| CN113961279A (zh) | 页面渲染方法、装置、服务器和存储介质 | |
| CN111124815A (zh) | 一种日志查看方法、装置、设备及存储介质 | |
| CN114896018B (zh) | 一种bmc应用界面语言切换的方法、装置及介质 | |
| CN113656717B (zh) | 一种网页的控件渲染方法、装置、设备及存储介质 | |
| CN113495498B (zh) | 用于硬件设备的模拟方法、模拟器、设备和介质 | |
| CN115994002A (zh) | 软件应用运行方法、计算机设备及计算机存储介质 | |
| CN114840435A (zh) | 数据流向的确定方法、装置、设备、存储介质和程序产品 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |