CN114327434A - 一种网页表格生成方法及装置、计算机可读存储介质 - Google Patents
一种网页表格生成方法及装置、计算机可读存储介质 Download PDFInfo
- Publication number
- CN114327434A CN114327434A CN202111602385.5A CN202111602385A CN114327434A CN 114327434 A CN114327434 A CN 114327434A CN 202111602385 A CN202111602385 A CN 202111602385A CN 114327434 A CN114327434 A CN 114327434A
- Authority
- CN
- China
- Prior art keywords
- component
- rendering
- configuration
- attribute
- configuration information
- 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
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明实施例公开了一种网页表格生成方法,其特征在于,方法应用于终端,方法包括:获取表格生成请求;其中,表格生成请求中携带表格全局配置及其对应的组件信息;组件信息包括:组件配置;其中,组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型;基于组件配置,确定组件属性配置信息;基于表格全局配置、组件配置和组件属性配置信息,生成渲染请求并发送至服务器,以供服务器基于渲染请求,生成网页表格。上述方案支持对输入的属性代码进行校验,从而实现网页表格可视化搭建的方式多样性且复杂度低。
Description
技术领域
本发明涉及信息显示技术领域,尤其涉及一种网页表格生成方法及装置、计算机可读存储介质。
背景技术
目前,可以通过非LowCode化的代码库以及LowCode化的搭建功能以实现网页表格的生成。
但是,通过非LowCode化的代码库实现网页表格的生成方案中只是在代码层进行封装,无法面向非技术人员或者业务场景提供解决方案,无法实现可视化搭建的能力。而通过LowCode化的搭建功能实现网页表格的生成方案配置界面只能进行简单的代码录入,且生成的是静态HTML代码,需要前端开发人员介入。因此,实现网页表格可视化搭建的方式比较单一且复杂。
发明内容
本发明实施例期望提供一种网页表格生成方法及装置、设备、计算机可读存储介质,能够在实现可视化网页表格搭建的同时,实现网页表格可视化搭建的方式多样性且复杂度低。
本发明的技术方案是这样实现的:
本发明实施例提供了一种网页表格生成方法,所述方法应用于终端,所述方法包括:
获取表格生成请求;其中,所述表格生成请求中携带表格全局配置及其对应的组件信息;所述组件信息包括:组件配置;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;
基于所述组件配置,确定组件属性配置信息;
基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成渲染请求并发送至服务器,以供所述服务器基于所述渲染请求,生成网页表格。
上述方案中,所述基础组件包括:第一基础组件和第二基础组件;其中,第一基础组件为不可编辑组件,第二基础组件为可编辑组件;
所述基于所述组件配置,确定组件属性配置信息,包括:
响应于所述组件配置表征为所述外部组件或第一基础组件,根据组件信息,确定所述外部组件或第一基础组件对应的组件属性配置信息;
响应于所述组件配置表征为所述自定义组件或第二基础组件,接收编辑的属性代码;基于所述属性代码,确定所述自定义组件或第二基础组件对应的组件属性配置信息。
上述方案中,所述组件信息还包括:外部组件对应的组件原始属性配置信息和/或第一基础组件自带的属性编辑表单;所述根据组件信息,确定所述外部组件或第一基础组件对应的组件属性配置信息,包括:
响应于所述组件配置表征为所述外部组件,根据所述外部组件对应的组件原始属性配置信息,确定所述外部组件对应的组件属性配置信息。
响应于所述组件配置表征为所述第一基础组件,根据所述第一基础组件自带的属性编辑表单的选择操作,确定所述第一基础组件对应的组件属性配置信息。
上述方案中,所述基于所述属性代码,确定所述自定义组件或第二基础组件对应的组件属性配置信息,包括:
对所述属性代码进行校验处理和编译处理,得到编译信息;
基于所述编译信息,确定所述自定义组件或第二基础组件对应的所述组件属性配置信息。
上述方案中,对所述属性代码进行校验处理和编译处理,得到编译信息,包括:
对所述属性代码进行语法校验,得到校验结果;
若所述校验结果表征所述属性代码不存在预设错误,则对所述属性代码进行编译,并得到对应的编译信息;
若所述校验结果表征所述属性代码存在预设错误,则生成第一错误提示,基于所述第一错误提示,接收下一次编辑的下一次属性代码进行处理,直至得到的不存在预设错误的第一目标属性代码时为止,对所述第一目标属性代码进行编译,并得到对应的编译信息。
上述方案中,所述编译信息包括编译结果和编译代码;
所述基于所述编译信息,确定所述自定义组件或第二基础组件对应的所述组件属性配置信息,包括:
若所述编译结果表征编译成功,则基于所述编译代码,生成样式表格,并对所述样式表格进行预览,得到预览结果;
若所述编译结果表征为编译不成功,则生成第二错误提示,基于所述第二错误提示,接收下一次编辑的下一次属性代码进行处理,直至得到的不存在预设错误的第二目标属性代码、且所述第二目标属性代码的编译后的编译结果表征成功为止;并基于所述第二目标属性代码的编译后的编译代码,生成样式表格,并对所述样式表格进行预览,得到预览结果;
基于所述预览结果,确定所述自定义组件或所述第二基础组件对应的所述组件属性配置信息。
上述方案中,所述基于所述预览结果,确定所述自定义组件或所述第二基础组件对应的所述组件属性配置信息,包括:
若所述预览结果表征成功,则将所述编译代码作为所述自定义组件或所述第二基础组件对应的所述组件属性配置信息;
若所述预览结果表征失败,则生成第三错误提示,基于所述第三错误提示,接收下一次编辑的下一次属性代码进行处理,直至得到的不存在预设错误的第三目标属性代码、所述第三目标属性代码的编译后的编译结果表征成功、且预览结果表征成功的所述第三目标属性代码的编译代码为止,将所述编译代码作为所述自定义组件或所述第二基础组件对应的所述组件属性配置信息。
上述方案中,当所述组件配置表征为所述自定义组件或第二基础组件时,所述接收编辑的属性代码,包括:
响应于所述组件配置表征为所述自定义组件,生成编辑器,通过所述编辑器接收编辑的与所述自定义组件对应的所述属性代码;
响应于所述组件配置表征为所述第二础组件,通过自带的编辑功能,接收编辑的与所述第二基础组件对应的所述属性代码。
上述方案中,所述基于组件原始属性配置信息,确定所述外部组件对应的组件属性配置信息,包括:
基于所述组件原始属性配置信息,生成属性面板;
基于对所述属性面板的选择操作,确定所述外部组件对应的组件属性配置信息。
上述方案中,所述基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成渲染请求并发送至服务器,包括:
基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成符合JSONSchema的配置数据;
基于所述配置数据,生成所述渲染请求并发送至所述服务器。
上述方案中,所述组件配置还包括:不同类型的组件的优先级;所述基于所述组件配置,确定组件属性配置信息,包括:
根据所述不同类型的组件的优先级,确定不同类型组件的执行顺序;
基于所述执行顺序,分别确定不同类型的组件的组件属性配置信息;
其中,所述基础组件的优先级高于所述外部组件,所述外部组件的优先级高于所述自定义组件。
本发明实施例提供了一种网页表格生成方法,所述方法应用于服务器,所述方法包括:
接收终端发送的渲染请求和第三方发送的内容数据,其中,所述渲染请求携带表格全局配置及其对应的组件配置,以及与所述组件配置对应的组件属性配置信息;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;
基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到生成网页表格并发送至所述终端,供所述终端进行展示。
上述方案中,所述基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到生成网页表格并发送至所述终端,包括:
基于所述表格全局配置,进行全局配置渲染,得到第一渲染结果;
基于所述内容数据、所述组件配置和所述组件属性配置信息进行渲染,得到第二渲染结果;
基于所述第一渲染结果和所述第二渲染结果,得到所述网页表格并发送所述网页表格至所述终端。
上述方案中,所述基于所述内容数据、所述组件配置和所述组件属性配置信息进行渲染,得到第二渲染结果,包括:
根据所述组件配置,确定渲染HTML的组件;所述渲染HTML的组件对应所述外部组件、所述基础组件和所述可编辑的自定义组件中的至少一种;
利用与渲染HTML的组件对应的所述组件属性配置信息,对将所述渲染HTML的组件进行实例化,得到渲染组件实例;
调用渲染函数,对所述渲染组件实例进行HTML标签渲染,以及对所述内容数据进行数据渲染,得到所述第二渲染结果。
上述方案中,所述调用渲染函数,对所述渲染组件实例进行HTML标签渲染,以及对所述内容数据进行数据渲染,得到所述第二渲染结果,包括:
调用所述渲染函数,通过表格驱动器中的预设位置规则,将所述渲染组件实例放入对应的单元格配置项,实现HTML标签渲染,生成HTML标签;
通过所述表格驱动器中的预设位置规则,将所述内容数据放入对应的单元格配置项对应的内容单元格,实现数据渲染,得到单元格内容;将于所述HTML标签和所述单元格内容作为所述第二渲染结果。
上述方案中,所述根据所述组件配置,确定渲染HTML的组件,包括:
将所述组件配置表征的组件,确定为所述渲染HTML的组件。
上述方案中,所述利用与渲染HTML的组件对应的所述组件属性配置信息,对将所述渲染HTML的组件进行实例化,得到渲染组件实例,包括:
若所述渲染HTML的组件为所述外部组件,则与所述外部组件对应的组件属性配置信息进行实例化,获得外部组件实例;
若所述渲染HTML的组件为所述自定义组件,则利用与所述自定义组件对应的组件属性配置信息进行实例化,获得自定义组件实例;
若所述渲染HTML的组件为所述基础组件,则利用所述基础组件对应的组件属性配置信息进行实例化,获得基础组件实例;
将所述外部组件实例、所述自定义组件实例和所述基础组件实例作为所述渲染组件实例。
上述方案中,所述利用与所述自定义组件对应的组件属性配置信息进行实例化,获得自定义组件实例,包括:
对所述自定义组件对应的组件属性配置信息进行解析,获取解析结果;
对所述解析结果行实例化,得到所述自定义组件实例。
上述方案中,所述外部组件对应的组件属性配置信息包括:所述外部组件对应的组件原始属性配置信息中被选中的组件属性配置信息;
所述自定义组件对应的组件属性配置信息包括:编译成功的编译代码,该编译代码是通过编辑器接收编辑的属性代码被校验和编译后的代码;
所述基础组件对应的组件属性配置信息包括:基于所述基础组件自带的属性编辑表单被选中的组件属性配置信息;或者,编译成功的编译代码,该编译代码是通过所述基础组件自带的编辑功能接收编辑的属性代码被校验和编译后的代码。
上述方案中,所述基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到生成网页表格之前,所述方法还包括:
对所述内容数据进行完整性校验,得到完整性校验结果;
所述基于所述内容数据、所述表格全局配置及其对应的组件信息,进行渲染处理,得到生成网页表格,包括:
若所述完整性校验结果表征成功,则基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到所述生成网页表格。
上述方案中,所述对所述内容数据进行完整性校验,得到完整性校验结果之后,所述方法还包括:
若所述完整性校验结果表征失败,则提示内容错误信息,基于所述内容错误信息,接收第三方发送的下一次内容数据;
基于所述下一次内容数据,继续进行网页表格生成过程。
上述方案中,所述渲染请求携带有符合JSON Schema的配置数据,所述配置数据可解析出所述表格全局配置及其对应的所述组件配置,以及与所述组件配置对应的所述组件属性配置信息。
本发明实施例提供了一种网页表格生成装置,包括获取模块,处理模块和第一发送模块;其中,
所述获取模块,用于获取表格生成请求;其中,所述表格生成请求中携带表格全局配置及其对应的组件信息;所述组件信息包括:组件配置;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;
所述处理模块,用于基于所述组件配置,确定组件属性配置信息;还用于基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成渲染请求;
所述第一发送模块,用于发送所述渲染请求至服务器,以供所述服务器基于所述渲染请求,生成网页表格。
本发明实施例提供了一种网页表格生成装置,包括接收模块、渲染模块和第二发送模块;其中,
所述接收模块,用于接收终端发送的渲染请求和第三方发送的内容数据,其中,所述渲染请求携带表格全局配置及其对应的组件配置,以及与所述组件配置对应的组件属性配置信息;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;
所述渲染模块,用于基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到生成网页表格;
所述第二发送模块,用于发送所述网页表格至所述终端,供所述终端进行展示。
本发明实施例提供了一种终端,包括:
第一存储器,用于存储可执行指令;
第一处理器,用于执行所述第一存储器中存储的可执行指令时,实现本发明实施例的终端的所述的一种网页表格生成方法。
本发明实施例提供了一种服务器,包括:
第二存储器,用于存储可执行指令;
第二处理器,用于执行所述第二存储器中存储的可执行指令时,实现本发明实施例的服务器侧的所述的一种网页表格生成方法。
本发明实施例提供了一种计算机可读存储介质,存储有可执行指令,用于引起第一处理器执行时,实现本发明实施例的终端的所述的一种网页表格生成方法;
本发明实施例提供了一种计算机可读存储介质,存储有可执行指令,用于引起第二处理器执行时,实现本发明实施例的服务器侧的所述的一种网页表格生成方法。
本发明实施例提供一种网页表格生成方法及装置、设备、计算机可读存储介质,上述方法应用于终端时包括:获取表格生成请求;其中,所述表格生成请求中携带表格全局配置及其对应的组件信息;所述组件信息包括:组件配置;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;基于所述组件配置,确定组件属性配置信息;基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成渲染请求并发送至服务器,以供所述服务器基于所述渲染请求,生成网页表格。
本发明实施例支持通过外部组件、基础组件和可编辑的自定义组件生成网页表格,实现网页表格可视化搭建,实现网页表格可视化搭建的方式多样性和兼容性;同时支持对输入的属性代码进行校验,从而降低对用户的专业性要求和复杂度。
附图说明
图1为本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图一;
图2为本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图二;
图3为本发明实施例提供的一种网页表格生成方法的一个可选的编辑器示意图;
图4为本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图三;
图5为本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图四;
图6为本发明实施例提供的一种网页表格生成方法的一个可选的渲染示意图;
图7(a)为本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图五;
图7(b)为本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图六;
图8为本发明实施例提供的一种网页表格生成装置的结构示意图;
图9为本发明实施例提供的另一种网页表格生成装置的结构示意图;
图10为本发明实施例提供的一种终端的结构示意图;
图11为本发明实施例提供的一种服务器的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部实施例。基于本发明的实施例,本领域普通技术人员在没有做出创造性劳动前提下,所获得的所有其他实施例,都属于本发明保护范围。
下面先进行名词解释。
可视化表格搭建:用可视化交互的方式对页面的HTML Table,Data和DynamicLogic进行配置、增删和修改,从而实现前端页面表格的生成。而表格可视化搭建工具是实现表格可视化编辑的软件工具。
JSON Schema:JSON Schema is a vocabulary that allows you to annotateand validate JSON documents。
LowCode:是一种可视化应用开发方法。通过低代码开发,不同经验水平的开发人员能够通过图形用户界面,使用拖放式组件和模型驱动逻辑来创建Web和移动应用。
ES6:ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。
TypeScript:TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。
Babel:Babel是一个JavaScript编译器。
Eslint:Eslint是一个检验JS代码格式的工具。
Tslint:TsLint是TypeScript代码的样式风格检查工具。
Ajv:是一个JSON Schema标准的验证器。
Npm:是JavaScript的包管理工具,并且是Node.js平台的默认包管理工具。
微前端:是一种类似于微服务的架构,它将微服务的理念应用于浏览器端。
IFRAME:是一种HTML标签。
为了使本技术领域的人员更好地理解本发明方案,下面结合附图和具体实施方式对本发明作进一步的详细说明。
本发明实施例中,使用Builder的可视化搭建工具搭建表格,配置组件属性,如果不能满足业务场景,配置自定义组件,然后在线编写带嵌入模板数据的渲染逻辑,最后生成JSON Schema配置数据。通过Table渲染器动态渲染表格,最终实现业务方不经过开发,可直接完成表格相关业务需求。
本发明实施例的框架的主要功能分为两部分:可视化搭建(Builder)对应终端、表格渲染(Table)对应服务器。
图1是本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图一,应用于终端,将结合图1示出的步骤进行说明。
S101、获取表格生成请求。
在本发明的一些实施例中,表格生成请求中携带表格全局配置及其对应的组件信息;组件信息包括:组件配置;其中,组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;其中,基础组件包括:第一基础组件和第二基础组件;第一基础组件为不可编辑组件,第二基础组件为可编辑组件。
在本发明的一些实施例中,终端可以获取表格生成请求。
S102、基于组件配置,确定组件属性配置信息。
在本发明的一些实施例中,终端响应于组件配置表征为外部组件或第一基础组件,通过组件信息,确定外部组件或第一基础组件对应的组件属性配置信息;响应于组件配置表征为自定义组件或第二基础组件,接收编辑的属性代码;基于属性代码,确定自定义组件或第二基础组件对应的组件属性配置信息。
需要说明的是,属性代码为LowCode代码;LowCode代码支持ES6和TypeScript语言。ES6:ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015);TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。LowCode是一种可视化应用开发方法。通过低代码开发,不同经验水平的开发人员能够通过图形用户界面,使用拖放式组件和模型驱动逻辑来创建Web和移动应用。
在本发明的一些实施例中,图2是本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图二,S102可以通过S1021-S1022实现,如下:
S1021、响应于组件配置表征为外部组件或第一基础组件,根据组件信息,确定外部组件或第一基础组件对应的组件属性配置信息。
在本发明的一些实施例中,组件信息还包括:外部组件对应的组件原始属性配置信息和/或第一基础组件自带的属性编辑表单。
在本发明的一些实施例中,如果终端响应于组件配置表征为外部组件,根据外部组件对应的组件原始属性配置信息,将组件原始属性配置信息确定为外部组件对应的组件属性配置信息;响应于组件配置表征为第一基础组件,根据第一基础组件自带的属性编辑表单的选择操作,确定第一基础组件对应的组件属性配置信息;应于组件配置表征为外部组件和第一基础组件同时存在,可以通过外部组件对应的组件原始属性配置信息和第一基础组件自带的属性编辑表单的选择操作,确定外部组件和第一基础组件各自对应的组件属性配置信息。
在本发明的一些实施例中,S1021可以通过S10211-S10212实现,如下:
S10211、响应于组件配置表征为外部组件,根据外部组件对应的组件原始属性配置信息,确定外部组件对应的组件属性配置信息。
在本发明的一些实施例中,终端响应于组件配置表征为外部组件,通过调用的方式获取外部组件对应的组件原始属性配置信息;并通过组件原始属性配置信息,确定外部组件对应的组件属性配置信息。
示例性的,终端可以通过组件原始属性配置信息,生成属性面板;通过对属性面板的选择操作,确定外部组件对应的组件属性配置信息。
需要说明的是,组件原始属性配置信息为以NPM、微前端、IFRAME方式接入的组件对应的原始属性配置信息,属性面板为以NPM、微前端、IFRAME方式接入的组件对应的属性面板。NPM是JavaScript的包管理工具,并且是Node.js平台的默认包管理工具;微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端;IFRAME是一种HTML标签。
S10212、响应于组件配置表征为第一基础组件,根据第一基础组件自带的属性编辑表单的选择操作,确定第一基础组件对应的组件属性配置信息。
在本发明的一些实施例中,终端响应于组件配置表征为第一基础组件,根据第一基础组件自带的属性编辑表单,选择第一基础组件对应的位置将属性编辑表单进行保存,获得第一基础组件对应的组件属性配置信息。
需要说明的是,第一基础组件自带的属性编辑表单是第一基础组件自身携带的一些固有属性配置信息。
可以理解的是,在本发明的一些实施例中,终端可以对组件配置类型进行判断,当组件配置表征为外部组件时,根据外部组件对应的组件原始属性配置信息,确定外部组件对应的组件属性配置信息;当组件配置表征为第一基础组件时,根据第一基础组件自带的属性编辑表单的选择操作,确定第一基础组件对应的组件属性配置信息,当组件配置表征为外部组件和第一基础组件同时存在时,根据外部组件对应的组件原始属性配置信息和第一基础组件自带的属性编辑表单,确定外部组件和第一基础组件各自对应的组件属性配置信息;为生成渲染请求做铺垫。
S1022、响应于组件配置表征为自定义组件或第二基础组件,接收编辑的属性代码;基于属性代码,确定自定义组件或第二基础组件对应的组件属性配置信息。
在本发明的一些实施例中,当组件配置表征为自定义组件或第二基础组件时,终端可以接收编辑的属性代码,对属性代码进行校验处理和编译处理,得到编译信息,基于编译信息,确定自定义组件或第二基础组件对应的组件属性配置信息。
示例性的,终端响应于组件配置表征为自定义组件,可以生成编辑器,通过编辑器接收编辑的与自定义组件对应的属性代码;响应于组件配置表征为第二础组件,通过自带的编辑功能,接收编辑的与第二基础组件对应的属性代码。
示例性的,图3是本发明实施例提供的一种网页表格生成方法的一个可选的编辑器示意图,如图3所示,存在可编辑页面、广告组组件、自定义组件和属性设置;其中,广告组组件包括促销模版、排序组件、状态模版、角标模版、广告ID标签和广告连接;自定义组件包括自定义;属性设置包括表头名称、表格列宽和自定义渲染。
可以理解的是,在本发明的一些实施例中,终端可以对组件配置类型进行判断,当组件配置表征为外部组件或第一基础组件时,根据组件信息,确定外部组件或第一基础组件对应的组件属性配置信息;当组件配置表征为自定义组件或第二基础组件时,接收编辑的属性代码;基于属性代码,确定自定义组件或第二基础组件对应的组件属性配置信息,为生成渲染请求做铺垫。
在本发明的一些实施例中,S1022可以通过S10221-S10222实现,如下:
S10221、对属性代码进行校验处理和编译处理,得到编译信息。
在本发明的一些实施例中,终端首先可以对属性代码进行语法校验,得到校验结果;若校验结果表征属性代码不存在预设错误,则对属性代码进行编译,并得到对应的编译信息;若校验结果表征属性代码存在预设错误,则生成第一错误提示,在第一错误提示下,接收下一次编辑的下一次属性代码进行处理,直至得到不存在预设错误的第一目标属性代码时为止,对第一目标属性代码进行编译,并得到对应的编译信息。
需要说明的是,预设错误包括预设语法错误、预设词法错误;预设错误是采用Eslint和Tslint实现。第一错误提示可以是在属性代码出错的地方高亮标注,也可以是其他形式的提醒,本发明实施例不作限制。Eslint是一个检验JS代码格式的工具;TsLint是TypeScript代码的样式风格检查工具。
S10222、基于编译信息,确定自定义组件或第二基础组件对应的组件属性配置信息。
在本发明的一些实施例中,编译信息包括编译结果和编译代码。
在本发明的一些实施例中,终端可以对编译信息中的编译结果进行校验,若编译结果表征编译成功,则基于编译代码,生成样式表格,并对样式表格进行预览,得到预览结果;若编译结果表征为编译不成功,则生成第二错误提示,在第二错误提示下,接收下一次编辑的下一次属性代码进行处理,直至得到不存在预设错误的第二目标属性代码、且第二目标属性代码的编译后的编译结果表征成功为止;并基于第二目标属性代码的编译后的编译代码,生成样式表格,并对样式表格进行预览,得到预览结果;基于预览结果,确定自定义组件或第二基础组件对应的组件属性配置信息。
示例性的,终端可以对预览结果进行校验,若预览结果表征成功,则将编译代码作为自定义组件或第二基础组件对应的组件属性配置信息;若预览结果表征失败,则生成第三错误提示,在第三错误提示下,接收下一次编辑的下一次属性代码进行处理,直至得到不存在预设错误的第三目标属性代码、第三目标属性代码的编译后的编译结果表征成功、且预览结果表征成功的第三目标属性代码的编译代码为止,将编译代码作为自定义组件或第二基础组件对应的所述组件属性配置信息。
需要说明的是,第二错误提示可以是在属性代码出错的地方高亮标注,第三错误提示可以是直接出现“不符合要求”提示窗口。第二错误提示和第三错误提示也可以是其他形式的提醒,本发明实施例不作限制。
可以理解的是,在本发明的一些实施例中,终端可以通过对属性代码进行校验处理和编译处理,得到编译信息;基于编译信息,确定自定义组件或第二基础组件对应的组件属性配置信息,为生成渲染请求做铺垫。
在本发明的一些实施例中,S102还可以通过S1023-S1024实现,如下:
S1023、根据不同类型的组件的优先级,确定不同类型组件的执行顺序。
在本发明的一些实施例中,如果是同时要对多种类型的组件进行处理的时候,此时,就会存在不同类型的组件的优先级;优先级为:基础组件的优先级高于外部组件,外部组件的优先级高于自定义组件。
在本发明的一些实施例中,终端可以根据基础组件的优先级高于外部组件,外部组件的优先级高于自定义组件,确定不同类型组件的执行顺序;执行顺序是先执行基础组件,再执行外部组件,最后执行自定义组件。
S1024、基于执行顺序,分别确定不同类型的组件的组件属性配置信息。
在本发明的一些实施例中,终端可以根据先执行基础组件,再执行外部组件,最后执行自定义组件的执行顺序,分别确定不同类型的组件的组件属性配置信息。
示例性的,终端可以通过先执行基础组件,再执行外部组件,最后执行自定义组件的执行顺序,其中,基础组件包括第一基础组件和第二基础组件;先根据第一基础组件自带的属性编辑表单,进行选择操作,确定第一基础组件的组件属性配置信息;同时,根据第二基础组件接收的属性代码,进行校验处理、编译处理和预览处理,确定基础组件的组件属性配置信息;再根据外部组件对应的组件原始属性配置信息,将组件原始属性配置信息作为外部组件的组件属性配置信息;最后,根据自定义组件接收的属性代码,进行校验处理、编译处理和预览处理,确定自定义组件的组件属性配置信息。
可以理解的是,在本发明的一些实施例中,终端可以根据不同类型的组件的优先级,确定不同类型组件的执行顺序;基于执行顺序,分别确定不同类型的组件的组件属性配置信息,为生成渲染请求做铺垫。
S103、基于表格全局配置、组件配置和组件属性配置信息,生成渲染请求并发送至服务器,以供服务器基于渲染请求,生成网页表格。
在本发明的一些实施例中,终端可以基于表格全局配置、组件配置和组件属性配置信息,生成符合JSON Schema的配置数据;基于配置数据,生成渲染请求并发送至服务器。
可以理解的是,在本发明的一些实施例中,终端可以通过获取表格生成请求;基于组件配置,确定组件属性配置信息;基于表格全局配置、组件配置和组件属性配置信息,生成渲染请求并发送至服务器,以供服务器基于渲染请求,生成网页表格,本方案实现时可以兼容外部组件和基础组件,实现网页表格可视化搭建的方式多样性且复杂度低。
在本发明的一些实施例中,图4是本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图三,应用于服务器,将结合图4示出的步骤进行说明。
S201、接收终端发送的渲染请求和第三方发送的内容数据。
在本发明的一些实施例中,渲染请求携带表格全局配置及其对应的组件信息;组件信息包括:组件配置;其中,组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;同时,渲染请求携带有符合JSON Schema的配置数据,配置数据可解析出表格全局配置及其对应的组件配置,以及与组件配置对应的组件属性配置信息。
需要说明的是,渲染请求还可以携带LifeCycle生命周期、EventCallback回调,用于渲染。以及,还支持Drip-design和Antd-design主题包,用于渲染。本发明实施例不作限制。
在本发明的一些实施例中,服务器可以接收终端发送的渲染请求和第三方发送的内容数据。
S202、基于内容数据、表格全局配置、组件配置和组件属性配置信息,进行渲染处理,得到生成网页表格并发送至终端,供终端进行展示。
在本发明的一些实施例中,服务器可以基于表格全局配置,进行全局配置渲染,得到第一渲染结果;基于内容数据、组件配置和组件属性配置信息进行渲染,得到第二渲染结果;基于第一渲染结果和第二渲染结果,得到网页表格并发送网页表格至终端。
可以理解的是,在本发明的一些实施例中,服务器可以接收终端发送的渲染请求和第三方发送的内容数据;基于内容数据、表格全局配置、组件配置和组件属性配置信息,进行渲染处理,得到生成网页表格并发送至终端,供终端进行展示;本发明支持渲染定制化,根据用户需求生成自定义的网页表。
在本发明的一些实施例中,图5是本发明实施例提供的一种网页表格生成方法的一个可选的流程示意图四,S202可以通过S2021-S2023实现,如下:
S2021、基于表格全局配置,进行全局配置渲染,得到第一渲染结果。
在本发明的一些实施例中,服务器可以对表格全局配置进行全局配置渲染,得到第一渲染结果。
S2022、基于内容数据、组件配置和组件属性配置信息进行渲染,得到第二渲染结果。
在本发明的一些实施例中,服务器可以根据组件配置,确定渲染HTML的组件;利用与渲染HTML的组件对应的组件属性配置信息,对将渲染HTML的组件进行实例化,得到渲染组件实例;调用渲染函数,对渲染组件实例进行HTML标签渲染,以及对内容数据进行数据渲染,得到第二渲染结果。
在本发明的一些实施例中,S2022可以通过S20221-S20223实现,如下:
S20221、根据组件配置,确定渲染HTML的组件。
在本发明的一些实施例中,渲染HTML的组件对应外部组件、基础组件和可编辑的自定义组件中的至少一种。
在本发明的一些实施例中,服务器可以将组件配置表征的组件,确定为渲染HTML的组件。
示例性的,当组件配置表征的组件为外部组件时,服务器将外部组件确定为渲染HTML的组件;当组件配置表征的组件为基础组件时,服务器将基础组件确定为渲染HTML的组件;当组件配置表征的组件为可编辑的自定义组件时,服务器将可编辑的自定义组件确定为渲染HTML的组件;以上三种情况至少存在一种。
S20222、利用与渲染HTML的组件对应的组件属性配置信息,对将渲染HTML的组件进行实例化,得到渲染组件实例。
在本发明的一些实施例中,若渲染HTML的组件为外部组件,则服务器将与外部组件对应的组件属性配置信息进行实例化,获得外部组件实例。
需要说明的是,外部组件对应的组件属性配置信息包括:外部组件对应的组件原始属性配置信息中被选中的组件属性配置信息。
在本发明的一些实施例中,若渲染HTML的组件为自定义组件,则服务器利用与自定义组件对应的组件属性配置信息进行实例化,获得自定义组件实例。
示例性的,服务器可以对自定义组件对应的组件属性配置信息进行解析,获取解析结果;对解析结果行实例化,得到自定义组件实例。
需要说明的是,自定义组件对应的组件属性配置信息包括:编译成功的编译代码,该编译代码是通过编辑器接收编辑的属性代码被校验和编译后的代码。
在本发明的一些实施例中,若渲染HTML的组件为基础组件,则服务器利用基础组件对应的组件属性配置信息进行实例化,获得基础组件实例;将外部组件实例、自定义组件实例和基础组件实例作为渲染组件实例。
需要说明的是,基础组件对应的组件属性配置信息包括:基于基础组件自带的属性编辑表单被选中的组件属性配置信息;或者,编译成功的编译代码,该编译代码是通过所述基础组件自带的编辑功能接收编辑的属性代码被校验和编译后的代码。
S20223、调用渲染函数,对渲染组件实例进行HTML标签渲染,以及对内容数据进行数据渲染,得到第二渲染结果。
在本发明的一些实施例中,服务器调用渲染函数,通过表格驱动器中的预设位置规则,将渲染组件实例放入对应的单元格配置项,实现HTML标签渲染,生成HTML标签;通过表格驱动器中的预设位置规则,将内容数据放入对应的单元格配置项对应的内容单元格,实现数据渲染,得到单元格内容;将于HTML标签和单元格内容作为第二渲染结果。
可以理解的是,在本发明的一些实施例中,服务器可以根据组件配置,确定渲染HTML的组件;利用与渲染HTML的组件对应的组件属性配置信息,对将渲染HTML的组件进行实例化,得到渲染组件实例;调用渲染函数,对渲染组件实例进行HTML标签渲染,以及对内容数据进行数据渲染,得到第二渲染结果,实现网页表格可视化搭建的方式多样性且复杂度低。
S2023、基于第一渲染结果和第二渲染结果,得到网页表格并发送网页表格至终端。
在本发明的一些实施例中,服务器可以通过第一渲染结果和第二渲染结果,得到网页表格;还可以通过第一渲染结果、第二渲染结果以及服务器中的生命周期和事件回调,得到网页表格;将得到的网页表格发送至终端。
示例性的,图6是本发明实施例提供的一种网页表格生成方法的一个可选的渲染示意图,如图6所示,图中包含数据渲染、数据格式以及主题UI。数据渲染分为列表项渲染、全局配置渲染、生命周期和事件回调;其中,列表项渲染包括基础组件、外部组件、自定义组件和数据渲染;全局配置渲染包括搜索渲染、分页渲染、排序渲染、操作项渲染、固定列渲染、导出功能、栅格样式和备注信息;生命周期包括渲染完成、更新前和卸载前;事件回调包括数据操作事件、搜索事件、列表项筛选事件和分页事件。数据格式遵循Json Schema协议。主题UI包括Drip-design主题、Antd-design主题和其他主题。
可以理解的是,在本发明的一些实施例中,服务器可以基于表格全局配置,进行全局配置渲染,得到第一渲染结果;基于内容数据、组件配置和组件属性配置信息进行渲染,得到第二渲染结果;基于第一渲染结果和第二渲染结果,得到网页表格并发送网页表格至终端;实现网页表格可视化搭建的方式多样性且复杂度低。
在本发明的一些实施例中,在S202之前还执行S203,如下:
S203、对内容数据进行完整性校验,得到完整性校验结果。
在本发明的一些实施例中,服务器可以将内容数据进行完整性校验,得到完整性校验结果,若完整性校验结果表征成功,则基于内容数据、表格全局配置、组件配置和组件属性配置信息,进行渲染处理,得到生成网页表格;若完整性校验结果表征失败,则提示内容错误信息,基于内容错误信息,接收第三方发送的下一次内容数据;基于下一次内容数据,继续进行网页表格生成过程。
需要说明的是,服务器可以利用Ajv进行数据完整性校验。
可以理解的是,在本发明的一些实施例中,服务器可以对内容数据进行完整性校验,得到完整性校验结果,通过完整性校验结果,进行渲染处理,得到生成网页表格。
下面,将说明本发明实施例在一个实际的应用场景中的示例性应用。
在本发明的一些实施例中,网页表格生成方包括可视化搭建和表格渲染两部分;其中,可视化搭建是终端完成的,表格渲染是服务器完成的。
在本发明的一些实施例中,可视化搭建的步骤包括:根据用户的操作和配置渲染可编辑表格继而渲染单元格组件,渲染单元格组件包括外部组件、基础组件、自定义组件;如果当前组件是外部组件,支持NPM、微前端、IFRAME方式接入,生成属性面板;如果当前组件是自定义组件则生成代码编辑器,否则生成表格自带属性编辑表单;对于代码编辑器,输入代码(LowCode代码),然后利用Eslint和Tslint进行语法校验,如果词法或语法有错误则高亮提醒,提示用户修改,通过后进入下一步;对暂存的代码(LowCode代码)利用Babel编译工具进行代码编译,如果编译不通过则高亮错误并提示用户修改,编译通过后进行下一步;将编译成功的代码(LowCode代码)进行预览,如果预览成功则返回编译后的代码(LowCode代码),并且存储为对应的属性配置项;对于基础组件中的第一基础组件,获取第一基础组件自身携带的属性编辑表单,选择对应的配置并保存,对于基础组件中的第二基础组件,进行代码(LowCode代码)编写,以赋能给其他组件;对编译后的LowCode代码进行预览;如果预览结果出错则返回错误信息,提示用户修改相关配置或者LowCode代码,预览结果成功则返回相关配置和编译后的代码;保存表格全局配置、组件配置组件排序、属性配置和编译后的代码(LowCode代码),生成符合JSON Schema的配置数据,提交给服务器。
在本发明的一些实施例中,表格渲染的步骤包括:获取JSON Schema的配置数据和第三方数据;对第三方数据进行合法性校验(完整性校验),校验不通过则报错,通过后用第三方数据替换嵌入模板;调用对应的渲染函数,传给渲染器内部专门用于渲染HTML的组件;再将渲染器内部的渲染HTML的组件进行展示实例化;如果是外部组件将引用内嵌外部信息进行渲染;如果是自定义组件将解析拿到的代码进行实例渲染;如果是基础组件将直接用表格自带组件进行渲染;然后,将渲染后的结果,传入表格驱动器对应的单元格配置项;渲染表格时,根据组件实例进行HTML标签和数据的渲染,获得网页表格。
示例性的,如图7(a)所示,以终端为Builder为例进行外部组件的部署过程说明。
若是需要使用外部组件,则获取外部组件的安装包进行安装,安装好后对外部组件进行安全检查。若是检查到外部组件的来源合法,则保存外部组件并请求外部组件的编辑权限,在具有外部组件的编辑权限的基础上,来加载被编辑的外部组件,获取并加载编辑的外部组件的属性配置信息(即组件原始属性配置信息),从而获取格式信息,基于格式信息确定具体选用的外部组件,创建外部组件的原始属性编辑表单,并基于原始属性编辑表单创建原始的属性面板。
若检查到外部组件的来源不合法,则重新进行外部组件的安装。
若是不需要使用外部组件,则直接获取输入的格式信息,从而基于格式信息确定具体选用的外部组件,创建外部组件的原始属性编辑表单,并基于原始属性编辑表单创建原始的属性面板。
示例性的,如图7(b)所示,以终端为Builder,服务器为Table为例进行网页表格生成的说明。
针对Builder,在接收到表格生成请求的时候,根据表格生成请求就可以知道用户选择的组件的类型以及组件类型的优先级,可以依据组件类型的优先级进行判定。
若确定选择的组件是自定义组件,则创建代码的编辑器,通过编辑器,获取输入的属性代码,对属性代码来检查语法,语法正确,就对属性代码进行编译。编译成功的话,得到编译代码,基于编译代码生成预览的样式表格的某一行或列,或某一个单元格,判断单元格预览的预览结果是否正确,在预览结果正确的情况下,该编码代码(即自定义组件的组件属性配置信息)可用,用于在JSON模式下生成配置数据,并将配置数据发送至服务器保存。在预览结果失败的情况下,显示第三错误提示,重新进行下一次属性代码的获取和判断过程。编译失败的话,进行高亮报错(第二错误提示),重新进行下一次属性代码的获取和判断过程,直至得到可用的编译代码(即自定义组件的组件属性配置信息)。
需要说明的是,在检查的语法错误的情况下,会显示第一错误提示(例如,高亮报错),重新进行下一次属性代码的获取和判断过程,直至得到可用的编译代码(即自定义组件的组件属性配置信息)。
若确定选择的组件是外部组件,则获取外部组件的组件原始属性配置信息,基于组件原始属性配置信息,创建或生成属性面板,基于对属性面板的选择操作,获取外部组件的组件属性配置信息。
若确定选择的组件是基础组件(对应第一基础组件),则获取自带的属性编辑表单,基于对属性编辑表单的选择操作,获取第一基础组件的组件属性配置信息。
需要说明的是,基础组件也可以具有复杂的配置,例如第二基础组件,这时,针对第二基础组件,也可以自带编码功能,通过编辑功能获取属性代码,以便基于自定义组件的实现原理,获取编码代码,将编译代码作为第二基础组件的组件属性配置信息。
最终,自定义组件的组件属性配置信息、外部组件的组件属性配置信息、基础组件的组件属性配置信息都用于在JSON模式下生成配置数据,并将配置数据发送到Table进行渲染。
针对Table,接收到渲染请求和第三方发送的内容数据,渲染请求中包括了各种类型组件的组件属性配置信息,解析渲染请求,得到内容数据,判断内容数据是否达标(例如是否可以完整显示);若判断出来不达标,则显示内容错误信息;若判断出来达标,则对组件和内容数据等信息进行渲染处理,得到网页表格,并将网页表格发送到Builder进行显示。
可以理解的是,在本发明的一些实施例中,支持通过外部组件、基础组件和可编辑的自定义组件生成网页表格,实现网页表格可视化搭建的方式多样性且复杂度低。
在本发明实施例中,图8是本发明实施例提供的另一种网页表格生成装置的结构示意图,如图8所示,本发明实施例提供了一种网页表格生成装置8,包括获取模块81,处理模块82和第一发送模块83;其中,
所述获取模块81,用于获取表格生成请求;其中,所述表格生成请求中携带表格全局配置及其对应的组件信息;所述组件信息包括:组件配置;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;
所述处理模块82,用于基于所述组件配置,确定组件属性配置信息;还用于基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成渲染请求;
所述第一发送模块83,用于发送所述渲染请求至服务器,以供所述服务器基于所述渲染请求,生成网页表格。
在本发明的一些实施例中,所述处理模块82,还用于响应于所述组件配置表征为所述外部组件或第一基础组件,根据组件信息,确定所述外部组件或第一基础组件对应的组件属性配置信息;响应于所述组件配置表征为所述自定义组件或第二基础组件,接收编辑的属性代码;基于所述属性代码,确定所述自定义组件或第二基础组件对应的组件属性配置信息。
在本发明的一些实施例中,所述组件信息还包括:外部组件对应的组件原始属性配置信息和/或第一基础组件自带的属性编辑表单;
所述处理模块82,还用于响应于所述组件配置表征为所述外部组件,根据所述外部组件对应的组件原始属性配置信息,确定所述外部组件对应的组件属性配置信息;且响应于所述组件配置表征为所述第一基础组件,根据所述第一基础组件自带的属性编辑表单的选择操作,确定所述第一基础组件对应的组件属性配置信息。
在本发明的一些实施例中,所述处理模块82,还用于对所述属性代码进行校验处理和编译处理,得到编译信息;且基于所述编译信息,确定所述自定义组件或第二基础组件对应的所述组件属性配置信息。
在本发明的一些实施例中,所述处理模块82,还用于对所述属性代码进行语法校验,得到校验结果;且若所述校验结果表征所述属性代码不存在预设错误,则对所述属性代码进行编译,并得到对应的编译信息;且若所述校验结果表征所述属性代码存在预设错误,则生成第一错误提示,基于所述第一错误提示,接收下一次编辑的下一次属性代码进行处理,直至得到的不存在预设错误的第一目标属性代码时为止,对所述第一目标属性代码进行编译,并得到对应的编译信息。
在本发明的一些实施例中,所述处理模块82,还用于若所述编译结果表征编译成功,则基于所述编译代码,生成样式表格,并对所述样式表格进行预览,得到预览结果;且若所述编译结果表征为编译不成功,则生成第二错误提示,基于所述第二错误提示,接收下一次编辑的下一次属性代码进行处理,直至得到的不存在预设错误的第二目标属性代码、且所述第二目标属性代码的编译后的编译结果表征成功为止;并基于所述第二目标属性代码的编译后的编译代码,生成样式表格,并对所述样式表格进行预览,得到预览结果;且基于所述预览结果,确定所述自定义组件或所述第二基础组件对应的所述组件属性配置信息。
在本发明的一些实施例中,所述处理模块82,还用于若所述预览结果表征成功,则将所述编译代码作为所述自定义组件或所述第二基础组件对应的所述组件属性配置信息;且若所述预览结果表征失败,则生成第三错误提示,基于所述第三错误提示,接收下一次编辑的下一次属性代码进行处理,直至得到的不存在预设错误的第三目标属性代码、所述第三目标属性代码的编译后的编译结果表征成功、且预览结果表征成功的所述第三目标属性代码的编译代码为止,将所述编译代码作为所述自定义组件或所述第二基础组件对应的所述组件属性配置信息。
在本发明的一些实施例中,所述处理模块82,还用于响应于所述组件配置表征为所述自定义组件,生成编辑器,通过所述编辑器接收编辑的与所述自定义组件对应的所述属性代码;且响应于所述组件配置表征为所述第二础组件,通过自带的编辑功能,接收编辑的与所述第二基础组件对应的所述属性代码。
在本发明的一些实施例中,所述处理模块82,还用于基于所述组件原始属性配置信息,生成属性面板;且基于对所述属性面板的选择操作,确定所述外部组件对应的组件属性配置信息。
在本发明的一些实施例中,所述处理模块82,还用于基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成符合JSON Schema的配置数据;且基于所述配置数据,生成所述渲染请求。
在本发明的一些实施例中,所述处理模块82,还用于根据所述不同类型的组件的优先级,确定不同类型组件的执行顺序;基于所述执行顺序,分别确定不同类型的组件的组件属性配置信息;其中,所述基础组件的优先级高于所述外部组件,所述外部组件的优先级高于所述自定义组件。
在本发明实施例中,图9是本发明实施例提供的另一种网页表格生成装置的结构示意图,如图9所示,本发明实施例提供了另一种网页表格生成装置9,包括接收模块91、渲染模块92和第二发送模块93;其中,
所述接收模块91,用于接收终端发送的渲染请求和第三方发送的内容数据,其中,所述渲染请求携带表格全局配置及其对应的组件配置,以及与所述组件配置对应的组件属性配置信息;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;
所述渲染模块92,用于基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到生成网页表格;
所述第二发送模块93,用于发送所述网页表格至所述终端,供所述终端进行展示。
在本发明的一些实施例中,所述渲染模块92,还用于基于所述表格全局配置,进行全局配置渲染,得到第一渲染结果;且基于所述内容数据、所述组件配置和所述组件属性配置信息进行渲染,得到第二渲染结果;且基于所述第一渲染结果和所述第二渲染结果,得到所述网页表格并发送所述网页表格至所述终端。
在本发明的一些实施例中,所述渲染模块92,还用于根据所述组件配置,确定渲染HTML的组件;所述渲染HTML的组件对应所述外部组件、所述基础组件和所述可编辑的自定义组件中的至少一种;且利用与渲染HTML的组件对应的所述组件属性配置信息,对将所述渲染HTML的组件进行实例化,得到渲染组件实例;且调用渲染函数,对所述渲染组件实例进行HTML标签渲染,以及对所述内容数据进行数据渲染,得到所述第二渲染结果。
在本发明的一些实施例中,所述渲染模块92,还用于调用所述渲染函数,通过表格驱动器中的预设位置规则,将所述渲染组件实例放入对应的单元格配置项,实现HTML标签渲染,生成HTML标签;且通过所述表格驱动器中的预设位置规则,将所述内容数据放入对应的单元格配置项对应的内容单元格,实现数据渲染,得到单元格内容;将于所述HTML标签和所述单元格内容作为所述第二渲染结果。
在本发明的一些实施例中,所述渲染模块92,还用于将所述组件配置表征的组件,确定为所述渲染HTML的组件。
在本发明的一些实施例中,所述渲染模块92,还用于若所述渲染HTML的组件为所述外部组件,则与所述外部组件对应的组件属性配置信息进行实例化,获得外部组件实例;且若所述渲染HTML的组件为所述自定义组件,则利用与所述自定义组件对应的组件属性配置信息进行实例化,获得自定义组件实例;且若所述渲染HTML的组件为所述基础组件,则利用所述基础组件对应的组件属性配置信息进行实例化,获得基础组件实例;将所述外部组件实例、所述自定义组件实例和所述基础组件实例作为所述渲染组件实例。
在本发明的一些实施例中,所述渲染模块92,还用于对所述自定义组件对应的组件属性配置信息进行解析,获取解析结果;且对所述解析结果行实例化,得到所述自定义组件实例。
在本发明的一些实施例中,所述装置还包括:校验模块94,其中,
所述校验模块,用于对所述内容数据进行完整性校验,得到完整性校验结果;
所述渲染模块92,还用于若所述完整性校验结果表征成功,则基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到所述生成网页表格。
在本发明的一些实施例中,所述接收模块91,还用于若所述完整性校验结果表征失败,则提示内容错误信息,基于所述内容错误信息,接收第三方发送的下一次内容数据;
所述渲染模块92,还用于基于所述下一次内容数据,继续进行网页表格生成过程。
在本发明实施例中,图10是本发明实施例提供的一种终端的结构示意图,如图10所示,本发明实施例提供一种终端11,包括:第一处理器111、第一存储器112以及通信总线114,第一存储器112通过通信总线114与第一处理器111进行通信,第二存储器112存储所述第一处理器111可执行的一个或者多个指令,当所述一个或者多个指令被执行时,所述第一处理器111执行如本发明实施例的终端的所述的网页表格生成方法,具体的,终端11还包括用于进行数据传输的第一通信组件113,其中,第一处理器111至少设有一个。
在本发明实施例中,终端11中的各个组件通过通信总线114耦合在一起。可理解,通信总线114用于实现这些组件之间的连接通信。通信总线114除包括数据总线之外,还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见,在图10中将各种总线都标为通信总线114。
在本发明实施例中,图11是本发明实施例提供的一种服务器的结构示意图,如图11所示,本发明实施例提供一种服务器12,包括:第二处理器121、第二存储器122以及通信总线124,第二存储器122通过通信总线124与第二处理器121进行通信,第二存储器122存储所述第二处理器121可执行的一个或者多个指令,当所述一个或者多个指令被执行时,所述第二处理器121执行如本发明实施例的服务器侧的所述的网页表格生成方法,具体的,服务器12还包括用于进行数据传输的第二通信组件123,其中,第二处理器121至少设有一个。
在本发明实施例中,服务器12中的各个组件通过通信总线124耦合在一起。可理解,通过通信总线124用于实现这些组件之间的连接通信。通信总线124除包括数据总线之外,还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见,在图11中将各种总线都标为通信总线124。
本发明实施例提供了一种计算机可读存储介质,存储有可执行指令,用于引起第一处理器执行时,实现本发明实施例所述的一种网页表格生成方法;
本发明实施例提供了一种计算机可读存储介质,存储有可执行指令,用于引起第二处理器执行时,实现本发明实施例所述的一种网页表格生成方法。
本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产品。因此,本发明可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上所述,仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围。
Claims (27)
1.一种网页表格生成方法,其特征在于,所述方法应用于终端,所述方法包括:
获取表格生成请求;其中,所述表格生成请求中携带表格全局配置及其对应的组件信息;所述组件信息包括:组件配置;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型;
基于所述组件配置,确定组件属性配置信息;
基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成渲染请求并发送至服务器,以供所述服务器基于所述渲染请求,生成网页表格。
2.根据权利要求1所述的方法,其特征在于,所述基础组件包括:第一基础组件和第二基础组件;其中,第一基础组件为不可编辑组件,第二基础组件为可编辑组件;
所述基于所述组件配置,确定组件属性配置信息,包括:
响应于所述组件配置表征为所述外部组件或第一基础组件,根据组件信息,确定所述外部组件或第一基础组件对应的组件属性配置信息;
响应于所述组件配置表征为所述自定义组件或第二基础组件,接收编辑的属性代码;基于所述属性代码,确定所述自定义组件或第二基础组件对应的组件属性配置信息。
3.根据权利要求2所述的方法,其特征在于,其中,所述组件信息还包括:外部组件对应的组件原始属性配置信息和/或第一基础组件自带的属性编辑表单;
所述根据组件信息,确定所述外部组件或第一基础组件对应的组件属性配置信息,包括:
响应于所述组件配置表征为所述外部组件,根据所述外部组件对应的组件原始属性配置信息,确定所述外部组件对应的组件属性配置信息;
响应于所述组件配置表征为所述第一基础组件,根据所述第一基础组件自带的属性编辑表单的选择操作,确定所述第一基础组件对应的组件属性配置信息。
4.根据权利要求2所述的方法,其特征在于,所述基于所述属性代码,确定所述自定义组件或第二基础组件对应的组件属性配置信息,包括:
对所述属性代码进行校验处理和编译处理,得到编译信息;
基于所述编译信息,确定所述自定义组件或第二基础组件对应的所述组件属性配置信息。
5.根据权利要求4所述的方法,其特征在于,对所述属性代码进行校验处理和编译处理,得到编译信息,包括:
对所述属性代码进行语法校验,得到校验结果;
若所述校验结果表征所述属性代码不存在预设错误,则对所述属性代码进行编译,并得到对应的编译信息;
若所述校验结果表征所述属性代码存在预设错误,则生成第一错误提示,基于所述第一错误提示,接收下一次编辑的下一次属性代码进行处理,直至得到不存在预设错误的第一目标属性代码时为止,对所述第一目标属性代码进行编译,并得到对应的编译信息。
6.根据权利要求4或5所述的方法,其特征在于,所述编译信息包括编译结果和编译代码;
所述基于所述编译信息,确定所述自定义组件或第二基础组件对应的所述组件属性配置信息,包括:
若所述编译结果表征编译成功,则基于所述编译代码,生成样式表格,并对所述样式表格进行预览,得到预览结果;
若所述编译结果表征为编译不成功,则生成第二错误提示,基于所述第二错误提示,接收下一次编辑的下一次属性代码进行处理,直至得到不存在预设错误的第二目标属性代码、且所述第二目标属性代码的编译后的编译结果表征成功为止;并基于所述第二目标属性代码的编译后的编译代码,生成样式表格,并对所述样式表格进行预览,得到预览结果;
基于所述预览结果,确定所述自定义组件或所述第二基础组件对应的所述组件属性配置信息。
7.根据权利要求6所述的方法,其特征在于,所述基于所述预览结果,确定所述自定义组件或所述第二基础组件对应的所述组件属性配置信息,包括:
若所述预览结果表征成功,则将所述编译代码作为所述自定义组件或所述第二基础组件对应的所述组件属性配置信息;
若所述预览结果表征失败,则生成第三错误提示,基于所述第三错误提示,接收下一次编辑的下一次属性代码进行处理,直至得到不存在预设错误的第三目标属性代码、所述第三目标属性代码的编译后的编译结果表征成功、且预览结果表征成功的所述第三目标属性代码的编译代码为止,将所述编译代码作为所述自定义组件或所述第二基础组件对应的所述组件属性配置信息。
8.根据权利要求2至7任一项所述的方法,其特征在于,当所述组件配置表征为所述自定义组件或第二基础组件时,所述接收编辑的属性代码,包括:
响应于所述组件配置表征为所述自定义组件,生成编辑器,通过所述编辑器接收编辑的与所述自定义组件对应的所述属性代码;
响应于所述组件配置表征为所述第二础组件,通过自带的编辑功能,接收编辑的与所述第二基础组件对应的所述属性代码。
9.根据权利要求3所述的方法,其特征在于,所述基于组件原始属性配置信息,确定所述外部组件对应的组件属性配置信息,包括:
基于所述组件原始属性配置信息,生成属性面板;
基于对所述属性面板的选择操作,确定所述外部组件对应的组件属性配置信息。
10.根据权利要求1所述的方法,其特征在于,所述基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成渲染请求并发送至服务器,包括:
基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成符合JSONSchema的配置数据;
基于所述配置数据,生成所述渲染请求并发送至所述服务器。
11.根据权利要求1至10任一项所述的方法,其特征在于,所述组件配置还包括:不同类型的组件的优先级;
所述基于所述组件配置,确定组件属性配置信息,包括:
根据所述不同类型的组件的优先级,确定不同类型组件的执行顺序;
基于所述执行顺序,分别确定不同类型的组件的组件属性配置信息;
其中,所述基础组件的优先级高于所述外部组件,所述外部组件的优先级高于所述自定义组件。
12.一种网页表格生成方法,其特征在于,所述方法应用于服务器,所述方法包括:
接收终端发送的渲染请求和第三方发送的内容数据,其中,所述渲染请求携带表格全局配置及其对应的组件配置,以及与所述组件配置对应的组件属性配置信息;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;
基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到生成网页表格并发送至所述终端,供所述终端进行展示。
13.根据权利要求12所述的方法,其特征在于,所述基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到生成网页表格并发送至所述终端,包括:
基于所述表格全局配置,进行全局配置渲染,得到第一渲染结果;
基于所述内容数据、所述组件配置和所述组件属性配置信息进行渲染,得到第二渲染结果;
基于所述第一渲染结果和所述第二渲染结果,得到所述网页表格并发送所述网页表格至所述终端。
14.根据权利要求13所述的方法,其特征在于,所述基于所述内容数据、所述组件配置和所述组件属性配置信息进行渲染,得到第二渲染结果,包括:
根据所述组件配置,确定渲染HTML的组件;所述渲染HTML的组件对应所述外部组件、所述基础组件和所述可编辑的自定义组件中的至少一种;
利用与渲染HTML的组件对应的所述组件属性配置信息,对将所述渲染HTML的组件进行实例化,得到渲染组件实例;
调用渲染函数,对所述渲染组件实例进行HTML标签渲染,以及对所述内容数据进行数据渲染,得到所述第二渲染结果。
15.根据权利要求13所述的方法,其特征在于,所述调用渲染函数,对所述渲染组件实例进行HTML标签渲染,以及对所述内容数据进行数据渲染,得到所述第二渲染结果,包括:
调用所述渲染函数,通过表格驱动器中的预设位置规则,将所述渲染组件实例放入对应的单元格配置项,实现HTML标签渲染,生成HTML标签;
通过所述表格驱动器中的预设位置规则,将所述内容数据放入对应的单元格配置项对应的内容单元格,实现数据渲染,得到单元格内容;将于所述HTML标签和所述单元格内容作为所述第二渲染结果。
16.根据权利要求14或15所述的方法,其特征在于,所述根据所述组件配置,确定渲染HTML的组件,包括:
将所述组件配置表征的组件,确定为所述渲染HTML的组件。
17.根据权利要求14至16任一项所述的方法,其特征在于,所述利用与渲染HTML的组件对应的所述组件属性配置信息,对将所述渲染HTML的组件进行实例化,得到渲染组件实例,包括:
若所述渲染HTML的组件为所述外部组件,则与所述外部组件对应的组件属性配置信息进行实例化,获得外部组件实例;
若所述渲染HTML的组件为所述自定义组件,则利用与所述自定义组件对应的组件属性配置信息进行实例化,获得自定义组件实例;
若所述渲染HTML的组件为所述基础组件,则利用所述基础组件对应的组件属性配置信息进行实例化,获得基础组件实例;
将所述外部组件实例、所述自定义组件实例和所述基础组件实例作为所述渲染组件实例。
18.根据权利要求17所述的方法,其特征在于,所述利用与所述自定义组件对应的组件属性配置信息进行实例化,获得自定义组件实例,包括:
对所述自定义组件对应的组件属性配置信息进行解析,获取解析结果;
对所述解析结果行实例化,得到所述自定义组件实例。
19.根据权利要求17或18所述的方法,其特征在于,
所述外部组件对应的组件属性配置信息包括:所述外部组件对应的组件原始属性配置信息中被选中的组件属性配置信息;
所述自定义组件对应的组件属性配置信息包括:编译成功的编译代码,该编译代码是通过编辑器接收编辑的属性代码被校验和编译后的代码;
所述基础组件对应的组件属性配置信息包括:基于所述基础组件自带的属性编辑表单被选中的组件属性配置信息;或者,编译成功的编译代码,该编译代码是通过所述基础组件自带的编辑功能接收编辑的属性代码被校验和编译后的代码。
20.根据权利要求12所述的方法,其特征在于,所述基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到生成网页表格之前,所述方法还包括:
对所述内容数据进行完整性校验,得到完整性校验结果;
所述基于所述内容数据、所述表格全局配置及其对应的组件信息,进行渲染处理,得到生成网页表格,包括:
若所述完整性校验结果表征成功,则基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到所述生成网页表格。
21.根据权利要求20所述的方法,其特征在于,所述对所述内容数据进行完整性校验,得到完整性校验结果之后,所述方法还包括:
若所述完整性校验结果表征失败,则提示内容错误信息,基于所述内容错误信息,接收第三方发送的下一次内容数据;
基于所述下一次内容数据,继续进行网页表格生成过程。
22.根据权利要求12所述的方法,其特征在于,
所述渲染请求携带有符合JSON Schema的配置数据,所述配置数据可解析出所述表格全局配置及其对应的所述组件配置,以及与所述组件配置对应的所述组件属性配置信息。
23.一种网页表格生成装置,其特征在于,包括获取模块,处理模块和第一发送模块;其中,
所述获取模块,用于获取表格生成请求;其中,所述表格生成请求中携带表格全局配置及其对应的组件信息;所述组件信息包括:组件配置;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;
所述处理模块,用于基于所述组件配置,确定组件属性配置信息;还用于基于所述表格全局配置、所述组件配置和所述组件属性配置信息,生成渲染请求;
所述第一发送模块,用于发送所述渲染请求至服务器,以供所述服务器基于所述渲染请求,生成网页表格。
24.一种网页表格生成装置,其特征在于,包括接收模块、渲染模块和第二发送模块;其中,
所述接收模块,用于接收终端发送的渲染请求和第三方发送的内容数据,其中,所述渲染请求携带表格全局配置及其对应的组件配置,以及与所述组件配置对应的组件属性配置信息;其中,所述组件配置包括:外部组件、基础组件和可编辑的自定义组件中的至少一种类型,以及不同类型的组件的优先级;
所述渲染模块,用于基于所述内容数据、所述表格全局配置、所述组件配置和所述组件属性配置信息,进行渲染处理,得到生成网页表格;
所述第二发送模块,用于发送所述网页表格至所述终端,供所述终端进行展示。
25.一种终端,其特征在于,包括:
第一存储器,用于存储可执行指令;
第一处理器,用于执行所述第一存储器中存储的可执行指令时,实现权利要求1至11任一项所述的方法。
26.一种服务器,其特征在于,包括:
第二存储器,用于存储可执行指令;
第二处理器,用于执行所述第二存储器中存储的可执行指令时,实现权利要求12至22任一项所述的方法。
27.一种计算机可读存储介质,其特征在于,存储有可执行指令,用于引起第一处理器执行时,实现权利要求1至11任一项所述的方法;或者,用于引起第二处理器执行时,实现权利要求12至22任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111602385.5A CN114327434A (zh) | 2021-12-24 | 2021-12-24 | 一种网页表格生成方法及装置、计算机可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111602385.5A CN114327434A (zh) | 2021-12-24 | 2021-12-24 | 一种网页表格生成方法及装置、计算机可读存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN114327434A true CN114327434A (zh) | 2022-04-12 |
Family
ID=81013278
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111602385.5A Pending CN114327434A (zh) | 2021-12-24 | 2021-12-24 | 一种网页表格生成方法及装置、计算机可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114327434A (zh) |
-
2021
- 2021-12-24 CN CN202111602385.5A patent/CN114327434A/zh active Pending
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109800154B (zh) | 测试数据的加载方法、装置、计算机设备及存储介质 | |
CN106293664A (zh) | 代码生成方法及装置 | |
CN110705237B (zh) | 文档的自动生成方法、数据处理设备及存储介质 | |
CN111475390A (zh) | 日志采集系统部署方法、装置、设备及存储介质 | |
CN111399840A (zh) | 一种模块开发方法及装置 | |
CN113886232A (zh) | 接口测试数据和测试脚本生成方法、终端设备及存储介质 | |
CN111897738A (zh) | 基于原子服务的自动化测试方法及装置 | |
CN114217789A (zh) | 功能组件拓展方法、装置、设备、存储介质及程序产品 | |
CN105022635A (zh) | 基于云平台的算法文件生成方法、装置及云平台 | |
CN112527286A (zh) | 业务代码的生成方法、装置、计算机设备及存储介质 | |
CN115525534A (zh) | 基于swagger的接口测试的测试用例生成方法、生成平台 | |
CN112650492A (zh) | 一种Web页面的渲染方法、系统及相关装置 | |
CN114327434A (zh) | 一种网页表格生成方法及装置、计算机可读存储介质 | |
CN115904317A (zh) | 一种前后端接口统一调用方法、装置、设备及存储介质 | |
CN113885841A (zh) | 脚本生成的方法、装置、电子设备和可读介质 | |
CN115470152A (zh) | 测试代码生成方法、测试代码生成装置以及存储介质 | |
CN115630835A (zh) | 一种基于Activity的工作流通用参数配置方法及系统 | |
CN115269285A (zh) | 测试方法及装置、设备、计算机可读存储介质 | |
CN114035786A (zh) | 一种基于依赖的微前端兼容迁移方法及系统 | |
JP6097231B2 (ja) | プログラム生成装置および方法 | |
CN108170557B (zh) | 用于输出信息的方法和装置 | |
CN112182552A (zh) | 一种实名认证方法、装置、电子设备及存储介质 | |
JP5540856B2 (ja) | ワークフローを設定するための装置および方法 | |
CN111026466A (zh) | 文件处理方法、装置、计算机可读存储介质及电子设备 | |
CN112000366B (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 |