CN109284103A - 一种基于控件开发模式的Web应用开发及更新方法 - Google Patents

Abstract

本发明涉及一种基于控件开发模式的Web应用开发及更新方法，其特征在于分为三层：配置层、解析层、展示层，配置层：通过控件管理系统，进行控件的新增、修改和删除操作；根据需求，进行页面所需控件的配置工作，生成XML文件；解析层：解析配置层生成的XML文件，生成相应代码装载入HTML页面，生成新的HTML页面；展示层：对解析层生成的HTML文件进行渲染展示、事件绑定与数据动态加载。解决Web应用开发和更新升级过程非常耗时的问题，达到一种可以根据客户需求快速对Web应用进行动态的开发、调整、更新迭代的效果。

Description

一种基于控件开发模式的Web应用开发及更新方法

技术领域

本发明涉及一种基于控件开发模式的Web应用开发及更新方法，属于计算机技术领域。

背景技术

Web应用的开发从技术角度来讲有很多种，例如Java Web、.net、PHP等都是主要的开发流派。目前也有基于功能型的快速Web开发，例如针对电商功能的Web页面搭建，但是其主要局限在单一功能下，不能复用在其他功能场景中。也有基于行业的模板化Web开发方式，例如针对电力系统、政府部门办公系统、餐饮行业管理系统等的Web开发，但是这些系统局限在当前行业下，不能跨行业应用，也不能实现灵活的配置化开发。当前的Web应用前端开发主要过程是：确定需求、设计界面、编写界面代码、编写逻辑代码、对接后台、发布版本。

从上述过程可以总结出传统Web应用开发的弊端有以下两点：

1.开发是针对具体需求而定的；

2.需求变更或有新需求时，都要重复上述过程。

这样的开发过程耗时耗力而且产出的代码不可复用，制约着Web应用开发和版本迭代的速度。对客户来说，这一过程耗时长、体验差，对开发者来说，这一过程重复性高、繁琐、复杂。

发明内容

本发明的目的在于提供一种基于控件开发模式的Web应用开发及更新方法，解决Web应用开发和更新升级过程非常耗时的问题，达到一种可以根据客户需求快速对Web应用进行动态的开发、调整、更新迭代的效果。

本发明的技术方案是这样实现的：一种基于控件开发模式的Web应用开发及更新方法，其特征在于分为三层：配置层、解析层、展示层：

1. 配置层：通过控件管理系统，进行控件的新增、修改和删除操作；根据需求，进行页面所需控件的配置工作，生成XML文件；

a. 将页面元素拆分为相对独立的控件，通过对控件的组装和对控件属性的控制完成整个页面的配置，便于Web应用的搭建与页面的动态化实现；

b. 配置页面控件时，增加了对控件基本样式的控制。如果控件需要有数据展示，则可配置接口用以和后端交互数据；

c. 如果控件有特殊效果或功能实现，则可单独写出相应代码，配置在该控件代码中；

d.如果控件中有需要验证的属性，则可以配置该控件需要验证以及验证所适用的规则；

e.基于Web应用页面，自定义的控件和属性，用于Web应用页面的动态配置、事件绑定、业务流转，便于实现符合需求的业务规则和处理逻辑；

2. 解析层：解析配置层生成的XML文件，生成相应代码装载入HTML页面，生成新的HTML页面；

a. 基于解析XML文件的通用插件，解析XML文件中的不同种类的控件，生成相应代码装载至HTML文件中；

b. 基于表单和字段验证的通用插件，解析页面中需要验证的控件和所需的验证规则，完成数据交互前的通用验证；

c.通过插件完成控件特殊功能或样式代码的解析和加载；

d. 完成前后台交互代码的加载；

3.展示层：对解析层生成的HTML文件进行渲染展示、事件绑定与数据动态加载；

a.基于不同浏览器，完成Web应用界面的展示，支持各种主流浏览器的界面展示和功能实现；

b. 基于解析出的代码，完成所需数据的加载和展示;

具体步骤如下：

首先建立一套模板化的页面母版库和前端组件库，用于组成页面中的各种功能模块；页面母版库和功能控件库是两个相对独立的部分，不是包含与被包含的关系，但在使用上有先后顺序；页面母版库主要负责样式，功能控件库主要负责功能；配置页面时首先选择一个页面母版，即确定了一个页面的整体布局，相当于骨架，其次选择功能控件，用来完成数据展示和交互，相当于给骨架添加肌肉；建立一套用于解析组件和快速搭建前端页面的执行框架，用于解析组件代码，完成页面的动态生成；一套用于字段和表单自动验证的通用插件；一套用于配置组件代码的工具，用于新增和更新各种前端界面组件;

其次控件和控件的构建机制、处理机制及其扩展性；页面母版库和页面控件库包括但不限于当前已有的母版和控件，当有目前控件库中控件无法满足的需求出现时，可以新增控件以丰富控件库，即控件库具有强扩展性；构建机制是以满足需求为目的，兼具通用性与灵活性，并可以随时对控件本身进行扩展与完善，以代码形式来存储控件；控件的开发使用了多种编程语言与编程技术，使用JavaScript代码处理逻辑，使用HTML代码搭建控件框架，使用CSS语言渲染控件样式，以XML代码存储控件，利用Ajax技术完成控件存取数据的操作；控件的范围包括但不限于目前库中已有的控件，还包括使用本发明所述方法来构建和扩展出的一系列控件；

再次可配置化特性；配置化无论是基于模板粒度还是基于控件粒度，对需求都可以实现配置化的开发；配置化特性包括：页面模板可配、页面样式可配、功能模块（以控件为基本单元）可配、数据交互可配、交互操作可配；如遇到特殊需求，无法配置化实现时，依然可用所述控件和模板的扩展性开发出适用此特殊需求的控件来，既可以满足需求又可以丰富控件库；控件库的扩展性，控件本身的扩展性以及灵活的可配置化方式满足了对各个行业，各种功能需求的支撑，使本发明达到了全行业的Web应用配置化开发程度。

本发明的积极效果是改变了传统的Web应用开发方式，只需要通过配置控件就可以完成Web应用开发，凸显了实用性、适用性、高效性、灵活性和可延展性；显著的提高了开发速度、开发效率，大大降低了人力成本、时间成本。

附图说明

图1是本发明整体架构图。

图2是配置页面架构流程图。

图3是配置控件架构流程图。

图4是解析XML文件流程图。

图5是通用验证流程图。

图6是页面更新流程图。

具体实施方式

下面将参照附图对本发明做进一步的描述。虽然附图中展示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。 如图1所示，一种基于控件开发模式的Web应用开发及更新方法，其特征在于分为三层：配置层、解析层、展示层：

配置层：通过控件管理系统，进行控件的新增、修改和删除操作；根据需求，进行页面所需控件的配置工作，生成XML文件；

a.将页面元素拆分为相对独立的控件，通过对控件的组装和对控件属性的控制完成整个页面的配置，便于Web应用的搭建与页面的动态化实现；

b.配置页面控件时，增加了对控件基本样式的控制。如果控件需要有数据展示，则可配置接口用以和后端交互数据；

c.如果控件有特殊效果或功能实现，则可单独写出相应代码，配置在该控件代码中；

d.如果控件中有需要验证的属性，则可以配置该控件需要验证以及验证所适用的规则；

e.基于Web应用页面，自定义的控件和属性，用于Web应用页面的动态配置、事件绑定、业务流转，便于实现符合需求的业务规则和处理逻辑；

1．解析层：解析配置层生成的XML文件，生成相应代码装载入HTML页面，生成新的HTML页面；

a.基于解析XML文件的通用插件，解析XML文件中的不同种类的控件，生成相应代码装载至HTML文件中；

b.基于表单和字段验证的通用插件，解析页面中需要验证的控件和所需的验证规则，完成数据交互前的通用验证；

c.通过插件完成控件特殊功能或样式代码的解析和加载；

d.完成前后台交互代码的加载；

2．展示层：对解析层生成的HTML文件进行渲染展示、事件绑定与数据动态加载；

a.基于不同浏览器，完成Web应用界面的展示，支持各种主流浏览器的界面展示和功能实现；

b.基于解析出的代码，完成所需数据的加载和展示。

具体步骤如下：

首先建立一套模板化的页面母版库和前端组件库，用于组成页面中的各种功能模块；页面母版库和功能控件库是两个相对独立的部分，不是包含与被包含的关系，但在使用上有先后顺序；页面母版库主要负责样式，功能控件库主要负责功能；配置页面时首先选择一个页面母版，即确定了一个页面的整体布局，相当于骨架，其次选择功能控件，用来完成数据展示和交互，相当于给骨架添加肌肉；建立一套用于解析组件和快速搭建前端页面的执行框架，用于解析组件代码，完成页面的动态生成；一套用于字段和表单自动验证的通用插件；一套用于配置组件代码的工具，用于新增和更新各种前端界面组件;

其次控件和控件的构建机制、处理机制及其扩展性；页面母版库和页面控件库包括但不限于当前已有的母版和控件，当有目前控件库中控件无法满足的需求出现时，可以新增控件以丰富控件库，即控件库具有强扩展性；构建机制是以满足需求为目的，兼具通用性与灵活性，并可以随时对控件本身进行扩展与完善，以代码形式来存储控件；控件的开发使用了多种编程语言与编程技术，使用JavaScript代码处理逻辑，使用HTML代码搭建控件框架，使用CSS语言渲染控件样式，以XML代码存储控件，利用Ajax技术完成控件存取数据的操作；控件的范围包括但不限于目前库中已有的控件，还包括使用本发明所述方法来构建和扩展出的一系列控件；

再次可配置化特性。配置化是本发明的重要特性，无论是基于模板粒度还是基于控件粒度，对需求都可以实现配置化的开发；配置化特性包括：页面模板可配、页面样式可配、功能模块（以控件为基本单元）可配、数据交互可配、交互操作可配；如遇到特殊需求，无法配置化实现时，依然可用本发明所述控件和模板的扩展性开发出适用此特殊需求的控件来，既可以满足需求又可以丰富控件库；控件库的扩展性，控件本身的扩展性以及灵活的可配置化方式满足了对各个行业，各种功能需求的支撑，使本发明达到了全行业的Web应用配置化开发程度。

实施例1

如图2所示一种基于控件开发模式的Web应用开发框架中的页面配置的步骤流程图，具体步骤如下：

步骤S201：开始配置页面；

步骤S202：根据已设计好的界面从页面母版库中选择适当的页面母版；

步骤S203：根据已设计好的界面从页面控件库中选择所需的控件；

步骤S204：对已选择的控件进行属性、验证规则和样式的设置；

步骤S205：如果此控件需要数据访问，则配置数据接口；如果需求对该控件有特殊要求，则加入针对特殊操作、特殊样式所写的脚本代码；

步骤S206：全部配置完毕，生成该页面的XML文件，供后续解析插件使用。

通过本实施例，达到了页面配置的动态化，实现了Web应用基于控件的配置化开发方式，使得Web应用开发更为高效，版本迭代时间大大缩短，对需求的反应速度大为增强，便于企业根据不同业务场景和需求，配置不同的Web应用。

实施例2

如图3所示一种基于控件开发模式的Web应用开发框架中的页面控件配置的步骤流程图，具体步骤如下：

步骤S301：开始配置页面控件；

步骤S302：根据已设计好的界面，从页面控件库中选择所需的控件；控件库中基本涵盖了Web应用中所需的基础控件，包括header，navigation，input，textarea，radio，checkbox，select，button，table，popup，ul，li，div，title，info，calendar，shortcut；

步骤S303：设置控件属性，例如table列表控件，可以设置该列表是否有全选、是否有操作列、操作列中有哪些操作按钮、显示几列几行等属性；

步骤S304：对已选择的控件进行验证规则设置，例如input输入框控件，如果需要验证可以设置该控件是哪种类型，包括文本、数字、金额、邮编、邮件、电话、日期、时间等，设置验证是否可以为空，最长最短输入值，最大最小输入值，时间范围等等；

步骤S305：如果此控件需要数据访问，则配置数据接口；如果有当前控件无法满足的功能或样式，可以按照需求新建控件存入控件库，之后重新新建此控件；也可以加入js、css脚本以属性形式嵌入当前控件中，从而满足需求；

步骤S306：全部配置完毕，生成该控件的代码，存入页面的XML文件，供后续解析插件使用。

通过本实施例，达到了控件配置动态化，从而使基于控件开发、可配置的Web应用开发框架的实现成为可能。本实施例描述了完整的控件配置过程，这一过程极大支持了需求变更的快速实现，大大缩短了开发时间。

实施例3

如图4所示一种基于控件开发模式的Web应用开发框架中的解析XML文件步骤流程图，具体步骤如下：

步骤S401：开始解析XML文件；

步骤S402：读取XML文件；

步骤S403：通过解析XML文件的插件component.js来解析获取到的XML数据；

步骤S404：将解析出的控件代码组装进HTML文件中；

步骤S405：检测该控件是否有数据接口需要执行，如果有则执行数据接口取得数据，如果没有则进行下一步；

步骤S406：检测该控件是否有其他js、css脚本需要执行，如果有则执行脚本，没有则进行下一步；

步骤S407：上述步骤执行完毕，渲染HTML页面，展示数据；

步骤S408：自动检测XML文件中是否还有控件代码没有解析，如果有则重新回到步骤S403，如果没有则进行下一步操作；

步骤S409：全部解析完毕。

通过本实施例，描述了完整的插件解析XML文件的过程，这一过程是将XML文件转变为HTML网页文件的关键过程，通过插件解析XML文件，我们将配置好的XML文件，转变成为Web应用中的HTML页面，从而实现了动态化配置的Web应用。

实施例4

如图5所示一种基于控件开发模式的Web应用开发框架中的通用验证步骤流程图，具体步骤如下：

步骤S501：开始验证控件；

步骤S502：触发验证事件，例如点击某页面中的表单提交按钮；

步骤S503：插件自动获取页面中需要验证的控件；

步骤S504：根据需要验证的控件，获取这些控件在XML文件中的代码，解析配置控件时填入的验证规则；

步骤S505：自动根据验证规则来进行验证操作；

步骤S506：判断验证结果是否通过，如果验证通过则进行下一步，如果没有验证通过则给出错误提示，错误提示信息显示在控件下方，待下一次验证通过时自动消除；

步骤S507：自动检测是否还有控件需要验证，如果有则返回步骤S503，如果没有则进行下一步操作；

步骤S508：验证过程结束。

通过本实施例，描述了完整的插件验证控件的过程，这一过程帮助Web应用有效控制非法信息的输入，使系统和数据处于安全的运行环境。自动验证插件也可以和配置控件时嵌入的脚本相结合，互为补充，实现方式灵活多样、满足Web系统的多方面、多样化需求。

实施例5

如图6所示一种基于控件开发模式的Web应用开发框架中的页面更新流程图，具体步骤如下：

步骤S601：开始更新页面；

步骤S602：有更新需求出现；

步骤S603：根据需求，如果需要更新页面母版，则首先选择一个页面母版；

步骤S604：根据需求，如果需要更新功能控件，则选择满足所需的控件；

步骤S605：改动如果符合需求，则保存改动，即更新页面；

步骤S606：更新页面结束。

通过本实施例，描述了完整的页面更新过程，这一过程帮助Web应用快速满足需求变动，简单快捷完成页面更新。

Claims (1)

1.一种基于控件开发模式的Web应用开发及更新方法，其特征在于分为三层：配置层、解析层、展示层：

1）. 配置层：通过控件管理系统，进行控件的新增、修改和删除操作；根据需求，进行页面所需控件的配置工作，生成XML文件；

a. 将页面元素拆分为相对独立的控件，通过对控件的组装和对控件属性的控制完成整个页面的配置，便于Web应用的搭建与页面的动态化实现；

b. 配置页面控件时，增加了对控件基本样式的控制；

2）. 如果控件需要有数据展示，则可配置接口用以和后端交互数据；

c. 如果控件有特殊效果或功能实现，则可单独写出相应代码，配置在该控件代码中；

d.如果控件中有需要验证的属性，则可以配置该控件需要验证以及验证所适用的规则；

e.基于Web应用页面，自定义的控件和属性，用于Web应用页面的动态配置、事件绑定、业务流转，便于实现符合需求的业务规则和处理逻辑；

3）. 解析层：解析配置层生成的XML文件，生成相应代码装载入HTML页面，生成新的HTML页面；

a. 基于解析XML文件的通用插件，解析XML文件中的不同种类的控件，生成相应代码装载至HTML文件中；

b. 基于表单和字段验证的通用插件，解析页面中需要验证的控件和所需的验证规则，完成数据交互前的通用验证；

c.通过插件完成控件特殊功能或样式代码的解析和加载；

d. 完成前后台交互代码的加载；

4）.展示层：对解析层生成的HTML文件进行渲染展示、事件绑定与数据动态加载；

a.基于不同浏览器，完成Web应用界面的展示，支持各种主流浏览器的界面展示和功能实现；

b. 基于解析出的代码，完成所需数据的加载和展示;

具体步骤如下：

首先建立一套模板化的页面母版库和前端组件库，用于组成页面中的各种功能模块；页面母版库和功能控件库是两个相对独立的部分，不是包含与被包含的关系，但在使用上有先后顺序；页面母版库主要负责样式，功能控件库主要负责功能；配置页面时首先选择一个页面母版，即确定了一个页面的整体布局，相当于骨架，其次选择功能控件，用来完成数据展示和交互，相当于给骨架添加肌肉；建立一套用于解析组件和快速搭建前端页面的执行框架，用于解析组件代码，完成页面的动态生成；一套用于字段和表单自动验证的通用插件；一套用于配置组件代码的工具，用于新增和更新各种前端界面组件;

其次控件和控件的构建机制、处理机制及其扩展性；页面母版库和页面控件库包括但不限于当前已有的母版和控件，当有目前控件库中控件无法满足的需求出现时，可以新增控件以丰富控件库，即控件库具有强扩展性；构建机制是以满足需求为目的，兼具通用性与灵活性，并可以随时对控件本身进行扩展与完善，以代码形式来存储控件；控件的开发使用了多种编程语言与编程技术，使用JavaScript代码处理逻辑，使用HTML代码搭建控件框架，使用CSS语言渲染控件样式，以XML代码存储控件，利用Ajax技术完成控件存取数据的操作；控件的范围包括但不限于目前库中已有的控件，还包括使用本发明所述方法来构建和扩展出的一系列控件；

再次可配置化特性；配置化无论是基于模板粒度还是基于控件粒度，对需求都可以实现配置化的开发；配置化特性包括：页面模板可配、页面样式可配、功能模块（以控件为基本单元）可配、数据交互可配、交互操作可配；如遇到特殊需求，无法配置化实现时，依然可用所述控件和模板的扩展性开发出适用此特殊需求的控件来，既可以满足需求又可以丰富控件库；控件库的扩展性，控件本身的扩展性以及灵活的可配置化方式满足了对各个行业，各种功能需求的支撑，使本发明达到了全行业的Web应用配置化开发程度。