CN108363573A - 一种高效的移动表单设计与渲染方法 - Google Patents
一种高效的移动表单设计与渲染方法 Download PDFInfo
- Publication number
- CN108363573A CN108363573A CN201810026766.5A CN201810026766A CN108363573A CN 108363573 A CN108363573 A CN 108363573A CN 201810026766 A CN201810026766 A CN 201810026766A CN 108363573 A CN108363573 A CN 108363573A
- Authority
- CN
- China
- Prior art keywords
- mobile
- list
- json
- page
- design
- 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.)
- Pending
Links
- 238000013461 design Methods 0.000 title claims abstract description 36
- 238000009877 rendering Methods 0.000 title claims abstract description 30
- 238000000034 method Methods 0.000 claims abstract description 25
- 238000005516 engineering process Methods 0.000 claims abstract description 11
- 230000015572 biosynthetic process Effects 0.000 claims abstract 2
- 238000003786 synthesis reaction Methods 0.000 claims abstract 2
- 238000012545 processing Methods 0.000 claims description 4
- 238000012163 sequencing technique Methods 0.000 claims description 3
- 238000011282 treatment Methods 0.000 claims description 3
- 241001269238 Data Species 0.000 claims description 2
- 238000012938 design process Methods 0.000 claims description 2
- 238000012423 maintenance Methods 0.000 abstract description 8
- 238000011161 development Methods 0.000 description 5
- 238000013459 approach Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000011084 recovery Methods 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 238000004088 simulation Methods 0.000 description 1
Classifications
-
- 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)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明提供了一种高效的移动表单设计与渲染方法,所述方法通过对移动表单进行分步式设计,综合出整体配置的设计,根据配置进行动态渲染与响应,并利用基于虚拟DOM技术的前端UI框架提升渲染与响应速度。本发明相对于生成Html,JSON配置具有更高的可读性和可维护性,相对于生成大量的JavaScript文件,由唯一的动态渲染页面进行渲染,也极大的降低了大量表单页面的重复性维护工作,加快了加载速度,减少了数据存储空间和后期维护时间。利用基于虚拟DOM技术的React等前端UI框架,可以极大的提高界面的渲染速度和代码的可读性。
Description
技术领域
本发明涉及企业信息系统的移动表单开发技术领域,具体涉及一种高效的移动表单设计与渲染方法。
背景技术
随着移动信息系统的发展,越来越多的企业部署基于移动端的信息系统。然而对于传统的移动表单开发方式,每个发布表单都会生成大量的存储数据,随着表单数量的增加,数据重复而又冗余,给维护带来很多重复性的工作,工作量大,增加了开发周期。
发明内容
为了解决以上技术问题,各种系统的现状,本发明提出了一种高效的移动表单设计与渲染方法。该方法解决了传统方式代码易读性差,数据重复率高,维护工作量大,渲染和响应速度慢等问题,使移动表单的开发和维护更加方便灵活和高效。
本发明的技术方案是:
一种高效的移动表单设计与渲染方法,所述方法通过对移动表单进行分步式设计,综合出整体配置的设计,根据配置进行动态渲染与响应,并利用基于虚拟DOM技术的前端UI框架提升渲染与响应速度。
虚拟DOM,Virtual DOM 是一个模拟 DOM 树的JavaScript 对象。React使用Virtual DOM 来渲染 UI,当组件状态state有更改的时候,React会自动调用组件的render方法重新渲染整个组件的UI。
React主要的目标是提供一套不同的,高效的方案来更新DOM,不是通过直接把DOM变成可变的数据,而是通过构建“Virtual DOM”,虚拟的DOM,随后React处理真实的DOM上的更新来进行模拟相应的更新。
所述方法内容包括:
在移动表单设计发布时,生成该移动表单的JSON配置数据,依据该配置数据,由动态渲染页面对移动表单进行渲染。
所述方法内容包括:
将移动表单的所有配置属性抽象出来,通过图形化界面展示,并通过设计将数据保存到后台。
所述方法内容包括:
在将移动表单发布时,根据设计时产生的后台数据,经过集成生成已经固定好格式的JSON配置。
所述方法内容包括:
在对移动表单进行渲染时,对JSON配置进行解析,利用虚拟DOM技术加快页面渲染与响应,动态地渲染需要生成的界面。
所述移动表单的设计过程包括:
首先根据移动表单架构和设计功能的需要,抽象出移动表单的所有属性;
然后依据移动表单属性配置的先后顺序分组分类,通过图形化界面,将这些属性分步式呈现给设计者,设计者利用图形化设计页面,根据所需移动表单的业务要求,分步式依次配置出移动表单的属性;
最终移动表单的属性依次保存于后台数据库,通过此模式易于开发者理解开发流程和原理,易于操作。
所述生成发布JSON配置的过程包括:
移动表单加载最新JSON配置时,将表单所有的配置数据综合处理,并生成与该表单对应的JSON配置。
如果自动生成的配置不满足设计需求,需要后期手动处理,也可以在JSON处理窗口输入所需的处理JSON的function(函数),传递该function的参数生成JSON配置,点击生成配置,该function会处理JSON并返回处理后的JSON的配置,通过function来修改JSON配置。
上述操作是为了后期如果设计改动,在需要重新加载JSON配置的时候,可以利用该function恢复之前的手动处理JSON配置的过程,灵活方便,提高工作效率,以JSON配置的形式展现给开发者,有更高的可读性和可维护性。
所述方法内容还包括:
在移动表单的展现过程中,移动表单的渲染页面为单页应用,所有的移动表单统一通过该页面进行渲染,只传递不同的JSON配置,开发人员也只需维护该页面,因此降低了大量表单页面的重复性维护工作。
所述方法内容还包括:
渲染页面根据解析生成的JSON配置对页面进行渲染,例如解析控件的默认值属性,初始化默认值,解析表单控件的类型渲染不同的控件,为解析基于React的表单控件的动态渲染代码示例,基于虚拟DOM技术进行渲染,由于不直接操作DOM,控件发生变化时并不会直接操作所有DOM,只操作变化的DOM,提高了响应速度,优化了用户体验,为移动表单生成页面示例。
本发明的有益效果为:
本发明相对于生成Html,JSON配置具有更高的可读性和可维护性,相对于生成大量的JavaScript文件,由唯一的动态渲染页面进行渲染,也极大的降低了大量表单页面的重复性维护工作,加快了加载速度,减少了数据存储空间和后期维护时间。利用基于虚拟DOM技术的React等前端UI框架,可以极大的提高界面的渲染速度和代码的可读性。
附图说明
图1为本发明原理流程图。
具体实施方式
下面结合具体实施例,对本发明的内容进行更加详细的阐述:
如图1所示,一种高效的移动表单设计与渲染方法,主要通过以下步骤完成:
1.首先将移动表单的所有配置属性抽象出来,通过图形化界面展示,并通过设计将数据保存到后台。
2.发布时根据设计时产生的后台数据,经过集成生成已经固定好格式的JSON配置。
3.在渲染时对JSON配置进行解析,利用虚拟DOM技术加快页面渲染与响应,动态渲染需要生成的界面。
其中:
表单设计页面的架构和展现,首先根据表单架构和设计功能的需要,抽象出表单的所有属性,然后依据表单属性配置的先后顺序分组分类,通过图形化界面,将这些属性分步式呈现给设计者,设计者利用图形化设计页面,根据自己所需表单的业务要求,分步式依次配置出表单的属性,最终表单的属性会依次保存后台数据库,通过此模式易于开发者理解开发流程和原理,易于操作。
表单的发布会生成发布JSON配置,移动表单加载最新JSON配置时,会将表单所有的配置数据综合处理,并生成与该表单对应的JSON配置,如果自动生成的配置不满足设计需求,需要后期手动处理,也可以在JSON处理窗口输入自己所需的处理JSON的function,传递给该function的参数为生成的JSON配置,点击生成配置,该function会处理JSON并返回处理后的JSON的配置,通过function来修改JSON配置,之所以这么处理,是为了后期如果设计改动,需要重新加载JSON配置的时候,可以利用该function恢复之前的手动处理JSON配置的过程,灵活方便,提高工作效率。以JSON配置的形式展现给开发者,有更高的可读性和可维护性。
在移动表单的展现过程中,表单的渲染页面为单页应用,所有的移动表单统一通过该页面进行渲染,只是传递不同的JSON配置,开发人员也只需维护该页面,因此降低了大量表单页面的重复性维护工作。渲染页面会解析生成的JSON配置对页面进行渲染,例如解析控件的默认值属性,初始化默认值,解析表单控件的类型渲染不同的控件,基于虚拟DOM技术的渲染方式,由于不直接操作DOM,控件发生变化时并不会直接操作所有DOM,只会操作变化的DOM,提高了响应速度,优化了用户体验。
以上所述仅为本发明的优选实现方法,但并不限于此,对本领域技术人员来说,本发明实现方法可以有各种变化。凡在本发明的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (10)
1.一种高效的移动表单设计与渲染方法,其特征在于,所述方法通过对移动表单进行分步式设计,综合出整体配置的设计,根据配置进行动态渲染与响应,并利用基于虚拟DOM技术的前端UI框架提升渲染与响应速度。
2.根据权利要求1所述的一种高效的移动表单设计与渲染方法,其特征在于,所述方法内容包括:
在移动表单设计发布时,生成该移动表单的JSON配置数据,依据该配置数据,由动态渲染页面对移动表单进行渲染。
3.根据权利要求2所述的一种高效的移动表单设计与渲染方法,其特征在于,所述方法内容包括:
将移动表单的所有配置属性抽象出来,通过图形化界面展示,并通过设计将数据保存到后台。
4.根据权利要求3所述的一种高效的移动表单设计与渲染方法,其特征在于,所述方法内容包括:
在将移动表单发布时,根据设计时产生的后台数据,经过集成生成已经固定好格式的JSON配置。
5.根据权利要求4所述的一种高效的移动表单设计与渲染方法,其特征在于,所述方法内容包括:
在对移动表单进行渲染时,对JSON配置进行解析,利用虚拟DOM技术加快页面渲染与响应,动态地渲染需要生成的界面。
6.根据权利要求5所述的一种高效的移动表单设计与渲染方法,其特征在于,所述移动表单的设计过程包括:
首先根据移动表单架构和设计功能的需要,抽象出移动表单的所有属性;
然后依据移动表单属性配置的先后顺序分组分类,通过图形化界面,将这些属性分步式呈现给设计者,设计者利用图形化设计页面,根据所需移动表单的业务要求,分步式依次配置出移动表单的属性;
最终移动表单的属性依次保存于后台数据库。
7.根据权利要求5所述的一种高效的移动表单设计与渲染方法,其特征在于,所述生成发布JSON配置的过程包括:
移动表单加载最新JSON配置时,将表单所有的配置数据综合处理,并生成与该表单对应的JSON配置。
8.根据权利要求7所述的一种高效的移动表单设计与渲染方法,其特征在于,如果自动生成的配置不满足设计需求,在JSON处理窗口输入所需的处理JSON的function,传递该function的参数生成JSON配置,通过function来修改JSON配置。
9.根据权利要求7所述的一种高效的移动表单设计与渲染方法,其特征在于,所述方法内容还包括:
在移动表单的展现过程中,移动表单的渲染页面为单页应用,所有的移动表单统一通过该页面进行渲染,只传递不同的JSON配置。
10.根据权利要求9所述的一种高效的移动表单设计与渲染方法,其特征在于,所述方法内容还包括:
渲染页面根据解析生成的JSON配置对页面进行渲染,基于虚拟DOM技术进行渲染,控件发生变化时只操作变化的DOM。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810026766.5A CN108363573A (zh) | 2018-01-11 | 2018-01-11 | 一种高效的移动表单设计与渲染方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810026766.5A CN108363573A (zh) | 2018-01-11 | 2018-01-11 | 一种高效的移动表单设计与渲染方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN108363573A true CN108363573A (zh) | 2018-08-03 |
Family
ID=63010954
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810026766.5A Pending CN108363573A (zh) | 2018-01-11 | 2018-01-11 | 一种高效的移动表单设计与渲染方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN108363573A (zh) |
Cited By (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109359221A (zh) * | 2018-10-29 | 2019-02-19 | 广东电网有限责任公司 | 移动式作业表单生成方法、装置、设备、存储介质 |
CN109739500A (zh) * | 2018-12-14 | 2019-05-10 | 中国四维测绘技术有限公司 | 一种bs架构下的浏览器前端渲染展示方法 |
CN110162301A (zh) * | 2019-04-01 | 2019-08-23 | 贵州力创科技发展有限公司 | 一种表单渲染方法、装置和存储介质 |
CN111522551A (zh) * | 2020-07-03 | 2020-08-11 | 嘉兴太美医疗科技有限公司 | Web端在线表单设计器的实现方法和装置 |
CN111930378A (zh) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Web端项目表单设计器的实现方法、装置和系统 |
CN111930379A (zh) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Web端投诉表单设计器的实现方法、装置和系统 |
CN112131847A (zh) * | 2020-09-27 | 2020-12-25 | 北京北信源软件股份有限公司 | 基于React的可视化表单生成方法及系统 |
CN112347378A (zh) * | 2019-08-07 | 2021-02-09 | 北京国双科技有限公司 | 表单生成方法及装置 |
CN112749365A (zh) * | 2021-01-19 | 2021-05-04 | 北京直真科技股份有限公司 | 基于React的具有自动排列布局渲染和校验的表单创建方法 |
CN114035773A (zh) * | 2022-01-10 | 2022-02-11 | 大汉软件股份有限公司 | 一种基于配置的低代码开发表单方法、系统及装置 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20120124102A1 (en) * | 2002-05-22 | 2012-05-17 | Pitney Bowes Inc. | Method for loading large xml doucments on demand |
CN105630902A (zh) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | 一种渲染和增量更新网页的方法 |
CN105760440A (zh) * | 2016-02-02 | 2016-07-13 | 广州市科南软件有限公司 | 在线表单设计器的实现方法及其系统 |
CN107241227A (zh) * | 2017-06-29 | 2017-10-10 | 济南浪潮高新科技投资发展有限公司 | 一种网络数据报表的配置及生成方法 |
-
2018
- 2018-01-11 CN CN201810026766.5A patent/CN108363573A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20120124102A1 (en) * | 2002-05-22 | 2012-05-17 | Pitney Bowes Inc. | Method for loading large xml doucments on demand |
CN105630902A (zh) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | 一种渲染和增量更新网页的方法 |
CN105760440A (zh) * | 2016-02-02 | 2016-07-13 | 广州市科南软件有限公司 | 在线表单设计器的实现方法及其系统 |
CN107241227A (zh) * | 2017-06-29 | 2017-10-10 | 济南浪潮高新科技投资发展有限公司 | 一种网络数据报表的配置及生成方法 |
Cited By (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109359221A (zh) * | 2018-10-29 | 2019-02-19 | 广东电网有限责任公司 | 移动式作业表单生成方法、装置、设备、存储介质 |
CN109739500A (zh) * | 2018-12-14 | 2019-05-10 | 中国四维测绘技术有限公司 | 一种bs架构下的浏览器前端渲染展示方法 |
CN110162301A (zh) * | 2019-04-01 | 2019-08-23 | 贵州力创科技发展有限公司 | 一种表单渲染方法、装置和存储介质 |
CN112347378A (zh) * | 2019-08-07 | 2021-02-09 | 北京国双科技有限公司 | 表单生成方法及装置 |
CN111522551A (zh) * | 2020-07-03 | 2020-08-11 | 嘉兴太美医疗科技有限公司 | Web端在线表单设计器的实现方法和装置 |
CN111522551B (zh) * | 2020-07-03 | 2020-10-20 | 嘉兴太美医疗科技有限公司 | Web端在线表单设计器的实现方法和装置 |
CN111930379A (zh) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Web端投诉表单设计器的实现方法、装置和系统 |
CN111930378A (zh) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Web端项目表单设计器的实现方法、装置和系统 |
CN111930379B (zh) * | 2020-08-11 | 2021-07-06 | 上海亿锎智能科技有限公司 | Web端投诉表单设计器的实现方法、装置和系统 |
CN111930378B (zh) * | 2020-08-11 | 2021-10-22 | 上海亿锎智能科技有限公司 | Web端项目表单设计器的实现方法、装置和系统 |
CN112131847A (zh) * | 2020-09-27 | 2020-12-25 | 北京北信源软件股份有限公司 | 基于React的可视化表单生成方法及系统 |
CN112749365A (zh) * | 2021-01-19 | 2021-05-04 | 北京直真科技股份有限公司 | 基于React的具有自动排列布局渲染和校验的表单创建方法 |
CN114035773A (zh) * | 2022-01-10 | 2022-02-11 | 大汉软件股份有限公司 | 一种基于配置的低代码开发表单方法、系统及装置 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108363573A (zh) | 一种高效的移动表单设计与渲染方法 | |
CN102207872B (zh) | 按照用户需求定制Web UI控件的方法和系统 | |
CN202177892U (zh) | Web UI控件定制系统 | |
CN109614102A (zh) | 代码自动生成方法、装置、电子设备及存储介质 | |
CN101122921B (zh) | 基于ajax与html标记形成树形显示结构的方法 | |
CN106341444B (zh) | 数据访问方法和装置 | |
CN103383645A (zh) | 代码生成方法及系统 | |
CN110502212B (zh) | 一种面向多语言的高并发在线开发支撑方法 | |
US9646103B2 (en) | Client-side template engine and method for constructing a nested DOM module for a website | |
CN104731589A (zh) | 用户界面的自动生成方法及自动生成装置 | |
CN108829378A (zh) | 一种应用软件的开发方法、装置及电子设备 | |
CN109144482A (zh) | 一种基于webpack的快速开发环境搭建方法及装置 | |
CN103383687A (zh) | 一种页面处理方法和装置 | |
US20160012147A1 (en) | Asynchronous Initialization of Document Object Model (DOM) Modules | |
US20160012144A1 (en) | Javascript-based, client-side template driver system | |
CN113656124B (zh) | 登录页面的生成方法及其装置 | |
CN102364437A (zh) | 多语言站点开发系统及其实现方法 | |
CN108153522B (zh) | 基于模型转换由midcore生成Spark和Hadoop程序代码的方法 | |
CN102609494B (zh) | 台帐数据的处理方法及装置 | |
CN104199668A (zh) | 一种实现Web页面文件模板化的方法 | |
CN106294760A (zh) | 表单处理方法及服务器、客户端 | |
WO2016005886A2 (en) | Self-referencing of running script elements in asychronously loaded dom modules | |
CN112199626A (zh) | 基于dsl布局引擎的动态表单生成方法 | |
CN111736831A (zh) | 一种基于移动端html页面的自定义菜单组件开发方法 | |
CN112905168B (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 | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180803 |