CN112558970A - 前端页面的渲染生成方法、装置、前端设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种前端页面的渲染生成方法、装置、前端设备及存储介质。所述方法包括：从开发平台设备生成的DSL布局描述文件中读取DSL节点树；通过对所述DSL节点树进行解析，得到与所述前端设备相适配的至少一个目标视图模型树；依据所述目标视图模型树在所述前端设备上进行视图渲染，以生成包括至少两个原子组件的可视化组件页面。采用本实施例的方案，在渲染生成前端页面时，能够对按照预定义格式生成的DSL布局描述文件进行解析，得到与前端设备适配的视图模型树进行页面渲染，解决了在页面渲染时无法适配前端设备进行渲染的问题，且能保证开发平台设备端与前端设备的双端页面一致性，实现跨端页面开发以及前端的页面开发动态化。

Description

前端页面的渲染生成方法、装置、前端设备及存储介质

技术领域

本发明实施例涉及计算机技术领域，尤其涉及一种前端页面的渲染生成方法、装置、前端设备及存储介质。

背景技术

通过开发移动端APP能承载服务端所提供的各种页面服务，前端开发人员通常会基于移动端的开发平台对前端页面进行开发，开发人员不仅要处理复杂的业务逻辑、设计多样的界面以及降低页面的开发成本，同时还要保证页面代码的高可用性、易读性、低出错率以及提高开发效率。因此，如何快速简单地开发生成前端页面变得尤为重要。

发明内容

本发明实施例中提供了一种前端页面的渲染生成方法、装置、前端设备及存储介质，以减少移前端页面开发人力和成本，提高前端页面开发简易性。

第一方面，本发明实施例中提供了一种前端页面的渲染生成方法，由前端设备执行，所述方法包括：

从开发平台设备生成的DSL布局描述文件中读取DSL节点树；

通过对所述DSL节点树进行解析，得到与所述前端设备相适配的至少一个目标视图模型树；

依据所述目标视图模型树在所述前端设备上进行视图渲染，以生成包括至少两个原子组件的可视化组件页面。

第二方面，本发明实施例中还提供了一种前端页面的渲染生成装置，配置于前端设备，所述装置包括：

布局描述文件读取模块，用于从开发平台设备生成的DSL布局描述文件中读取DSL节点树；

布局描述文件解析模块，用于通过对所述DSL节点树进行解析，得到与所述前端设备相适配的至少一个目标视图模型树；

页面渲染生成模块，用于依据所述目标视图模型树在所述前端设备上进行视图渲染，以生成包括至少两个原子组件的可视化组件页面。

第三方面，本发明实施例中还提供了一种前端设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明任意实施例中提供的前端页面的渲染生成方法。

第四方面，本发明实施例中还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明任意实施例中提供的前端页面的渲染生成方法。

本发明实施例中提供了一种前端页面的渲染生成方法，前端设备从获取开发平台设备上生成的DSL布局描述文件，并从DSL布局描述文件中读取包含的读取DSL节点树，通过解析DSL节点树得到与前端设备相适配的至少一个目标视图模型树；在此基础上，前端设备可以按照目标视图模型树在前端设备上进行视图渲染，生成包括至少两个原子组件的可视化组件页面。采用本实施例的方案，在渲染生成前端页面时，能够对按照预定义格式生成的DSL布局描述文件进行解析，得到与前端设备适配的视图模型树进行页面渲染，解决了在页面渲染时无法适配前端设备进行渲染的问题，且能保证开发平台设备端与前端设备的双端页面一致性，实现跨端页面开发以及前端的页面开发动态化。

上述发明内容仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1是本发明实施例中提供的一种前端页面的渲染生成方法的流程图；

图2是本发明实施例中提供的一种在前端设备进行页面渲染的示意图；

图3a是本发明实施例中提供的一种对DSL节点树进行解析的示意图；

图3b是本发明实施例中提供的一种利用视图模型进行视图渲染的示意图；

图4是本发明实施例中提供的一种在前端设备对可视化组件页面的页面渲染效果示意图；

图5是本发明实施例中提供的一种前端页面的渲染生成装置的结构框图；

图6是本发明实施例中提供的一种前端设备的结构框图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

图1是本发明实施例中提供的一种前端页面的渲染生成方法的流程图。本发明实施例可适用于在前端设备上对客户端页面进行页面渲染的情况。该方法可由前端页面的渲染生成装置来执行，该装置可以采用软件和/或硬件的方式来实现，该装置可以配置于具有网络通信功能的前端设备中。如图1所示，本发明实施例中提供的前端页面的渲染生成方法，可包括以下步骤：

S110、从开发平台设备生成的DSL布局描述文件中读取DSL节点树。

在本实施例中，DSL布局描述文件是基于预定义的DSL布局描述协议对开发平台设备构建的可视化组件页面转换确定。在开发平台设备端，通过对组件窗口中原子组件的拖拽操作，可以在开发平台设备的页面编辑窗口中构建显示包括至少两个目标原子组件的可视化组件页面；同时，开发平台设备可以将可视化组件页面转换成预定义格式的DSL布局描述文件，并将DSL布局描述文件发送到前端设备。其中组件窗口中原子组件可包括组件容器、文本组件、图片组件、列表控件以及滑动组件等类型用于构建页面的组件。

在本实施例中，对于DSL布局描述文件的结构而言，DSL布局考虑到组件描述、组件属性描述、父子组件间关系描述三个关键描述，所以布局结构对应起来由描述控件名称，描述控件属性以及描述父子包含关系组成；父控件我们抽象统一定义为Container。基于上述情况可将在开发平台设备上可视化搭建的可视化组件页面转换成预定义格式的DSL布局描述文件。DSL布局描述文件用于指示目标原子组件在可视化页面中的组件描述、组件属性描述以及组件间关系描述；组件间关系描述包括组件间依赖关系和关联组合关系。这样，前端设备可以对DSL布局描述文件进行解析，依据指示目标原子组件在可视化页面中的组件描述、组件属性描述以及组件间关系描述进行页面渲染，显示一个与在平台设备上搭建的可视化组件页面相同页面。

在本实施例中，图2是本发明实施例中提供的一种在前端设备进行页面渲染的示意图。参见图2，在前端设备获取从开发平台设备发送的DSL布局描述文件后，加载并对DSL布局描述文件进行DSL解析，从DSL布局描述文件中得到最原始的DSL节点树，此时的DSL节点树不区分进行页面渲染的可视化组件页面中各个组件的组件类型。其中，DSL解析包括但不限于以下内容：进行页面渲染的可视化组件页面的组件布局解析、组件资源解析以及组件配置解析等。

在本实施例中，在内容描述可读性上，xml文件内容结构天然支持这些内容描述，就呈现了这些内容，比较直观，可读性较好；而JSON文件内容结构需要增加设计children等节点来描述依赖关系，其本身是没有固定结构，优势在于支撑任意约定配置，但可读性差些。在传输体积上，在网络传输，JSON要比XML轻量，快点，但实际中考虑到事先下载，非实时即时传输，所以不是重点关注差异。鉴于以上分析，DSL布局描述文件采用XML结构作为文件载体。

需要注意的是，在加载并对DSL布局描述文件进行DSL解析时，加载功能不包含数据处理，仅仅是将DSL转换成DSL节点树，所以此得到的DSL节点树是干净模板数据，支持缓存，允许多次调用时缓存读取。

S120、通过对DSL节点树进行解析，得到与前端设备相适配的至少一个目标视图模型树。

在本实施例的一种可选方案中，可以与上述一个或者多个实施例中各个可选方案结合。其中，图3a是本发明实施例中提供的一种对DSL节点树进行解析的示意图。参见图3a，通过对DSL节点树进行解析，得到与前端设备相适配的至少一个目标视图模型树，可包括步骤A1-A2：

步骤A1、基于前端设备的设备属性对DSL节点树进行解析，得到与前端设备相适配初始视图模型树，以及得到初始视图模型树关联的组件样式属性与组件动态属性。

步骤A2、对初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容进行调整，得到目标视图模型树。

在本实施例中，参见图2，依据前端设备的设备属性，对DSL节点树进行解析形成对应组件类型的抽象，记为初始视图模型树。每一个视图模型树包括至少两个视图模型节点ViewModelNode，每一个视图模型节点ViewModelNode对应一个原子组件。此时将不区分实际组件类型的节点树，转换成为了可以区分实际组件类型的视图模型节点ViewModelNode的树的抽象。其中，设备属性用于指示前端设备的操作***类型，例如Android和iOS***。

在本实施例中，参见图2，通过对DSL节点树进行解析，还可得到初始视图模型树关联的组件样式属性与组件动态属性，并将解析得到每一个视图模型节点ViewModelNode的组件样式属性与组件动态属性保存在Props内部，每个视图模型节点ViewModelNode对应一个Props，Props描述了视图模型节点对应的用于形成可视化组件页面的组件节点的样式属性。

在本实施例中，参见图2，初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容并不是实际的业务数据内容，而在前端设备进行页面渲染时通常是使用实际的业务数据，因此需要对初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容进行调整，将初始取值内容替换为实际的业务数据，以便在前端设备进行页面渲染时加载使用。

在本实施例的一种可选方案中，可以与上述一个或者多个实施例中各个可选方案结合。其中，对初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容进行调整，可包括：

针对初始视图模型树中每一个初始视图模型节点，通过数据绑定DataBind将初始视图模型节点ViewModelNode的部分动态属性中业务字段的初始取值内容替换成与初始取值内容关联的业务数据内容。

在本实施例中，初始取值内容包括通过GraphQl服务赋予给DSL布局描述文件描述的可视化组件页面中API接口所需业务字段的字段取值地址。在将可视化组件页面转换成预定义格式的DSL布局描述文件之前，开发平台设备会通过GraphQl服务向可视化组件页面的API接口，赋予API接口所需业务字段的字段取值地址。前端设备可以通过数据绑定DataBind把初始视图模型节点ViewModelNode中的一些动态属性内容(如@data{name})替换成真正的业务数据内容。例如，解析name字段，从网络数据中获取这个字段的数值的业务数据。

采用上述方式，不需要单独后端开发逻辑来提供Api满足业务数据的需要，通过GraphQl就可以实现后端免开发逻辑接口，直接通过该服务来聚合各个业务***服务，及定义逻辑来实现业务数据的组装和转换。

S130、依据目标视图模型树在前端设备上进行视图渲染，以生成包括至少两个原子组件的可视化组件页面。

在本实施例中，图3b是本发明实施例中提供的一种利用视图模型进行视图渲染的示意图，图4是本发明实施例中提供的一种在前端设备对可视化组件页面的页面渲染效果示意图。参见图3b和图4，针对解析得到与前端设备相适配的至少一个目标视图模型树中的每一个目标视图模型树进行视图渲染，根据每个视图模型节点ViewModelNode的节点名称生成成不同的视图View，同时将每个视图模型节点ViewModelNode对应的Props绑定到相应的View上，形成真实的ViewTree，完成视图渲染，在前端设备上显示包括至少两个原子组件的可视化组件页面。其中，视图View的交互行为及其他通过JsBridge触发由js开发业务逻辑，来达到业务逻辑动态性。

本发明实施例中提供了一种前端页面的渲染生成方法，通过DSL设计一套可以描述界面样式的协议，包括定义了***所有的原子组件及属性，以及描述了所有组件间的布局组合关系，前端根据这套协议动态解析其内容，生成页面渲染所需要的组件及管理控制其布局组合关系，精准控制界面内容元素显示的位置和大小前端设备。采用本实施例的方案，在渲染生成前端页面时，能够对按照预定义格式生成的DSL布局描述文件进行解析，得到与前端设备适配的视图模型树进行页面渲染，解决了在页面渲染时无法适配前端设备进行渲染的问题，且能保证开发平台设备端与前端设备的双端页面一致性，实现跨端页面开发以及前端的页面开发动态化。并且，本申请方案降低开发成本和门槛，方便快速搭建移动端开发页面，对开发人员的技术要求降低，同时Android和iOS双端同时生效，便于复杂页面效果和交互双端一致性；同时满足动态性，避免频繁发布移动端版本，减少发布流量成本。

图5是本发明实施例中提供的一种前端页面的渲染生成装置的结构框图。本发明实施例可适用于在前端设备上对客户端页面进行页面渲染的情况。该装置可以采用软件和/或硬件的方式来实现，该装置可以配置于具有网络通信功能的前端设备中。如图5所示，本发明实施例中的前端页面的渲染生成装置，可包括以下：布局描述文件读取模块510、布局描述文件解析模块520和页面渲染生成模块530。其中：

布局描述文件读取模块510，用于从开发平台设备生成的DSL布局描述文件中读取DSL节点树；

布局描述文件解析模块520，用于通过对所述DSL节点树进行解析，得到与所述前端设备相适配的至少一个目标视图模型树；

页面渲染生成模块530，用于依据所述目标视图模型树在所述前端设备上进行视图渲染，以生成包括至少两个原子组件的可视化组件页面。

在上述实施例的基础上，可选地，所述DSL布局描述文件基于预定义的DSL布局描述协议对开发平台设备构建的可视化组件页面转换确定。

在上述实施例的基础上，可选地，所述DSL布局描述文件用于指示页面渲染所需的组件描述、组件属性描述以及组件间关系描述；所述组件间关系描述包括组件间依赖关系和关联组合关系。

在上述实施例的基础上，可选地，布局描述文件解析模块520包括：

基于所述前端设备的设备属性对所述DSL节点树进行解析，得到与所述前端设备相适配初始视图模型树，以及得到所述初始视图模型树关联的组件样式属性与组件动态属性；所述视图模型树包括至少两个视图模型节点，每一个视图模型节点对应一个原子组件；

对所述初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容进行调整，得到所述目标视图模型树。

在上述实施例的基础上，可选地，对所述初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容进行调整，包括：

针对初始视图模型树中每一个初始视图模型节点，通过数据绑定DataBind将所述初始视图模型节点ViewModelNode的部分动态属性中业务字段的初始取值内容替换成与所述初始取值内容关联的业务数据内容；

其中，所述初始取值内容包括通过GraphQl服务赋予给所述DSL布局描述文件描述的可视化组件页面中API接口所需业务字段的字段取值地址。

本发明实施例中所提供的前端页面的渲染生成装置可执行上述本发明任意实施例中所提供的前端页面的渲染生成方法，具备执行前端页面的渲染生成方法相应的功能和有益效果，未在上述实施例中详尽描述的技术细节，可参见本申请任意实施例中所提供的前端页面的渲染生成方法。

图6是本发明实施例中提供的一种前端设备的结构框图。如图6所示结构，本发明实施例中提供的前端设备包括：一个或多个处理器610和存储装置620；该前端设备中的处理器610可以是一个或多个，图6中以一个处理器610为例；存储装置620用于存储一个或多个程序；所述一个或多个程序被所述一个或多个处理器610执行，使得所述一个或多个处理器610实现如本发明实施例中任一项所述的前端页面的渲染生成方法。

该前端设备还可以包括：输入装置630和输出装置640。

该前端设备中的处理器610、存储装置620、输入装置630和输出装置640可以通过总线或其他方式连接，图6中以通过总线连接为例。

该前端设备中的存储装置620作为一种计算机可读存储介质，可用于存储一个或多个程序，所述程序可以是软件程序、计算机可执行程序以及模块，如本发明实施例中所提供的前端页面的渲染生成方法对应的程序指令/模块。处理器610通过运行存储在存储装置620中的软件程序、指令以及模块，从而执行前端设备的各种功能应用以及数据处理，即实现上述方法实施例中前端页面的渲染生成方法。

存储装置6620可包括存储程序区和存储数据区，其中，存储程序区可存储操作***、至少一个功能所需的应用程序；存储数据区可存储根据前端设备的使用所创建的数据等。此外，存储装置620可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置620可进一步包括相对于处理器610远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置630可用于接收输入的数字或字符信息，以及产生与前端设备的用户设置以及功能控制有关的键信号输入。输出装置640可包括显示屏等显示设备。

并且，当上述前端设备所包括一个或者多个程序被所述一个或者多个处理器610执行时，程序进行如下操作：

从开发平台设备生成的DSL布局描述文件中读取DSL节点树；

通过对所述DSL节点树进行解析，得到与所述前端设备相适配的至少一个目标视图模型树；

依据所述目标视图模型树在所述前端设备上进行视图渲染，以生成包括至少两个原子组件的可视化组件页面。

当然，本领域技术人员可以理解，当上述前端设备所包括一个或者多个程序被所述一个或者多个处理器610执行时，程序还可以进行本发明任意实施例中所提供的前端页面的渲染生成方法中的相关操作。

本发明实施例中提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行时用于执行前端页面的渲染生成方法，该方法包括：

从开发平台设备生成的DSL布局描述文件中读取DSL节点树；

通过对所述DSL节点树进行解析，得到与所述前端设备相适配的至少一个目标视图模型树；

依据所述目标视图模型树在所述前端设备上进行视图渲染，以生成包括至少两个原子组件的可视化组件页面。

可选的，该程序被处理器执行时还可以用于执行本发明任意实施例中所提供的前端页面的渲染生成方法。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(Random AccessMemory，RAM)、只读存储器(Read Only Memory，ROM)、可擦式可编程只读存储器(ErasableProgrammable Read Only Memory，EPROM)、闪存、光纤、便携式CD-ROM、光存储器件、磁存储器件、或者上述的任意合适的组合。计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于：电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、无线电频率(RadioFrequency，RF)等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)——连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种前端页面的渲染生成方法，其特征在于，由前端设备执行，所述方法包括：

从开发平台设备生成的DSL布局描述文件中读取DSL节点树；

通过对所述DSL节点树进行解析，得到与所述前端设备相适配的至少一个目标视图模型树；

依据所述目标视图模型树在所述前端设备上进行视图渲染，以生成包括至少两个原子组件的可视化组件页面。

2.根据权利要求1所述的方法，其特征在于，所述DSL布局描述文件基于预定义的DSL布局描述协议对开发平台设备构建的可视化组件页面转换确定。

3.根据权利要求1所述的方法，其特征在于，所述DSL布局描述文件用于指示页面渲染所需的组件描述、组件属性描述以及组件间关系描述；所述组件间关系描述包括组件间依赖关系和关联组合关系。

4.根据权利要求1所述的方法，其特征在于，通过对所述DSL节点树进行解析，得到与所述前端设备相适配的至少一个目标视图模型树，包括：

基于所述前端设备的设备属性对所述DSL节点树进行解析，得到与所述前端设备相适配初始视图模型树，以及得到所述初始视图模型树关联的组件样式属性与组件动态属性；所述视图模型树包括至少两个视图模型节点，每一个视图模型节点对应一个原子组件；

对所述初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容进行调整，得到所述目标视图模型树。

5.根据权利要求4所述的方法，其特征在于，对所述初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容进行调整，包括：

针对初始视图模型树中每一个初始视图模型节点，通过数据绑定DataBind将所述初始视图模型节点ViewModelNode的部分动态属性中业务字段的初始取值内容替换成与所述初始取值内容关联的业务数据内容；

其中，所述初始取值内容包括通过GraphQl服务赋予给所述DSL布局描述文件描述的可视化组件页面中API接口所需业务字段的字段取值地址。

6.一种前端页面的渲染生成装置，其特征在于，配置于前端设备，所述装置包括：

布局描述文件读取模块，用于从开发平台设备生成的DSL布局描述文件中读取DSL节点树；

布局描述文件解析模块，用于通过对所述DSL节点树进行解析，得到与所述前端设备相适配的至少一个目标视图模型树；

页面渲染生成模块，用于依据所述目标视图模型树在所述前端设备上进行视图渲染，以生成包括至少两个原子组件的可视化组件页面。

7.根据权利要求1所述的方法，其特征在于，布局描述文件解析模块包括：

基于所述前端设备的设备属性对所述DSL节点树进行解析，得到与所述前端设备相适配初始视图模型树，以及得到所述初始视图模型树关联的组件样式属性与组件动态属性；所述视图模型树包括至少两个视图模型节点，每一个视图模型节点对应一个原子组件；

对所述初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容进行调整，得到所述目标视图模型树。

8.根据权利要求7所述的装置，其特征在于，对所述初始视图模型树关联的样式属性与动态属性中业务字段的初始取值内容进行调整，包括：

针对初始视图模型树中每一个初始视图模型节点，通过数据绑定DataBind将所述初始视图模型节点ViewModelNode的部分动态属性中业务字段的初始取值内容替换成与所述初始取值内容关联的业务数据内容；

其中，所述初始取值内容包括通过GraphQl服务赋予给所述DSL布局描述文件描述的可视化组件页面中API接口所需业务字段的字段取值地址。

9.一种前端设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现权利要求1-5中任一所述的前端页面的渲染生成方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-5中任一所述的前端页面的渲染生成方法。

Images