CN117170669A - 一种基于前端高低代码融合的页面展示方法 - Google Patents
一种基于前端高低代码融合的页面展示方法 Download PDFInfo
- Publication number
- CN117170669A CN117170669A CN202311151118.XA CN202311151118A CN117170669A CN 117170669 A CN117170669 A CN 117170669A CN 202311151118 A CN202311151118 A CN 202311151118A CN 117170669 A CN117170669 A CN 117170669A
- Authority
- CN
- China
- Prior art keywords
- code
- low
- page
- configuration
- instantiated
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 56
- 230000004927 fusion Effects 0.000 title claims abstract description 27
- 238000009877 rendering Methods 0.000 claims description 41
- 238000004590 computer program Methods 0.000 claims description 14
- 238000010586 diagram Methods 0.000 description 13
- 230000006870 function Effects 0.000 description 9
- 230000014509 gene expression Effects 0.000 description 9
- 238000005516 engineering process Methods 0.000 description 8
- 230000006872 improvement Effects 0.000 description 8
- 230000008569 process Effects 0.000 description 8
- 238000013499 data model Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 6
- 238000011161 development Methods 0.000 description 5
- 230000008859 change Effects 0.000 description 3
- 238000006243 chemical reaction Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000002955 isolation Methods 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 229920001296 polysiloxane Polymers 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 239000010979 ruby Substances 0.000 description 1
- 229910001750 ruby Inorganic materials 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Landscapes
- Stored Programmes (AREA)
Abstract
本说明书公开了一种基于前端高低代码融合的页面展示方法,可以接收用户的页面访问请求,并根据页面访问请求,确定用户需要访问的高代码页面,若确定该高代码页面对应的访问路径与预设的低代码应用路由相匹配,调用预设的软件开发工具包SDK,以通过该SDK确定出该低代码应用路由对应的配置文件,并根据低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素,而后,根据schema协议文件和实例化出的低代码元素,通过SDK对高代码页面中的属于低代码的至少部分页面元素进行渲染以及将高代码页面中的其他页面元素进行渲染,以得到渲染出的高代码页面,并向用户进行页面展示,从而达到了高低代码融合的效果。
Description
技术领域
本说明书涉及前端技术领域,尤其涉及一种基于前端高低代码融合的页面展示方法。
背景技术
在互联网领域,前端开发是一项必不可少的技术,当前,前端开发技术分为高代码的相关技术和低代码的相关技术。
高代码的页面使用的是通用的前端代码,开发人员需要通过一定的程序语言进行编程来实现高代码的页面。低代码是一种可视化的前端开发方式,设计人员可以通过可视化平台,操作图形界面、进行参数配置,来构建出低代码的页面,因此,相较于高代码的前端开发方式,低代码更为有效率。相比于低代码,高代码更加适合针对性的需求,因此,两者各有优点。
当前,高代码的页面,与低代码的页面之间无法互通,对于一个网站平台来说,很难在已经使用了高代码进行开发的基础上再进行低代码页面的开发,从而,如何使得高代码页面与低代码页面之间进行融合,则是一个亟待解决的问题。
发明内容
本说明书提供一种基于前端高低代码融合的页面展示方法,以部分的解决现有技术存在的上述问题。
本说明书采用下述技术方案:
本说明书提供了一种基于前端高低代码融合的页面展示方法,包括:
接收用户的页面访问请求;
根据所述页面访问请求,确定所述用户需要访问的高代码页面;
若确定所述高代码页面对应的访问路径与预设的低代码应用路由相匹配,调用预设的软件开发工具包SDK,以通过所述SDK根据所述低代码应用路由,确定出所述低代码应用路由对应的配置文件,并根据所述低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素,所述配置文件包括低代码应用配置以及所述低代码应用路由对应低代码页面的schema协议文件;
根据所述schema协议文件和所述实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染以及将所述高代码页面中的其他页面元素进行渲染,以得到渲染出的高代码页面,并向所述用户进行页面展示。
可选地,接收用户的页面访问请求之前,所述方法还包括:
在所述低代码应用路由所对应的低代码应用发布后,将所述低代码应用路由与所述低代码应用路由对应的配置文件之间进行关联,并对应存储在数据库中。
可选地,所述低代码应用配置包括应用基本配置、组件配置、插件配置以及数据服务配置;
根据所述低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素,具体包括:
确定所述低代码应用路由对应的组件以及插件;
根据所述插件配置,将所述低代码应用路由对应的插件实例化,根据所述组件配置,将所述低代码应用路由对应的组件实例化,以及根据所述数据服务配置,对所述低代码应用路由对应的数据服务进行实例化,将实例化后的插件、实例化后的组件以及实例化后的数据服务,作为实例化出的低代码元素。
可选地,根据所述schema协议文件以及实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染之前,所述方法还包括:
对所述schema协议文件进行解析,得到所述schema协议文件中描述出的组件以及组件之间的关系;
根据所述schema协议文件中描述出的组件以及组件之间的关系,确定组件树。
可选地,根据所述schema协议文件以及实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染,具体包括:
根据所述组件树,确定所述schema协议文件中包含的若干区块节点;
针对每个区块节点,递归地确定出该区块节点中包含的子节点,并确定出所述子节点对应的组件,根据所述实例化出的低代码元素,对所述子节点对应的组件进行渲染,直到无法继续确定出该区块节点的子节点;
将所述schema协议文件中各区块节点中的子节点的组件渲染完成后,完成针对所述高代码页面中的属于低代码的至少部分页面元素进行渲染。
可选地,所述高代码页面所对应的应用代码中导入有所述SDK。
本说明书提供一种基于前端高低代码融合的页面展示的装置,包括:
接收模块,用于接收用户的页面访问请求;
确定模块,用于根据所述页面访问请求,确定所述用户需要访问的高代码页面;
实例化模块,用于若确定所述高代码页面对应的访问路径与预设的低代码应用路由相匹配,调用预设的软件开发工具包SDK,以通过所述SDK根据所述低代码应用路由,确定出所述低代码应用路由对应的配置文件,并根据所述低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素,所述配置文件包括低代码应用配置以及所述低代码应用路由对应低代码页面的schema协议文件;
渲染模块,用于根据所述schema协议文件和所述实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染以及将所述高代码页面中的其他页面元素进行渲染,以得到渲染出的高代码页面,并向所述用户进行页面展示。
可选地,所述装置还包括:
存储模块,用于在所述低代码应用路由所对应的低代码应用发布后,将所述低代码应用路由与所述低代码应用路由对应的配置文件之间进行关联,并对应存储在数据库中。
可选地,所述低代码应用配置包括应用基本配置、组件配置、插件配置以及数据服务配置;
所述实例化模块具体用于,确定所述低代码应用路由对应的组件以及插件;根据所述插件配置,将所述低代码应用路由对应的插件实例化,根据所述组件配置,将所述低代码应用路由对应的组件实例化,以及根据所述数据服务配置,对所述低代码应用路由对应的数据服务进行实例化,将实例化后的插件、实例化后的组件以及实例化后的数据服务,作为实例化出的低代码元素。
可选地,所述渲染模块还用于,对所述schema协议文件进行解析,得到所述schema协议文件中描述出的组件以及组件之间的关系;根据所述schema协议文件中描述出的组件以及组件之间的关系,确定组件树。
可选地,所述渲染模块具体用于,根据所述组件树,确定所述schema协议文件中包含的若干区块节点;针对每个区块节点,递归地确定出该区块节点中包含的子节点,并确定出所述子节点对应的组件,根据所述实例化出的低代码元素,对所述子节点对应的组件进行渲染,直到无法继续确定出该区块节点的子节点;将所述schema协议文件中各区块节点中的子节点的组件渲染完成后,完成针对所述高代码页面中的属于低代码的至少部分页面元素进行渲染。
可选地,所述高代码页面所对应的应用代码中导入有所述SDK。
本说明书采用的上述至少一个技术方案能够达到以下有益效果:
从上述基于前端高低代码融合的页面展示方法中可以看出,可以接收用户的页面访问请求,并根据页面访问请求,确定用户需要访问的高代码页面,若确定该高代码页面对应的访问路径与预设的低代码应用路由相匹配,调用预设的软件开发工具包SDK,以通过该SDK根据低代码应用路由,确定出低代码应用路由对应的配置文件,并根据低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素,而后,根据schema协议文件和实例化出的低代码元素,通过SDK对高代码页面中的属于低代码的至少部分页面元素进行渲染以及将高代码页面中的其他页面元素进行渲染,以得到渲染出的高代码页面,并向用户进行页面展示。
从上述内容中可以看出、本方法可以在用户发送了访问请求后,可以根据用户所需访问的高代码页面的访问路径是否与低代码应用路由相匹配,则可以调用SDK,通过SDK来获取所需的低代码页面元素的相关配置,实例化所需的低代码元素,这里提到的低代码元素可以包括所需的低代码页面元素。从而将高代码页面中融合有的属于低代码的至少部分页面元素进行渲染,进而渲染出整张融合有低代码的高代码页面。
附图说明
此处所说明的附图用来提供对本说明书的进一步理解,构成本说明书的一部分,本说明书的示意性实施例及其说明用于解释本说明书,并不构成对本说明书的不当限定。在附图中:
图1为本说明书提供的一种基于前端高低代码融合的页面展示方法的流程示意图;
图2为本说明书中提供的一种SDK初始化的流程示意图;
图3为本说明书中提供的一种组件交互联动的示意图;
图4为本说明书中提供的一种各高低代码融合形态的示意图;
图5为本说明书中提供的一种基于前端高低代码融合的页面展示装置的示意图;
图6为本说明书提供的对应于图1的电子设备示意图。
具体实施方式
为使本说明书的目的、技术方案和优点更加清楚,下面将结合本说明书具体实施例及相应的附图对本说明书技术方案进行清楚、完整地描述。显然,所描述的实施例仅是本说明书一部分实施例,而不是全部的实施例。基于本说明书中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本说明书保护的范围。
以下结合附图,详细说明本说明书各实施例提供的技术方案。
图1为本说明书提供的一种基于前端高低代码融合的页面展示方法的流程示意图,具体包括以下步骤:
S100:接收用户的页面访问请求。
S102:根据所述页面访问请求,确定所述用户需要访问的高代码页面。
S104:若确定所述高代码页面对应的访问路径与预设的低代码应用路由相匹配,调用预设的软件开发工具包SDK,以通过所述SDK根据所述低代码应用路由,确定出所述低代码应用路由对应的配置文件,并根据所述配置文件中的低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素。
本说明书中提供的基于前端高低代码融合的页面展示的方式,意在使得通过高代码开发出的页面和通过低代码开发出的页面之间能够融合,例如,可以从高代码页面跳转至低代码页面,再例如,高代码页面中可以包含有低代码的页面元素。
基于此,服务器可以接收用户的页面访问请求,并根据该页面访问请求,确定出用户需要访问的高代码页面,若确定高代码页面与预设的低代码应用路由相匹配,调用预设的软件开发工具包SDK,以通过SDK根据该低代码应用路由,确定出所述低代码应用路由对应低代码页面的配置文件,该配置文件包括低代码应用配置以及该低代码应用路由对应低代码页面的schema协议文件。
其中,上述提到的页面访问请求,可以是指用户对通过高代码开发出的应用平台的访问请求,该应用平台的页面中可以包含有通过低代码开发出的页面元素,或者该应用平台中的高代码页面与低代码页面之间存在融合。
确定出高代码页面对应的访问路径与预设的低代码应用路由相匹配,则说明该高代码页面可以是与低代码页面进行融合后的。这里提到的融合包括但不限于:低代码页面嵌入到高代码页面中,或高代码页面中的部分页面元素为低代码页面中的部分页面元素,或高代码页面中的页面元素与低代码页面能够互相通信。上述提到的低代码应用路由可以用于表示低代码应用中的一个页面的标识。
这里提到的页面元素可以是指页面中的某一部分。即,在后续过程中提到的高代码页面中的属于低代码的至少部分页面元素,可以是指高代码页面中与低代码存在融合的至少部分页面元素。
为了使得高代码页面与低代码页面正常融合,并且,可以正常对融合的页面进行渲染,则可以将本说明书中的软件开发工具包(Software Development Kit,SDK)导入到应用平台的应用代码中(或者说是高代码页面所属平台的应用代码中),以通过该SDK来进行页面的渲染。该SDK为开发出低代码应用后,将该低代码应用封装为SDK得到的。
服务器可以确定发送该页面访问请求的用户所需访问的高代码页面是否与某个低代码应用路由相匹配,若是匹配,则说明该高代码页面与某个低代码页面存在融合(也就是说,若是匹配,则说明该高代码页面是一个融合了高代码和低代码的页面),则可以通过上述SDK获取该低代码应用路由对应低代码页面的配置文件,这里提到的配置文件可以包括低代码应用配置以及低代码应用路由对应的低代码页面的schema协议文件。
其中,低代码应用配置包括有应用基本配置、组件配置、插件配置以及数据服务配置。其中,应用基本配置为低代码应用所需运行的基础配置,如,低代码应用的应用标识appId,页面标识pageId。还可以包括低代码应用所使用的各种协议,如用户登录协议等。
其中,组件配置、插件配置以及数据服务配置可以分别用于表示低代码应用中组件、插件以及数据服务的属性以及相关参数。
需要说明的是,在一个低代码应用路由所对应的低代码应用发布后,可以将低代码应用路由与低代码应用路由对应的配置文件之间进行关联,并对应存储在数据库中,这里提到的低代码应用可以包含有多个低代码页面。
获取到低代码应用配置后,可以根据该低代码应用配置,对低代码元素进行实例化,得到实例化后的低代码元素。
上述提到的低代码元素包括页面元素(如:组件)以及抽象的低代码页面配置,低代码页面配置包括插件、数据服务等。需要说明的是,低代码应用中可以包括多个低代码页面,也就是说,低代码应用可以是通过低代码开发出的网页应用。
具体的,可以确定该低代码应用路由对应的组件以及插件,而后,可以根据该插件配置,将所述低代码应用路由对应的插件实例化,根据该组件配置,将该低代码应用路由对应的组件实例化,以及根据该数据服务配置,将该低代码应用路由对应的数据服务进行实例化。也就是说,实例化出的组件、插件以及数据服务,为上述提到的实例化出的低代码元素。
在调用SDK后,需要对SDK进行初始化,进行对低代码元素的实例化。
SDK初始化将读取低代码应用配置和schema协议文件,低代码应用启动之前需要保证SDK初始化状态成功,具体过程如图2所示。
图1为本说明书中提供的一种SDK初始化的流程示意图。
可以看出,在进行SDK初始化时,可以先读取配置文件,并对匹配上的低代码应用路由所对应的低代码应用进行初始化,包括加载组件库、初始化插件以及启动数据服务等。
其中,组件(组件包packages)初始化后,在后续渲染过程中,可以由渲染引擎直接进行使用以进行渲染、插件(plugins)主要是面向开发人员提供低代码框架灵活的扩展能力,数据服务(services):数据服务主要在低代码应用中建立前端页面和后端服务的连接。
SDK初始化完成以后,可以开始进行各低代码元素的实例化。
S106:根据所述配置文件中的schema协议文件和所述实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染以及将所述高代码页面中的其他页面元素进行渲染,以得到渲染出的高代码页面,并向所述用户进行页面展示。
而后,可以根据schema协议文件以及实例化出的低代码元素,对高代码页面中的属于低代码的至少部分页面元素进行渲染,以将高代码页面渲染,并向用户进行页面展示。
其中,上述提到的schema协议文件是指描述页面文档结构的配置文件(可以是JSON文件),下面是schema协议文件的一种示例。
schema协议文件中存在有组件节点(Component)、区块节点(Block)和根节点(Page).
1.组件节点对应的组件是页面搭建的最小单位,使用者无需感知组件内部实现。
2.区块节点是一个或多个组件的集合,封装了某一类特定场景的业务逻辑。使用者可以变更其中任意组件的配置。
3.根节点主要用于页面初始化,每一个页面必须包含一个根节点。上述提到的使用者可以是指低代码应用的开发人员。
由于高代码页面中的部分页面可能是通过低代码构建出的,或者高代码页面中存在可以与低代码页面之间进行通信的页面元素。
因此,进行页面渲染时,需要根据上述schema协议文件和实例化出的低代码元素,将高代码页面中属于低代码的至少部分页面元素进行渲染,以及将高代码页面中的其他页面元素进行渲染,以得到渲染出的高代码页面,并向用户进行页面展示。
其他页面元素是通过高代码开发出的,只需要按照常规的对高代码的页面渲染方式进行渲染即可。
schema协议文件描述有低代码页面中组件之间的关系,组件之间可以是包含关系,例如,组件A中可以包含有组件B,组件B可以包含有组件C,当然,组件之间可以为并列关系,组件D与组件E可以并列的处于低代码页面中。
需要说明的是,在进行渲染时,可以从schema协议文件中确定出上述高代码页面中属于低代码的部分页面元素,并对这些页面元素进行渲染。
基于此,可以对所述schema协议文件进行解析,得到该schema协议文件中描述出的组件以及组件之间的关系,并根据该schema协议文件中描述出的所需组件以及所需组件之间的关系,确定组件树。
而后,可以根据该组件树,确定schema协议文件中包含的若干区块节点,并针对每个区块节点,递归地确定出该区块节点中包含的子节点,并确定出该子节点对应的组件,根据实例化出的低代码元素,对该子节点对应的组件进行渲染,直到无法继续确定出该区块节点的子节点。
将schema协议文件中各区块节点中的子节点的组件渲染完成后,完成针对高代码页面中的属于低代码的至少部分页面元素进行渲染。
以上述schema为例,结合SDK初始化注入的组件信息,实现组件树的绘制还是比较容易实现的:
也就是说,schema协议文件中描述的组件之间的关系可以理解为一个树状结构,称之为组件树,组件树的根节点包含所有组件所对应的节点,根节点下存在的每个区块节点是并列的,可以理解为区块节点包含多个组件,或者区间节点本身就是一个组件,因此,可以递归地,或者说遍历地确定出区块节点下的每个子节点,每个子节点可以对应一个组件,并渲染这个子节点对应的组件。
当然,子节点下也可以存在有子节点,即,子节点所对应的组件可以包含有其他组件,在递归时,需要遍历的对区块节点中的每个组件进行渲染。
在进行渲染时,需要考虑到两点:
1、组件的数据模型,在对一个组件进行渲染时,需要对该组件的数据模型进行动态解析,以得到该组件所需的参数,其中,数据模型的数据来源包括异步请求、全局变量、上下文状态、其他组件数据模型。
异步请求是指组件所需的参数需要通过异步请求从后端获得,例如,从数据库中获得。全局变量是指组件所需的参数是全局的公共参数,例如,用于判断用户是否登录的参数,是一个全局变量。上下文状态可以是指组件所需的参数来源于与该组件具有上下文关系(如父子节点,即包含关系或被包含关系)关系的组件。其他组件数据模型可以是指所需的参数来源于与组件为并列关系的组件所对应的参数。
基于schema协议文件,可以根据组件的组件配置对组件进行渲染,每次组件配置变更都会自动被收集。组件树的绘制逻辑上需要将组件配置中的信息动态绑定到组件上,实现组件的响应式更新。
组件中的x-field字段表示组件数据模型,SDK中withBind方法实现了类似React高阶组件的能力(HOC),通过收集x-field字段绑定的数据模型,作为参数传递给了组件。
以单选框组件Radio组件为例,schema协议文件中对应的组件配置项如下:
2、组件的交互联动,如图3所示。
图3为本说明书中提供的一种组件交互联动的示意图。
组件的交互联动可以基于schema协议文件的x-reactions字段来实现,以图3中示例,图中包含三个组件,类型1、类型2分别为两个单选框组件,矩形框为输入表单组件,从图中“选中类型2时不可点”可以看出,当选中类型2时,输入表单组件的输入表单项为禁用状态(disabled),选中类型1则为正常可编辑状态。
以下面代码为例,当`radioGroup`单选框组件选中类型1时,`InputText`为禁用状态(`disabled`),选中其他值则为正常可编辑状态。这里关键的配置在于`x-reactions`的`expressions`配置,`expressions`下的组件属性支持js表达式,表达式可以获取当前上下文`x-field`定义的属性值。
/>
这里关键的配置在于x-reactions的expressions配置,expressions下的组件属性支持js表达式,表达式可以获取当前上下文x-field定义的属性值。
从上述方法中可以看出,本说明书提供的基于前端高低代码融合的页面展示方法,在用户发送了访问请求后,可以根据用户所需访问的高代码页面的访问路径是否与低代码应用路由相匹配,则可以调用SDK,通过SDK来获取所需的低代码页面元素的相关配置,实例化所需的低代码元素,这里提到的低代码元素可以包括所需的低代码页面元素。从而将高代码页面中融合有的属于低代码的至少部分页面元素进行渲染,进而渲染出整张融合有低代码的高代码页面。
从上述内容中可以看出:
(1)本方法基于SDK将低代码构建产物融合到已有高代码系统,避免低代码平台的技术孤立性问题。
(2)可以实现多种高低代码融合形态,如图4所示.
图4为本说明书中提供的一种各高低代码融合形态的示意图。
各高低代码融合形态包括菜单重组、页面嵌套、页面级通信等,菜单重组是个一个网页应用中可以同时存在有高代码和低代码页面,并通过菜单进行组合,页面嵌套是指高代码页面中可以嵌入低代码,页面级通信是指高代码页面和低代码页面之间可以进行通信,并且本方法可以基于已有的工程化服务体系统一运维。
(3)该方法为SDK提供了应用初始化、资源管理、协议解析和页面渲染的能力,并为数据模型绑定和组件交互联动提供解决方案。
(4)本发明实现的技术方案通用性较强,接入成本低,在WEB中后台业务领域实现前端高低代码融合有参考价值。
以上为本说明书的一个或多个实施例提供的基于前端高低代码融合的页面展示装置方法,基于同样的思路,本说明书还提供了基于前端高低代码融合的页面展示装置装置,如图5所示。
图5为本说明书提供的一种基于前端高低代码融合的页面展示装置示意图,包括:
接收模块501,用于接收用户的页面访问请求;
确定模块502,用于根据所述页面访问请求,确定所述用户需要访问的高代码页面;
实例化模块503,用于若确定所述高代码页面对应的访问路径与预设的低代码应用路由相匹配,调用预设的软件开发工具包SDK,以通过所述SDK根据所述低代码应用路由,确定出所述低代码应用路由对应的配置文件,并根据所述低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素,所述配置文件包括低代码应用配置以及所述低代码应用路由对应低代码页面的schema协议文件;
渲染模块504,用于根据所述schema协议文件和所述实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染以及将所述高代码页面中的其他页面元素进行渲染,以得到渲染出的高代码页面,并向所述用户进行页面展示。
可选地,所述装置还包括:
存储模块505,用于在所述低代码应用路由所对应的低代码应用发布后,将所述低代码应用路由与所述低代码应用路由对应的配置文件之间进行关联,并对应存储在数据库中。
可选地,所述低代码应用配置包括应用基本配置、组件配置、插件配置以及数据服务配置;
所述实例化模块503具体用于,确定所述低代码应用路由对应的组件以及插件;根据所述插件配置,将所述低代码应用路由对应的插件实例化,根据所述组件配置,将所述低代码应用路由对应的组件实例化,以及根据所述数据服务配置,对所述低代码应用路由对应的数据服务进行实例化,将实例化后的插件、实例化后的组件以及实例化后的数据服务,作为实例化出的低代码元素。
可选地,所述渲染模块504还用于,对所述schema协议文件进行解析,得到所述schema协议文件中描述出的组件以及组件之间的关系;根据所述schema协议文件中描述出的组件以及组件之间的关系,确定组件树。
可选地,所述渲染模块504具体用于,根据所述组件树,确定所述schema协议文件中包含的若干区块节点;针对每个区块节点,递归地确定出该区块节点中包含的子节点,并确定出所述子节点对应的组件,根据所述实例化出的低代码元素,对所述子节点对应的组件进行渲染,直到无法继续确定出该区块节点的子节点;将所述schema协议文件中各区块节点中的子节点的组件渲染完成后,完成针对所述高代码页面中的属于低代码的至少部分页面元素进行渲染。
可选地,所述高代码页面所对应的应用代码中导入有所述SDK。
本说明书还提供了一种计算机可读存储介质,该存储介质存储有计算机程序,计算机程序可用于执行上述基于前端高低代码融合的页面展示装置方法。
本说明书还提供了图6所示的电子设备的示意结构图。如图6所述,在硬件层面,该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器,当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行,以实现上述基于前端高低代码融合的页面展示装置方法。
当然,除了软件实现方式之外,本说明书并不排除其他实现方式,比如逻辑器件抑或软硬件结合的方式等等,也就是说以下处理流程的执行主体并不限定于各个逻辑单元,也可以是硬件或逻辑器件。
在20世纪90年代,对于一个技术的改进可以很明显地区分是硬件上的改进(例如,对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而,随着技术的发展,当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此,不能说一个方法流程的改进就不能用硬件实体模块来实现。例如,可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray,FPGA))就是这样一种集成电路,其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上,而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且,如今,取代手工地制作集成电路芯片,这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现,它与程序开发撰写时所用的软件编译器相类似,而要编译之前的原始代码也得用特定的编程语言来撰写,此称之为硬件描述语言(Hardware Description Language,HDL),而HDL也并非仅有一种,而是有许多种,如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等,目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚,只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中,就可以很容易得到实现该逻辑方法流程的硬件电路。
控制器可以按任何适当的方式实现,例如,控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit,ASIC)、可编程逻辑控制器和嵌入微控制器的形式,控制器的例子包括但不限于以下微控制器:ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320,存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道,除了以纯计算机可读程序代码方式实现控制器以外,完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件,而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至,可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
上述实施例阐明的系统、装置、模块或单元,具体可以由计算机芯片或实体实现,或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的,计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。
为了描述的方便,描述以上装置时以功能分为各种单元分别描述。当然,在实施本说明书时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
本领域内的技术人员应明白,本说明书的实施例可提供为方法、系统、或计算机程序产品。因此,本说明书可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本说明书可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白,本说明书的实施例可提供为方法、系统或计算机程序产品。因此,本说明书可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本说明书可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书,在这些分布式计算环境中,由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中,程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
以上所述仅为本说明书的实施例而已,并不用于限制本说明书。对于本领域技术人员来说,本说明书可以有各种更改和变化。凡在本说明书的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本说明书的权利要求范围之内。
Claims (10)
1.一种基于前端高低代码融合的页面展示方法,其特征在于,包括:
接收用户的页面访问请求;
根据所述页面访问请求,确定所述用户需要访问的高代码页面;
若确定所述高代码页面对应的访问路径与预设的低代码应用路由相匹配,调用预设的软件开发工具包SDK,以通过所述SDK根据所述低代码应用路由,确定出所述低代码应用路由对应的配置文件,并根据所述配置文件中的低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素;
根据所述配置文件中的schema协议文件和所述实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染以及将所述高代码页面中的其他页面元素进行渲染,以得到渲染出的高代码页面,并向所述用户进行页面展示。
2.如权利要求1所述的方法,其特征在于,接收用户的页面访问请求之前,所述方法还包括:
在所述低代码应用路由所对应的低代码应用发布后,将所述低代码应用路由与所述低代码应用路由对应的配置文件之间进行关联,并对应存储在数据库中。
3.如权利要求1所述的方法,其特征在于,所述低代码应用配置包括应用基本配置、组件配置、插件配置以及数据服务配置;
根据所述低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素,具体包括:
确定所述低代码应用路由对应的组件以及插件;
根据所述插件配置,将所述低代码应用路由对应的插件实例化,根据所述组件配置,将所述低代码应用路由对应的组件实例化,以及根据所述数据服务配置,对所述低代码应用路由对应的数据服务进行实例化,将实例化后的插件、实例化后的组件以及实例化后的数据服务,作为实例化出的低代码元素。
4.如权利要求1所述的方法,其特征在于,根据所述schema协议文件以及实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染之前,所述方法还包括:
对所述schema协议文件进行解析,得到所述schema协议文件中描述出的组件以及组件之间的关系;
根据所述schema协议文件中描述出的组件以及组件之间的关系,确定组件树。
5.如权利要求4所述的方法,其特征在于,根据所述schema协议文件以及实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染,具体包括:
根据所述组件树,确定所述schema协议文件中包含的若干区块节点;
针对每个区块节点,递归地确定出该区块节点中包含的子节点,并确定出所述子节点对应的组件,根据所述实例化出的低代码元素,对所述子节点对应的组件进行渲染,直到无法继续确定出该区块节点的子节点;
将所述schema协议文件中各区块节点中的子节点的组件渲染完成后,完成针对所述高代码页面中的属于低代码的至少部分页面元素进行渲染。
6.如权利要求1所述的方法,其特征在于,所述高代码页面所对应的应用代码中导入有所述SDK。
7.一种基于前端高低代码融合的页面展示的装置,其特征在于,包括:
接收模块,用于接收用户的页面访问请求;
确定模块,用于根据所述页面访问请求,确定所述用户需要访问的高代码页面;
实例化模块,用于若确定所述高代码页面对应的访问路径与预设的低代码应用路由相匹配,调用预设的软件开发工具包SDK,以通过所述SDK根据所述低代码应用路由,确定出所述低代码应用路由对应的配置文件,并根据所述低代码应用配置对低代码元素进行实例化,得到实例化出的低代码元素,所述配置文件包括低代码应用配置以及所述低代码应用路由对应低代码页面的schema协议文件;
渲染模块,用于根据所述schema协议文件和所述实例化出的低代码元素,通过所述SDK对所述高代码页面中的属于低代码的至少部分页面元素进行渲染以及将所述高代码页面中的其他页面元素进行渲染,以得到渲染出的高代码页面,并向所述用户进行页面展示。
8.如权利要求7所述的装置,其特征在于,所述装置还包括:
存储模块,用于在所述低代码应用路由所对应的低代码应用发布后,将所述低代码应用路由与所述低代码应用路由对应的配置文件之间进行关联,并对应存储在数据库中。
9.一种计算机可读存储介质,其特征在于,所述存储介质存储有计算机程序,所述计算机程序被处理器执行时实现上述权利要求1~6任一项所述的方法。
10.一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述程序时实现上述权利要求1~6任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311151118.XA CN117170669B (zh) | 2023-09-06 | 2023-09-06 | 一种基于前端高低代码融合的页面展示方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311151118.XA CN117170669B (zh) | 2023-09-06 | 2023-09-06 | 一种基于前端高低代码融合的页面展示方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN117170669A true CN117170669A (zh) | 2023-12-05 |
CN117170669B CN117170669B (zh) | 2024-06-14 |
Family
ID=88940836
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311151118.XA Active CN117170669B (zh) | 2023-09-06 | 2023-09-06 | 一种基于前端高低代码融合的页面展示方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN117170669B (zh) |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114036425A (zh) * | 2021-11-24 | 2022-02-11 | 上海哔哩哔哩科技有限公司 | 页面访问方法、客户端、服务端及系统 |
CN114637937A (zh) * | 2022-03-08 | 2022-06-17 | 青岛海信网络科技股份有限公司 | 页面显示方法、装置、电子设备及计算机可读存储介质 |
CN114924826A (zh) * | 2022-06-09 | 2022-08-19 | 北京百度网讯科技有限公司 | 基于不同的代码平台的页面融合方法、装置和设备 |
CN115167838A (zh) * | 2022-06-21 | 2022-10-11 | 杭州指令集智能科技有限公司 | 一种基于低代码的通用商业化系统及其构建方法 |
CN115617327A (zh) * | 2022-11-08 | 2023-01-17 | 浙江极氪智能科技有限公司 | 低代码页面搭建系统、方法及计算机可读存储介质 |
CN116243893A (zh) * | 2023-02-01 | 2023-06-09 | 福建新大陆软件工程有限公司 | 一种低代码出码方法 |
CN116643745A (zh) * | 2022-02-15 | 2023-08-25 | 华为云计算技术有限公司 | 代码开发方法、装置及设备 |
-
2023
- 2023-09-06 CN CN202311151118.XA patent/CN117170669B/zh active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114036425A (zh) * | 2021-11-24 | 2022-02-11 | 上海哔哩哔哩科技有限公司 | 页面访问方法、客户端、服务端及系统 |
CN116643745A (zh) * | 2022-02-15 | 2023-08-25 | 华为云计算技术有限公司 | 代码开发方法、装置及设备 |
CN114637937A (zh) * | 2022-03-08 | 2022-06-17 | 青岛海信网络科技股份有限公司 | 页面显示方法、装置、电子设备及计算机可读存储介质 |
CN114924826A (zh) * | 2022-06-09 | 2022-08-19 | 北京百度网讯科技有限公司 | 基于不同的代码平台的页面融合方法、装置和设备 |
CN115167838A (zh) * | 2022-06-21 | 2022-10-11 | 杭州指令集智能科技有限公司 | 一种基于低代码的通用商业化系统及其构建方法 |
CN115617327A (zh) * | 2022-11-08 | 2023-01-17 | 浙江极氪智能科技有限公司 | 低代码页面搭建系统、方法及计算机可读存储介质 |
CN116243893A (zh) * | 2023-02-01 | 2023-06-09 | 福建新大陆软件工程有限公司 | 一种低代码出码方法 |
Non-Patent Citations (1)
Title |
---|
文建全 等: "无代码平台技术及其在HIS系统中的应用", 电脑与信息技术, no. 05, 15 October 2020 (2020-10-15), pages 34 - 36 * |
Also Published As
Publication number | Publication date |
---|---|
CN117170669B (zh) | 2024-06-14 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN107562467B (zh) | 页面渲染方法、装置及设备 | |
CN107545030B (zh) | 数据血缘关系的处理方法、装置及设备 | |
CN109002362B (zh) | 一种服务方法、装置、系统以及电子设备 | |
CN116841988A (zh) | 应用于区块链的数据迁移方法、装置和设备 | |
CN112162915B (zh) | 一种测试数据生成方法、装置、设备及存储介质 | |
CN115756449B (zh) | 一种页面复用方法、装置、存储介质及电子设备 | |
CN112181378B (zh) | 业务流程的实现方法及装置 | |
CN116483859A (zh) | 数据查询方法及装置 | |
CN112559934A (zh) | 一种页面弹窗显示方法及装置 | |
CN117033527B (zh) | 一种知识图谱的构建方法、装置、存储介质及电子设备 | |
CN116436936B (zh) | 一种数据存储系统、方法、存储介质及电子设备 | |
WO2024041301A1 (zh) | 一种生成统一抽象语法树与程序分析的方法和装置 | |
CN116341642B (zh) | 一种数据处理的方法、装置、存储介质及电子设备 | |
CN108520448A (zh) | 事件管理方法及装置 | |
CN116432185B (zh) | 一种异常检测方法、装置、可读存储介质及电子设备 | |
CN117170669B (zh) | 一种基于前端高低代码融合的页面展示方法 | |
CN110874322B (zh) | 一种用于应用程序的测试方法及测试服务器 | |
CN115391378A (zh) | 一种属性图的查询方法、装置及设备 | |
CN117519733B (zh) | 一种项目部署方法、装置、存储介质及电子设备 | |
CN117041980B (zh) | 一种网元管理方法、装置、存储介质及电子设备 | |
CN110704742A (zh) | 一种特征提取方法及装置 | |
CN116668542B (zh) | 一种增强型服务架构下基于异构资源绑定的业务执行方法 | |
CN117573359B (zh) | 一种基于异构集群的计算框架管理系统及方法 | |
CN112925527B (zh) | 一种调用方法、装置、存储介质及电子设备 | |
CN117118523B (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 |