一种在高校场景下基于web的跨平台应用构建工具及方法

技术领域

本发明涉及数字化校园建设场景下，高校内事务的线上应用开发技术领域，具体涉及一种在高校场景下基于web的跨平台应用构建工具及方法。

背景技术

高校中存在种类繁多、场景复杂的办事服务，在高校信息化校园建设的大背景下，要将这些五花八门的业务移植到线上会带来相当巨大的工作量。每一项业务的字段、表单、关系模型、审批流程等，均高度定制化且包含一定的代码量。若由研发人员直接面向流程引擎、前端技术框架等进行编码会带来以下问题：1技术门槛高，学习成本高，2代码量大，3人工编码带来的测试成本高，4迭代速度慢。5不同平台有不同的api限制，没有统一的代码解决方案。

发明内容

本发明的目的在于：为解决现有技术的不足，提供一种在高校场景下基于web的跨平台应用构建工具及方法。

本发明公开了一种在高校场景下基于web的跨平台应用构建工具，包括：

应用管理模块，用于提供应用的创建、维护功能，并允许通过授权来将不同应用的构建权限分配给不同开发者；

页面设计工具，用于构建应用中的表单，并将表单用结构化语言进行表达；

编译器，用于将页面设计工具的结构化数据，翻译成目标语言，实现业务表单自动适应运行平台；

应用发布模块，用于将不同编译器产生的可运行代码，放入与之相对的平台中运行；

数据管理模块，用于构建和维护对象模型，正向、逆向管理数据库中的数据表，并提供数据维护、监控的相关接口。

进一步地，所述页面设计工具包括：

表单设计工具，用于根据需求绘制出表单；

审批流程设计器，用于根据审批业务配置包括会签、流转条件、经办人，绘制流转过程；

外部数据加载模块，用于在表单中设置对应接口的调用逻辑，对接外部接口请求并将数据绑定至字段中；

联动模块，用于在表单中上设置组件的联动；

扩展性编码模块，用于在表单中进行二次开发。

进一步地，所述表单设计工具包括表单布局组件和控件，所述表单布局工具绘制出应用框架，所述控件用于根据需求字段拖入布局中。

进一步地，所述审批流程设计器根据审批流转的方向，使用连线工具把不同环节有序的串联起来，形成一个有向图，整个流程图必须有且仅有一个开始节点并且汇聚在一个结束节点，根据需求设置不同环节的消息提醒内容，可根据实际提交表单中的字段来进行设置；所述会签配置，根据会签的场景，若涉及到多个职能部门会审，需要在流程图中拖入并行网关，会审由并行网关开头并且以并行网关结束，若是单个部门内部的多人员会审，则在对应环节上设置为“多人审批”；所述经办人配置，根据需求设置每个环节的经办人。

进一步地，所述数据管理模块通过页面设计工具绘制个性化管理页面，该管理页面作为一个成员被包含在应用之内。

进一步地，所述页面设计工具还包括应用模板和标准化组件，所述应用模板将应用的定义xml文档中动态变化的部分用占位符表示，所述标准化组件根据通用的高校场景进行封装，添加到页面设计工具中的组件库中。

本发明还公开了一种在高校场景下基于web的跨平台应用构建方法，包括以下步骤：

S1：具备应用开发权限的开发者在应用管理模块中，创建一个新的应用模块；

S2：在应用模块中创建表单，并使用图形化的表单设计工具，根据需求绘制业务表单；

S3：若表单有审批要求，使用审批流程设计器，根据审批业务配置包括会签、流转条件、经办人，绘制流转过程；

S4：完成业务表单绘制之后，根据业务表单生成对象模型，根据需求设置对象模型关联关系，完成应用创建；

S5：创建测试账号，使用内置的测试环境测试应用，验证应用是否满足高校需求；

S6：若应用满足高校需求，创建应用版本，若应用不满足高校需求，则返回步骤S2绘制业务表单；

S7：根据用户需求选择终端，编译器将xml转换成终端适应代码；

S8：应用发布模块将编译器产生的可运行代码，放入终端中，发布应用；

S9：通过数据管理模块在应用运行过程中监控运行状态，能够在并发压力大的情况下进行自动集群扩展，能够下载和查看应用运行日志，能够查看管理应用提交产生的数据。

进一步地，所述步骤S2中，根据需求绘制表单包括如下步骤：

S21：使用表单布局组件在表单设计工具提供的画布中绘制表格与布局；

S22：根据需求字段，在工具栏中选择对应类型的控件放入布局中；

S23：若业务表单需要外部数据加载，在业务表单中设置对应接口的调用逻辑，对接外部接口请求并将数据绑定至字段中；

S24：若业务表单需要联动效果，在业务表单中上设置组件的联动；

S25：若业务表单需要进行扩展性编码，将扩展脚本嵌入到表单的对应事件中。

进一步地，所述步骤S3中，使用审批流程设计器绘制流转过程包括如下步骤：

S31：根据不同的审批业务，确定所有审批节点以及对应的职能部门，将其作为流程环节拖入流程设计器中；

S32：根据审批流转的方向，使用连线工具把不同环节有序的串联起来，形成一个有向图，整个流程图必须有且仅有一个开始节点并且汇聚在一个结束节点；

S33：根据会签的需求需要分析会签的场景，若涉及到多个职能部门会审，需要在流程图中拖入并行网关，会审由并行网关开头并且以并行网关结束，若是单个部门内部的多人员会审，则在对应环节上设置为“多人审批”；

S34：根据审批要求设置每个审批环节的经办；

S35：根据审批要求设置不同环节的消息提醒内容；

S36：设置每次流程申请记录生成的流水号规则。

进一步地，所述步骤S4中，生成对象模型包括如下步骤：

S41：完成表单绘制之后，对每个控件进行命名即作为字段名；

S42：使用表单设计工具生成实体功能，将所有存在字段名且属于表单提交类型的控件提取出来，将其字段组合成一个对象模型；

S43：若业务表单存在子表单时，对子表单单独进行处理，形成一个单独的业务对象；

S44：在子表单形成单独的业务对象后，将主对象和子对象建立关联关系。

本发明的有益效果：

1在应用构件的过程中以图形拖拽操作代替编码，无需使用人员掌握编程语言；

2使用基于web端的开发模式，使用者无需安装任何辅助软件即可直接使用；

3开发速度得到极大的提升；

4当需求发生变化时，可以快速迭代；

5模块发布与部署操作便捷；

6由于屏蔽了编码过程，故不存在代码的测试工作量；

7构建的应用不限平台，可在pc、微信、安卓/IOSapp、钉钉、welink等不同终端运行，灵活可扩展。

附图说明

图1是本发明实施例的应用构建整体流程示意图。

图2是本发明跨平台能力的模块示意图。

具体实施方式

下面对本发明的实施例作详细说明，本实施例在以本发明技术方案为前提下进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。

本发明公开了一种在高校场景下基于web的跨平台应用构建工具及方法，提供高校自主研发应用的能力，用户无需安装本地客户端，只需要在浏览器中即可完成应用的构建，而且整个平台以“图形化”、“拖拽式”的方式进行交互，对操作者没有技术门槛的要求。在功能上，整合并封装了大量的高校事务场景，一次制作、多端发布，紧紧地贴合数字化校园的建设内容与架构。

如图2所示，本发明公开了一种在高校场景下基于web的跨平台应用构建工具，包括：

应用管理模块，用于提供应用的创建、维护功能，并允许通过授权来将不同应用的构建权限分配给不同开发者；

页面设计工具，用于构建应用中的表单，并将表单用结构化语言进行表达，做到表单的存储和下次打开的回显；

编译器，用于将页面设计工具的结构化数据，翻译成目标语言，实现业务表单自动适应运行平台,以达到跨平台的效果；

应用发布模块，用于将不同编译器产生的可运行代码，放入与之相对的平台中运行，编译器与应用运行时平台相对应，可翻译成包括但不限于：h5应用、reactNative应用、微信小程序、welink微码应用等；

数据管理模块，用于构建和维护对象模型，正向、逆向管理数据库中的数据表，并提供数据维护、监控的相关接口。

所述页面设计工具使用纯h5技术(html5)实现了表单定义的序列化和反序列化。定义语言使用xml格式编写，其中描述了所有的布局、组件、页面交互等信息。反序列化实现的过程依照如下步骤：通过转换器生成控件和布局实例，再将布局渲染在画布上，最后依照顺序把组件回显到布局中。序列化的过程则与之相反，将页面的所有元素遍历，依次通过转换器反过来生成xml定义语言，最终形成整个文档。所述页面设计工具包括：表单设计工具，审批流程设计器，外部数据加载模块，联动模块，扩展性编码模块。其中，

所述的表单设计工具，用于根据需求绘制出表单，包括表单布局组件和控件，所述表单布局工具绘制出应用框架，所述控件用于根据需求字段，拖入布局中。

所述外部数据加载模块，用于如果表单需要外部数据加载，在表单中设置对应接口的调用逻辑，对接外部接口请求并将数据绑定至字段中。

所述联动模块，用于如果表单需要联动效果，在表单中上设置组件的联动。例如表单根据条件进行折叠，或是多个下拉列表进行级联。

所述扩展性编码模块，用于如果表单需要进行扩展性编码，可以在表单中进行二次开发，可遵循标准javascript规范进行扩展开发，达到更加定制化的页面效果。开发人员通过javascript脚本语言，在平台提供的api框架内，进行扩展性编码。扩展编码以事件驱动的形式，在表单的各项事件中触发。

所述审批流程设计器，用于根据审批业务配置包括会签、流转条件、经办人，绘制流转过程。所述审批流程设计器根据审批流转的方向，使用连线工具把不同环节有序的串联起来，形成一个有向图，整个流程图必须有且仅有一个开始节点并且汇聚在一个结束节点，根据需求设置不同环节的消息提醒内容，可根据实际提交表单中的字段来进行设置，提醒消息分为“待办提醒”、“流程状态变更提醒”，分别对应于：待办人收到待办消息和流程没法送一步后，流程申请人收到流程状态变化消息。

其中，所述会签配置，根据会签的场景，若涉及到多个职能部门会审，需要在流程图中拖入并行网关，会审由并行网关开头并且以并行网关结束，若是单个部门内部的多人员会审，则在对应环节上设置为“多人审批”；所述经办人配置，根据需求设置每个环节的经办人，如果是动态筛选的经办人需要设置对应的“经办人模式”，包括但不限于：部门领导审核、辅导员审核、班主任审核、分管校领导审核等。

在审批流程设计器中可设置每次流程申请记录生成的流水号规则。流水号规则的格式为：前缀+时间周期+序列。时间周期可为年或月或日，每过一个周期序列将从1重新生成。流水号是系统全局资源，使用数据库存储当前序列值。每当产生一条流程申请记录时，系统会从这条流水号中进行“取号”。取号的操作利用数据库锁机制来保证流水号的唯一性，取号前将该条记录锁住，取完号之后再放开，以此确保在并发操作下号不会重复。

所述数据管理模块，通过页面设计工具绘制个性化管理页面，该管理页面作为一个成员被包含在应用之内，与表单一样，平台通过“定义语言-编译器-运行期代码”这一过程，来部署和运行上述管理模块。在本实施里中，所述数据管理模块包含分级权限功能，分级权限功能其实现原理如下：每一个应用在被部署后，系统会将其中的所有内容展开，并形成一个树状的资源结构。在由平台统一提供的管理后台中，系统管理员可以查看到由所有应用组成的完整资源树，并将每个应用所代表的节点的管理权限授予给不同职能部门的负责人，即可完成分级授权的过程。这些职能部门的负责人在登陆系统后，其只能管理他们被授予了权限的节点的子节点。以“ip地址申请”应用为例：系统管理员将“ip地址申请”的节点授予给了“信息办”部门的负责人张三，则张三只能管理“ip地址申请”节点的下属内容，如这个应用下的页面、流程等。综上，平台通过一颗带权限的资源树，通过对树上分支的递归式授权，以达到多级权限的效果。

所述数据管理模块中的数据包括高校需求应用清单、高校人事、部门数据，如果校方有数据中心，则从数据中心统一获取标准数据，如果不具备数据中心，需要获取高校需求应用清单和高校人事、部门数据，将数据存储在数据库中，构建数据更新机制。数据更新机制采用“增量更新”模式，采用“树对比”算法，将校方标准组织机构树与平台自身数据库的组织机构树比对，仅将两颗树对比结果中的增量部分进行调整。具体方法为：由树结构的顶层向下递归，每次递归时以机构或人员的唯一编码为准，同时再另一棵树中寻找对应节点，以此达到两颗树的平行递归。在此过程进行当中，将对应的两个节点进行全字段比较，如果字段不同则做update更新；如果找不到另一棵树的对应节点，则做insert插入。

所述数据管理模块的日志管理功能，包括程序日志的下载，审计日志的检索，服务器的内存、cpu、磁盘io、网络io的监控，以及并发访问量的监控。当并发量过大时，系统可以设置自动伸缩，根据需要自动扩展出合适数量的集群。对于应用产生的数据也具备监控能力，表单提交的数据均可由管理员进行检索和管理。如果该表单还对应一个审批流程，则流程流转的详情也能够被查看。

所述的数据管理模块的监控功能实现原理是基于docker容器技术，以及对k8s容器编排工具接口的封装，搭建一套微服务技术框架。利用其中的api网关、elk(Elasticsearch、Logstash、Kibana 分布式日志框架，用于日志的收集、搜索和展示)日志服务、容器监控管理api等，来实现上述的运维功能。

为了能提供大量业务场景的封装，所述页面设计工具还包括应用模板和标准化组件。

所述应用模板采用“文本模板”技术，将应用的定义xml文档中动态变化的部分用占位符表示，而平台提供统一的框架，将这些文本模板用向导的形式展现出来。开发者可以在图形界面中选择这些模板，并且将可变部分根据其属性类型动态生成选择框或输入框等。

所述标准化组件通过定义标准化的组件规范，保证页面设计工具中的组件库灵活可扩展。如传阅、退回等业务型的组件，是先根据通用的高校场景进行封装，再添加到页面设计工具中的组件库中。其原理是：所有组件需要满足标准的组件开发规范，它是根据页面设计工具归纳出的一套标准接口，而组件库则可面向中间的抽象层来组装界面。

由于页面设计工具中的所有布局元素、组件、交互等信息都以结构化语言进行了描述，这套定义描述语言是基于xml的且与平台无关，故在设计上具备了跨平台的先决条件。以微信小程序为例其步骤如下：

1开发者通过图形化设计器绘制出表单；

2页面设计工具将页面转换成平台无关的xml定义语言；

3微信小程序编译器将xml转换成微信小程序的代码；

4使用微信sdk将代码打包部署，最终在微信中呈现。

具体的，如图1所示，基于在高校场景下基于web的跨平台应用构建工具，本发明公开的一种在高校场景下基于web的跨平台应用构建方法，包括以下步骤：

S1：具备应用开发权限的开发者在应用管理模块中，创建一个新的应用模块，并设置应用的图标、说明、作者、平台等信息；

S2：在应用模块中创建表单，并使用图形化的表单设计工具，根据需求绘制业务表单；

S3：若表单有审批要求，使用审批流程设计器，根据审批业务配置包括会签、流转条件、经办人，绘制流转过程；

S4：完成业务表单绘制之后，根据业务表单生成对象模型，根据需求设置对象模型关联关系，完成应用创建；

S5：创建测试账号，使用内置的测试环境测试应用，验证应用是否满足高校需求；

S6：若应用满足高校需求，创建应用版本，页面设计工具将页面转换成平台无关的xml定义语言，若应用不满足校方需求，则返回步骤S2重新绘制业务表单；

S7：根据用户需求选择终端，编译器将xml转换成终端适应代码；

S8：应用发布模块将编译器产生的可运行代码，放入终端中，发布应用；

S9：通过数据管理模块，在应用运行过程中监控运行状态，能够在并发压力大的情况下进行自动集群扩展，能够下载和查看应用运行日志，能够查看管理应用提交产生的数据。

进一步的，所述步骤S2中，根据需求绘制表单包括如下步骤：

S21：使用表单布局组件在表单设计工具提供的画布中绘制表格与布局；

S22：根据需求字段，选择对应字段类型的控件放入布局中，包括输入框、选择框、数据表格、意见框等；

S23：若业务表单需要外部数据加载，在业务表单中设置对应接口的调用逻辑，对接外部接口请求并将数据绑定至字段中；

S24：若业务表单需要联动效果，在业务表单中上设置组件的联动，例如表单根据条件进行折叠，或是多个下拉列表进行级联；

S25：若业务表单需要进行扩展性编码，可以在业务表单中进行二次开发。

在本实施例中，二次开发功能使用javascript语言，指定api(applicationprogramming interface 应用程序接口)范围内进行脚本编码。框架采用事件监听机制，将扩展脚本嵌入到表单的对应事件中，实现在表单“初始化”、“数据加载前后”、“表单提交前后”等时机的业务扩展。

如果表单需要审批流程，则还需要在表单中放入经办人控件，流程提交控件，流转历史控件等，进一步的，所述步骤S3中，使用审批流程设计器绘制流转过程包括如下步骤：

S31：根据不同的审批业务，确定所有审批节点以及对应的职能部门，将其作为流程环节拖入流程设计器中；

S32：根据审批流转的方向，使用连线工具把不同环节有序的串联起来，形成一个有向图，整个流程图必须有且仅有一个开始节点并且汇聚在一个结束节点；

S33：根据会签的需求需要分析会签的场景，若涉及到多个职能部门会审，需要在流程图中拖入并行网关，会审由并行网关开头并且以并行网关结束，若是单个部门内部的多人员会审，则在对应环节上设置为“多人审批”；

S34：根据审批要求设置每个审批环节的经办人，若是动态筛选的经办人需要设置对应的“经办人模式”，包括但不限于：部门领导审核、辅导员审核、班主任审核、分管校领导审核等；

S35：根据审批要求设置不同环节的消息提醒内容，可根据实际提交表单中的字段来进行设置，提醒消息分为“待办提醒”、“流程状态变更提醒”，分别对应于：待办人收到待办消息和流程没法送一步后，流程申请人收到流程状态变化消息；

S36：设置每次流程申请记录生成的流水号规则。在本实施例中，流水号规则为：遵循前缀+时间周期+序列的规则。时间周期可为年或月或日，没过一个周期序列将从1重新生成。流水号使用数据库存储当前序列值。每当产生一条流程申请记录时，系统会从这条流水号中进行“取号”。取号的操作利用数据库锁机制来保证流水号的唯一性，取号前将该条记录锁住，取完号之后再放开，以此确保在并发操作下号不会重复。

完成表单和流程的构建之后，可根据表单自动生成对象模型。生成后的对象模型可直接使用或是根据需要进行字段上的微调。所述步骤S4中，生成对象模型包括如下步骤：

S41：完成表单绘制之后，对每个控件进行命名即作为字段名；

S42：使用表单设计工具的生成实体功能，将所有存在字段名且属于表单提交类型的控件提取出来，将其字段组合成一个对象模型；

S43：若业务表单存在子表单时，对子表单单独进行处理，形成一个单独的业务对象；

S44：在子表单形成单独的业务对象后，将主对象和子对象建立关联关系。

具体来说，完成表单绘制之后，首先需要对每个控件进行命名即作为字段名。然后在图形化的表单设计工具中，使用“生成实体”功能，系统会使用遍历算法将页面中的所有字段，将所有：存在字段名的、且属于表单提交类型的控件提取出来，根据其对应控件的类型来自动匹配字段的类型，最终将收集起来的所有字段组合成一个对象模型。当表单存在子表单时，平台会将子表单单独处理，形成一个单独的业务对象。此时在生成对象模型时，会将主对象和子对象建立关联关系，即外键链接。平台还会根据对象的字段个数、是否关联关系，生成一定的辅助性的图元数据，如颜色、坐标等，随后将上述的对象模型（一个或多个）以图形化界面展示出来，便于使用者理解。

整个应用构建完成之后，页面设计工具将页面转换成平台无关的xml定义语言，应用开发者可将应用发布到调试环境上以便测试功能是否正常运作。创建测试账号，调试环境为平台内置，其人员、部门等数据与真实数据一致。调试环境的发布无需创建版本，也无需经过校验或审核，调试后的应用可直接访问到以便于开发人员随时进行调试。若应用不满足高校需求，则返回步骤S2重新绘制业务表单。

如果功能验证无误，开发人员需要在平台中对应用创建一个版本。版本管理功能允许开发者对应用维护多个版本，并且可在版本之间进行切换。唯有创建了版本的应用才能够进行正式的发布。正式发布应用时需要设置该应用的标题、id、图标、发布说明、发布范围、发布平台等信息。发布范围指那些身份的用户能够访问到该应用，如教职工、本科生等。发布平台则指pc、app、微信等。例如，发布在微信平台上，微信小程序编译器将xml转换成微信小程序的代码，应用发布模块将代码打包部署，最终在微信中呈现。

当一个应用发布后，管理人员可以使用数据管理模块，对应用进行持续的监控和管理。包括程序日志的下载，审计日志的检索，服务器的内存、cpu、磁盘io、网络io的监控，以及并发访问量的监控。当并发量过大时，系统可以设置自动伸缩，根据需要自动扩展出合适数量的集群。对于应用产生的数据也具备监控能力，表单提交的数据均可由管理员进行检索和管理。如果该表单还对应一个审批流程，则流程流转的详情也能够被查看。在实际管理过程中，管理的权限具备分级授权能力，由不同部门的管理员分管自己对于的表单或流程，而系统管理员则能够管理全部数据。

本发明公开了一种在高校场景下基于web的跨平台应用构建工具及方法，包含了高校内应用构建的全生命周期管理，包含应用的构建、发布、运维、数据的管理四大核心部分。所述应用快速构建即通过拖拽组件的方式构建表单，包括表单的审批流程走向、每个步骤的参与角色等；所述多端发布即一次构建能在PC、微信、钉钉、APP等上运行，表单自动适应移动端设备；所述应用运维管理即提供应用的运行时监控、日志、伸缩能力；所述数据管理即提供对象模型的构建与维护能力，正向、逆向管理数据库中的数据表，并提供数据维护、监控的相关接口。本发明提供大量业务场景的封装，体现如业务流程模板：学生请销假、IP地址申请、教职工因公出国等，以及在高校内审批业务中常见的附加功能：传阅、签批、红头文件等，避免了同样业务在不同高校重复开发造成的资源浪费、给高校老师也带来了使用上的便利性。

综上所述，利用本次发明，高校可以快速、便捷地制作和发布应用，加速校内事务的数字化转型进程。并且还赋予了高校自身构建和维护应用的能力，实现真正的数字化校园体系搭建。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。