CN113076105B - 一种面向在线教育的组件化页面渲染方法、系统及存储器 - Google Patents
一种面向在线教育的组件化页面渲染方法、系统及存储器 Download PDFInfo
- Publication number
- CN113076105B CN113076105B CN202110634160.1A CN202110634160A CN113076105B CN 113076105 B CN113076105 B CN 113076105B CN 202110634160 A CN202110634160 A CN 202110634160A CN 113076105 B CN113076105 B CN 113076105B
- Authority
- CN
- China
- Prior art keywords
- page
- component
- drawing board
- rendering
- service
- 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.)
- Active
Links
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/38—Creation or generation of source code for implementing user interfaces
-
- 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/33—Intelligent editors
-
- 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
Abstract
本发明提供了一种面向在线教育的组件化页面渲染方法、系统及存储器。该方案包括导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板；获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程；等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据；根据所述JSON数据进行数据渲染；进行组件信息读取，封装为一个目标业务页面；所述待发布页面分布发送到移动端和云端。该方案通过自动的组件化页面渲染，在客户导入PaaS平台时无需从零开始配置，通过可视化组装渲染，进而提升开发效率。
Description
技术领域
本发明涉及在线教育技术领域，更具体地，涉及一种面向在线教育的组件化页面渲染方法、系统及存储器。
背景技术
随着信息技术迅速发展，特别是从互联网到移动互联网的发展，创造了跨时空的生活、工作和学习方式，使知识获取的方式发生了根本变化。在线教育平台是指一种基于网络的学习行为，类似于网络培训。在线学习过程中，是以网络为介质的教学方式，通过网络使学员与教师开展线上的教学活动；通过借助网络课件，学员还可以随时随地进行学习，真正打破了时间和空间的限制，对于工作繁忙，学习时间不固定的人员而言网络远程教育是最方便不过的学习方式。PAAS平台的英文全称为Platform-as-a-Service，对应中文翻译为平台即服务，PAAS平台的目的是把应用服务的运行和开发环境作为一种服务提供。
以往的在线教育PAAS平台中，当客户需要对接PAAS平台时，一方面，当业务页面都需要重新从原子组件开始配置，工作量巨大，配置复杂度非常高；一方面，PAAS平台的配置步骤繁琐，需要专业的实施工程师配置。完成一个项目对接，需要比较长的开发周期，时间成本高。
发明内容
鉴于上述问题，本发明提出了一种面向在线教育的组件化页面渲染方法、系统及存储器，通过自动的组件化页面渲染，在客户导入PaaS平台时无需从零开始配置，通过可视化组装渲染 ，进而提升开发效率。
根据本发明实施例第一方面，提供一种面向在线教育的组件化页面渲染方法。
在一个或多个实施例中，优选地，所述的一种面向在线教育的组件化页面渲染方法包括：
导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板；
以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程；
根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据；
根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容；
根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面；
对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面；
对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置。
在一个或多个实施例中，优选地，所述导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板，具体包括：
导入全部的当前全部的业务组件；
对业务组件的类型进行划分，当所述业务组件的类型在预设类型范围内时，自动设置基本画板；
对所述基本画板进行区域划分，生成若干个画板区域块，每个区域块对应为一个容器；
对所述业务组件进行状态配置，配置所述业务组件的数据、界面形式和业务逻辑；
根据当前的全部容器组成所述初级画板，并确定所述业务组件的配置信息。
在一个或多个实施例中，优选地，所述以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程，具体包括：
获取当前的客户设计需求，确定所需的业务组件；
对所述的所需的业务组件，通过自动拖拽到所述初级画板内的容器中；
根据当前的所述业务组件的配置信息对全部容器中进行填充，生成填充结果；
根据所述填充结果生成所述自动拖拽流程，使所述业务组件中的所述界面形式尺寸最大的最先填充。
在一个或多个实施例中，优选地，所述根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据，具体包括：
在所述初级画板中拖拽中已有组件的填充位置，拖拽完成之后生成所述JSON数据，渲染器读取所述JSON数据得到组件占据的格子密度，最终根据组件占据的格子密度进行渲染；
按照所述自动拖拽流程，将全部的所述业务组件在全部容器中进行填充，生成在线业务画板；
等待所述组件信息在所述PAAS平台中的注册信号；
当收到所述注册信号时，根据所述在线业务画板上传布局排版信息，并生成所述JSON数据，其中，所述JSON数据包括页面布局结构、组件配置属性。
在一个或多个实施例中，优选地，所述根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容，具体包括：
读取所述JSON数据；
获取所述JSON数据中的所述布局结构；
获取所述JSON数据中的组件密度和组件驻留位置；
读取所述初级画板中全部的容器内的所述格子密度；
当所述格子密度不足100%时，根据所述组件密度和所述组件驻留位置进行渲染。
在一个或多个实施例中，优选地，所述根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面，具体包括：
获取当前渲染结果，确定渲染后组件位置；
读取所述组件信息，并获取所述组件的大小信息，其中，所述组件的大小信息包括m个行和n个列；
获取当前业务应用类型；
根据业务应用类型，对所述组件信息进行划分，生成基础子组件、业务子组件、布局子组件和数据子组件；
对所述组件的大小信息进行重设，根据预设值改变所述组件的大小，其中，所述预设值改变包括：只改变宽度、只改变高度、宽度高度同时改变；
获取所述基础子组件、所述业务子组件、所述布局子组件和所述数据子组件的大小；
根据当前的所述业务应用页面尺寸对所述基础子组件、所述业务子组件、所述布局子组件和所述数据子组件位置进行规划；
封装为一个所述目标业务页面。
在一个或多个实施例中，优选地，所述对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面，具体包括：
获取所述目标业务页面，进行组件信息提取，生成第一画布信息；
获取所述目标业务页面，进行画面分布提取，生成第二画布信息；
根据所述第一画布信息与组件信息的预设存储数量校对，当所述预设存储数量低于预设信息上限时，发出校对通过第一信号；
根据所述第二画布信息与预设画面分布比例进行校对，当所述第二画布信息中画面分布比例低于所述预设画面分布比例上限时，发出校准通过第二信号；
当收到所述校对通过第一信号和所述校对通过第二信号时，生成待发布页面。
在一个或多个实施例中，优选地，所述对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置，具体包括：
获取所述待发布页面，存储到掉电自动存储的可读存储器内；
将所述待发布页面发送到所述移动端；
将所述待发布页面发送到所述云端；
提取所述云端中的所述待发布页面的第一预发布状态；
提取所述移动端中的所述待发布页面的第二预发布状态；
将所述第一预发布状态与所述第二预发布状态发送到所述PAAS平台，进行一致性比对，生成对比结果；
获取所述对比结果，完成所述PAAS平台设置。
根据本发明实施例第二方面，提供一种面向在线教育的组件化页面渲染系统。
所述的一种面向在线教育的组件化页面渲染系统包括：
业务导入模块，用于导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板；
初级画板生成模块，用于以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程；
JSON数据生成模块，用于根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据；
自动渲染模块，用于根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容；
业务封装模块，用于根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面；
待发布页面生成模块，用于对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面；
双端设置模块，用于对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置。
根据本发明实施例第三方面，提供一种计算机可读存储介质，其上存储计算机程序指令，所述计算机程序指令在被处理器执行时实现如本发明实施例第一方面中任一项所述的方法。
本发明的实施例提供的技术方案可以包括以下有益效果：
1）本发明实施例中，通过组件形成页面，可实现多类组合形式的自由搭配，实现快速的整合业务需求，提升搭建速度；
2）本发明实施例中，在完成页面配置后，通过渲染引擎进行动态加载，而无需从原子组件开始配置，简化了搭建流程；
3）本发明实施例中，在完成自动拖拽后，在画布中生成业务应用页面。
本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明一个实施例的一种面向在线教育的组件化页面渲染方法的流程图。
图2是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板的流程图。
图3是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程的流程图。
图4是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据的流程图。
图5是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容的流程图。
图6是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面的流程图。
图7是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面的流程图。
图8是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置的流程图。
图9是本发明一个实施例的一种面向在线教育的组件化页面渲染系统的结构图。
具体实施方式
在本发明的说明书和权利要求书及上述附图中的描述的一些流程中，包含了按照特定顺序出现的多个操作，但是应该清楚了解，这些操作可以不按照其在本文中出现的顺序来执行或并行执行，操作的序号如101、102等，仅仅是用于区分开各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
随着信息技术迅速发展，特别是从互联网到移动互联网的发展，创造了跨时空的生活、工作和学习方式，使知识获取的方式发生了根本变化。在线教育平台是指一种基于网络的学习行为，类似于网络培训。在线学习过程中，是以网络为介质的教学方式，通过网络使学员与教师开展线上的教学活动；通过借助网络课件，学员还可以随时随地进行学习，真正打破了时间和空间的限制，对于工作繁忙，学习时间不固定的人员而言网络远程教育是最方便不过的学习方式。PAAS平台的英文全称为Platform-as-a-Service，对应中文翻译为平台即服务，PAAS平台的目的是把应用服务的运行和开发环境作为一种服务提供。
以往的在线教育PAAS平台中，当客户需要对接PAAS平台时，一方面，当业务页面都需要重新从原子组件开始配置，工作量巨大，配置复杂度非常高；一方面，PAAS平台的配置步骤繁琐，需要专业的实施工程师配置。完成一个项目对接，需要比较长的开发周期，时间成本高。
本发明实施例中，提供了一种面向在线教育的组件化页面渲染方法、系统及存储器。该方案通过自动的组件化页面渲染，在客户导入PaaS平台时无需从零开始配置，通过可视化组装渲染 ，进而提升开发效率。
根据本发明实施例第一方面，提供一种面向在线教育的组件化页面渲染方法。
图1是本发明一个实施例的一种面向在线教育的组件化页面渲染方法的流程图。
如图1所示，在一个或多个实施例中，优选地，所述的一种面向在线教育的组件化页面渲染方法包括：
S101、导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板；
S102、以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程；
S103、根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据；
S104、根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容；
S105、根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面；
S106、对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面；
S107、对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置。
在本发明实施例中，通过该方案，首先设置画板、组件参数等信息，进而利用画板的数据渲染，在渲染后经过组件的信息和画板部布局的校验，进行数据发布后，在云端和移动端中进行在线匹配设置。因此，一方面，可以使组件开发人员无需关注组件之外的实现细节，只需导入现有组件，同时按照渲染器要求提供组件基本配置信息就能在PaaS平台上渲染呈现；另一方面，简化了页面配置流程，支持可视化拖拉拽组装页面，解决重复开发的问题，实现了快速、高效响应 PAAS 客户的对接需求。
图2是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板的流程图。
如图2所示，在一个或多个实施例中，优选地，所述导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板，具体包括：
S201、导入全部的当前全部的业务组件；
S202、对业务组件的类型进行划分，当所述业务组件的类型在预设类型范围内时，自动设置基本画板；
S203、对所述基本画板进行区域划分，生成若干个画板区域块，每个区域块对应为一个容器；
S204、对所述业务组件进行状态配置，配置所述业务组件的数据、界面形式和业务逻辑；
S205、根据当前的全部容器组成所述初级画板，并确定所述业务组件的配置信息。
在本发明实施例中，首先导入现有的业务组件，进而进行组件的状态配置、容器、画布的配置，在完成上述配置后，对一个完整的画布进行配置，生成若干个不同的区域，最终对应的组件将在对应的画布上自由搭配。
图3是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程的流程图。
如图3所示，在一个或多个实施例中，优选地，所述以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程，具体包括：
S301、获取当前的客户设计需求，确定所需的业务组件；
S302、对所述的所需的业务组件，通过自动拖拽到所述初级画板内的容器中；
S303、根据当前的所述业务组件的配置信息对全部容器中进行填充，生成填充结果；
S304、根据所述填充结果生成所述自动拖拽流程，使所述业务组件中的所述界面形式尺寸最大的最先填充。
在本发明实施例中，渲染器简化了页面配置流程，支持可视化拖拉拽组装页面，解决重复开发的问题，实现快速、高效响应 PAAS 平台对客户对接需求的反应。
图4是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据的流程图。
如图4所示，在一个或多个实施例中，优选地，所述根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据，具体包括：
S401、在所述初级画板中拖拽中已有组件的填充位置，拖拽完成之后生成所述JSON数据，渲染器读取所述JSON数据得到组件占据的格子密度，最终根据组件占据的格子密度进行渲染；
S402、按照所述自动拖拽流程，将全部的所述业务组件在全部容器中进行填充，生成在线业务画板；
S403、等待所述组件信息在所述PAAS平台中的注册信号；
S404、当收到所述注册信号时，根据所述在线业务画板上传布局排版信息，并生成所述JSON数据，其中，所述JSON数据包括页面布局结构、组件配置属性。
在本发明实施例中，在进行设置之前，设置了渲染器，进一步，通过容器画布布局引擎进行页面布局排版，当组件在PAAS平台注册并且上传后，用户可以在PAAS平台上新建画布，进而在所述画布中通过拖拉拽对组件进行重新布局摆放。
其中，JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式，是欧洲计算机协会制定的规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
图5是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容的流程图。
如图5所示，在一个或多个实施例中，优选地，所述根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容，具体包括：
S501、读取所述JSON数据；
S502、获取所述JSON数据中的所述布局结构；
S503、获取所述JSON数据中的组件密度和组件驻留位置；
S504、读取所述初级画板中全部的容器内的所述格子密度；
S505、当所述格子密度不足100%时，根据所述组件密度和所述组件驻留位置进行渲染。
在本发明实施例中，根据JSON画布进行数据渲染，根据组件占据的各自密度进行评估，生成一个页面中的若干个渲染。
图6是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面的流程图。
如图6所示，在一个或多个实施例中，优选地，所述根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面，具体包括：
S601、获取当前渲染结果，确定渲染后组件位置；
S602、读取所述组件信息，并获取所述组件的大小信息，其中，所述组件的大小信息包括m个行和n个列；
S603、获取当前业务应用类型；
S604、根据业务应用类型，对所述组件信息进行划分，生成基础子组件、业务子组件、布局子组件和数据子组件；
S605、对所述组件的大小信息进行重设，根据预设值改变所述组件的大小，其中，所述预设值改变包括：只改变宽度、只改变高度、宽度高度同时改变；
S606、获取所述基础子组件、所述业务子组件、所述布局子组件和所述数据子组件的大小；
S607、根据当前的所述业务应用页面尺寸对所述基础子组件、所述业务子组件、所述布局子组件和所述数据子组件位置进行规划；
S608、封装为一个所述目标业务页面。
在本发明实施例中，读取组件信息，具体的所述组件信息包括组件属性、组件数据和组件样式，进而封装为基础组件、业务组件、布局组件、数据组件，根据组件的属性组成方式在一个业务应用页面中进行重新组合，生成一个综合的目标业务页面。
图7是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面的流程图。
如图7所示，在一个或多个实施例中，优选地，所述对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面，具体包括：
S701、获取所述目标业务页面，进行组件信息提取，生成第一画布信息；
S702、获取所述目标业务页面，进行画面分布提取，生成第二画布信息；
S703、根据所述第一画布信息与组件信息的预设存储数量校对，当所述预设存储数量低于预设信息上限时，发出校对通过第一信号；
S704、根据所述第二画布信息与预设画面分布比例进行校对，当所述第二画布信息中画面分布比例低于所述预设画面分布比例上限时，发出校准通过第二信号；
S705、当收到所述校对通过第一信号和所述校对通过第二信号时，生成待发布页面。
在本发明实施例中，对每个综合的目标业务页面进行预览和发布，在预览过程中，仅具体的组件信息和核对，在预览过程中，进行画布的分布情况的校验，确保无遮挡。
在步骤S701中，获取所述目标业务页面，进行组件信息提取，生成第一画布信息的过程，具体的步骤为：
提取目标业务页面内全部文字信息，存储为TXT文档；
对所述TXT文档进行编码，生成一个字符字符串，字符串中的每个数据采用ASCII编码格式；
提取字符串长度，并按顺序数据文字信息匹配字符串；
其中，所述文字信息匹配字符串是预先已经确定意义的组件信息标识，当获得此标识时，所述标识后的8位数字对应了一个组件信息字典内容；
输入所述文字匹配字符串，获取匹配时对应的字符串偏移地址，将所述字符串偏移地址后的8位数字提取出来，存储为字典查询标识；
根据预设的组件信息字典进行组件信息查询，确认当前目标业务页面的组件信息。
在步骤S702中，获取所述目标业务页面，进行画面分布提取，生成第二画布信息的过程具体的步骤为：
提取画面分布，利用第一计算公式，计算离散化后的各个点的像素深度；
提取每个容器范围内的x值范围和y值范围；
提取每个容器内的函数值；
根据第二计算公式计算纵向梯度和横向梯度；
通过第三计算公式的梯度变化度限值，生成渲染区域和业务模块边界线；
对所述渲染区域和业务模块边界线内的包裹的最大面积存储为组件占地；
进而通过所述容器总面积与所述组件占地做差，生成每个容器的使用占比，将使用占比作为第二画布信息存储。
所述第一计算公式为：
P(x，y)=Σφ（x-k△x，y-l△y）
其中，P(x，y)为所述像素深度，x为容器范围内的横轴值，y为容器范围内的纵轴值，φ为像素深度函数，△y为离线像素点的纵轴距离，△x为离线像素点的横轴距离，k 为离线像素点的纵轴序号，l为离线像素点的横轴序号；
所述第二计算公式为：
其中，D2为所述纵向梯度，D1为所述横向梯度；
所述第三计算公式为：
其中，a为渲染区域和业务模块边界线中的横轴数值，b为渲染区域和业务模块边界线中的纵轴数值。
本发明实施例中，通过将目标业务页面转化为容器使用占比和组件信息的方法，可以实现在线的对于当前渲染状态的识别，最终确保每次渲染可以到达预期的效果，也能够验证网络上与移动端上的渲染效果的一致性，提升数据可靠性。
图8是本发明一个实施例的一种面向在线教育的组件化页面渲染方法中的对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置的流程图。
如图8所示，在一个或多个实施例中，优选地，所述对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置，具体包括：
S801、获取所述待发布页面，存储到掉电自动存储的可读存储器内；
S802、将所述待发布页面发送到所述移动端；
S803、将所述待发布页面发送到所述云端；
S804、提取所述云端中的所述待发布页面的第一预发布状态；
S805、提取所述移动端中的所述待发布页面的第二预发布状态；
S806、将所述第一预发布状态与所述第二预发布状态发送到所述PAAS平台，进行一致性比对，生成对比结果；
S807、获取所述对比结果，完成所述PAAS平台设置。
在本发明实施例中，移动端和云端综合进行页面布局配置，当完成页面布局配置时，进行数据通信，将各自的渲染状态发送至对应平台进行确认。
根据本发明实施例第二方面，提供一种面向在线教育的组件化页面渲染系统。
图9是本发明一个实施例的一种面向在线教育的组件化页面渲染系统的结构图。
所述的一种面向在线教育的组件化页面渲染系统包括：
业务导入模块901，用于导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板；
初级画板生成模块902，用于以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程；
JSON数据生成模块903，用于根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据；
自动渲染模块904，用于根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容；
业务封装模块905，用于根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面；
待发布页面生成模块906，用于对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面；
双端设置模块907，用于对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置。
根据本发明实施例第三方面，提供一种计算机可读存储介质，其上存储计算机程序指令，所述计算机程序指令在被处理器执行时实现如本发明实施例第一方面中任一项所述的方法。
本发明的实施例提供的技术方案可以包括以下有益效果：
1）本发明实施例中，通过组件形成页面，可实现多类组合形式的自由搭配，实现快速的整合业务需求，提升搭建速度；
2）本发明实施例中，在完成页面配置后，通过渲染引擎进行动态加载，而无需从原子组件开始配置，简化了搭建流程；
3）本发明实施例中，在完成自动拖拽后，在画布中生成业务应用页面。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器和光学存储器等）上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
Claims (9)
1.一种面向在线教育的组件化页面渲染方法，其特征在于，包括：
导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板；
以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程；
根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据；
根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容；
根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面；
对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面；
对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置；
其中，所述以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程，具体包括：
获取当前的客户设计需求，确定所需的业务组件；
对所述的所需的业务组件，通过自动拖拽到所述初级画板内的容器中；
根据当前的所述业务组件的配置信息对全部容器中进行填充，生成填充结果；
根据所述填充结果生成所述自动拖拽流程，使所述业务组件中的界面形式尺寸最大的最先填充。
2.如权利要求1所述的一种面向在线教育的组件化页面渲染方法，其特征在于，所述导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板，具体包括：
导入全部的当前全部的业务组件；
对业务组件的类型进行划分，当所述业务组件的类型在预设类型范围内时，自动设置基本画板；
对所述基本画板进行区域划分，生成若干个画板区域块，每个区域块对应为一个容器；
对所述业务组件进行状态配置，配置所述业务组件的数据、所述界面形式和业务逻辑；
根据当前的全部容器组成所述初级画板，并确定所述业务组件的配置信息。
3.如权利要求1所述的一种面向在线教育的组件化页面渲染方法，其特征在于，所述根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据，具体包括：
在所述初级画板中拖拽中已有组件的填充位置，拖拽完成之后生成所述JSON数据，渲染器读取所述JSON数据得到组件占据的格子密度，最终根据组件占据的格子密度进行渲染；
按照所述自动拖拽流程，将全部的所述业务组件在全部容器中进行填充，生成在线业务画板；
等待所述组件信息在所述PAAS平台中的注册信号；
当收到所述注册信号时，根据所述在线业务画板上传布局排版信息，并生成所述JSON数据，其中，所述JSON数据包括页面布局结构、组件配置属性。
4.如权利要求3所述的一种面向在线教育的组件化页面渲染方法，其特征在于，所述根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容，具体包括：
读取所述JSON数据；
获取所述JSON数据中的所述布局结构；
获取所述JSON数据中的组件密度和组件驻留位置；
读取所述初级画板中全部的容器内的所述格子密度；
当所述格子密度不足100%时，根据所述组件密度和所述组件驻留位置进行渲染。
5.如权利要求1所述的一种面向在线教育的组件化页面渲染方法，其特征在于，所述根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面，具体包括：
获取当前渲染结果，确定渲染后组件位置；
读取所述组件信息，并获取所述组件的大小信息，其中，所述组件的大小信息包括m个行和n个列；
获取当前业务应用类型；
根据业务应用类型，对所述组件信息进行划分，生成基础子组件、业务子组件、布局子组件和数据子组件；
对所述组件的大小信息进行重设，根据预设值改变所述组件的大小，其中，所述预设值改变包括：只改变宽度、只改变高度、宽度高度同时改变；
获取所述基础子组件、所述业务子组件、所述布局子组件和所述数据子组件的大小；
根据当前的所述业务应用页面尺寸对所述基础子组件、所述业务子组件、所述布局子组件和所述数据子组件位置进行规划；
封装为一个所述目标业务页面。
6.如权利要求1所述的一种面向在线教育的组件化页面渲染方法，其特征在于，所述对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面，具体包括：
获取所述目标业务页面，进行组件信息提取，生成第一画布信息；
获取所述目标业务页面，进行画面分布提取，生成第二画布信息；
根据所述第一画布信息与组件信息的预设存储数量校对，当所述预设存储数量低于预设信息上限时，发出校对通过第一信号；
根据所述第二画布信息与预设画面分布比例进行校对，当所述第二画布信息中画面分布比例低于所述预设画面分布比例上限时，发出校准通过第二信号；
当收到所述校对通过第一信号和所述校对通过第二信号时，生成待发布页面。
7.如权利要求1所述的一种面向在线教育的组件化页面渲染方法，其特征在于，所述对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置，具体包括：
获取所述待发布页面，存储到掉电自动存储的可读存储器内；
将所述待发布页面发送到所述移动端；
将所述待发布页面发送到所述云端；
提取所述云端中的所述待发布页面的第一预发布状态；
提取所述移动端中的所述待发布页面的第二预发布状态；
将所述第一预发布状态与所述第二预发布状态发送到所述PAAS平台，进行一致性比对，生成对比结果；
获取所述对比结果，完成所述PAAS平台设置。
8.一种面向在线教育的组件化页面渲染系统，其特征在于，包括：
业务导入模块，用于导入全部业务组件，并对所述业务组件内的画布区域进行配置，生成初级画板；
初级画板生成模块，用于以所述初级画板为基础，获取当前用于设计需求，进行自动拖拽，并在所述初级画板上添加渲染器，完成页面内容配置流程规划，生成自动拖拽流程；
JSON数据生成模块，用于根据所述自动拖拽流程，设置容器在所述初级画板中的布局排版，等待组件信息在PAAS平台注册的上传和布局排版，生成JSON数据；
自动渲染模块，用于根据所述JSON数据进行数据渲染，并对所有的组件占据进行评估，在页面中生成若干渲染内容；
业务封装模块，用于根据所述渲染内容，进行组件信息读取，读取全部的所述组件信息，并封装为一个目标业务页面；
待发布页面生成模块，用于对所述目标业务页面进行组件信息校核和画面分布校核，当校核成功后生成待发布页面；
双端设置模块，用于对所述待发布页面分布发送到移动端和云端，并校验所述移动端和所述云端的一致性，完成所述PAAS平台设置；
其中，所述初级画板生成模块，具体用于获取当前的客户设计需求，确定所需的业务组件；对所述的所需的业务组件，通过自动拖拽到所述初级画板内的容器中；根据当前的所述业务组件的配置信息对全部容器中进行填充，生成填充结果；根据所述填充结果生成所述自动拖拽流程，使所述业务组件中的界面形式尺寸最大的最先填充。
9.一种计算机可读存储介质，其上存储计算机程序指令，其特征在于，所述计算机程序指令在被处理器执行时实现如权利要求1-7中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110634160.1A CN113076105B (zh) | 2021-06-08 | 2021-06-08 | 一种面向在线教育的组件化页面渲染方法、系统及存储器 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110634160.1A CN113076105B (zh) | 2021-06-08 | 2021-06-08 | 一种面向在线教育的组件化页面渲染方法、系统及存储器 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113076105A CN113076105A (zh) | 2021-07-06 |
| CN113076105B true CN113076105B (zh) | 2021-08-24 |
Family
ID=76617131
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110634160.1A Active CN113076105B (zh) | 2021-06-08 | 2021-06-08 | 一种面向在线教育的组件化页面渲染方法、系统及存储器 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113076105B (zh) |
Families Citing this family (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113805966A (zh) * | 2021-09-15 | 2021-12-17 | 上海得帆信息技术有限公司 | 一种多端设备动态视图渲染实现方法和系统 |
| CN113835701B (zh) * | 2021-09-22 | 2024-04-02 | 上海妙一生物科技有限公司 | 一种基于组件化的代码生成方法和装置 |
| CN116048320A (zh) * | 2021-10-28 | 2023-05-02 | 北京字跳网络技术有限公司 | 多组件跨容器的控制方法、装置及电子设备 |
| CN114115883B (zh) * | 2022-01-26 | 2022-06-03 | 广州云徙科技有限公司 | 一种使用中台业务能力快速构建前端应用的方法 |
| CN115269033B (zh) * | 2022-06-18 | 2023-05-09 | 知学云(北京)科技股份有限公司 | 一种aPaaS平台加载外部业务组件包的方法及系统 |
| CN115469959B (zh) * | 2022-11-11 | 2023-01-31 | 成都摹客科技有限公司 | 一种页面的渲染方法、渲染装置及计算机存储介质 |
| CN116009842B (zh) * | 2023-01-05 | 2023-08-04 | 三峡高科信息技术有限责任公司 | 一种基于可视化拖拽配置的业务表单定制方法 |
| CN116301847B (zh) * | 2023-01-28 | 2023-11-21 | 广西数字大脑智能科技有限责任公司 | 一种基于开发平台快速生成页面的系统及方法 |
| CN116540996A (zh) * | 2023-07-03 | 2023-08-04 | 长威信息科技发展股份有限公司 | 一种结合绝对定位和流式定位的画布定位方法 |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9864801B2 (en) * | 2013-01-28 | 2018-01-09 | Red Hat, Inc. | Responsive layout based on behavioral intent in a multi-tenant platform-as-a-service (PaaS) system |
| US9454293B2 (en) * | 2013-08-30 | 2016-09-27 | Oracle International Corporation | Auto draw flow |
| CN104123155B (zh) * | 2014-07-04 | 2017-10-17 | 北京思特奇信息技术股份有限公司 | 一种基于web的业务系统页面层开发平台及方法 |
| CN109597616A (zh) * | 2018-11-30 | 2019-04-09 | 成都华栖云科技有限公司 | 一种基于paas媒体云多租户的APP终端样式生成系统 |
| CN112235132B (zh) * | 2020-09-27 | 2023-04-28 | 广州视源电子科技股份有限公司 | 动态配置服务的方法、装置、介质以及服务器 |
| CN112905175A (zh) * | 2021-02-08 | 2021-06-04 | 中国工商银行股份有限公司 | 一种页面生成方法、装置及设备 |
-
2021
- 2021-06-08 CN CN202110634160.1A patent/CN113076105B/zh active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN113076105A (zh) | 2021-07-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113076105B (zh) | 一种面向在线教育的组件化页面渲染方法、系统及存储器 | |
| CN108572823B (zh) | 基于接口引擎的前后端开发管理方法及系统 | |
| CN110908697B (zh) | 一种资源打包方法、装置、服务器及存储介质 | |
| CN104798094B (zh) | 确定内容项目显示环境的配置 | |
| CN108985066A (zh) | 一种智能合约安全漏洞检测方法、装置、终端及存储介质 | |
| CN112348317B (zh) | 一种智慧城市的项目规划条件生成方法和系统 | |
| CN104395881B (zh) | 动态型阵列的表达和变换 | |
| CN106716405A (zh) | 用于将在计算机设备的本地桌面应用程序上创建的命令和/或内容直接注入至网页浏览器并反之亦然的系统、方法和计算机程序产品 | |
| CN110532182A (zh) | 一种虚拟化平台的自动化测试方法及装置 | |
| CN111917579A (zh) | 分布式训练方法、装置、设备和存储介质 | |
| CN116028025A (zh) | 一种汽车服务化模型框架生成方法、装置、设备及介质 | |
| CN112926109B (zh) | 一种复杂嵌入式系统虚拟运行环境可视化建模方法 | |
| CN109683917A (zh) | 用于将应用部署于应用服务器的方法、设备以及介质 | |
| CN114466000B (zh) | 一种cdn网关回源方法及装置 | |
| CN108536715B (zh) | 一种预览页面生成方法、装置、设备以及存储介质 | |
| CN114398282A (zh) | 测试脚本的生成方法、装置、设备及存储介质 | |
| CN115794400A (zh) | 深度学习模型的内存管理方法、装置、设备及存储介质 | |
| CN101847124A (zh) | 一种实现浏览器测试的方法及浏览器测试系统 | |
| CN113934421A (zh) | 应用程序的页面路径写入方法、装置、设备及存储介质 | |
| CN113591279A (zh) | 在线建模仿真的方法、装置、设备和存储介质 | |
| CN111338624A (zh) | 一种数据处理方法及相关设备 | |
| CN115690304A (zh) | 数据处理方法、系统及电子设备 | |
| CN114510592A (zh) | 图像分类方法、装置、电子设备及存储介质 | |
| WO2024063096A1 (ja) | 情報処理システム、情報処理方法及びプログラム | |
| CN110417978A (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20211130 Address after: 518052 unit 19-20, 7 / F, block B, building 9, Shenzhen Bay science and technology ecological park, 3609 Baishi Road, Yuehai street, Nanshan District, Shenzhen, Guangdong Patentee after: Shenzhen zhixueyun Technology Co.,Ltd. Address before: No.637, 6 / F, 101 West Fourth Ring Road South, Fengtai District, Beijing Patentee before: Zhixueyun (Beijing) Technology Co.,Ltd. |
|
| TR01 | Transfer of patent right |