CN112363794B - 一种前端列表类组件的渲染方法及电子设备 - Google Patents
一种前端列表类组件的渲染方法及电子设备 Download PDFInfo
- Publication number
- CN112363794B CN112363794B CN202011375224.2A CN202011375224A CN112363794B CN 112363794 B CN112363794 B CN 112363794B CN 202011375224 A CN202011375224 A CN 202011375224A CN 112363794 B CN112363794 B CN 112363794B
- Authority
- CN
- China
- Prior art keywords
- component
- configuration
- page
- list
- rendering
- 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
- 238000000034 method Methods 0.000 title claims abstract description 83
- 238000009877 rendering Methods 0.000 title claims abstract description 69
- 230000006870 function Effects 0.000 claims abstract description 33
- 238000012986 modification Methods 0.000 claims description 9
- 230000004048 modification Effects 0.000 claims description 9
- 238000005538 encapsulation Methods 0.000 claims description 5
- 238000012217 deletion Methods 0.000 claims description 3
- 230000037430 deletion Effects 0.000 claims description 3
- 238000001914 filtration Methods 0.000 claims description 3
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 238000004891 communication Methods 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 27
- 238000000926 separation method Methods 0.000 abstract description 3
- 230000008569 process Effects 0.000 description 17
- 230000006872 improvement Effects 0.000 description 9
- 230000000694 effects Effects 0.000 description 6
- 230000000007 visual effect Effects 0.000 description 5
- 238000012423 maintenance Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000008571 general function Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000005034 decoration Methods 0.000 description 1
- 238000012938 design process Methods 0.000 description 1
- 239000012634 fragment Substances 0.000 description 1
- 239000004615 ingredient Substances 0.000 description 1
- 230000006386 memory function Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000007639 printing Methods 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 238000012163 sequencing technique Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for 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/36—Software reuse
-
- 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
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4482—Procedural
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明提供了一种前端列表类组件的渲染方法及电子设备，该前端列表类组件的渲染方法包括：先在组件库的构造函数中定义出包含属性配置的组件配置，构造函数定义成员变量及生命周期函数；通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库获取与组件配置匹配的组件；前端编辑页面中使用高阶组件调用后端服务资源库中与组件匹配的页面配置数据，渲染形成嵌布于前端中的列表类组件。本发明所揭示的前端列表类组件的渲染方法及电子设备，不仅实现了业务代码分离和代码复用，显著地提高了形成前端的代码的复用性与可读性，还显著地降低了对前端列表类组件的渲染方法的开发难度并提高了对前端列表类组件的开发效率。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种前端列表类组件的渲染方法及电子设备。
背景技术
前端用于向用户显示或者推送页面或者包含数据的页面，页面嵌布于计算机装置中运行，而后端则是形成前端的底层代码，并由开发人员通过代码编写而成。前端通常被理解为页面、嵌布页面的一种应用或者能够被用户远程调用的具有GUI(用户图形界面)的计算机程序。
在实际开发中，前端开发人员也会用到基类继承的方法来开发页面。在基类中，定义通用性的函数方法来处理数据，并且提供渲染方法。开发人员在开发页面时，页面继承基类并通过重载基类中的函数来实现特殊的业务需求，根据重载的方法，来影响基类中的渲染，在计算机装置中展示出满足页面需求的视图。
React是一个声明式的高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成复杂的UI界面，这些代码片段被称作“组件”(Component)。Web前端开发需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因，React的虚拟DOM不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想。
组件(Component)是封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。现有技术中的React组件库多种多样，对于列表相关的组件展现形式可以满足基本的列表展示，并不能适应具有列表展示的业务场景，如需扩展功能也是需要费时费力。
申请人经过检索后发现公开号为CN109240784A的中国发明专利公开了一种内存对象的图表渲染方法及系统。该现有技术所揭示的技术方案虽然能够从内存中调用已经实例化的图表进行渲染以及图表的各项操作，现有技术在react框架下，只绘制一次dom操作，其余的操作都是在svg或者canvas标签中做变更，减少dom操作的频率。
申请人指出Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。SVG适合静态图片展示，高保真文档查看和打印的应用场景。Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本(Script)绘制图形，而通过脚本绘制图形又导致图表生成过于繁琐并影响组件化开发过程。同时，SVG并不适用于生成动态组件，在UI界面设计过程中也存在一定的局限性。可见诸如CN109240784A等现有技术将图表的格式和数据结构封装为挂载实例化的对象，并通过索引/值key/value的形式存储至页面内存中，依然会对计算机内存造成一定的性能消耗。
有鉴于此，有必要对现有技术中前端列表类组件的渲染方法予以改进，以解决上述问题。
发明内容
本发明的目的在于揭示一种前端列表类组件的渲染方法以及运行该前端列表类组件的渲染方法的一种电子设备，用以解决现有技术中基于React应用程序对前端进行开发过程中所存在的诸多缺陷，尤其是为了在前端开发过程中实现业务代码分离和代码复用，提高形成前端的代码的复用性与可读性，避免开发人员在子类和基类之间作频繁切换，降低对前端列表类组件的渲染方法的开发难度并提高对前端列表类组件的开发效率。
为实现上述第一个发明目的，本发明首先提供了一种前端列表类组件的渲染方法，包括以下步骤：
S1、预先在组件库的构造函数中定义出包含属性配置的组件配置，所述构造函数定义成员变量及生命周期函数；
S2、通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库获取与组件配置匹配的组件；
S3、前端编辑页面中使用高阶组件调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成嵌布于前端中的列表类组件。
作为本发明的进一步改进，所述生命周期函数包括componentDidMount与componentWillReceiveProps，构造函数定义成员变量的接口请求配置baseAction，并由componentDidMount根据接口请求配置baseAction中定义的接口向后端服务资源库发出接口请求。
作为本发明的进一步改进，所述成员变量包括：表格列columns、页码配置选项paginationOptions、高级搜索配置选项advancedSearchOptions或者表头按钮组buttonItems中的一种或者几种；
所述步骤S1还包括：对表格列columns加载基于re-table封装的具有排序功能的列表SortTable；对页码配置选项paginationOptions加载基于re-pagination封装的显示页码组件Pagination；对高级搜索配置选项advancedSearchOptions加载高级搜索组件AdvancedSearch，并由所述componentWillReceiveProps调用高阶组件调用后端服务资源库中与所述组件匹配的前一个页面配置数据；对表头按钮组buttonItems加载按钮组件Button.List。
作为本发明的进一步改进，所述接口请求配置baseAction定义查询请求的接口名称、修改列表数据的接口名称及删除列表数据的请求名称；
所述表格列columns定义列名称、列对应接口数据的字段名称以及render方法；所述页码配置选项paginationOptions定义分页选项；所述表头按钮组buttonItems定义列表的操作按钮组属性，所述操作按钮组属性包括操作名称、按钮图标及弹窗逻辑；所述高级搜索组件AdvancedSearch根据高级搜索配置选项advancedSearchOptions中定义的搜索项展示搜索形式，对前端编辑页面接收到的前端配置业务请求所对应的列表类组件予以展示，所述搜索形式包括文本输入对话框、下拉框或者时间段。
作为本发明的进一步改进，所述步骤S1中的组件配置包括组件的属性和方法；
所述步骤S2中自组件库获取与组件配置匹配的组件之后，还包括：
对与组件配置匹配的组件予以可视化展示。
作为本发明的进一步改进，所述前端编辑器选自ATOM编辑器、Brackets编辑器、Hbuilder编辑器、WebStorm编辑器或者VS Code编辑器。
作为本发明的进一步改进，所述步骤S3具体为：在前端编辑页面中使用高阶组件调用后端服务资源库中与组件所对应的后端服务名称、地址或者端口信息中至少一种描述对象，以在后端服务资源库查找是否存在与组件匹配的页面配置数据；
若存在，由高阶组件调用并运行后端服务名称、地址以及端口信息所展现的页面配置数据，渲染形成嵌布于前端中的列表类组件；
若不存在，由后端服务资源库通知高阶组件触发配置信息错误定义事件。
作为本发明的进一步改进，当前端编辑页面接收至少两个前端配置业务请求时，使用高阶组件通过反向继承方式复用多个前端配置业务请求中所包含的至少一个属性和/或函数，调用后端服务资源库中与所述组件相匹配的页面配置数据。
作为本发明的进一步改进，由后端服务资源库通知高阶组件触发配置信息错误定义事件包括：告警事件、通知提醒事件、对话框事件、文本提示框事件、标签弹出事件、全局提示事件。
作为本发明的进一步改进，当后端服务资源库存在与组件匹配的页面配置数据时，高阶组件触发根据组件的组件配置对与前端配置业务请求所对应的页面配置执行二次编辑事件，所述二次编辑事件包括：排序事件、筛选事件或者删除事件。
作为本发明的进一步改进，根据组件的组件配置执行配置信息错误定义和/或页面配置数据的二次编辑后还包括：对未执行的前端配置业务请求，通过高阶组件以反向继承方式复用已经被执行的前端配置业务请求中所包含的至少一个属性和/或函数，然后调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成嵌布于前端中的列表类组件。
基于相同发明思想，本发明还揭示了一种电子设备，包括：
至少一个处理器，至少一个存储器，总线和I/O设备；所述处理器和存储器及I/O设备通过所述总线完成相互间的通信；所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如上述任一项发明创造所揭示的前端列表类组件的渲染方法。
与现有技术相比，本发明的有益效果是：
在本申请中，获取页面配置数据的逻辑及执行过程由与后端服务资源库在逻辑上独立的高阶组件中实现，页面不需要定义或者调用函数，只需要配置页面配置数据的参数即可，因此开发人员不需要在前端配置过程加入复杂的业务逻辑，后端服务资源库仅与高阶组件交互，因此，在对后端代码维护和bug排查时，极大地简化了前端配置的流程并降低了对前端的配置及维护难度。
通过本申请所揭示的前端列表类组件的渲染方法及电子设备实现了业务代码分离和代码复用，显著地提高了形成前端的代码的复用性与可读性，避免了开发人员在子类和基类之间作频繁切换；同时，通过对成员变量加载基于re-table封装的具有排序功能的列表SortTable、加载基于re-pagination封装的显示页码组件Pagination、加载高级搜索组件AdvancedSearch、对表头按钮组buttonItems加载按钮组件Button.List等子组件，从而显著地降低了开发人员对前端列表类组件的渲染方法的开发难度并提高了对前端列表类组件的开发效率，并使得前端中嵌布形成的列表类组件具有扩展性更佳的优点。
附图说明
图1为本发明一种前端列表类组件的渲染方法的整体流程图；
图2为运行本发明一种前端列表类组件的渲染方法的前端列表类组件的渲染系统的拓扑图；
图3为前端编辑页面形成于业务需求配置模块所形成的可视化界面的示意图；
图4为本发明一种电子设备的拓扑图。
具体实施方式
下面结合附图所示的各实施方式对本发明进行详细说明，但应当说明的是，这些实施方式并非对本发明的限制，本领域普通技术人员根据这些实施方式所作的功能、方法、或者结构上的等效变换或替代，均属于本发明的保护范围之内。
在详细阐述本申请各个实施例之前，对本申请中所涉及的主要技术术语予以定义。本领域技术人员均知，此种定义仅仅是基于本实施例所涉及的应用场景或者开发环境而言的。
术语“子类”是指：继承于基类的类组件，通过重载基类中的函数和渲染方法，实现自身特殊的业务需求。同时，“子类组件”与“子类”在本申请中具等同技术含义。
术语“基类”是指：具有一些通用函数和渲染方法的类组件，可以被其他组件继承并重载某些函数，以满足子类组件特殊的业务和展示需求。同时，“基类”与“父类”(baseclass)在本申请中具等同技术含义。
术语“业务”是指：前端响应用户发起的访问、调用等请求所展现的计算机程序、控件、插件或者应用。
术语“后端”是指：与背景技术所提及的术语“前端”相对的技术概念，泛指在云计算服务、云平台等应用场景中，通过CSS、HTML、JavaScript等前端构建技术对前端(通常展示为User Interface，UI)实施部署、编辑等操作的计算机介质中。
下文通过多个实施例对发明之核心要义予以详细阐述。
实施例一：
如图1所示，本实施例揭示了一种前端列表类组件的渲染方法，包括如下步骤。
首先，执行步骤S1、预先在组件库的构造函数中定义出包含属性配置的组件配置，所述构造函数定义成员变量及生命周期函数。
步骤S1中的组件配置包括组件的属性和方法。组件在本实施例中可被理解为能够被形成可视化控件并由代码编写而成的具有一定功能的对象，一个或者多个对象构成前端，组件具体为列、表、列表、勾选项、文字、线条、对话框、复选开关、滑动块、折叠面板或者导航栏等。组件的属性则表示为文字的颜色、文字的大小、文字的显示效果等。组件的方法可表现为组件的调用方法、组件的处理方法等。结合图2所示，从事前端开发或者维护的开发人员无需知悉组件库42中已经存在的包含属性配置的组件配置。
结合图2所示，在本实施例中，该生命周期函数包括componentDidMount与componentWillReceiveProps，构造函数定义成员变量的接口请求配置baseAction，并由componentDidMount根据接口请求配置baseAction中定义的接口向后端服务资源库45发出接口请求。具体的，在本实施例中，该成员变量包括：表格列columns、页码配置选项paginationOptions、高级搜索配置选项advancedSearchOptions或者表头按钮组buttonItems中的一种或者几种，并最优选为同时包含上述四种成员变量。
步骤S1还包括：对表格列columns加载基于re-table封装的具有排序功能的列表SortTable；对页码配置选项paginationOptions加载基于re-pagination封装的显示页码组件Pagination；对高级搜索配置选项advancedSearchOptions加载高级搜索组件AdvancedSearch，并由所述componentWillReceiveProps调用高阶组件调用后端服务资源库45中与所述组件匹配的前一个页面配置数据，由此基于componentWillReceiveProps处理高级搜索的记忆功能，降低了避免了开发人员在子类和基类之间作频繁切换。对表头按钮组buttonItems加载按钮组件Button.List。
上述SortTable、Pagination、AdvancedSearch及Button.List分别为成员变量columns、paginationOptions、advancedSearchOptions及buttonItems所对应的一个子组件。在本实施例中，基于上述四个子组件，有利于业务中列表类数据的展示与编辑，尤其适用于手机等移动设备中的APP及PC设备中的桌面型软件的开发，从而有利于前端列表类组件的渲染。
具体的，在本实施例中，接口请求配置baseAction定义查询请求的接口名称、修改列表数据的接口名称及删除列表数据的请求名称。表格列columns定义列名称、列对应接口数据的字段名称以及render方法。Render方法可以灵活地实现开发人员所需要的风格与样式，提高对前端列表类组件开发的简易度。页码配置选项paginationOptions定义分页选项。表头按钮组buttonItems定义列表的操作按钮组属性，所述操作按钮组属性包括操作名称、按钮图标及弹窗逻辑。高级搜索组件AdvancedSearch根据高级搜索配置选项advancedSearchOptions中定义的搜索项展示搜索形式，对前端编辑页面接收到的前端配置业务请求所对应的列表类组件予以展示，所述搜索形式包括文本输入对话框、下拉框或者时间段。
在实施例中，组件库42中的组件配置对高阶组件44予以暴露(备注：此种暴露并不意味着组件库42与高阶组件44存在数据收发与调用的关系)，因此不具有专业知识的前端开发人员即使不知道或者不精通组件库42中所保存的包含属性配置的组件配置中所含的逻辑，即可通过文字描述的方式，向组件库42中调用前端开发人员所需的组件配置。同时，组件库42对外提供配置文档，即使非前端的开发人员或者不知悉组件逻辑的开发人员也可通过该配置文档的介绍，对组件配置按照自己的习惯进行自定义，并在后续的前端配置过程中，按照自定义的缩略语调用包含属性配置的组件配置。例如，如果在前端中显示“红色线条”，开发人员可自定义缩略语“RL”代表“红色线条”，也可自定义缩略语“123”代表“红色线条”。
然后，执行步骤S2、通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库42获取与组件配置匹配的组件。优选的，在本实施例中，步骤S2中自组件库42获取与组件配置匹配的组件之后，还包括：对与组件配置匹配的组件予以可视化展示，由此使得开发人员能够知悉其所调用的组件的显示效果是否为其预想的显示效果或者预想的组件种类，从而在一定程度上减低了前端开发过程中的开发难度，更适合非前端的开发人员从事前端开发工作。同时，本实施例中的前端编辑器选自ATOM编辑器、Brackets编辑器、Hbuilder编辑器、WebStorm编辑器或者VS Code编辑器，并最优选为WebStorm编辑器。
前端编辑页面可展现为图3中的UI。前端编辑器在前端开发过程中可实现诸如主题选择、颜色修改、插件管理、页面布局等多种操作。图3中的UI中以可视化的方式显示一操作区域51(ActionComponent)、一查询区域52(SearchComponent)以及一展示区域53(ViewComponent)；具体的，操作区域51中配置三个控件，即创建511、删除512和编辑513；查询区域52包含查询521(一种控件)以及键入框522，开发人员可在该键入框522中键入步骤S1中的页面配置数据或者前文所提及的自定义的缩略语等。
以下示出了操作区域51的代码实例。
以下示出了查询区域52的代码实例。
以下示出了展示区域53的代码实例。
结合图3所示，开发人员在前端开发过程中，无需了解操作区域51、查询区域52及展示区域53之间所具有的函数关系或者逻辑。具体而言，展示区域53用于显示自组件库42获取与组件配置匹配的组件的不同显示效果，以向开发人员展示同一组件的不同组件属性，或者不同组件的同一组件属性，或者不同组件的不同组件属性，即图3中的所呈现的展示属性一531、展示属性二532至展示属性n53n所对应的展示区域，其中，参数n取大于或者等于1的正整数。
尤其需要说明的是，在本实施例中，通过该步骤S2，避免了现有技术中在前端开发过程中需要定义组件所包含的组件属性(props)，并基于组件属性(props)调用组件以封装成前端过程中复用性差的缺陷。此种技术优势在多个具有相似页面显示效果的前端开发过程中，不需要要求开发人员熟知JSX语法及JavaScripts的开发经验。因此，开发人员可忽略已经保存在组件库42中的组件所具有的组件属性，而仅通过文字或者自定义的缩略语的形式从组件库42中调用开发人员所需要的组件，且无需破坏组件对应的函数所具有的逻辑，从而提高了代码的复用性，避免编写两个耦合很多的页面级组件。具体而言，例如在Web页面上如何显示一个具有特定位置、颜色、形状或者大小按钮，则位置、颜色、形状或者大小组件属性，如何形成开发人员所预想的具有特定位置、颜色、形状或者大小按钮的业务逻辑则体现为组件。
最后，执行步骤S3、前端编辑页面中使用高阶组件调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成嵌布于前端中的列表类组件。
与组件所具有的组件属性不同的是，前端的开发过程中的业务请求中所对应的业务所包含的逻辑通过函数来实现，然而在本实施例中，为前端封装逻辑的处理由高阶组件44来实现。高阶组件44负责页面配置数据的定义与调用，并由高阶组件44调用后端服务资源库45中与开发人员所需要的组件所对应的后端服务名称、地址或者端口信息中至少一种描述对象。具体而言，当开发人员所需要的组件在逻辑上位于一个物理服务器或者虚拟服务器集群时，可仅仅以后端服务名称作为描述对象，以从后端服务资源库45中调用开发人员所需要的组件；若开发人员所调用的组件分布于多个物理服务器或者虚拟服务器集群，则可同时基于后端服务名称、地址或者端口信息这三种描述对象调用组件。在本实施例所示出的上述多个实例中，此种对象可是一种实体数据，也可是一种进程，一种调用关系，一种变量，或者一种架构。
同时，高阶组件44调用后端服务资源库45中与所述组件匹配的页面配置数据在基于图3所示出的可视化界面(UI)的代码实例如下：
在本实施例中，该步骤S3具体为：在前端编辑页面(即图3中的UI)中使用高阶组件44调用后端服务资源库45中与组件所对应的后端服务名称、地址或者端口信息中至少一种描述对象，以在后端服务资源库45查找是否存在与组件匹配的页面配置数据；
若存在，由高阶组件44调用并运行后端服务名称、地址以及端口信息所展现的页面配置数据，渲染形成嵌布于前端中的列表类组件；优选的，当前端编辑页面接收至少两个前端配置业务请求时，使用高阶组件44通过反向继承方式复用多个前端配置业务请求中所包含的至少一个属性和/或函数，调用后端服务资源库45中与所述组件相匹配的页面配置数据。高阶组件44参数为组件，返回值为新组件的函数。构建前端过程中，用高阶组件44(属性代理模式)实现了装饰模式。开发人员在编写某个业务时，可以在之前的组件的基础上，额外进行一些修饰，用装饰器的方式节省代码的输入，因此非常适用于大型项目或者具有多个相似页面的前端开发场景。
若不存在，由后端服务资源库45通知高阶组件44触发配置信息错误定义事件。具体的，由后端服务资源库45通知高阶组件44触发配置信息错误定义事件包括：告警事件、通知提醒事件、对话框事件、文本提示框事件、标签弹出事件、全局提示事件。
当后端服务资源库45存在与组件匹配的页面配置数据时，高阶组件44触发根据组件的组件配置对与前端配置业务请求所对应的页面配置执行二次编辑事件，所述二次编辑事件包括：排序事件、筛选事件或者删除事件。触发并执行二次编辑事件，实现了对后端服务资源库45存在与组件匹配的页面配置数据进行进一步修改，从而使得从后端服务资源库45中所调用的页面配置数据的进一步修改，以实现对页面配置数据编辑的灵活性及对业务描述的准确性。
结合图2所示，如果存在未执行的前端配置业务请求，则在实施例中不需要重复执行步骤S1与步骤S2，而仅需要通过高阶组件44以反向继承方式复用已经被执行的前端配置业务请求中所包含的至少一个属性和/或函数，然后调用后端服务资源库45中与所述组件匹配的页面配置数据，并通过图2所示出的渲染模块43渲染形成前端。但是，无论是何种情形，最终所形成的前端所展现的页面48均是由视图渲染输出46与业务逻辑输出47共同配置形成的。
需要说明的是，在本实施例所揭示的该前端列表类组件的渲染方法中，不需要采用现有技术中在子类和基类之间切换来知悉基类所含的逻辑以实现子类的函数，不需要子类与基类之间相互继承的方式配置前端，使得前端配置过程更为简单。同时，本实施例所揭示的一种前端列表类组件的渲染方法，获取页面配置数据的逻辑及执行过程由与后端服务资源库45在逻辑上独立的高阶组件44中实现，页面不需要定义或者调用函数，只需要配置页面配置数据的参数即可，因此开发人员不需要在前端配置过程加入复杂的业务逻辑，后端服务资源库45仅与高阶组件44交互，极大地简化了前端配置的流程并降低了对前端的配置及维护难度。
优选的，本实施例还示出了一种前端列表类组件的渲染方法的一种变形例，且与实施例一所揭示的前端配置方向相比，其主要区别在于，在本实施例中，根据组件的组件配置执行配置信息错误定义和/或页面配置数据的二次编辑后还包括：对未执行的前端配置业务请求，通过高阶组件44以反向继承方式复用已经被执行的前端配置业务请求中所包含的至少一个属性和/或函数，然后调用后端服务资源库45中与组件匹配的页面配置数据，渲染形成嵌布于前端中的列表类组件。
前端列表类组件的渲染方法在高阶组件44接收前端配置请求出现未知错误或者形成该后端服务资源库45的服务器或者虚拟服务器集群响应超时或者意外断电等场景中导致渲染模块43出现页面渲染错误时，能够确保高阶组价42在形成该后端服务资源库45的服务器或者虚拟服务器集群恢复时，无需再次通知高阶组件44，由此避免了重复执行步骤S1与步骤S2，从而取得了能够有效地避免页面渲染出现阻塞的技术效果，并降低了对计算机内存资源的无序消耗。同时，在本实施例中，该前端列表类组件的渲染方法，基于React实现了列表类的基类，子类继承此基类，实现了在前端中列表类组件的统一形式的展示，并使得列表类组件易于后期的扩展。同时，本实施例所揭示的该前端列表类组件的渲染方法，不要采用现有中的基于索引/值key/value的形式存储至页面内存中的技术手段，因此显著地降低了基于React构建列表类组件对计算机内存所造成的性能消耗。
实施例二：
结合图2所示，其示出了本发明一种前端列表类组件的渲染系统的一种具体实施方式。在本实施例所揭示的前端列表类组件的渲染系统运行如实施例一所示的前端列表类组件的渲染方法所示出的技术方案。
该前端列表类组件的渲染系统，包括：
业务需求配置模块41，组件库42，渲染模块43，高阶组件44及后端服务资源库45。业务需求配置模块41接收前端配置请求(即图2中的业务配置411至业务配置41m，参数m取大于或者等于1的正整数)，该前端配置请求由开发人员在图3所示出的UI输入。而一个具体的业务配置，例如业务配置411则对应开发人员向该前端列表类组件的渲染系统所发出的一个前端配置业务请求，该前端配置业务请求至少包含开发人员的实际需求在后端中创建、部署或者构建列表类组件，并在前端中予以可视化展示。该前端配置业务请求至少包含在前端中配列表类组件的前端配置请求。
组件库42的构造函数保存被预先定义出的包含属性配置的组件配置，通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库42获取与组件配置匹配的组件，前端编辑页面中使用高阶组件44调用后端服务资源库45中与所述组件匹配的页面配置数据，通过渲染模块43渲染形成前端，并由视图渲染输出46与业务逻辑输出47共同配置形成前端所包含的一个或者多个页面48。其中，构造函数定义成员变量及生命周期函数(即componentDidMount与componentWillReceiveProps)。页面48中至少包含一种列表类组件(ListView)。
前端编辑页面可展现为图3中的UI。前端编辑器在前端开发过程中可实现诸如主题选择、颜色修改、插件管理、页面布局等多种操作。图3中的UI中以可视化的方式显示一操作区域51(ActionComponent)、一查询区域52(SearchComponent)以及一展示区域53(ViewComponent)；具体的，操作区域51中配置三个控件，即创建511、删除512和编辑513；查询区域52包含查询521(一种控件)以及键入框522，开发人员可在该键入框522中键入步骤S1中的页面配置数据或者前文所提及的自定义的缩略语等。前端编辑页面形成于业务需求配置模块41所形成的可视化界面(参图3所示出的UI)中，所述组件库42中的组件配置对高阶组件44予以暴露。该前端列表类组件的渲染系统可运行于计算机装置或者诸如实施例三所揭示的电子设备100中。
本实施例所揭示的前端列表类组件的渲染系统与实施例一中相同部分的技术方案，请参实施例一所述，在此不再赘述。
实施例三：
参图4所示，本实施例揭示了一种电子设备100，其包括：
至少一个处理器10，至少一个存储器20，总线11和I/O设备30。
处理器10和存储器20及I/O设备30通过所述总线11完成相互间的通信。存储器20存储有可被所述处理器10执行的程序指令，处理器10调用所述程序指令能够执行如实施例一所揭示的一种前端列表类组件的渲染方法。
需要说明的是，本实施例中所揭示的I/O设备30在计算机范畴内可被理解为一种显示器或者一种能够嵌入运行浏览器或者编辑工具的界面，或者至少能显示如图3所揭示的UI，开发人员能够通过I/O设备30键入指令，以通过该电子设备100运行实施例一所揭示的前端列表类组件的渲染方法的具体实现过程。用户可直接访问或者远程访问该电子设备100。
图4中的I/O设备30可被理解为实施例一中所揭示的前端编辑页面形成于业务需求配置模块41所形成的可视化界面(UI)，或者计算机、服务器、服务器集群、数据中心或者至少能够被配置一个云主机的装置和/或系统。
本实施例所揭示的电子设备100中所包含的前端列表类组件的渲染方法与实施例一和/或实施例二中具相同部分的技术方案，请参实施例一和/或实施例二所述，在此不再赘述。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
上文所列出的一系列的详细说明仅仅是针对本发明的可行性实施方式的具体说明，它们并非用以限制本发明的保护范围，凡未脱离本发明技艺精神所作的等效实施方式或变更均应包含在本发明的保护范围之内。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。
此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。
Claims (12)
1.一种前端列表类组件的渲染方法，其特征在于，包括以下步骤：
S1、预先在组件库的构造函数中定义出包含属性配置的组件配置，所述构造函数定义成员变量及生命周期函数，所述步骤S1还包括：对表格列columns加载基于re-table封装的具有排序功能的列表SortTable；对页码配置选项paginationOptions加载基于re-pagination封装的显示页码组件Pagination；对高级搜索配置选项advancedSearchOptions加载高级搜索组件AdvancedSearch，并由所述componentWillReceiveProps调用高阶组件调用后端服务资源库中与所述组件匹配的前一个页面配置数据；对表头按钮组buttonItems加载按钮组件Button.List；
S2、通过嵌套前端编辑器的前端编辑页面接收前端配置业务请求，自组件库获取与组件配置匹配的组件；
S3、前端编辑页面中使用高阶组件调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成嵌布于前端中的列表类组件。
2.根据权利要求1所述的前端列表类组件的渲染方法，其特征在于，所述生命周期函数包括componentDidMount与componentWillReceiveProps，构造函数定义成员变量的接口请求配置baseAction，并由componentDidMount根据接口请求配置baseAction中定义的接口向后端服务资源库发出接口请求。
3.根据权利要求2所述的前端列表类组件的渲染方法，其特征在于，所述成员变量包括：表格列columns、页码配置选项paginationOptions、高级搜索配置选项advancedSearchOptions或者表头按钮组buttonItems中的一种或者几种。
4.根据权利要求3所述的前端列表类组件的渲染方法，其特征在于，
所述接口请求配置baseAction定义查询请求的接口名称、修改列表数据的接口名称及删除列表数据的请求名称；
所述表格列columns定义列名称、列对应接口数据的字段名称以及render方法；所述页码配置选项paginationOptions定义分页选项；所述表头按钮组buttonItems定义列表的操作按钮组属性，所述操作按钮组属性包括操作名称、按钮图标及弹窗逻辑；所述高级搜索组件AdvancedSearch根据高级搜索配置选项advancedSearchOptions中定义的搜索项展示搜索形式，对前端编辑页面接收到的前端配置业务请求所对应的列表类组件予以展示，所述搜索形式包括文本输入对话框、下拉框或者时间段。
5.根据权利要求1至4中任一项所述的前端列表类组件的渲染方法，其特征在于，所述步骤S1中的组件配置包括组件的属性和方法；
所述步骤S2中自组件库获取与组件配置匹配的组件之后，还包括：
对与组件配置匹配的组件予以可视化展示。
6.根据权利要求5所述的前端列表类组件的渲染方法，其特征在于，所述前端编辑器选自ATOM编辑器、Brackets编辑器、Hbuilder编辑器、WebStorm编辑器或者VS Code编辑器。
7.根据权利要求5所述的前端列表类组件的渲染方法，其特征在于，所述步骤S3具体为：在前端编辑页面中使用高阶组件调用后端服务资源库中与组件所对应的后端服务名称、地址或者端口信息中至少一种描述对象，以在后端服务资源库查找是否存在与组件匹配的页面配置数据；
若存在，由高阶组件调用并运行后端服务名称、地址以及端口信息所展现的页面配置数据，渲染形成嵌布于前端中的列表类组件；
若不存在，由后端服务资源库通知高阶组件触发配置信息错误定义事件。
8.根据权利要求7所述的前端列表类组件的渲染方法，其特征在于，当前端编辑页面接收至少两个前端配置业务请求时，使用高阶组件通过反向继承方式复用多个前端配置业务请求中所包含的至少一个属性和/或函数，调用后端服务资源库中与所述组件相匹配的页面配置数据。
9.根据权利要求8所述的前端列表类组件的渲染方法，其特征在于，由后端服务资源库通知高阶组件触发配置信息错误定义事件包括：告警事件、通知提醒事件、对话框事件、文本提示框事件、标签弹出事件、全局提示事件。
10.根据权利要求9所述的前端列表类组件的渲染方法，其特征在于，当后端服务资源库存在与组件匹配的页面配置数据时，高阶组件触发根据组件的组件配置对与前端配置业务请求所对应的页面配置执行二次编辑事件，所述二次编辑事件包括：排序事件、筛选事件或者删除事件。
11.根据权利要求10所述的前端列表类组件的渲染方法，其特征在于，根据组件的组件配置执行配置信息错误定义和/或页面配置数据的二次编辑后还包括：对未执行的前端配置业务请求，通过高阶组件以反向继承方式复用已经被执行的前端配置业务请求中所包含的至少一个属性和/或函数，然后调用后端服务资源库中与所述组件匹配的页面配置数据，渲染形成嵌布于前端中的列表类组件。
12.一种电子设备，其特征在于，包括：
至少一个处理器，至少一个存储器，总线和I/O设备；所述处理器和存储器及I/O设备通过所述总线完成相互间的通信；所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如权利要求1至11中任一项所述的前端列表类组件的渲染方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011375224.2A CN112363794B (zh) | 2020-11-30 | 2020-11-30 | 一种前端列表类组件的渲染方法及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011375224.2A CN112363794B (zh) | 2020-11-30 | 2020-11-30 | 一种前端列表类组件的渲染方法及电子设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112363794A CN112363794A (zh) | 2021-02-12 |
| CN112363794B true CN112363794B (zh) | 2024-02-06 |
Family
ID=74535137
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011375224.2A Active CN112363794B (zh) | 2020-11-30 | 2020-11-30 | 一种前端列表类组件的渲染方法及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112363794B (zh) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113467876A (zh) * | 2021-07-01 | 2021-10-01 | 稿定（厦门）科技有限公司 | 页面组件的生成方法及装置 |
| CN113553121B (zh) * | 2021-07-07 | 2023-12-19 | 北京智慧星光信息技术有限公司 | 基于elementui列表的筛选配置方法、系统、电子设备及存储介质 |
| CN113505321A (zh) * | 2021-07-15 | 2021-10-15 | 罗慧 | 一种组件化数据展示系统和方法 |
| CN113468400B (zh) * | 2021-07-23 | 2023-11-28 | 平安国际智慧城市科技股份有限公司 | 可视化网页的列表渲染方法、装置、设备及存储介质 |
| CN114564270B (zh) * | 2022-03-03 | 2024-02-06 | 平安国际融资租赁有限公司 | 列表组件渲染、页面的前端展示方法、装置、设备及介质 |
| CN116302193B (zh) * | 2023-03-16 | 2024-02-13 | 北京易思汇商务服务有限公司 | 提升前端表格加载速度的方法、装置、设备及存储介质 |
| CN117555535B (zh) * | 2024-01-09 | 2024-05-14 | 云筑信息科技(成都)有限公司 | 一种React框架中实现多环境代码复用方法 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107402747A (zh) * | 2016-05-20 | 2017-11-28 | 中国科学院声学研究所 | 一种支持多终端类型的应用页面动态生成方法 |
| CN110322284A (zh) * | 2019-06-14 | 2019-10-11 | 广州汇量信息科技有限公司 | 广告页面视图的展示方法及系统 |
| CN110442326A (zh) * | 2019-08-11 | 2019-11-12 | 西藏宁算科技集团有限公司 | 一种基于Vue简化前后端分离权限控制的方法及其系统 |
| CN110705231A (zh) * | 2019-08-26 | 2020-01-17 | 苏宁云计算有限公司 | 一种网页编辑方法及装置 |
| CN111124477A (zh) * | 2019-12-19 | 2020-05-08 | 华云数据有限公司 | 一种前端配置方法、系统及电子设备 |
| CN111352682A (zh) * | 2018-12-24 | 2020-06-30 | 北京嘀嘀无限科技发展有限公司 | 页面渲染方法、装置、服务器及可读存储介质 |
-
2020
- 2020-11-30 CN CN202011375224.2A patent/CN112363794B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107402747A (zh) * | 2016-05-20 | 2017-11-28 | 中国科学院声学研究所 | 一种支持多终端类型的应用页面动态生成方法 |
| CN111352682A (zh) * | 2018-12-24 | 2020-06-30 | 北京嘀嘀无限科技发展有限公司 | 页面渲染方法、装置、服务器及可读存储介质 |
| CN110322284A (zh) * | 2019-06-14 | 2019-10-11 | 广州汇量信息科技有限公司 | 广告页面视图的展示方法及系统 |
| CN110442326A (zh) * | 2019-08-11 | 2019-11-12 | 西藏宁算科技集团有限公司 | 一种基于Vue简化前后端分离权限控制的方法及其系统 |
| CN110705231A (zh) * | 2019-08-26 | 2020-01-17 | 苏宁云计算有限公司 | 一种网页编辑方法及装置 |
| CN111124477A (zh) * | 2019-12-19 | 2020-05-08 | 华云数据有限公司 | 一种前端配置方法、系统及电子设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112363794A (zh) | 2021-02-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112363794B (zh) | 一种前端列表类组件的渲染方法及电子设备 | |
| CN111124477B (zh) | 一种前端配置方法、系统及电子设备 | |
| CN109358936B (zh) | 信息处理方法、装置、存储介质、电子设备及系统 | |
| TW202141300A (zh) | 頁面處理方法、裝置、設備及儲存媒體 | |
| KR101025949B1 (ko) | Ｘｍｌ 표현에서 ｚ-ｏｒｄｅｒ 엘리먼트들의 정밀립 제어 | |
| WO2020048326A1 (zh) | 一种界面显示方法、系统及终端设备 | |
| CN106991096B (zh) | 动态页面渲染方法及装置 | |
| CN102495735A (zh) | web 端UI组件应用框架系统 | |
| WO2015078566A1 (en) | System and method for testing data representation for different mobile devices | |
| EP2711846A1 (en) | Method and device for processing template file | |
| CN111381920B (zh) | 弹窗组件的显示方法、装置以及电子终端 | |
| US9198009B2 (en) | System and method for providing end to end interactive mobile applications using SMS | |
| CN114741071A (zh) | 一种应用构建方法及装置 | |
| CN113296758B (zh) | 一种前端组件库构建方法、装置及存储介质 | |
| CN112052000A (zh) | 组件复用、渲染方法及装置 | |
| WO2024066825A1 (zh) | 页面项目开发方法、装置、设备、介质及产品 | |
| CN115809056B (zh) | 组件复用实现方法、装置和终端设备、可读存储介质 | |
| CN110599112B (zh) | 一种网络页面开发、维护方法和装置 | |
| CN114237795B (zh) | 终端界面显示方法、装置、电子设备及可读存储介质 | |
| CN113835835B (zh) | 一种创建一致性组的方法、装置、及计算机可读存储介质 | |
| CN113961279A (zh) | 页面渲染方法、装置、服务器和存储介质 | |
| CN106383705A (zh) | 在应用瘦客户端中设置鼠标显示状态的方法及装置 | |
| US7634721B1 (en) | Composite component architecture using javaserver pages (JSP) tags | |
| CN114679491A (zh) | 微前端服务应用方法、装置、存储介质及电子设备 | |
| CN116595284B (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 |