CN116009863B - 前端页面渲染方法、设备及存储介质 - Google Patents

Abstract

本申请提供一种前端页面渲染方法、设备及存储介质，涉及计算机技术领域。该方法可以根据目标业务场景的业务类型，获取用于渲染目标业务模板的初始渲染程序，进而基于双向绑定机制，将初始渲染程序中预设变量指示的代码区域替换为目标业务场景对应的业务数据，得到对应的业务区域代码，根据业务区域代码以及组件渲染程序，得到目标业务场景代码；运行目标业务场景代码，渲染显示目标业务场景对应的目标业务页面，实现了可以事先根据目标业务模板对应的初始渲染程序确定目标业务页面中的模板组件，简化目标业务场景代码的获取过程，进而页面渲染过程中可以有效降低动态创建组件的数量，可以有效提高目标业务页面的渲染效率。

Description

前端页面渲染方法、设备及存储介质

技术领域

本申请涉及计算机技术领域，特别涉及一种前端页面渲染方法、设备及存储介质。

背景技术

低代码开发平台(LCDP)是无需编码(0代码)或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。

现有技术中，在进行前端页面的渲染时，若前端页面的业务复杂度较高，则在动态创建组件时会导致创建组件的激增，业务页面的渲染速度降低。

发明内容

本申请的目的在于，针对上述现有技术中的不足，提供一种前端页面渲染方法、设备及存储介质，可以提高前端页面的渲染效率。

为实现上述目的，本申请实施例采用的技术方案如下：

第一方面，本发明提供一种前端页面渲染方法，包括：

根据目标业务场景的业务类型，获取用于渲染目标业务模板的初始渲染程序，其中，所述目标业务模板包括所述目标业务场景对应的通用业务处理代码，所述初始渲染程序包括用于渲染所述目标业务模板中模板组件的组件渲染程序；

基于双向绑定机制，将所述初始渲染程序中预设变量指示的代码区域替换为所述目标业务场景对应的业务数据，得到对应的业务区域代码，根据所述业务区域代码以及组件渲染程序，得到目标业务场景代码；

运行所述目标业务场景代码，渲染显示所述目标业务场景对应的目标业务页面。

在可选的实施方式中，所述基于双向绑定机制，将所述初始渲染程序中预设变量指示的代码区域替换为所述目标业务场景对应的业务数据，得到对应的业务区域代码，包括：

获取用于创建所述初始渲染程序对应的Vue实例；

基于双向绑定机制，根据所述目标业务场景对应的业务数据替换所述Vue实例中预设变量指示的代码区域，得到对应的业务区域代码。

在可选的实施方式中，所述方法还包括：

获取所述目标业务场景对应的json代码，所述json代码用于描述所述目标业务场景对应的业务数据的获取逻辑；

根据所述json代码获取所述目标业务场景对应的业务数据。

在可选的实施方式中，所述初始渲染程序对应的Vue实例被配置为包括第一标签和第二标签，所述第二标签为第一标签的子标签，所述第一标签用于指示所述Vue实例对应的代码块区域，所述第二标签用于所述Vue实例对应的执行代码。

在可选的实施方式中，所述运行所述目标业务场景代码，渲染显示所述目标业务场景对应的目标业务页面，包括：

运行所述目标业务场景代码，通过所述目标业务场景代码获取所述目标业务场景的场景数据的获取方式；

根据所述目标业务场景的场景数据的获取方式，获取目标业务页面对应的组件信息和表单信息；

根据所述目标业务页面对应的组件信息和表单信息，渲染显示所述目标业务场景对应的目标业务页面。

在可选的实施方式中，所述目标业务模板为多个业务模板中的任一业务模板，多个所述业务模板包括下述至少一种：树编辑业务模板、树导航业务模板、页面导航业务模板、标签页导航业务模板、向导导航业务模板。

在可选的实施方式中，所述方法还包括：

响应于对所述目标业务场景代码的上传操作，将所述目标业务场景代码上传至目标服务器。

第二方面，本发明提供一种前端页面渲染装置，包括：

第一获取模块，用于根据目标业务场景的业务类型，获取用于渲染目标业务模板的初始渲染程序，其中，所述目标业务模板包括所述目标业务场景对应的通用业务处理代码，所述初始渲染程序包括用于渲染所述目标业务模板中模板组件的组件渲染程序；

替换模块，用于基于双向绑定机制，将所述初始渲染程序中预设变量指示的代码区域替换为所述目标业务场景对应的业务数据，得到对应的业务区域代码，根据所述业务区域代码以及组件渲染程序，得到目标业务场景代码；

渲染模块，用于运行所述目标业务场景代码，渲染显示所述目标业务场景对应的目标业务页面。

在可选的实施方式中，所述替换模块，具体用于获取用于创建所述初始渲染程序对应的Vue实例；

基于双向绑定机制，根据所述目标业务场景对应的业务数据替换所述Vue实例中预设变量指示的代码区域，得到对应的业务区域代码。

在可选的实施方式中，所述前端页面渲染装置还包括：第二获取模块用于获取所述目标业务场景对应的json代码，所述json代码用于描述所述目标业务场景对应的业务数据的获取逻辑；

根据所述json代码获取所述目标业务场景对应的业务数据。

在可选的实施方式中，所述初始渲染程序对应的Vue实例被配置为包括第一标签和第二标签，所述第二标签为第一标签的子标签，所述第一标签用于指示所述Vue实例对应的代码块区域，所述第二标签用于所述Vue实例对应的执行代码。

在可选的实施方式中，所述渲染模块，具体用于运行所述目标业务场景代码，通过所述目标业务场景代码获取所述目标业务场景的场景数据的获取方式；

根据所述目标业务场景的场景数据的获取方式，获取目标业务页面对应的组件信息和表单信息；

根据所述目标业务页面对应的组件信息和表单信息，渲染显示所述目标业务场景对应的目标业务页面。

在可选的实施方式中，所述目标业务模板为多个业务模板中的任一业务模板，多个所述业务模板包括下述至少一种：树编辑业务模板、树导航业务模板、页面导航业务模板、标签页导航业务模板、向导导航业务模板。

在可选的实施方式中，所述前端页面渲染装置还包括：上传模块，用于响应于对所述目标业务场景代码的上传操作，将所述目标业务场景代码上传至目标服务器。

第三方面，本发明提供一种电子设备，包括：处理器、存储介质和总线，所述存储介质存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储介质之间通过总线通信，所述处理器执行所述机器可读指令，以执行如前述实施方式任一所述前端页面渲染方法的步骤。

第四方面，本发明提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如前述实施方式任一所述前端页面渲染方法的步骤。

本申请的有益效果是：

本申请实施例提供的前端页面渲染方法、设备及存储介质中，包括：根据目标业务场景的业务类型，获取用于渲染目标业务模板的初始渲染程序；基于双向绑定机制，得将初始渲染程序中预设变量指示的代码区域替换为目标业务场景对应的业务数据得到对应的业务区域代码，根据业务区域代码以及组件渲染程序，得到目标业务场景代码；运行目标业务场景代码，渲染显示目标业务场景对应的目标业务页面，应用本申请实施例，实现了可以根据目标业务场景的业务类型，快速确定目标业务模板以及目标业务模板对应的初始渲染程序，进而基于双向绑定机制可以快捷替换初始渲染程序中的预设变量，得到对应的业务区域代码，基于该业务区域代码和组件渲染程序，可以进一步得到目标业务场景代码，由此可以事先根据目标业务模板对应的初始渲染程序确定目标业务页面中的模板组件，简化目标业务场景代码的获取过程，进而页面渲染过程中可以有效降低动态创建组件的数量，也即不会导致动态创建组件的剧增，可以有效提高目标业务页面的渲染效率。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的一种前端页面渲染方法的流程示意图；

图2为本申请实施例提供的另一种前端页面渲染方法的流程示意图；

图3为本申请实施例提供的又一种前端页面渲染方法的流程示意图；

图4为本申请实施例提供的另一种前端页面渲染方法的流程示意图；

图5为本申请实施例提供的又一种前端页面渲染方法的流程示意图；

图6为本申请实施例提供的一种前端页面渲染装置的功能模块示意图；

图7为本申请实施例提供的一种电子设备结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

现有技术中，通过低代码开发平台进行前端页面的开发时，往往都是根据json数据动态渲染页面，因此，若前端页面的业务复杂度较高，则在动态创建组件时会导致创建组件的激增，业务页面的渲染速度降低。

有鉴于此，本申请实施例提供一种前端页面渲染方法，应用本申请实施例，可以简化目标业务场景代码的获取过程，提高目标业务页面的渲染效率。

图1为本申请实施例提供的一种前端页面渲染方法的流程示意图，该方法的执行主体可以是具备渲染显示前端页面的前端页面渲染设备，比如，计算机。如图1所示，该方法可以包括：

S101、根据目标业务场景的业务类型，获取用于渲染目标业务模板对应的初始渲染程序。

其中，目标业务模板可以包括目标业务场景对应的通用业务处理代码，初始渲染程序可以包括用于渲染该目标业务模板中模板组件的组件渲染程序。可选地，该目标业务模板可以是多个业务模板中的任一业务模板，其可以根据目标业务场景的类别进行选择。在一些实施例中，通过对前端页面的导航方式进行分类，可以将前端页面对应的业务场景分为：标签页导航场景、向导导航场景、页面导航场景、树导航场景等，在此不作限定。其中，标签页导航场景也即包括多个标签页的导航场景，向导导航场景也即包括多个指示步骤的导航场景；页面导航场景也即包括多个页面内容快捷访问方式的导航场景；树导航场景也即包括树状视图的导航场景。

基于上述说明，每个业务场景可以对应不同的业务模板，每个业务模板中还可以包括：边框、图标、单选框、多选框、输入框、开关、滑块、表格、进度条、弹框等任意类型的模板组件，在此不作限定，根据不同的业务模板可以有所不同。此外，对于用于渲染目标业务模板对应的初始渲染程序来说，可以理解的是，其对应的可以包括用于渲染目标业务模板中模板组件的组件渲染程序，其中，不同的模板组件将对应不同的组件渲染程序，当然，本申请在此也不限定各目标业务模板中模板组件的类型和数量，根据实际的应用场景可以有所不同。

其中，以向导导航场景为例，在该业务场景下，可以选择向导导航场景对应的业务模板作为目标业务模板。

对于每个业务模板来说，其可以被配置对应的初始渲染程序，可选地，各初始渲染程序可以基于前端框架，用于渲染对应的业务模板界面。在一些实施例中，可以基于VUE框架、React框架、Bootstrap框架、Angular框架等前端框架实现，在此不作限定，根据实际的应用场景可以灵活选择。

在一些实施例中，上述用于渲染目标业务模板对应的初始渲染程序可以被预配置在前端页面渲染设备中，可选地，具体可以被预配置在前端页面渲染设备中的前端页面渲染工具中，那么后续在进行获取时，则可以通过该前端页面渲染工具获取。当然，需要说明的是，具体获取方式并不以此为限，可选地，也可以通过访问预设服务器获取，其中，该预设服务器可以预存有各种业务模板对应的初始渲染程序。

S102、基于双向绑定机制，将初始渲染程序中预设变量指示的代码区域替换为目标业务场景对应的业务数据，得到对应的业务区域代码，根据业务区域代码以及组件渲染程序，得到目标业务场景代码。

其中，基于MVVM(Model-View-ViewModel)思想，双向绑定机制也即对视图(View)和模型(Model)进行了双向绑定，当视图(View)发生更新时，模型(Model)数据也会随之发生更新，当模型(Model)数据发生更新时，视图(View)也会随之发生更新。

可选地，目标业务场景对应的业务数据可以通过前端页面对应的后端平台获取，也即前端页面对应的后端平台可以预存有目标业务场景对应的业务数据，基于双向绑定机制，通过初始渲染程序获取目标业务场景对应的业务数据并通过变量替换方式将其与初始渲染程序中的预设变量指示的代码区域进行替换，使得通过替换可以得到该目标业务场景对应的业务区域代码。换句话说，也即用于渲染目标业务模板对应的初始渲染程序中包括预设变量，该预设变量指示一代码区；基于双向绑定机制，若在初始渲染程序中对该预设变量和目标业务场景对应的业务数据进行了绑定操作，那么在运行该初始渲染程序时，则会将该预设变量指示的代码区域替换为目标业务场景对应的业务数据，通过该替换操作将得到该目标业务场景对应的业务区域代码，可以理解的是，此时所得到的业务区域代码则可以体现该目标业务场景下的特定业务内容，其中，该特定业务内容的呈现则由该目标业务场景对应的业务数据所决定。

在得到该业务区域代码之后，基于该业务区域代码和上述组件渲染程序，则可以进一步整合得到目标业务场景代码，其中，该目标业务场景代码也即该目标业务页面对应的完整源码。

S103、运行目标业务场景代码，渲染显示目标业务场景对应的目标业务页面。

基于上述说明，在得到目标业务场景代码之后，则可以运行该目标业务场景代码，通过运行渲染显示目标业务场景对应的目标业务页面，应用本申请实施例，实现了可以根据目标业务场景的业务类型，快速确定目标业务模板以及目标业务模板对应的初始渲染程序，进而基于双向绑定机制可以快捷替换初始渲染程序中的预设变量，得到对应的业务区域代码，基于该业务区域代码和组件渲染程序，可以进一步得到目标业务场景代码，相较于现有技术来说，可以事先根据目标业务模板对应的初始渲染程序确定目标业务页面中的模板组件，简化目标业务场景代码的获取过程，进而页面渲染过程中可以有效降低动态创建组件的数量，也即不会导致动态创建组件的剧增，可以有效提高目标业务页面的渲染效率。

举例说明，以目标业务场景为某购物网站中的商品分类列表为例进行说明，可选地，若该目标业务场景对应的目标业务模板为树导航业务模板，则基于此，可以进一步获取树导航业务模板的初始渲染程序；基于双向绑定机制，可以将该初始渲染程序中的预设变量指示的代码区域替换为该购物网站中的商品分类列表对应的业务数据，得到对应的业务区域代码；进一步地，对该业务区域代码和上述组件渲染程序进行整合操作，则可以得到目标业务场景代码，此时，运行该目标业务场景代码，即可渲染显示该购物网站中的商品分类列表界面。当然，需要说明的是，具体应用场景并不以此为限。

综上，本申请实施例提供一种前端页面渲染方法，该方法包括：根据目标业务场景的业务类型，获取用于渲染目标业务模板的初始渲染程序；基于双向绑定机制，将初始渲染程序中预设变量指示的代码区域替换为目标业务场景对应的业务数据，得到对应的业务区域代码，根据业务区域代码以及组件渲染程序，得到目标业务场景代码；运行目标业务场景代码，渲染显示目标业务场景对应的目标业务页面，应用本申请实施例，实现了可以根据目标业务场景的业务类型，快速确定目标业务模板以及目标业务模板对应的初始渲染程序，进而基于双向绑定机制可以快捷替换初始渲染程序中的预设变量，得到对应的业务区域代码，基于该业务区域代码和组件渲染程序，可以进一步得到目标业务场景代码，相较于现有技术来说，可以事先根据目标业务模板对应的初始渲染程序确定目标业务页面中的模板组件，简化目标业务场景代码的获取过程，进而页面渲染过程中可以有效降低动态创建组件的数量，也即不会导致动态创建组件的剧增，可以有效提高目标业务页面的渲染效率。

图2为本申请实施例提供的另一种前端页面渲染方法的流程示意图。可选地，如图2所示，上述基于双向绑定机制，将初始渲染程序中预设变量指示的代码区域替换为目标业务场景对应的业务数据，得到对应的业务区域代码的步骤，可以包括：

S201、获取用于创建初始渲染程序对应的Vue实例。

基于前述说明，在一些实施例中可以基于VUE框架实现，VUE框架是基于(Model-View-ViewModel，MVVM)思想，实现数据的双向绑定，将编程的关注点放在数据上。

可以理解的是，基于VUE框架实现初始渲染程序时，该初始渲染程序将包括对应的Vue实例，换句话说，Vue实例可以用于创建初始渲染程序。值得说明的是，每个Vue实例在被创建时都要经过一系列的初始化过程。例如，某些Vue实例可能需要设置数据监听、编译模板、将实例挂载到DOM在数据变化时更新DOM等初始化过程，在此不作限定，根据实际应用场景的不同可以有所不同。

S202、基于双向绑定机制，根据目标业务场景对应的业务数据替换Vue实例中预设变量指示的代码区域，得到对应的业务区域代码。

结合VUE框架来看，VUE框架中的双向绑定机制，也即当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。

基于VUE框架中的双向绑定机制，当对该Vue实例进行扫描和解析时，将采用目标业务场景对应的业务数据替换Vue实例中预设变量指示的代码区域，得到对应的业务区域代码，该业务区域代码则可以体现该目标业务场景下的特定业务内容。

图3为本申请实施例提供的又一种前端页面渲染方法的流程示意图。可选地，如图3所示，上述方法还包括：

S301、获取目标业务场景对应的json代码。

S302、根据json代码获取目标业务场景对应的业务数据。

其中，json代码用于描述目标业务场景对应的业务数据的获取逻辑。JS对象简谱(JavaScript Object Notation，JSON)是一种轻量级的数据交换格式。在一些实施例中，可以以JSON格式存储目标业务场景对应的业务数据，那么在获取目标业务场景对应的业务数据时，可以先获取目标业务场景对应的json代码，进而通过该json代码可以提取到目标业务场景对应的业务数据。

可选地，目标业务场景对应的json代码可以通过互联网下载得到，又或者，可以在线通过预设的json编辑器编辑得到，在此不作限定。

需要说明的是，目标业务场景对应的业务数据的存储方式并不以此为限，根据实际的应用场景，还可以选择其他数据交换格式进行存储，比如可以选择可扩展标记语言(Extensible Markup Language，XML)进行存储，在此不作限定，根据实际的应用场景可以有所不同。

可选地，上述初始渲染程序对应的Vue实例被配置为包括第一标签和第二标签，第二标签为第一标签的子标签，第一标签用于指示Vue实例对应的代码块区域，第二标签用于Vue实例对应的执行代码。

在一些实施例中，第一标签可以是pre标签，第二标签可以是textarea标签。当然，需要说明的是，初始渲染程序采用不同的框架实现时，将对应不同的第一标签和第二标签，在此不作限定。

其中，Vue实例中通过pre标签可以定义预格式化的文本，且被包围在pre标签中的文本通常会保留空格和换行符，并呈现为等宽字体；textarea标签作为pre标签的子标签，可以用来表示多行文本框，又叫做文本域，值得说明的是，<textarea>标签是单闭合标签，其包含起始标签和结束标签，文本内容需要写在两个标签中间。

结合本申请实施例来看，在进行出码操作之后，也即textarea标签中起始标签和结束标签的中间将包裹业务区域代码，当然，需要说明的是，本申请在此并不限定初始渲染程序的具体实现方式，根据实际的应用场景可以灵活设置。

图4为本申请实施例提供的另一种前端页面渲染方法的流程示意图。可选地，如图4所示，上述运行目标业务场景代码，渲染显示目标业务场景对应的目标业务页面，包括：

S401、运行目标业务场景代码，通过目标业务场景代码获取目标业务场景的场景数据的获取方式。

S402、根据目标业务场景的场景数据的获取方式，获取目标业务页面对应的组件信息和表单信息。

其中，目标业务场景代码可以指示目标业务场景的场景数据的获取方式，可选地，该获取方法具体可以指示该场景数据对应的组件标识和数据模型标识。

在一些实施例中，组件标识可以包括组件类型标识、组件布局标识、组件数量标识等多种，在此不作限定。举例说明，比如，组件类型标识A1可以指示第一组件类型，比如，图标，组件类型标识A2可以指示第二组件类型，比如，单选框；组件布局标识B1可以指示第一布局方式，比如，水平布局，组件布局标识B2可以指示第二布局方式，比如，垂直布局；组件数量标识可以指示目标业务页面中组件的数量，可选地，其具体值可以是5、10等，在此不作限定。

可以理解的是，目标业务场景代码执行过程中，可以查询得到目标业务页面中的组件标识，并据此可以获取到目标业务页面对应的组件信息。其中，目标业务页面对应的组件信息可以指示目标业务页面中组件的数量、组件的类型、组件的布局方式等，在此不作限定。

数据模型标识也即数据模型ID，数据模型ID和目标业务页面对应的表单信息可以存在映射关系，目标业务场景代码执行过程中，通过该数据模型ID可以获取目标业务页面对应的表单信息，也即可以获取到目标业务页面对应的表单数据，比如，表单中的各业务字段，以及各业务字段对应的业务数据。可选地，目标业务页面对应的表单信息可以存储在前端页面对应的后端平台中，当然，存储方式并不以此为限。在一些实施中，目标业务页面对应的表单信息可以指示目标业务页面中各业务字段的配置信息以及各业务字段对应的业务数据，比如，可以指示目标业务页面中业务字段的数量，各业务字段的排布方式，以及各业务字段所对应的业务数据的内容等，在此不作限定。

S403、根据目标业务页面对应的组件信息和表单信息，渲染显示目标业务场景对应的目标业务页面。

基于上述说明，在得到目标业务页面对应的组件信息和表单信息之后，则可以据此渲染显示目标业务场景对应的目标业务页面。其中，可以理解的是，具体渲染过程中，可以根据目标业务页面对应的组件信息确定目标业务页面中各组件的分布情况，根据目标业务页面对应的表单信息确定目标业务页面中各业务字段的分布情况以及各业务字段对应的业务数据；进而根据目标业务页面中各组件的分布情况、各业务字段的分布情况以及各业务字段对应的业务数据，可以组合渲染出该目标业务页面。

需要说明的是，对于不同的业务场景，将渲染得到不同的目标业务页面。

可选地，低代码平台可被配置为包括多个业务模板对应的初始渲染程序，多个业务模板包括下述至少一种：树编辑业务模板、树导航业务模板、页面导航业务模板、标签页导航业务模板、向导导航业务模板。

其中，树导航业务模板适用于需要部署树状视图的树导航场景；树编辑业务模板适用于需要部署树状视图，且用户可对该树状视图中的节点进行编辑操作的树编辑场景，其中，该编辑操作可以是对该节点的删除、重命名、又或者是建立子节点的操作，在此不作限定，根据实际的应用场景可以对应不同操作方式。

页面导航业务模板适用于需要快捷访问页面中各页面内容的页面导航场景，其中，该页面内容可以包括但不限于：栏目菜单设置、辅助菜单、在线帮助；标签页导航业务模板适用于需要访问多个标签页的标签页场景，当然，本申请在此并不限定标签页导航业务模板中多个标签页的部署方式，可选地，该多个标签页可以是水平部署、垂直部署、又或者，部署在当前页面的顶部、底部等，再或者，该多个标签也可以以可滚动方式部署，在此不作限定。

向导导航业务模板适用于需要引导用户通过多步操作完成目标任务的向导导航场景，比如，该向导导航场景的具体业务场景可以是网上购物场景。

图5为本申请实施例提供的又一种前端页面渲染方法的流程示意图。可选地，如图5所示，上述方法还包括：

S501、响应于对目标业务场景代码的上传操作，将目标业务场景代码上传至目标服务器。

可选地，前端页面渲染设备在得到目标业务场景代码之后，可以将该目标业务场景代码上传至目标服务器，当然，需要说明的是，根据实际的应用场景上传过程也可进行打包操作，得到打包后的压缩包，进而将该打包后的压缩包上传至目标服务器时，可以缩短上传时间，提高上传效率。

其中，将该目标业务场景代码上传至目标服务器之后，后期则可以通过该目标服务器随时随地下载该目标业务场景，并通过运行该目标业务场景，渲染显示目标业务页面，提高本申请方法的适用性。

值得说明的是，应用本申请实施例，由于可以获取到目标业务场景代码，因此，基于该目标业务场景代码也可以进行二次开发，提高本申请方法的适用性。

图6为本申请实施例提供的一种前端页面渲染装置的功能模块示意图，该装置基本原理及产生的技术效果与前述对应的方法实施例相同，为简要描述，本实施例中未提及部分，可参考方法实施例中的相应内容。如图6所示，该前端页面渲染装置包括：

第一获取模块110，用于根据目标业务场景的业务类型，获取用于渲染目标业务模板的初始渲染程序，其中，所述目标业务模板包括所述目标业务场景对应的通用业务处理代码，所述初始渲染程序包括用于渲染所述目标业务模板中模板组件的组件渲染程序；

替换模块120，用于基于双向绑定机制，将所述初始渲染程序中预设变量指示的代码区域替换为所述目标业务场景对应的业务数据，得到对应的业务区域代码，根据所述业务区域代码以及组件渲染程序，得到目标业务场景代码；

渲染模块130，用于运行所述目标业务场景代码，渲染显示所述目标业务场景对应的目标业务页面。

在可选的实施方式中，所述替换模块120，具体用于获取用于创建所述初始渲染程序对应的Vue实例；

基于双向绑定机制，根据所述目标业务场景对应的业务数据替换所述Vue实例中预设变量指示的代码区域，得到对应的业务区域代码。

在可选的实施方式中，所述前端页面渲染装置还包括：第二获取模块用于获取所述目标业务场景对应的json代码，所述json代码用于描述所述目标业务场景对应的业务数据的获取逻辑；

根据所述json代码获取所述目标业务场景对应的业务数据。

在可选的实施方式中，所述初始渲染程序对应的Vue实例被配置为包括第一标签和第二标签，所述第二标签为第一标签的子标签，所述第一标签用于指示所述Vue实例对应的代码块区域，所述第二标签用于所述Vue实例对应的执行代码。

在可选的实施方式中，所述渲染模块130，具体用于运行所述目标业务场景代码，通过所述目标业务场景代码获取所述目标业务场景的场景数据的获取方式；

根据所述目标业务场景的场景数据的获取方式，获取目标业务页面对应的组件信息和表单信息；

根据所述目标业务页面对应的组件信息和表单信息，渲染显示所述目标业务场景对应的目标业务页面。

在可选的实施方式中，所述目标业务模板为多个业务模板中的任一业务模板，多个所述业务模板包括下述至少一种：树编辑业务模板、树导航业务模板、页面导航业务模板、标签页导航业务模板、向导导航业务模板。

在可选的实施方式中，所述前端页面渲染装置还包括：上传模块，用于响应于对所述目标业务场景代码的上传操作，将所述目标业务场景代码上传至目标服务器。

上述装置用于执行前述实施例提供的方法，其实现原理和技术效果类似，在此不再赘述。

以上这些模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路(Application Specific Integrated Circuit，简称ASIC)，或，一个或多个微处理器，或，一个或者多个现场可编程门阵列(Field Programmable Gate Array，简称FPGA)等。再如，当以上某个模块通过处理元件调度程序代码的形式实现时，该处理元件可以是通用处理器，例如中央处理器(Central Processing Unit，简称CPU)或其它可以调用程序代码的处理器。再如，这些模块可以集成在一起，以片上***(system-on-a-chip，简称SOC)的形式实现。

图7为本申请实施例提供的一种电子设备结构示意图，该电子设备可以集成于前端页面渲染装置中。如图7所示，该电子设备可以包括：处理器210、存储介质220和总线230，存储介质220存储有处理器210可执行的机器可读指令，当电子设备运行时，处理器210与存储介质220之间通过总线230通信，处理器210执行机器可读指令，以执行上述方法实施例的步骤。具体实现方式和技术效果类似，这里不再赘述。

可选地，本申请还提供一种存储介质，存储介质上存储有计算机程序，计算机程序被处理器运行时执行上述方法实施例的步骤。具体实现方式和技术效果类似，这里不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(英文：processor)执行本申请各个实施例方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(英文：Read-Only Memory，简称：ROM)、随机存取存储器(英文：Random Access Memory，简称：RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。以上仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (9)

1.一种前端页面渲染方法，其特征在于，应用于低代码开发平台，包括：

根据目标业务场景的业务类型，获取用于渲染目标业务模板的初始渲染程序，其中，所述目标业务模板包括所述目标业务场景对应的通用业务处理代码，所述初始渲染程序包括用于渲染所述目标业务模板中模板组件的组件渲染程序；

基于双向绑定机制，将所述初始渲染程序中预设变量指示的代码区域替换为所述目标业务场景对应的业务数据，得到对应的业务区域代码，根据所述业务区域代码以及组件渲染程序，得到目标业务场景代码；其中，所述业务区域代码用于体现目标业务场景下的特定业务内容，所述特定业务内容的呈现由所述目标业务场景对应的业务数据决定；所述双向绑定机制对视图和模型进行了双向绑定，当视图发生更新时，模型数据也发生更新，当模型数据发生更新时，视图也发生更新；

运行所述目标业务场景代码，渲染显示所述目标业务场景对应的目标业务页面；

所述运行所述目标业务场景代码，渲染显示所述目标业务场景对应的目标业务页面，包括：

运行所述目标业务场景代码，通过所述目标业务场景代码获取所述目标业务场景的场景数据的获取方式；

根据所述目标业务场景的场景数据的获取方式，获取目标业务页面对应的组件信息和表单信息；

根据所述目标业务页面对应的组件信息和表单信息，渲染显示所述目标业务场景对应的目标业务页面。

2.根据权利要求1所述的方法，其特征在于，所述基于双向绑定机制，将所述初始渲染程序中预设变量指示的代码区域替换为所述目标业务场景对应的业务数据，得到对应的业务区域代码，包括：

获取用于创建所述初始渲染程序的Vue实例；

基于双向绑定机制，根据所述目标业务场景对应的业务数据替换所述Vue实例中预设变量指示的代码区域，得到对应的业务区域代码。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

获取所述目标业务场景对应的json代码，所述json代码用于描述所述目标业务场景对应的业务数据的获取逻辑；

根据所述json代码获取所述目标业务场景对应的业务数据。

4.根据权利要求2所述的方法，其特征在于，所述初始渲染程序对应的Vue实例被配置为包括第一标签和第二标签，所述第二标签为第一标签的子标签，所述第一标签用于指示所述Vue实例对应的代码块区域，所述第二标签用于所述Vue实例对应的执行代码。

5.根据权利要求1所述的方法，其特征在于，所述目标业务模板为多个业务模板中的任一业务模板，多个所述业务模板包括下述至少一种：树编辑业务模板、树导航业务模板、页面导航业务模板、标签页导航业务模板、向导导航业务模板。

6.根据权利要求1-5任一项所述的方法，其特征在于，所述方法还包括：

响应于对所述目标业务场景代码的上传操作，将所述目标业务场景代码上传至目标服务器。

7.一种前端页面渲染装置，其特征在于，应用于低代码开发平台，包括：

获取模块，用于根据目标业务场景的业务类型，获取用于渲染目标业务模板的初始渲染程序，其中，所述目标业务模板包括所述目标业务场景对应的通用业务处理代码，所述初始渲染程序包括用于渲染所述目标业务模板中模板组件的组件渲染程序；

替换模块，用于基于双向绑定机制，将所述初始渲染程序中预设变量指示的代码区域替换为所述目标业务场景对应的业务数据，得到对应的业务区域代码，根据所述业务区域代码以及组件渲染程序，得到目标业务场景代码；其中，所述业务区域代码用于体现目标业务场景下的特定业务内容，所述特定业务内容的呈现由所述目标业务场景对应的业务数据决定；所述双向绑定机制对视图和模型进行了双向绑定，当视图发生更新时，模型数据也发生更新，当模型数据发生更新时，视图也发生更新；

渲染模块，用于运行所述目标业务场景代码，渲染显示所述目标业务场景对应的目标业务页面；

所述渲染模块，用于运行所述目标业务场景代码，通过所述目标业务场景代码获取所述目标业务场景的场景数据的获取方式；

根据所述目标业务场景的场景数据的获取方式，获取目标业务页面对应的组件信息和表单信息；

根据所述目标业务页面对应的组件信息和表单信息，渲染显示所述目标业务场景对应的目标业务页面。

8.一种电子设备，其特征在于，包括：处理器、存储介质和总线，所述存储介质存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储介质之间通过总线通信，所述处理器执行所述机器可读指令，以执行如权利要求1-6任一所述前端页面渲染方法的步骤。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1-6任一所述前端页面渲染方法的步骤。