CN112650966A - 在线设计的动态列表页面生成方法、生成器及介质 - Google Patents

Abstract

本发明公开了一种在线设计的动态列表页面生成方法、生成器及介质，其中方法包括以下步骤：S10、提供列表页面生成器的前端配置界面，根据用户配置生成列表数据模型；S20、表单框架根据列表数据模型生成列表HTML页面。其中，前端配置界面包括工具栏、控件面板、字段面板、网格区域以及属性面板；工具栏包括数据源导入按钮，用于导入数据库表；控件面板包括若干可拖拽的按钮控件；字段面板包括数据库表的字段控件；网格区域为行列式布局，包括若干单元格，每个单元格为一个控件。本发明能够通过简单的配置、拖放排列，即可智能化生成一个完整的列表页面程序。

Description

在线设计的动态列表页面生成方法、生成器及介质

技术领域

本发明涉及计算机信息处理技术领域，特别涉及一种在线设计的动态列表页面生成方法、生成器及介质。

背景技术

近年来，已经进入互联网智慧化时代，非计算机专业开发的运维人员需要一种无需开发程序简单设置即可生成动态列表页面的技术，传统的方法是需要专业人员敲打命令代码深入编程才能开发出来列表页面。该模式需要专业培训及编程基础才能成为专业的程序员，从学习到能开发出来，时间周期非常长。每次编程后，都需要运行一次，多次调试，操作繁琐。容易搞错，调试复杂。定制开发页面，如果数量比较多，就需要非常多的时间编程，效率低下。

网站信息发布及内容管理系统的默认功能是信息发布列表页面，简单明了展示和管理，是现阶段使用最多的功能之一。尤其是增、删、改、查的功能，使用起来，多年不改变。然而需要实现这些功能，以前都是需要编写程序才能实现，暂无其他的科学方法。程序的逻辑就是从数据库里面调取信息展示，实现查看、删除功能，同时也实现新增、修改功能。

非计算机开发专业的运维人员如何快速、简单又便捷的配置列表页面的字段顺序及程序，包括列表页面的操作功能、常规标准化字段等。能简单的配置、拖放排列，即可智能化生成一个完整的列表页面程序。成为我们急需要解决的痛点问题。

发明内容

本发明旨在至少解决现有技术中存在的技术问题之一。为此，本发明提出一种在线设计的动态列表页面生成，能够通过简单的配置、拖放排列，即可智能化生成一个完整的列表页面程序。

本发明还提出一种在线设计的动态列表页面生成器。

本发明还提出一种实施上述方法的计算机可读存储介质。

根据本发明的第一方面实施例的在线设计的动态列表页面生成方法，包括：S10、提供列表页面生成器的前端配置界面，根据用户配置生成列表数据模型；S20、表单框架根据所述列表数据模型生成列表HTML页面；其中，所述前端配置界面包括工具栏、控件面板、字段面板、网格区域以及属性面板；所述工具栏包括数据源导入按钮，用于导入数据库表；所述控件面板包括若干可拖拽的按钮控件；所述字段面板包括所述数据库表的字段控件；所述网格区域为行列式布局，包括若干单元格，每个所述单元格为一个控件；其中，所述步骤S10包括：S11、设置按钮控件的事件，并监听所述按钮控件的事件，若所述按钮控件被拖拽至所述网格区域的其中一个单元格，则将所述单元格的属性修改为所述按钮控件的属性S12、响应于所述字段控件被拖拽至所述单元格，将所述单元格与所述字段控件对应的字段关联，并从数据库获取字段数据；S13、根据所述单元格及字段生成列表数据模型。

根据本发明的一些实施例，所述步骤S20包括：S21、响应于发布指令，表单框架获取所述列表数据模型；S22、根据所述列表数据模型生成HTML页面。

根据本发明的一些实施例，所述列表数据模型以json数据格式保存，一个单元格对应一个json对象。

根据本发明的一些实施例，所述多个单元格可被配置为一个单元格。

根据本发明的一些实施例，所述属性面板包括控件类型下拉选择框、控件标题输入框以及绑定字段显示栏。

根据本发明的一些实施例，所述方法还包括：S30、响应于所述按钮控件被拖拽离开所述单元格，所述单元格恢复默认属性。

根据本发明的第二方面实施例的在线设计的动态列表页面生成器，包括：前端配置界面，用于提供列表页面生成器的前端配置界面，根据用户配置生成列表数据模型；表单框架，用于根据所述列表数据模型生成列表HTML页面；其中，所述前端配置界面包括工具栏、控件面板、字段面板、网格区域以及属性面板；所述工具栏包括数据源导入按钮，用于导入数据库表；所述控件面板包括若干可拖拽的按钮控件；所述字段面板包括所述数据库表的字段控件；所述网格区域为行列式布局，包括若干单元格，每个所述单元格为一个控件；其中，所述前端配置界面包括：控件配置模块，用于设置按钮控件的事件，并监听所述按钮控件的事件，若所述按钮控件被拖拽至所述网格区域的其中一个单元格，则将所述单元格的属性修改为所述按钮控件的属性；字段绑定模块，用于响应于所述字段控件被拖拽至所述单元格，将所述单元格与所述字段控件对应的字段关联，并从数据库获取字段数据；列表数据模型生成模块，用于根据所述单元格及字段生成列表数据模型。

根据本发明的一些实施例，所述列表数据模型以json数据格式保存，一个单元格对应一个json对象。

根据本发明的一些实施例，所述多个单元格可被配置为一个单元格。

根据本发明的第三方面实施例一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本发明的第以方面实施例中任一项的方法。

本发明实施例至少具有如下有益效果：

本发明实施例拖放字段、按钮后配置参数即可生成独立列表页面程序代码，无需编写复杂程序；字段及按钮封装为控件方式，安装“列表页面生成器”即可使用，具备人工智能系统特性；简单配置，操作简单，灵活；可应用于多个不同列表页面的个性定制开发；具有桌面应用的即时性、网站的可移植性和可访问性；无需开发底层代码，节省耗费研发时间、成本和精力、快速开发，取代程序员编写常规程序代码；整个系统的列表页面都能统一管理、生成，无需研发；列表页面排版设计灵活。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1为本发明实施例的方法的流程示意图。

图2为本发明实施例的前端配置界面的方法流程示意图。

图3为本发明实施例的表单框架生成HTML页面的方法流程示意图。

图4为本发明实施例的列表页面生成器界面示意图。

图5为本发明实施例的列表页面生成器的模块示意框图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。

在本发明的描述中，若干的含义是一个或者多个，多个的含义是两个及两个以上，大于、小于、超过等理解为不包括本数，以上、以下、以内等理解为包括本数。如果有描述到第一、第二只是用于区分技术特征为目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量或者隐含指明所指示的技术特征的先后关系。

本发明的动态列表页面开发模式，需要形成一个智能的控件，配置容易,方便排列，简单易懂的傻瓜式生成列表页面功能。

控件是指对数据和方法的封装。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能、控件创建过程包括设计、开发、调试(就是所谓的3Ds开发流程,即Design、Develop、Debug)工作，然后是控件的使用。

设计控件是一项繁重的工作。自行开发控件与使用控件进行可视化程序开发存在着极大的不同，要求程序员精通面向对象程序设计。创建控件的最大意义在于封装重复的工作，其次是可以扩充现有控件的功能。

本发明基于数据库的列表页面开发技术，以平台系统为载体，字段及按钮封装为控件拖放到页面位置，再简单的参数设置即可完成开发。从而使页面开发简单快捷，真正实现全方位人工智能自动生成个性定制列表页面目的。

参照图1，本发明实施例的方法包括以下步骤：

S10、提供列表页面生成器的前端配置界面，根据用户配置生成列表数据模型(以json数据格式保存，一个单元格对应一个json对象)；

S20、表单框架根据列表数据模型生成列表HTML页面；

其中，所述前端配置界面包括工具栏、控件面板、字段面板、网格区域以及属性面板；工具栏包括数据源导入按钮，用于导入数据库表；控件面板包括若干可拖拽的按钮控件；字段面板包括数据库表的字段控件；网格区域为行列式布局，包括若干单元格，每个单元格为一个控件。

参照图2，在一些实施例中，步骤S10包括：

S11、设置按钮控件的事件，并监听按钮控件的事件，若按钮控件被拖拽至网格区域的其中一个单元格，则将单元格的属性修改为按钮控件的属性；

S12、响应于字段控件被拖拽至单元格，将单元格与字段关联，并从数据库获取字段数据；

S13、根据单元格及字段生成列表数据模型。

参照图3，步骤S20包括：

S21、响应于发布指令，表单框架获取列表数据模型；

S22、根据列表数据模型生成HTML页面。

参照图4，本发明实施例的列表页面按钮分三类：按钮行(新增、批量删除、自定义列、导出Excel)、表格(修改、查看、删除、多选框列)以及其他(自定义按钮)。

列表生成器包含顶部工具栏，左边控件面板(包括：文本标签、文本框、文本域、单选框、多选框、下拉框、按钮、时间选择框、输入下拉框、数据选择框、数字输入框、货币输入框、附件上传、图片上传、富文本框、列表控件)+字段面板，中间网格区域，右边属性面板+选项卡面板。

中间网格区域即是表单界面，采用行列布局，其中多个单元格可以合并成一个，可以设置列宽度，添加更多行；可根据实际开发需求调整布局；每个单元格即一个控件，默认为文本标签。

通过鼠标拖拽的方式，可把控件拖到中间网格区域的单元格里改变单元格的控件类型，不同的控件包含不同的属性，可根据需求进行设置。设定好数据源后，可通过鼠标把字段拖拽到网格单元格里设置控件绑定的数据库字段。

本实施例的按钮及字段封装为控件的拖放功能，鼠标先选择列表页面按钮控件拖到HTML版面，放开后，自动固定在HTML版面的位置。同样，鼠标再选择字段到版面的位置，字段固定下来。如果字段拖放到“标题”位置，就可以“属性设置”“事件设置”相关参数信息，同时经过封装的控件转换后，内容就显示对应字段的信息于动态列表。如果想删除控件，只需要拖曳离开所在的位置，放开鼠标，即可删除，操作非常简便。

参照图5，本发明实施例的在线设计的动态列表页面生成器，包括：

前端配置界面，用于提供列表页面生成器的前端配置界面，根据用户配置生成列表数据模型(以json数据格式保存，一个单元格对应一个json对象)；

表单框架，用于根据列表数据模型生成列表HTML页面；

其中，前端配置界面包括工具栏、控件面板、字段面板、网格区域以及属性面板；工具栏包括数据源导入按钮，用于导入数据库表；控件面板包括若干可拖拽的按钮控件；字段面板包括数据库表的字段控件；网格区域为行列式布局，包括若干单元格，每个单元格为一个控件；

其中，前端配置界面包括：

控件配置模块，用于设置控件的事件，并监听控件的事件，若控件被拖拽至网格区域的其中一个单元格，则将单元格的属性修改为控件的属性；

字段绑定模块，用于响应于字段控件被拖拽至单元格，将控件与字段关联，并从数据库获取字段数据；

列表数据模型生成模块，用于根据控件及字段生成列表数据模型。

尽管本文描述了具体实施方案，但是本领域中的普通技术人员将认识到，许多其它修改或另选的实施方案同样处于本公开的范围内。例如，结合特定设备或组件描述的功能和/或处理能力中的任一项可以由任何其它设备或部件来执行。另外，虽然已根据本公开的实施方案描述了各种例示性具体实施和架构，但是本领域中的普通技术人员将认识到，对本文所述的例示性具体实施和架构的许多其它修改也处于本公开的范围内。

上文参考根据示例性实施方案所述的系统、方法、系统和/或计算机程序产品的框图和流程图描述了本公开的某些方面。应当理解，框图和流程图中的一个或多个块以及框图和流程图中的块的组合可分别通过执行计算机可执行程序指令来实现。同样，根据一些实施方案，框图和流程图中的一些块可能无需按示出的顺序执行，或者可以无需全部执行。另外，超出框图和流程图中的块所示的那些部件和/或操作以外的附加部件和/或操作可存在于某些实施方案中。

因此，框图和流程图中的块支持用于执行指定功能的装置的组合、用于执行指定功能的元件或步骤的组合以及用于执行指定功能的程序指令装置。还应当理解，框图和流程图中的每个块以及框图和流程图中的块的组合可以由执行特定功能、元件或步骤的专用硬件计算机系统或者专用硬件和计算机指令的组合来实现。

本文所述的程序模块、应用程序等可包括一个或多个软件组件，包括例如软件对象、方法、数据结构等。每个此类软件组件可包括计算机可执行指令，所述计算机可执行指令响应于执行而使本文所述的功能的至少一部分(例如，本文所述的例示性方法的一种或多种操作)被执行。

软件组件可以用各种编程语言中的任一种来编码。一种例示性编程语言可以为低级编程语言，诸如与特定硬件体系结构和/或操作系统平台相关联的汇编语言。包括汇编语言指令的软件组件可能需要在由硬件架构和/或平台执行之前由汇编程序转换为可执行的机器代码。另一种示例性编程语言可以为更高级的编程语言，其可以跨多种架构移植。包括更高级编程语言的软件组件在执行之前可能需要由解释器或编译器转换为中间表示。编程语言的其它示例包括但不限于宏语言、外壳或命令语言、作业控制语言、脚本语言、数据库查询或搜索语言、或报告编写语言。在一个或多个示例性实施方案中，包含上述编程语言示例中的一者的指令的软件组件可直接由操作系统或其它软件组件执行，而无需首先转换成另一种形式。

软件组件可存储为文件或其它数据存储构造。具有相似类型或相关功能的软件组件可一起存储在诸如特定的目录、文件夹或库中。软件组件可为静态的(例如，预设的或固定的)或动态的(例如，在执行时创建或修改的)。

上面结合附图对本发明实施例作了详细说明，但是本发明不限于上述实施例，在所属技术领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下作出各种变化。

Claims (10)

1.一种在线设计的动态列表页面生成方法，其特征在于，包括：

S10、提供列表页面生成器的前端配置界面，根据用户配置生成列表数据模型；

S20、表单框架根据所述列表数据模型生成列表HTML页面；

其中，所述前端配置界面包括工具栏、控件面板、字段面板、网格区域以及属性面板；所述工具栏包括数据源导入按钮，用于导入数据库表；所述控件面板包括若干可拖拽的按钮控件；所述字段面板包括所述数据库表的字段控件；所述网格区域为行列式布局，包括若干单元格，每个所述单元格为一个控件；

其中，所述步骤S10包括：

S11、设置按钮控件的事件，并监听所述按钮控件的事件，若所述按钮控件被拖拽至所述网格区域的其中一个单元格，则将所述单元格的属性修改为所述按钮控件的属性；

S12、响应于所述字段控件被拖拽至所述单元格，将所述单元格与所述字段控件对应的字段关联，并从数据库获取字段数据；

S13、根据所述单元格及字段生成列表数据模型。

2.根据权利要求1所述的在线设计的动态列表页面生成方法，其特征在于，所述步骤S20包括：

S21、响应于发布指令，表单框架获取所述列表数据模型；

S22、根据所述列表数据模型生成HTML页面。

3.根据权利要求1所述的在线设计的动态列表页面生成方法，其特征在于，所述列表数据模型以json数据格式保存，一个单元格对应一个json对象。

4.根据权利要求1所述的在线设计的动态列表页面生成方法，其特征在于，所述多个单元格可被配置为一个单元格。

5.根据权利要求1所述的在线设计的动态列表页面生成方法，其特征在于，所述属性面板包括控件类型下拉选择框、控件标题输入框以及绑定字段显示栏。

6.根据权利要求1所述的在线设计的动态列表页面生成方法，其特征在于，所述方法还包括：S30、响应于所述按钮控件被拖拽离开所述单元格，所述单元格恢复默认属性。

7.一种在线设计的动态列表页面生成器，其特征在于，包括：

前端配置界面，用于提供列表页面生成器的前端配置界面，根据用户配置生成列表数据模型；

表单框架，用于根据所述列表数据模型生成列表HTML页面；

其中，所述前端配置界面包括工具栏、控件面板、字段面板、网格区域以及属性面板；所述工具栏包括数据源导入按钮，用于导入数据库表；所述控件面板包括若干可拖拽的按钮控件；所述字段面板包括所述数据库表的字段控件；所述网格区域为行列式布局，包括若干单元格，每个所述单元格为一个控件；

其中，所述前端配置界面包括：

控件配置模块，用于设置按钮控件的事件，并监听所述按钮控件的事件，若所述按钮控件被拖拽至所述网格区域的其中一个单元格，则将所述单元格的属性修改为所述按钮控件的属性；

字段绑定模块，用于S12、响应于所述字段控件被拖拽至所述单元格，将所述单元格与所述字段控件对应的字段关联，并从数据库获取字段数据；

列表数据模型生成模块，用于根据所述单元格及字段生成列表数据模型。

8.根据权利要求7所述的在线设计的动态列表页面生成器，其特征在于，所述列表数据模型以json数据格式保存，一个单元格对应一个json对象。

9.根据权利要求7所述的在线设计的动态列表页面生成器，其特征在于，所述多个单元格可被配置为一个单元格。

10.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1至6中任一项的方法。

Images