CN109739504B - 一种根据后台配置自动生成h5业务办理页面的方法 - Google Patents

一种根据后台配置自动生成h5业务办理页面的方法 Download PDF

Info

Publication number
CN109739504B
CN109739504B CN201811622534.2A CN201811622534A CN109739504B CN 109739504 B CN109739504 B CN 109739504B CN 201811622534 A CN201811622534 A CN 201811622534A CN 109739504 B CN109739504 B CN 109739504B
Authority
CN
China
Prior art keywords
transaction
background
dynamic element
configuration
page
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
Application number
CN201811622534.2A
Other languages
English (en)
Other versions
CN109739504A (zh
Inventor
高春林
刘雪松
荣瑞勇
李卓
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhejiang Zheda Wangxin Software Industry Group Co ltd
Original Assignee
INSIGMA TECHNOLOGY CO LTD
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by INSIGMA TECHNOLOGY CO LTD filed Critical INSIGMA TECHNOLOGY CO LTD
Priority to CN201811622534.2A priority Critical patent/CN109739504B/zh
Publication of CN109739504A publication Critical patent/CN109739504A/zh
Application granted granted Critical
Publication of CN109739504B publication Critical patent/CN109739504B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • Stored Programmes (AREA)

Abstract

本发明公开了一种根据后台配置自动生成H5业务办理页面的方法，采用后台配置加通用页面动态生成技术，由后台根据页面组件设置以及设定的数据源，对JavaScript与后台交互部分进行统一封装，访问时动态生成H5页面，实现了标记语言和逻辑语言的分离。该方法精简了前后台分离模式下的开发过程，减少了角色配置，只需要后台人员即可独立完成整个业务开发，大大提升了开发效率。整个开发过程，只需要掌握JAVA开发的后台开发人员，不需要前台开发人员参与，极大减轻了前后台人员之间沟通协调压力，提高了应用上线效率。

Description

一种根据后台配置自动生成H5业务办理页面的方法
技术领域
本发明属于H5开发技术领域，尤其涉及一种根据后台配置自动生成H5业务办理页面的方法，在移动互联网环境下，实现通过后台配置，自动生成前台业务办理页面，实现移动办事事项的快速开发。
背景技术
CNNIC报告显示，在线政务服务用户规模达到4.85亿，占总体网民的62.9％。随着政务服务线上化速度明显加快，服务越来越向线上迁移，App、城市服务、微信公众号及微博等政务新媒体及服务平台不断扩张服务范围，人社、交通、住房等无所不包。移动互联网，成为老百姓重要办事渠道。
从界面美观和开发实现经济性角度，通常使用H5(HTML5)页面技术来开发政务经办前台的受理功能，这样就能利用H5的终端自适应特性，以及丰富的CSS样式，实现多渠道适配，不需要为每个渠道重复开发，一定程度上降低了工作量，H5已成为前端界面标准化的开发方式。
在政务领域，H5属于新兴开发技术，需要专业前端开发人员参与，对开发人员技术要求较高；同时，H5前台+JAVA后台的开发模式，属于前后台分离开发模式，在前后端人员之间存在大量接口和联调工作，对于需求理解的不同，接口实现的不同，一定程度上给业务实现带来了风险，提高了实现成本，整体效率不高，对于开发商来说加大了经济负担，对于政府客户来说功能实现周期也变得更长。VUE
发明内容
本发明的目的是提供一种根据后台配置自动生成H5业务办理页面的方法，解决业务系统开发过程中，需要配备H5前端人员，或者后端开发人员需要掌握前端+后端技术，才可进行开发、开发周期长等问题，可开发出前台H5页面，实现前后台分离架构的开发方法。
为了实现上述目的，本发明技术方案如下：
一种根据后台配置自动生成H5业务办理页面的方法，包括：
根据接口及其对应的业务办理事项，配置事项表、动态元素表、事项与动态元素关系表，存储在数据库中；
根据用户选择的业务办理事项，获取对应的事项ID，从数据库中获取与事项ID有关的动态元素，返回给前台；
前台获得动态元素列表后，进行逐一解析，展示出最终的H5页面。
优选地，所述事项表包括事项ID、事项名称、接口配置；所述动态元素表包括元素ID、元素名称、元素类型、界面配置、数据配置；所述事项与动态元素关系表包括事项ID和元素ID。
优选地，所述根据用户选择的业务办理事项，获取对应的事项ID，从数据库中获取与事项ID有关的动态元素，包括：
根据用户选择的业务办理事项，获取对应的事项ID；
根据事项ID，从事项与动态元素关系表中获取对应的元素ID；
根据元素ID，从动态元素表中获取动态元素。
优选地，所述前台获得动态元素列表后，进行逐一解析，展示出最终的H5页面，包括：
逐一读取元素列表，从每一个元素中，按照元素类型字段，匹配相应的前台组件，并将返回的数据内容，填充到相应组件中。
本发明提出的一种根据后台配置自动生成H5业务办理页面的方法，采用后台配置+通用页面动态生成技术，由后台根据页面组件设置以及设定的数据源，对JavaScript与后台交互部分进行统一封装，访问时动态生成H5页面，实现了标记语言和逻辑语言的分离。该方法精简了前后台分离模式下的开发过程，减少了角色配置，只需要后台人员即可独立完成整个业务开发，大大提升了开发效率。整个开发过程，只需要掌握JAVA开发的后台开发人员，不需要前台开发人员参与，极大减轻了前后台人员之间沟通协调压力，提高了应用上线效率。
附图说明
图1为本发明一种根据后台配置自动生成H5业务办理页面的方法流程图。
具体实施方式
下面结合附图和实施例对本发明技术方案做进一步详细说明，以下实施例不构成对本发明的限定。
本发明在H5开发中将页面关键元素分为三类：与界面相关(如类型、大小、只读属性)、与数据相关(初始化数据)以及最终调用接口相关(提交接口)。通过将个性化的功能，对应的元素配置到数据库中，配合通用的页面动态生成器，即可完成个性化的业务受理页面的开发，实现H5功能的快速实现。当用户使用APP等互联网渠道，通过浏览器访问具体业务受理页面时，浏览器就能得到页面信息并完成渲染。
如图1所示，本发明一种根据后台配置自动生成H5业务办理页面的方法，包括：
步骤1、根据接口及其对应的业务办理事项，配置事项表、动态元素表、事项与动态元素关系表，存储在数据库中。
本实施例以用户完成与接口A对应的业务办理事项A为例，这里的接口A是业务系统的接口，本实施例H5业务办理页面与接口A进行通信，完成业务的处理。本实施例后台配置需要填写与接口A对应的业务办理事项相关信息，包括事项表(对应每一个业务办理功能)、动态元素表(对应该功能内部包含的界面组件)、事项与动态元素关系表(业务办理功能与界面组件的关联关系)。通过三张表的配置，将业务受理界面的关键元素包含的界面配置、数据配置、接口配置，与具体的办理事项关联起来。具体配置内容如下：
事项表：事项ID(事项A)、事项名称、事项排列序号、接口配置；
动态元素表：包括元素ID、元素名称、元素类型、界面配置(编辑提示语、是否必填、最大长度)、数据配置(包括数据源类型、简单数据源内容、复杂数据源接口)；
事项与动态元素关系表：事项ID、元素ID、排列序号。
以下以领取基本医疗保险就医凭证为例，例如数据库中建立的事项表如表1所示，动态元素表如表2所示，事项与动态元素关系表如表3所示：
Figure BDA0001927231460000041
表1事项表
Figure BDA0001927231460000042
Figure BDA0001927231460000051
表2动态元素表
Figure BDA0001927231460000052
表3事项与动态元素关系表
步骤2、根据用户选择的业务办理事项，获取对应的事项ID，从数据库中获取与事项ID有关的动态元素，返回给前台。
用户需要办理某项业务时，会选择对应的业务办理事项，例如用户在APP上选择“领取基本医疗保险就医凭证”业务(事项A)，该业务对应的事项ID为事项A。
则根据获取的事项ID，结合步骤1建立的事项表、动态元素表、事项与动态元素关系表，从数据库中获取与事项ID有关的动态元素。
从数据库中获取与事项ID有关的动态元素核心代码(Java)如下：
Figure BDA0001927231460000053
Figure BDA0001927231460000061
Figure BDA0001927231460000071
在上述实施例的核心代码中，根据与事项A对应的事项ID编号，将表2与表3联合进行联合查询，查询出与事项A对应的元素列表，形成事项对应的动态元素集合，包括元素名称、编辑提示、是否必填、数据源类型、数据源等信息，组装成JSON(JavaScript ObjectNotation)报文，返回给前台做展示。对于普通的元素，例如姓名，由用户直接填写，无需数据源；对于下拉框简单选择的元素，例如医疗人员类别，有企业在职、公务员退休、离休等选项，在数据库中做了配置，读取出来后，直接返回给前台，形成下拉列表；对于下拉框实时获取的元素，对应的数据，无法在数据库中预先配置，而是要根据当前情况实时读取，根据配置的实时读取接口名称，再次发起查询，将查询结果包装成JSON报文，返回给前台，形成下拉列表。由此，返回给前台的完整报文全部形成。
步骤3、前台获得动态元素列表后，进行逐一解析，展示出最终的H5页面。
核心代码(HTML5)如下：
Figure BDA0001927231460000072
Figure BDA0001927231460000081
Figure BDA0001927231460000091
对于每一个事项，并没有与该事项对应的单独H5页面，而是通过一个通用页面处理。通用页面的处理方法是：逐一读取元素列表，从每一个元素中，按照元素类型element_type字段，匹配相应的前台组件(如单行文本框、下拉框、多行文本框、日期选择框等)，并将返回的数据内容，填充到相应组件中(例如下拉框的下拉值，从后台返回的报文中解析并填充进去)，至此，形成了完整的前台页面。
本实施例前台组件是构建交互式Web界面的开发工具中预先设置的库，这里不再赘述。
在形成前台页面后，用户在页面上操作，并通过接口A与业务系统进行交互，完成用户的业务办理事项。
本发明提出的根据后台配置自动生成H5业务办理页面的方法，采用后台配置+通用页面动态生成技术，由后台根据页面组件设置以及设定的数据源，对JavaScript与后台交互部分进行统一封装，访问时动态生成H5页面，实现了标记语言和逻辑语言的分离。该方法精简了前后台分离模式下的开发过程，减少了角色配置，只需要后台人员即可独立完成整个业务开发，大大提升了开发效率。只需要针对具体业务功能接口，形成前台对应的元素配置，在数据库中完成配置即可。运行过程中，通用的动态元素获取单元加上通用的页面生成单元，通过调用个性化的配置，即可实现个性化的前台页面展现。整个开发过程，只需要掌握JAVA开发的后台开发人员，不需要前台开发人员参与，极大减轻了前后台人员之间沟通协调压力，提高了应用上线效率。
以上实施例仅用以说明本发明的技术方案而非对其进行限制，在不背离本发明精神及其实质的情况下，熟悉本领域的技术人员当可根据本发明作出各种相应的改变和变形，但这些相应的改变和变形都应属于本发明所附的权利要求的保护范围。

Claims (3)

1.一种根据后台配置自动生成H5业务办理页面的方法，其特征在于，所述根据后台配置自动生成H5业务办理页面的方法，包括：
根据接口及其对应的业务办理事项，配置事项表、动态元素表、事项与动态元素关系表，存储在数据库中；
根据用户选择的业务办理事项，获取对应的事项ID，从数据库中获取与事项ID有关的动态元素，返回给前台；
前台获得动态元素列表后，逐一读取元素列表，从每一个元素中，按照元素类型字段，匹配相应的前台组件，并将返回的数据内容，填充到相应组件中，展示出最终的H5页面。
2.根据权利要求1所述的根据后台配置自动生成H5业务办理页面的方法，其特征在于，所述事项表包括事项ID、事项名称、接口配置；所述动态元素表包括元素ID、元素名称、元素类型、界面配置、数据配置；所述事项与动态元素关系表包括事项ID和元素ID。
3.根据权利要求2所述的根据后台配置自动生成H5业务办理页面的方法，其特征在于，所述根据用户选择的业务办理事项，获取对应的事项ID，从数据库中获取与事项ID有关的动态元素，包括：
根据用户选择的业务办理事项，获取对应的事项ID；
根据事项ID，从事项与动态元素关系表中获取对应的元素ID；
根据元素ID，从动态元素表中获取动态元素。
CN201811622534.2A 2018-12-28 2018-12-28 一种根据后台配置自动生成h5业务办理页面的方法 Active CN109739504B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811622534.2A CN109739504B (zh) 2018-12-28 2018-12-28 一种根据后台配置自动生成h5业务办理页面的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811622534.2A CN109739504B (zh) 2018-12-28 2018-12-28 一种根据后台配置自动生成h5业务办理页面的方法

Publications (2)

Publication Number Publication Date
CN109739504A CN109739504A (zh) 2019-05-10
CN109739504B true CN109739504B (zh) 2022-04-01

Family

ID=66361813

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811622534.2A Active CN109739504B (zh) 2018-12-28 2018-12-28 一种根据后台配置自动生成h5业务办理页面的方法

Country Status (1)

Country Link
CN (1) CN109739504B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111427645A (zh) * 2020-03-20 2020-07-17 青岛聚好联科技有限公司 一种基于h5的跨终端自适应显示的方法及装置
CN112130853B (zh) * 2020-08-25 2024-02-02 北京思特奇信息技术股份有限公司 一种实现前端h5业务能力开放的方法及系统

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102207861A (zh) * 2010-06-25 2011-10-05 南京联创科技集团股份有限公司 一种业务中个性化信息展现方法
CN102541541A (zh) * 2011-12-15 2012-07-04 大唐软件技术股份有限公司 界面生成方法和装置
CN108304172A (zh) * 2017-01-13 2018-07-20 北京畅游天下网络技术有限公司 一种web开发方法及web开发引擎

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10175960B2 (en) * 2015-11-13 2019-01-08 International Business Machines Corporation User interface area coverage

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102207861A (zh) * 2010-06-25 2011-10-05 南京联创科技集团股份有限公司 一种业务中个性化信息展现方法
CN102541541A (zh) * 2011-12-15 2012-07-04 大唐软件技术股份有限公司 界面生成方法和装置
CN108304172A (zh) * 2017-01-13 2018-07-20 北京畅游天下网络技术有限公司 一种web开发方法及web开发引擎

Also Published As

Publication number Publication date
CN109739504A (zh) 2019-05-10

Similar Documents

Publication Publication Date Title
CN109766529B (zh) 一种报表的生成方法及设备
CN106897251B (zh) 富文本展示方法及装置
CN103077185A (zh) 一种基于对象的自定义扩展信息的方法
CN111079047A (zh) 一种面向web的页面构建系统
US10970047B2 (en) Lossless bi-directional formatting of program source code
CN109739504B (zh) 一种根据后台配置自动生成h5业务办理页面的方法
CN110019835A (zh) 资源编排方法、装置以及电子设备
CN103530407A (zh) 一种富文本文档的生成方法与装置
TW201923548A (zh) 產生對話式使用者介面的方法及系統
CN105279168A (zh) 支持自然语言的数据查询方法、开放平台及用户终端
CN112131289A (zh) 数据处理方法、装置、电子设备及存储介质
CN108021629B (zh) 一种广告素材数据生成方法、装置及系统
CN113239310A (zh) 一种页面加载方法及相关装置
CN109617944B (zh) Web参数管理方法、装置、计算机存储介质及设备
CN108959439B (zh) 一种数据模板生成方法及系统
CN109343835A (zh) 一种基于模板的快速构建业务脚手架代码工具
CN111401023B (zh) 一种报表生成方法、装置、服务器及存储介质
CN112905178A (zh) 业务功能页面生成方法、装置、设备及介质
CN117112510A (zh) 报告模板配置方法、装置、设备及存储介质
CN110647371A (zh) 一种基于业务配置的多语言资源文件解析方法和系统
CN115879435A (zh) 一种智慧工程场景下云端合同生成的方法
CN114676671A (zh) 文档在线编辑方法及其装置、计算机可读存储介质
CN111506644B (zh) 一种应用数据处理方法、装置和电子设备
CN103488477A (zh) Java接口的可视化编辑系统和可视化编辑方法
CN110908659A (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
CP01 Change in the name or title of a patent holder
CP01 Change in the name or title of a patent holder

Address after: 310052 room 2101-6, building 4, Wangxin Shuangcheng building, No. 1785, Jianghan Road, Changhe street, Binjiang District, Hangzhou, Zhejiang Province

Patentee after: Zhejiang Zheda Wangxin Software Industry Group Co.,Ltd.

Address before: 310052 room 2101-6, building 4, Wangxin Shuangcheng building, No. 1785, Jianghan Road, Changhe street, Binjiang District, Hangzhou, Zhejiang Province

Patentee before: INSIGMA TECHNOLOGY CO.,LTD.