CN111259303A - 一种web信息系统前端页面自动生成的系统及其方法 - Google Patents
一种web信息系统前端页面自动生成的系统及其方法 Download PDFInfo
- Publication number
- CN111259303A CN111259303A CN202010061778.9A CN202010061778A CN111259303A CN 111259303 A CN111259303 A CN 111259303A CN 202010061778 A CN202010061778 A CN 202010061778A CN 111259303 A CN111259303 A CN 111259303A
- Authority
- CN
- China
- Prior art keywords
- configuration
- page
- field
- data
- interface
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
- Debugging And Monitoring (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
一种WEB信息系统前端页面自动生成的系统，包括有数据配置模块、后端生成模块、前端生成模块；该方法包括以下步骤：步骤一，在数据配置模块进行业务逻辑数据配置；步骤二，根据步骤一的数据配置生成数据查询服务接口；步骤三，根据步骤一的数据配置和步骤二的服务接口，生成前端页面；该方法解决了开发周期长，人员技能要求高，修改生效周期长，开发成本高的问题。
Description
技术领域
本发明属于WEB页面生成技术领域，具体涉及一种WEB信息系统前端页面自动生成的系统及其方法。
背景技术
Web页面定义的方法很多，有采用Sun公司的JSP文件格式、微软公司的ASP、XAML格式，有PHP文件格式，有Adobe公司采用的 SWFXML文件格式，每种格式都有它的优势和劣势。针对各种文件格式，都对页面展现的基本元素进行了定义，包括页面、布局、控件、事件的定义。
针对每个业务，用户看到的每个界面，以及统一业务的每个端(如 PC、AndroidAPP、IOSAPP、微信公众号界面、微信小程序、WAP界面)，通常开发者都要进行逐一的开发，代码重复度高，业务与代码耦合度高，同一业务逻辑规则在系统中多处代码分布(如数据库规则，服务端处理代码，前端界面数据字段及呈现、校验规则及用户交互与提示处理代码)频繁出现不一致及用户不友好，对于业务的频繁变化难以应对，人员技能要求高(例如要懂CSS布局、html、JavaScript，以及各种响应式布局和前端框架如Angular、VUE、React)，造成了巨大的开发工作量的浪费，复杂度高，可重用度低，维护成本高。
发明内容
为克服上述现有技术的不足，本发明的目的是提供一种WEB信息系统前端页面自动生成的系统及其方法，以解决开发周期长，人员技能要求高，修改生效周期长，开发成本高的问题。
为实现上述目的，本发明采用的方案是：一种WEB信息系统前端页面自动生成的系统，包括有数据配置模块、后端生成模块、前端生成模块；
所述的数据配置模块是后端生成模块和前端生成模块的基础，后端生成模块依赖数据配置模块，前端生成模块通过获取数据配置的参数进行界面展示。数据配置模块具体包含业务表配置、表MAP关系配置、树形表属性配置、字段关联关系配置、业务表字段相关配置、字段显示特性配置、字段分组配置和业务逻辑配置。
所述的后端生成模块是指在后端把数据配置完成后，系统执行热加载操作，系统自动处理数据配置模块的配置，生成增加、删除、更新和查询接口和数据表信息。
所述的前端生成模块是指系统按照接口的定义，查询出配置的信息，根据配置信息进行前端界面生成。
一种WEB信息系统前端页面自动生成的系统，包括有数据库，数据库存储信息系统业务逻辑相关的内容，作为数据库数据或者脚本文件的方式进行维护和存储以及独立维护，数据库通过服务接口将数据库的存储内容供前端查询；采用web前后端分离的架构；使用通用的后端代码解析配置内容，提供服务端服务接口；使用通用的前端代码解析后端返回的配置内容，构造业务页面相关内容及用户交互组件。
一种WEB信息系统前端页面自动生成的方法，包括以下步骤：
步骤一，在数据配置模块进行业务逻辑数据配置，具体包括以下内容：
业务表配置，包括业务表英文名、中文名、业务表类型、业务表间关系，业务表唯一性约束，主键，行数据显示标签字段配置；
业务表字段相关配置，包括字段英文名、中文名、字段自定义类型、字段缺省值、字段是否必须输入、字段长度、字段顺序编号、字段校验规则配置、字段校验规则相关提示配置、字段placeholder配置、字段帮助配置；
表MAP关系配置，对于是MAP关系表的，标记MAP表关系以及相关的字段，从而在业务界面、用户交互及业务数据处理时，按 MAP特定业务逻辑进行处理；
树形表属性配置，对于是树形逻辑关系的表的，标记树型表属性，以及相关的字段自引用父节点，树路径，是否叶子节点属性字段，从而在业务界面、用户交互及业务数据处理时，按树形表特定业务逻辑进行处理；
字段关联关系配置，包括表字段间的外键引用关系，被引用数据详情界面是否显示引用子表列表，子表显示标题名称，显示顺序；
新增页面字段显示特性配置，包括自定义数据类型对应的可选新增组件配置选择，可见性取值或者表达式配置、可编辑性取值或者表达式配置、顺序、标签、必须输入属性取值或表达式配置、缺省值取值或者表达式配置、自动取值或者表达式配置；
修改页面字段显示特性配置，包括自定义数据类型对应的可选修改组件配置选择，可见性取值或者表达式配置、可编辑性取值或者表达式配置、顺序、标签、必须输入属性取值或表达式配置、缺省值取值或者表达式配置、自动取值或者表达式配置；
列表或者详情字段显示特性配置，包括自定义数据类型对应的可选显示组件配置选择，可见性取值或者表达式配置、顺序、标签；
字段分组配置，配置字段在新增、修改、详情、列表查看时的分组标签、分组显示名称，前端将自动按分组进行显示；
业务逻辑相关数据配置，可以使用特殊设计的界面及程序进行数据的增删改查维护，也可以使用数据库客户端工具或者脚本文件文本编辑工具进行数据修改和维护；
步骤二，根据步骤一的数据配置生成数据查询服务接口，具体包括：
一个数据表，默认生成增加、删除、修改、查询4个服务接口的配置数据，根据字段新增、修改、列表/详情查询时相关字段属性，对应自动生成该服务接口默认对应的字段清单及字段属性清单；可以根据业务需要自定义新的服务接口以及配置对应的字段清单，并配置对应关系到物理表；
一个原始的服务接口，以及相关的属性参数配置，可以构成一个页面块，一个页面块通常由页面块类型，对应服务接口，以及服务接口调用入参来指定，服务接口调用入参可以人为指定，也可以由运行时url传入；
可以配置自定义页面，通过指定多个页面块以及顺序的方式定义自定义页面，页面块之间可以指定参数传递或依赖关系，页面块也可以指定可变入参，多个页面块的入参构成了整个页面的入参；
通过后端服务接口，可以查询指定服务接口，指定表，指定字段的相关配置数据；
通过后端服务接口，可以查询数据间关联关系；
步骤三，根据步骤一的数据配置和步骤二的服务接口，生成前端页面，本步骤具体如下内容：
第一，原子列表页面自动生成；
第二，原子新增/修改页面自动生成；
第三，原子详情查看页面自动生成：
第四，原子自定义服务接口页面自动生成；
第五，自定义界面/页面自动生成。
步骤三所述的原子列表页面自动生成，其生成过程为：
1)前端页面加载时，首先根据页面url及参数构造页面配置请求，并发送页面配置请求到后端服务器的数据配置模块；
2)后端服务器的数据配置模块收到页面配置请求，根据配置数据组织请求响应参数，并返回给前端页面；
3)前端页面接收到页面配置请求响应，根据响应中的配置参数进行页面生成。
步骤三所述的原子新增/修改页面自动生成，其生成过程为：
1)页面加载后，首先根据页面url参数，含新增/编辑服务接口，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
2)请求响应返回后，前端页面接收到服务接口相关的配置参数，以及相关的字段的配置参数；
3)对于新增界面，根据页面url传入的参数作为新增界面部分字段的默认取值参数；
4)对于修改界面，根据页面url传入的修改数据对象的查询条件，自动调用后端数据的查询接口，获取到修改对象数据，并填充到修改页面表单的对应字段，作为被修改数据的显示；
5)根据返回参数，设置页面顶部标题，以及页面块标题；
6)根据返回参数中相关的字段顺序设定新增表单数据字段的顺序；
7)根据字段标签，设置字段标签名称；
8)根据配置的字段分组规则，自动进行新增/编辑界面的字段分组显示；
9)根据配置的字段类型以及该类型的表单类型，自动应用该字段的新增、修改页面表单控件；
10)根据配置的字段校验条件规则，自动加载运行，在界面填写字段取值时，自动应用校验规则，并自动应用校验相关的提示信息显示；
11)根据字段配置的显示隐藏规则配置，自动应用该字段表单的显示隐藏；
12)根据字段的只读配置规则，自动应用该字段的只读设置；
13)根据配置的字段取值自动生成规则，根据其他字段的填写値，自动计算生成该字段的取值。
步骤三所述的页面生成包括：
a、根据返回参数，设置页面顶部标题，以及页面块标题；
b、根据返回参数中相关的字段顺序设定列表数据列的顺序；
c、根据字段标签，设置列表标题栏名称；
d、根据配置的列表行数据操作按钮配置，按钮名称，顺序，按钮操作动作，自动生成列表行的操作按钮，按钮默认在最后一栏；
e、根据列表操作按钮的配置，按钮名称，顺序，按钮操作动作，绘制列表的操作按钮；
f、根据后端服务接口配置的查询字段相关配置，绘制查询按钮对应展示的可查询字段，以及字段的查询输入操作控件；
g、可根据配置提供查询默认显示的常用查询字段，以及下拉勾选可以供查询的所有字段；并可以根据查询使用的频率，自动统计默认显示topn的查询字段；
h、可以根据配置提供统计查询按钮，点击操作后，提供相关的分组字段和分组方式，统计字段以及常见统计方式，选择相关选项后，点击查询，对应向后台查询和显示统计查询的数据；
i、根据新增按钮配置，操作后可以根据配置的新增页面出现方式弹出或者跳转到新增操作界面；
j、根据修改按钮配置，操作后可以根据配置的修改页面出现方式弹出或者跳转到修改操作界面；
k、根据自定义操作按钮的配置，操作后可以根据配置的操作界面出现方式弹出或者跳转到对应操作界面，操作界面的类型由配置的界面的类型对应的接口决定。
步骤三所述的原子详情查看页面自动生成，包括以下过程：
1)页面加载后，首先根据页面url参数，查询服务接口，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
2)请求响应返回后，前端页面接收到服务接口相关的配置参数，以及相关的字段的配置参数；
3)根据页面url传入的修改数据对象的查询条件，自动调用后端数据的查询接口，获取到查询对象数据，并填充到详情页面对应字段，作为数据的详情显示；
4)根据返回参数，设置页面顶部标题，以及页面块标题；
5)根据返回参数中相关的字段顺序设定新增表单数据字段的顺序；
6)根据字段标签，设置字段标签名称；
7)根据配置的字段分组规则，自动进行新增/编辑界面的字段分组显示；
8)根据配置的字段类型以及该类型的表单类型，自动应用该字段的详情显示页面表单控件；
9)根据字段配置的显示隐藏规则配置，自动应用该字段表单的显示隐藏；
10)根据服务接口配置的关联表显示规则及显示参数，服务接口、关联字段，自动调用关联表相关查询服务接口查询服务接口及字段相关配置，并自动调用关联表数据查询接口查询关联表显示数据，将关联表内容作为主表的子表显示。
步骤三所述的原子自定义服务接口页面自动生成，其生成过程为：
1)页面加载后，首先根据页面url参数，自定义服务接口，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
2)请求响应返回后，前端页面接收到服务接口相关的配置参数，以及相关的字段的配置参数；
3)根据页面url传入的参数作为自定义服务接口操作界面部分字段的默认取值参数；
4)根据返回参数，设置界面顶部标题，以及页面块标题；
5)根据返回参数中相关的字段顺序设定新增表单数据字段的顺序；
6)根据字段标签，设置字段标签名称；
7)根据配置的字段分组规则，自动进行自定义服务接口操作界面的字段分组显示；
8)根据配置的字段类型以及该类型的表单类型，自动应用该字段的自定义服务接口操作表单控件；
9)根据配置的字段校验条件规则，自动加载运行，在界面填写字段取值时，自动应用校验规则，并自动应用校验相关的提示信息显示；
10)根据字段配置的显示隐藏规则配置，自动应用该字段表单的显示隐藏；
11)根据字段的只读配置规则，自动应用该字段的只读设置；
12)根据配置的字段取值自动生成规则，根据其他字段的填写値，自动计算生成该字段的取值。
所述的自定义界面/页面自动生成，其生成过程为：
A、页面加载后，首先根据页面url参数，包含自定义页面类型及自定义页面编号，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
B、请求响应返回后，前端页面接收到自定义页面相关的页面块配置参数；
C、页面块的布局可以根据响应式布局的功能，指定页面块的位置及布局，包括跨行、跨列、一行多列；
D、一个页面块可以是自定义图表、卡片列表、普通列表、详情、新增表单、编辑表单、自定义服务接口表单、配置的静态富文本、或者指定数据字段的富文本；
E、每个页面块又根据页面块类型，以及配置的参数，去请求页面块的相关配置参数，以及请求页面块相关的数据；
F、根据请求的页面块数据以及页面块的布局，启动绘制自定义页面。
本发明的有益效果是：
由于本发明才用了动态生成页面的方法，所以具有开发上线快、修改实时生效、便于维护的优点。
1)用户仅需要通过数据配置，不需要进行代码的开发测试，即可以生成实现业务逻辑的页面，所有开发上线速度极快；
2)用户通过后台配置修改后，刷新页面即可实时看到页面内容。
3)通过页面配置进行管理，大大降低了使用者的操作门槛，用户无需关注代码实现，便于维护。
附图说明
图1为本发明的系统原理框图。
图2为本发明的流程图。
具体实施方式
下面结合附图和实施例对本发明作进一步详细说明。
参见图1，一种WEB信息系统前端页面自动生成的系统，包括有数据配置模块、后端生成模块、前端生成模块。
数据配置模块具体包含业务表配置、表MAP关系配置、树形表属性配置、字段关联关系配置、业务表字段相关配置、字段显示特性配置、字段分组配置和业务逻辑配置。
后端生成模块主要根据数据配置模块的配置信息自动生成表和服务接口信息。
前端生成模块主要是根据数据配置模块配置的信息和后端生成模块生成的接口信息进行构造页面参数，通过浏览器访问请求，自动生成页面。
参见图2，一种WEB信息系统前端页面自动生成的方法，包括以下步骤：
步骤一，在数据配置模块进行业务逻辑数据配置，具体包括以下内容：
业务表配置，包括业务表英文名、中文名、业务表类型、业务表间关系，业务表唯一性约束，主键，行数据显示标签字段配置；
业务表字段相关配置，包括字段英文名、中文名、字段自定义类型、字段缺省值、字段是否必须输入、字段长度、字段顺序编号、字段校验规则配置、字段校验规则相关提示配置、字段placeholder配置、字段帮助配置；
表MAP关系配置，对于是MAP关系表的，标记MAP表关系以及相关的字段，从而在业务界面、用户交互及业务数据处理时，按 MAP特定业务逻辑进行处理；
树形表属性配置，对于是树形逻辑关系的表的，标记树型表属性，以及相关的字段自引用父节点，树路径，是否叶子节点属性字段，从而在业务界面、用户交互及业务数据处理时，按树形表特定业务逻辑进行处理；
字段关联关系配置，包括表字段间的外键引用关系，被引用数据详情界面是否显示引用子表列表，引用子表列表显示标题名称，显示顺序；
新增页面字段显示特性配置，包括自定义数据类型对应的可选新增组件配置选择，可见性取值或者表达式配置、可编辑性取值或者表达式配置、顺序、标签、必须输入属性取值或表达式配置、缺省值取值或者表达式配置、自动取值或者表达式配置；
修改页面字段显示特性配置，包括自定义数据类型对应的可选修改组件配置选择，可见性取值或者表达式配置、可编辑性取值或者表达式配置、顺序、标签、必须输入属性取值或表达式配置、缺省值取值或者表达式配置、自动取值或者表达式配置；
列表或者详情字段显示特性配置，包括自定义数据类型对应的可选显示组件配置选择，可见性取值或者表达式配置、顺序、标签；
字段分组配置，配置字段在新增、修改、详情、列表查看时的分组标签、分组显示名称，前端将自动按分组进行显示；
业务逻辑相关数据配置，可以使用特殊设计的界面及程序进行数据的增删改查维护，也可以使用数据库客户端工具或者脚本文件文本编辑工具进行数据修改和维护；
步骤二，根据步骤一的数据配置生成数据查询服务接口，具体包括：
一个数据表，默认生成增加、删除、修改、查询4个服务接口的配置数据，根据字段新增、修改、列表/详情查询时相关字段属性，对应自动生成该服务接口默认对应的字段清单及字段属性清单；可以根据业务需要自定义新的服务接口以及配置对应的字段清单，并配置对应关系到物理表；
一个原始的服务接口，以及相关的属性参数配置，可以构成一个页面块，一个页面块通常由页面块类型，对应服务接口，以及服务接口调用入参来指定，服务接口调用入参可以人为指定，也可以由运行时url传入；
可以配置自定义页面，通过指定多个页面块以及顺序的方式定义自定义页面，页面块之间可以指定参数传递或依赖关系，页面块也可以指定可变入参，多个页面块的入参构成了整个页面的入参；
通过后端服务接口，可以查询指定服务接口，指定表，指定字段的相关配置数据；
通过后端服务接口，可以查询数据间关联关系；
步骤三，根据步骤一的数据配置和步骤二的服务接口，生成前端页面
第一，原子列表页面自动生成过程包括：
1)前端页面加载时，首先根据页面url及参数构造页面配置请求，并发送页面配置请求到后端服务器的数据配置模块；
2)后端服务器的数据配置模块收到页面配置请求，根据配置数据组织请求响应参数，并返回给前端页面；
3)前端页面接收到页面配置请求响应，根据响应中的配置参数进行页面生成：
a、根据返回参数，设置页面顶部标题，以及页面块标题；
b、根据返回参数中相关的字段顺序设定列表数据列的顺序；
c、根据字段标签，设置列表标题栏名称；
d、根据配置的列表行数据操作按钮配置，按钮名称，顺序，按钮操作动作，自动生成列表行的操作按钮，按钮默认在最后一栏；
e、根据列表操作按钮的配置，按钮名称，顺序，按钮操作动作，绘制列表的操作按钮；
f、根据后端服务接口配置的查询字段相关配置，绘制查询按钮对应展示的可查询字段，以及字段的查询输入操作控件；
g、可根据配置提供查询默认显示的常用查询字段，以及下拉勾选可以供查询的所有字段；并可以根据查询使用的频率，自动统计默认显示topn的查询字段；
h、可以根据配置提供统计查询按钮，点击操作后，提供相关的分组字段和分组方式，统计字段以及常见统计方式，选择相关选项后，点击查询，对应向后台查询和显示统计查询的数据；
i、根据新增按钮配置，操作后可以根据配置的新增页面出现方式弹出或者跳转到新增操作界面；
j、根据修改按钮配置，操作后可以根据配置的修改页面出现方式弹出或者跳转到修改操作界面；
k、根据自定义操作按钮的配置，操作后可以根据配置的操作界面出现方式弹出或者跳转到对应操作界面，操作界面的类型由配置的界面的类型对应的接口决定；
第二，原子新增/修改页面自动生成过程包括：
1)页面加载后，首先根据页面url参数，含新增/编辑服务接口，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
2)请求响应返回后，前端页面接收到服务接口相关的配置参数，以及相关的字段的配置参数；
3)对于新增界面，根据页面url传入的参数作为新增界面部分字段的默认取值参数；
4)对于修改界面，根据页面url传入的修改数据对象的查询条件，自动调用后端数据的查询接口，获取到修改对象数据，并填充到修改页面表单的对应字段，作为被修改数据的显示；
5)根据返回参数，设置页面顶部标题，以及页面块标题；
6)根据返回参数中相关的字段顺序设定新增表单数据字段的顺序；
7)根据字段标签，设置字段标签名称；
8)根据配置的字段分组规则，自动进行新增/编辑界面的字段分组显示；
9)根据配置的字段类型以及该类型的表单类型，自动应用该字段的新增、修改页面表单控件；
10)根据配置的字段校验条件规则，自动加载运行，在界面填写字段取值时，自动应用校验规则，并自动应用校验相关的提示信息显示；
11)根据字段配置的显示隐藏规则配置，自动应用该字段表单的显示隐藏；
12)根据字段的只读配置规则，自动应用该字段的只读设置；
13)根据配置的字段取值自动生成规则，根据其他字段的填写値，自动计算生成该字段的取值；
第三，原子详情查看页面自动生成过程包括：
1)页面加载后，首先根据页面url参数，查询服务接口，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
2)请求响应返回后，前端页面接收到服务接口相关的配置参数，以及相关的字段的配置参数；
3)根据页面url传入的修改数据对象的查询条件，自动调用后端数据的查询接口，获取到查询对象数据，并填充到详情页面对应字段，作为数据的详情显示；
4)根据返回参数，设置页面顶部标题，以及页面块标题；
5)根据返回参数中相关的字段顺序设定新增表单数据字段的顺序；
6)根据字段标签，设置字段标签名称；
7)根据配置的字段分组规则，自动进行新增/编辑界面的字段分组显示；
8)根据配置的字段类型以及该类型的表单类型，自动应用该字段的详情显示页面表单控件；
9)根据字段配置的显示隐藏规则配置，自动应用该字段表单的显示隐藏；
10)根据服务接口配置的关联表显示规则及显示参数，服务接口、关联字段，自动调用关联表相关查询服务接口查询服务接口及字段相关配置，并自动调用关联表数据查询接口查询关联表显示数据，将关联表内容作为主表的子表显示；
第四，原子自定义服务接口页面自动生成过程包括：
1)页面加载后，首先根据页面url参数，自定义服务接口，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
2)请求响应返回后，前端页面接收到服务接口相关的配置参数，以及相关的字段的配置参数；
3)根据页面url传入的参数作为自定义服务接口操作界面部分字段的默认取值参数；
4)根据返回参数，设置界面顶部标题，以及页面块标题；
5)根据返回参数中相关的字段顺序设定新增表单数据字段的顺序；
6)根据字段标签，设置字段标签名称；
7)根据配置的字段分组规则，自动进行自定义服务接口操作界面的字段分组显示；
8)根据配置的字段类型以及该类型的表单类型，自动应用该字段的自定义服务接口操作表单控件；
9)根据配置的字段校验条件规则，自动加载运行，在界面填写字段取值时，自动应用校验规则，并自动应用校验相关的提示信息显示；
10)根据字段配置的显示隐藏规则配置，自动应用该字段表单的显示隐藏；
11)根据字段的只读配置规则，自动应用该字段的只读设置；
12)根据配置的字段取值自动生成规则，根据其他字段的填写値，自动计算生成该字段的取值；
第五，自定义界面/页面自动生成过程包括：
A、页面加载后，首先根据页面url参数，包含自定义页面类型及自定义页面编号，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
B、请求响应返回后，前端页面接收到自定义页面相关的页面块配置参数；
C、页面块的布局可以根据响应式布局的功能，指定页面块的位置及布局，包括跨行、跨列、一行多列；
D、一个页面块可以是自定义图表、卡片列表、普通列表、详情、新增表单、编辑表单、自定义服务接口表单、配置的静态富文本、或者指定数据字段的富文本；
E、每个页面块又根据页面块类型，以及配置的参数，去请求页面块的相关配置参数，以及请求页面块相关的数据；
F、根据请求的页面块数据以及页面块的布局，启动绘制自定义页面。
Claims (8)
1.一种WEB信息系统前端页面自动生成的系统，其特征在于，包括有数据配置模块、后端生成模块、前端生成模块；
所述的数据配置模块是后端生成模块和前端生成模块的基础，后端生成模块依赖数据配置模块，前端生成模块通过获取数据配置的参数进行界面展示。数据配置模块具体包含业务表配置、表MAP关系配置、树形表属性配置、字段关联关系配置、业务表字段相关配置、字段显示特性配置、字段分组配置和业务逻辑配置。
所述的后端生成模块是指在数据配置完成后，系统执行热加载操作，系统根据数据配置，生成增加、删除、更新和查询接口和数据表信息。
所述的前端生成模块是指系统按照接口的定义，查询出配置的信息，根据配置信息进行前端界面生成。
2.一种WEB信息系统前端页面自动生成的方法，其特征在于，包括以下步骤：
步骤一，在数据配置模块进行业务逻辑数据配置，具体包括以下内容：
业务表配置，包括业务表英文名、中文名、业务表类型、业务表间关系，业务表唯一性约束，主键，行数据显示标签字段配置；
业务表字段相关配置，包括字段英文名、中文名、字段自定义类型、字段缺省值、字段是否必须输入、字段长度、字段顺序编号、字段校验规则配置、字段校验规则相关提示配置、字段placeholder配置、字段帮助配置；
表MAP关系配置，对于是MAP关系表的，标记MAP表关系以及相关的字段，从而在业务界面、用户交互及业务数据处理时，按MAP特定业务逻辑进行处理；
树形表属性配置，对于是树形逻辑关系的表的，标记树型表属性，以及相关的字段自引用父节点，树路径，是否叶子节点属性字段，从而在业务界面、用户交互及业务数据处理时，按树形表特定业务逻辑进行处理；
字段关联关系配置，包括表字段间的外键引用关系，被引用数据详情界面是否显示引用子表列表，子表显示标题名称，显示顺序；
新增页面字段显示特性配置，包括自定义数据类型对应的可选新增组件配置选择，可见性取值或者表达式配置、可编辑性取值或者表达式配置、顺序、标签、必须输入属性取值或表达式配置、缺省值取值或者表达式配置、自动取值或者表达式配置；
修改页面字段显示特性配置，包括自定义数据类型对应的可选修改组件配置选择，可见性取值或者表达式配置、可编辑性取值或者表达式配置、顺序、标签、必须输入属性取值或表达式配置、缺省值取值或者表达式配置、自动取值或者表达式配置；
列表或者详情字段显示特性配置，包括自定义数据类型对应的可选显示组件配置选择，可见性取值或者表达式配置、顺序、标签；
字段分组配置，配置字段在新增、修改、详情、列表查看时的分组标签、分组显示名称，前端将自动按分组进行显示；
业务逻辑相关数据配置，可以使用特殊设计的界面及程序进行数据的增删改查维护，也可以使用数据库客户端工具或者脚本文件文本编辑工具进行数据修改和维护；
步骤二，根据步骤一的数据配置生成数据查询服务接口，具体包括：
一个数据表，默认生成增加、删除、修改、查询4个服务接口的配置数据，根据字段新增、修改、列表/详情查询时相关字段属性，对应自动生成该服务接口默认对应的字段清单及字段属性清单；可以根据业务需要自定义新的服务接口以及配置对应的字段清单，并配置对应关系到物理表；
一个原始的服务接口，以及相关的属性参数配置，可以构成一个页面块，一个页面块通常由页面块类型，对应服务接口，以及服务接口调用入参来指定，服务接口调用入参可以人为指定，也可以由运行时url传入；
可以配置自定义页面，通过指定多个页面块以及顺序的方式定义自定义页面，页面块之间可以指定参数传递或依赖关系，页面块也可以指定可变入参，多个页面块的入参构成了整个页面的入参；
通过后端服务接口，可以查询指定服务接口，指定表，指定字段的相关配置数据；
通过后端服务接口，可以查询数据间关联关系；
步骤三，根据步骤一的数据配置和步骤二的服务接口，生成前端页面，本步骤具体如下内容：
第一，原子列表页面自动生成；
第二，原子新增/修改页面自动生成；
第三，原子详情查看页面自动生成：
第四，原子自定义服务接口页面自动生成；
第五，自定义界面/页面自动生成。
3.根据权利要求1所述的一种WEB信息系统前端页面自动生成的方法，其特征在于，步骤三所述的原子列表页面自动生成，其生成过程为：
1)前端页面加载时，首先根据页面url及参数构造页面配置请求，并发送页面配置请求到后端服务器的数据配置模块；
2)后端服务器的数据配置模块收到页面配置请求，根据配置数据组织请求响应参数，并返回给前端页面；
3)前端页面接收到页面配置请求响应，根据响应中的配置参数进行页面生成。
4.根据权利要求1所述的一种WEB信息系统前端页面自动生成的方法，其特征在于，步骤三所述的原子新增/修改页面自动生成，其生成过程为：
1)页面加载后，首先根据页面url参数，含新增/编辑服务接口，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
2)请求响应返回后，前端页面接收到服务接口相关的配置参数，以及相关的字段的配置参数；
3)对于新增界面，根据页面url传入的参数作为新增界面部分字段的默认取值参数；
4)对于修改界面，根据页面url传入的修改数据对象的查询条件，自动调用后端数据的查询接口，获取到修改对象数据，并填充到修改页面表单的对应字段，作为被修改数据的显示；
5)根据返回参数，设置页面顶部标题，以及页面块标题；
6)根据返回参数中相关的字段顺序设定新增表单数据字段的顺序；
7)根据字段标签，设置字段标签名称；
8)根据配置的字段分组规则，自动进行新增/编辑界面的字段分组显示；
9)根据配置的字段类型以及该类型的表单类型，自动应用该字段的新增、修改页面表单控件；
10)根据配置的字段校验条件规则，自动加载运行，在界面填写字段取值时，自动应用校验规则，并自动应用校验相关的提示信息显示；
11)根据字段配置的显示隐藏规则配置，自动应用该字段表单的显示隐藏；
12)根据字段的只读配置规则，自动应用该字段的只读设置；
13)根据配置的字段取值自动生成规则，根据其他字段的填写値，自动计算生成该字段的取值。
5.根据权利要求3所述的一种WEB信息系统前端页面自动生成的方法，其特征在于，步骤三所述的页面生成包括：
a、根据返回参数，设置页面顶部标题，以及页面块标题；
b、根据返回参数中相关的字段顺序设定列表数据列的顺序；
c、根据字段标签，设置列表标题栏名称；
d、根据配置的列表行数据操作按钮配置，按钮名称，顺序，按钮操作动作，自动生成列表行的操作按钮，按钮默认在最后一栏；
e、根据列表操作按钮的配置，按钮名称，顺序，按钮操作动作，绘制列表的操作按钮；f、根据后端服务接口配置的查询字段相关配置，绘制查询按钮对应展示的可查询字段，以及字段的查询输入操作控件；
g、可根据配置提供查询默认显示的常用查询字段，以及下拉勾选可以供查询的所有字段；并可以根据查询使用的频率，自动统计默认显示top n的查询字段；
h、可以根据配置提供统计查询按钮，点击操作后，提供相关的分组字段和分组方式，统计字段以及常见统计方式，选择相关选项后，点击查询，对应向后台查询和显示统计查询的数据；
i、根据新增按钮配置，操作后可以根据配置的新增页面出现方式弹出或者跳转到新增操作界面；
j、根据修改按钮配置，操作后可以根据配置的修改页面出现方式弹出或者跳转到修改操作界面；
k、根据自定义操作按钮的配置，操作后可以根据配置的操作界面出现方式弹出或者跳转到对应操作界面，操作界面的类型由配置的界面的类型对应的接口决定。
6.根据权利要求2所述的一种WEB信息系统前端页面自动生成的方法，其特征在于，步骤三所述的原子详情查看页面自动生成，包括以下过程：
1)页面加载后，首先根据页面url参数，查询服务接口，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
2)请求响应返回后，前端页面接收到服务接口相关的配置参数，以及相关的字段的配置参数；
3)根据页面url传入的修改数据对象的查询条件，自动调用后端数据的查询接口，获取到查询对象数据，并填充到详情页面对应字段，作为数据的详情显示；
4)根据返回参数，设置页面顶部标题，以及页面块标题；
5)根据返回参数中相关的字段顺序设定新增表单数据字段的顺序；
6)根据字段标签，设置字段标签名称；
7)根据配置的字段分组规则，自动进行新增/编辑界面的字段分组显示；
8)根据配置的字段类型以及该类型的表单类型，自动应用该字段的详情显示页面表单控件；
9)根据字段配置的显示隐藏规则配置，自动应用该字段表单的显示隐藏；
10)根据服务接口配置的关联表显示规则及显示参数，服务接口、关联字段，自动调用关联表相关查询服务接口查询服务接口及字段相关配置，并自动调用关联表数据查询接口查询关联表显示数据，将关联表内容作为主表的子表显示。
7.根据权利要求2所述的一种WEB信息系统前端页面自动生成的方法，其特征在于，步骤三所述的原子自定义服务接口页面自动生成，其生成过程为：
1)页面加载后，首先根据页面url参数，自定义服务接口，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
2)请求响应返回后，前端页面接收到服务接口相关的配置参数，以及相关的字段的配置参数；
3)根据页面url传入的参数作为自定义服务接口操作界面部分字段的默认取值参数；
4)根据返回参数，设置界面顶部标题，以及页面块标题；
5)根据返回参数中相关的字段顺序设定新增表单数据字段的顺序；
6)根据字段标签，设置字段标签名称；
7)根据配置的字段分组规则，自动进行自定义服务接口操作界面的字段分组显示；
8)根据配置的字段类型以及该类型的表单类型，自动应用该字段的自定义服务接口操作表单控件；
9)根据配置的字段校验条件规则，自动加载运行，在界面填写字段取值时，自动应用校验规则，并自动应用校验相关的提示信息显示；
10)根据字段配置的显示隐藏规则配置，自动应用该字段表单的显示隐藏；
11)根据字段的只读配置规则，自动应用该字段的只读设置；
12)根据配置的字段取值自动生成规则，根据其他字段的填写値，自动计算生成该字段的取值。
8.根据权利要求2所述的一种WEB信息系统前端页面自动生成的方法，其特征在于，所述的自定义界面/页面自动生成，其生成过程为：
A、页面加载后，首先根据页面url参数，包含自定义页面类型及自定义页面编号，以及页面指定的后端服务地址，请求要加载服务接口的相关配置参数；
B、请求响应返回后，前端页面接收到自定义页面相关的页面块配置参数；
C、页面块的布局可以根据响应式布局的功能，指定页面块的位置及布局，包括跨行、跨列、一行多列；
D、一个页面块可以是自定义图表、卡片列表、普通列表、详情、新增表单、编辑表单、自定义服务接口表单、配置的静态富文本、或者指定数据字段的富文本；
E、每个页面块又根据页面块类型，以及配置的参数，去请求页面块的相关配置参数，以及请求页面块相关的数据；
F、根据请求的页面块数据以及页面块的布局，启动绘制自定义页面。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010061778.9A CN111259303B (zh) | 2020-01-20 | 2020-01-20 | 一种web信息系统前端页面自动生成的系统及其方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010061778.9A CN111259303B (zh) | 2020-01-20 | 2020-01-20 | 一种web信息系统前端页面自动生成的系统及其方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111259303A true CN111259303A (zh) | 2020-06-09 |
| CN111259303B CN111259303B (zh) | 2023-05-12 |
Family
ID=70947922
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010061778.9A Active CN111259303B (zh) | 2020-01-20 | 2020-01-20 | 一种web信息系统前端页面自动生成的系统及其方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111259303B (zh) |
Cited By (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111475513A (zh) * | 2020-06-28 | 2020-07-31 | 平安国际智慧城市科技股份有限公司 | 表单生成方法、装置、电子设备及介质 |
| CN111916163A (zh) * | 2020-08-11 | 2020-11-10 | 上海亿锎智能科技有限公司 | 用于临床研究中药物试验的现场管理系统实现方法和装置 |
| CN111949719A (zh) * | 2020-08-20 | 2020-11-17 | 深圳天顺智慧能源科技有限公司 | 一种电力系统的组态工具实现方法、装置及相关组件 |
| CN112015728A (zh) * | 2020-09-08 | 2020-12-01 | 浙江惠瀜网络科技有限公司 | 一种自动对采集的数据进行检验的方法 |
| CN112037903A (zh) * | 2020-08-31 | 2020-12-04 | 康键信息技术（深圳）有限公司 | 在线问诊开药系统 |
| CN112068839A (zh) * | 2020-07-03 | 2020-12-11 | 合肥森亿智能科技有限公司 | 基于JavaScript的自动计算变量方法、系统以及终端 |
| CN112363722A (zh) * | 2020-10-27 | 2021-02-12 | 深圳市明源云科技有限公司 | 一种列表页面的设计器 |
| CN112464070A (zh) * | 2020-11-25 | 2021-03-09 | 银盛通信有限公司 | 基于Vue的表单配置方法、系统、计算机设备及存储介质 |
| CN112764744A (zh) * | 2021-01-25 | 2021-05-07 | 芝麻云信（武汉）科技有限公司 | 一种面向erp系统的接口服务设计方法 |
| CN112860310A (zh) * | 2021-01-29 | 2021-05-28 | 银盛通信有限公司 | 一种基于tag的数据类型标识配置方法 |
| CN113010513A (zh) * | 2021-03-01 | 2021-06-22 | 中国工商银行股份有限公司 | 热加载方法及装置 |
| CN114185528A (zh) * | 2021-12-20 | 2022-03-15 | 四川启睿克科技有限公司 | 一种自定义表单控件间配置执行的方法 |
| CN114416205A (zh) * | 2022-01-20 | 2022-04-29 | 山东浪潮通软信息科技有限公司 | 一种设置系统参数的方法、系统、设备及可读介质 |
| CN114611476A (zh) * | 2022-01-26 | 2022-06-10 | 博思数采科技发展有限公司 | 一种表单内容结构化处理方法及装置 |
| CN115543281A (zh) * | 2022-10-18 | 2022-12-30 | 杭州雷数科技有限公司 | 一种可配置化的web应用生成方法 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102063306A (zh) * | 2011-01-06 | 2011-05-18 | 夏春秋 | 一种通过电子表单进行应用开发的技术实现方法 |
| CN103237083A (zh) * | 2013-05-08 | 2013-08-07 | 北京邮电大学 | 一种移动信息服务资源聚合系统及方法 |
| US20160048602A1 (en) * | 2014-08-18 | 2016-02-18 | InfoTrust, LLC | Systems and methods for tag inspection |
| CN107943819A (zh) * | 2017-10-09 | 2018-04-20 | 中国电子科技集团公司第二十八研究所 | 一种基于元数据配置的数据管理方法及装置 |
| WO2018205869A1 (zh) * | 2017-05-09 | 2018-11-15 | 钱叶敢 | 一种表单自定义方法和装置 |
| CN109062567A (zh) * | 2018-07-09 | 2018-12-21 | 南京君度科技有限公司 | 基于b/s结构的信息管理系统快速开发平台 |
| CN109189383A (zh) * | 2018-08-28 | 2019-01-11 | 厦门海迈科技股份有限公司 | 代码文件的生成方法、装置、计算设备和存储介质 |
-
2020
- 2020-01-20 CN CN202010061778.9A patent/CN111259303B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102063306A (zh) * | 2011-01-06 | 2011-05-18 | 夏春秋 | 一种通过电子表单进行应用开发的技术实现方法 |
| CN103237083A (zh) * | 2013-05-08 | 2013-08-07 | 北京邮电大学 | 一种移动信息服务资源聚合系统及方法 |
| US20160048602A1 (en) * | 2014-08-18 | 2016-02-18 | InfoTrust, LLC | Systems and methods for tag inspection |
| WO2018205869A1 (zh) * | 2017-05-09 | 2018-11-15 | 钱叶敢 | 一种表单自定义方法和装置 |
| CN107943819A (zh) * | 2017-10-09 | 2018-04-20 | 中国电子科技集团公司第二十八研究所 | 一种基于元数据配置的数据管理方法及装置 |
| CN109062567A (zh) * | 2018-07-09 | 2018-12-21 | 南京君度科技有限公司 | 基于b/s结构的信息管理系统快速开发平台 |
| CN109189383A (zh) * | 2018-08-28 | 2019-01-11 | 厦门海迈科技股份有限公司 | 代码文件的生成方法、装置、计算设备和存储介质 |
Non-Patent Citations (2)
| Title |
|---|
| 尹航等: "基于配置文件的web页面自动生成系统", 《软件》 * |
| 赵双双等: "基于B/S的跨平台用户界面可配置算法研究", 《浙江理工大学学报》 * |
Cited By (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111475513B (zh) * | 2020-06-28 | 2020-10-02 | 平安国际智慧城市科技股份有限公司 | 表单生成方法、装置、电子设备及介质 |
| CN111475513A (zh) * | 2020-06-28 | 2020-07-31 | 平安国际智慧城市科技股份有限公司 | 表单生成方法、装置、电子设备及介质 |
| CN112068839A (zh) * | 2020-07-03 | 2020-12-11 | 合肥森亿智能科技有限公司 | 基于JavaScript的自动计算变量方法、系统以及终端 |
| CN111916163A (zh) * | 2020-08-11 | 2020-11-10 | 上海亿锎智能科技有限公司 | 用于临床研究中药物试验的现场管理系统实现方法和装置 |
| CN111916163B (zh) * | 2020-08-11 | 2024-04-05 | 上海太美星云数字科技有限公司 | 用于临床研究中药物试验的现场管理系统实现方法和装置 |
| CN111949719A (zh) * | 2020-08-20 | 2020-11-17 | 深圳天顺智慧能源科技有限公司 | 一种电力系统的组态工具实现方法、装置及相关组件 |
| CN111949719B (zh) * | 2020-08-20 | 2024-05-07 | 深圳天顺智慧能源科技有限公司 | 一种电力系统的组态工具实现方法、装置及相关组件 |
| CN112037903A (zh) * | 2020-08-31 | 2020-12-04 | 康键信息技术（深圳）有限公司 | 在线问诊开药系统 |
| CN112037903B (zh) * | 2020-08-31 | 2023-08-15 | 康键信息技术（深圳）有限公司 | 在线问诊开药系统 |
| CN112015728A (zh) * | 2020-09-08 | 2020-12-01 | 浙江惠瀜网络科技有限公司 | 一种自动对采集的数据进行检验的方法 |
| CN112363722A (zh) * | 2020-10-27 | 2021-02-12 | 深圳市明源云科技有限公司 | 一种列表页面的设计器 |
| CN112464070A (zh) * | 2020-11-25 | 2021-03-09 | 银盛通信有限公司 | 基于Vue的表单配置方法、系统、计算机设备及存储介质 |
| CN112764744A (zh) * | 2021-01-25 | 2021-05-07 | 芝麻云信（武汉）科技有限公司 | 一种面向erp系统的接口服务设计方法 |
| CN112860310A (zh) * | 2021-01-29 | 2021-05-28 | 银盛通信有限公司 | 一种基于tag的数据类型标识配置方法 |
| CN113010513A (zh) * | 2021-03-01 | 2021-06-22 | 中国工商银行股份有限公司 | 热加载方法及装置 |
| CN114185528A (zh) * | 2021-12-20 | 2022-03-15 | 四川启睿克科技有限公司 | 一种自定义表单控件间配置执行的方法 |
| CN114185528B (zh) * | 2021-12-20 | 2024-04-12 | 四川启睿克科技有限公司 | 一种自定义表单控件间配置执行的方法 |
| CN114416205A (zh) * | 2022-01-20 | 2022-04-29 | 山东浪潮通软信息科技有限公司 | 一种设置系统参数的方法、系统、设备及可读介质 |
| CN114611476A (zh) * | 2022-01-26 | 2022-06-10 | 博思数采科技发展有限公司 | 一种表单内容结构化处理方法及装置 |
| CN115543281A (zh) * | 2022-10-18 | 2022-12-30 | 杭州雷数科技有限公司 | 一种可配置化的web应用生成方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111259303B (zh) | 2023-05-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111259303B (zh) | 一种web信息系统前端页面自动生成的系统及其方法 | |
| CN107273492B (zh) | 一种基于众包平台处理图像标注任务的交互方法 | |
| US8307292B2 (en) | Method and apparatus for binding user interface objects to application objects | |
| CN111178027A (zh) | 基于在线创建模板和在线指定数据的报告生成系统和方法 | |
| US20030037076A1 (en) | Method, computer program and system for style sheet generation | |
| Beeley | Web application development with R using Shiny | |
| US20080195932A1 (en) | Method and apparatus for re-editing and redistributing web documents | |
| KR20050027093A (ko) | 숙련 기반 테스트 및 트레이닝을 위한 방법 및 시스템 | |
| WO2001095124A1 (en) | System and method for integrating multiple applications | |
| KR101951719B1 (ko) | 그래픽 인터페이스 기반으로 이벤트 동작을 프로그래밍 하는 웹 레포팅 디자인 시스템 | |
| US20110055066A1 (en) | System and Method for Enabling Financial Planning | |
| US20160292143A1 (en) | System and method for automated online wizard generation | |
| CN107480262A (zh) | 一种基于网页的数据库通用管理系统 | |
| US7673245B2 (en) | Converting user interface panels | |
| Beeley et al. | Web Application Development with R Using Shiny: Build stunning graphics and interactive data visualizations to deliver cutting-edge analytics | |
| US7409410B2 (en) | System and method of presenting multilingual metadata | |
| US10776351B2 (en) | Automatic core data service view generator | |
| CN111831282A (zh) | 基于vue技术的低代码开发表单方法和系统 | |
| CN110119416A (zh) | 一种服务数据分析系统及方法 | |
| CN113204340A (zh) | 题目生产方法、题目管理系统及电子设备 | |
| US20240037325A1 (en) | Ability to add non-direct ancestor columns in child spreadsheets | |
| JP2008203965A (ja) | Ｗｅｂページの生成方法及びプログラム | |
| Briciu et al. | A Tentative Model for an Online Place Branding Application Solution | |
| US8719245B2 (en) | Query templates with functional template blocks | |
| US9864739B1 (en) | Automatic layout of graphical user interface screens from object data |
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 |