CN103186370A - Web页面展示方法及系统 - Google Patents

Abstract

一种web页面展示方法，包括以下步骤：获取用户的web页面访问请求和用户标识；根据所述用户标识获取与所述用户标识对应的控件配置信息；根据所述控件配置信息加载所述web页面的控件。此外，还对应提供了一种web页面展示系统。上述web页面展示方法和系统使得web页面的展示适配性更高，扩展性更强。

Description

Web页面展示方法及系统

【技术领域】

本发明涉及互联网技术领域，特别涉及一种web页面展示方法及系统。

【背景技术】

Web应用系统通常指基于浏览器/服务器的互联网系统，web应用系统中通常采用网页来展示界面。通过在网页中采用网页描述语言添加图片和音频，即可向用户展示富文本界面。Web应用系统在展示页面时，还通常将一些通用的用于提供服务的服务接口定义为控件。如文件上传控件、图片编辑控件等。使用了控件之后使得网页展示的复用性大大提高。

Web应用系统中的用户通常被分为多种类型，如管理员、一般用户、VIP用户等，web应用系统根据用户的类型提供相应的服务。传统的web页面展示方法中，预先根据用户的类型对应地设置了相应的网页。当根据用户发起的访问请求获取到用户的类型时，将与该用户类型对应的网页展示给该用户。

传统的web页面展示方法需要为每一种类型的用户均预先设置网页，当需要对多种用户的网页做统一的修改时，需要对每个网页进行修改。且当根据业务需求需要设置多个具有新的服务接口的网页时，一些可复用的服务接口需要在网页中重复进行代码级的定义，从而使得传统技术的展示方法适配性不强，扩展性不足。

【发明内容】

基于此，有必要提供一种能提高扩展性的web页面展示方法。

一种web页面展示方法，所述方法包括以下步骤：

获取用户的web页面访问请求和用户标识；

根据所述用户标识获取与所述用户标识对应的控件配置信息；

根据所述控件配置信息加载所述web页面的控件。

优选的，在所述获取用户的web页面访问请求的步骤之前，还包括：

获取用户标识和控件配置指令；

根据所述控件配置指令在预设的控件库中选取控件；

根据所述选取的控件生成与所述用户标识对应的控件配置信息。

优选的，所述预设的控件库中的控件包括原始控件和扩展控件；

在所述获取控件配置指令的步骤之前，还包括：

获取控件编辑指令；

根据所述控件编辑指令将所述原始控件拼接成扩展控件；

将所述扩展控件加入所述控件库中。

优选的，所述获取用户的web页面访问请求的步骤之后，还包括：

根据所述web页面访问请求获取用户的浏览器类型；

所述根据所述控件配置信息加载所述web页面的控件的步骤具体为：根据所述控件配置信息和所述浏览器类型获取与所述web页面对应的控件并加载到所述web页面中。

优选的，在所述获取用户的web页面访问请求和用户标识的步骤之后，还包括：

在缓存中查找与所述用户标识对应的控件和网页，若找到，则展示所述web页面并在所述web页面上加载所述控件，否则，进入所述根据所述用户标识获取与所述用户标识对应的预设的控件配置信息的步骤。

此外，还有必要提供一种能提高扩展性的web页面展示系统。

一种web页面展示系统，包括以下模块：

请求获取模块，用于获取用户的web页面访问请求和用户标识；

控件配置获取模块，用于根据所述用户标识获取与所述用户标识对应的控件配置信息。

界面展示模块，用于根据所述控件配置信息加载所述web页面的控件。

优选的，还包括控件配置模块，用于获取用户标识和控件配置指令，根据所述控件配置指令在预设的控件库中选取控件，根据所述选取的控件生成与所述用户标识对应的控件配置信息。

优选的，所述预设的控件库中的控件包括原始控件和扩展控件；所述系统还包括：

控件编辑模块，用于获取控件编辑指令，根据所述控件编辑指令将所述原始控件拼接成扩展控件，将所述扩展控件加入所述控件库中。

优选的，所述请求获取模块还用于根据所述web页面访问请求获取用户的浏览器类型；所述界面展示模块还用于根据所述控件编辑指令和所述浏览器类型获取与所述web页面对应的控件并加载到所述web页面中。

优选的，还包括缓存模块，用于将所述控件和web页面与所述用户标识对应缓存；

所述界面展示模块还用于在缓存中查找与所述用户标识对应的控件和web页面，若找到，则展示所述web页面并在所述web页面上加载所述控件，否则，用于根据所述用户标识获取与所述用户标识对应的预设的控件配置信息。

上述web页面展示方法和系统，预先为用户的web页面访问请求设置对应的控件配置信息；在展示时，根据用户标识获取与该用户对应的控件配置信息，然后将控件和web页面组合，即可向该用户展示与该用户对应的界面。对于不同类型的用户只需预设不同类型的控件配置信息，而不用修改所有的web页面，从而使得web页面的展示适配性更高，扩展性更强。

【附图说明】

图1为一个实施例中web页面展示方法的流程图；

图2为一个实施例中web页面展示系统的结构示意图；

图3为另一个实施例中web页面展示系统的结构示意图。

【具体实施方式】

如图1所示，在一个实施例中，一种web页面展示方法，包括以下步骤：

步骤S102，获取用户的web页面访问请求和用户标识。

在一个实施例中，web应用定义的web页面访问请求为URL(UniformResource Locator，统一资源定位符)请求。用户可以通过在浏览器的地址栏输入URL来向web应用请求对应的web页面。

web页面访问请求中可以附加参数，该参数可以为用于区分不同用户或不同用户类型的用户标识，例如标识号码、用户帐号或姓名等。

在一个实施例中，web应用还会为每个访问用户建立session(会话缓存)，并在session中缓存该用户的用户标识。当获取到web页面访问请求后，先根据web页面访问请求获取该请求对应的session，然后再从session中提取出用户标识。

步骤S104，根据用户标识获取与用户标识对应的预设的控件配置信息。

控件配置信息可在预先设置，可先获取用户标识和控件配置指令，根据控件配置指令在预设的控件库中选取控件，根据选取的控件生成与用户标识对应的控件配置信息。

在一个实施例中，可根据用户输入的控件配置指令，并根据控件配置指令在预设的控件库中获取用户选取的控件的控件标识，然后根据选取控件的控件标识生成与用户标识对应的控件配置信息。

在另一个实施例中，控件配置信息可由管理员为多个用户类别分别设置控件配置信息。管理员在预设的控件库中为每个用户类别分别选取控件，然后根据选取控件的控件标识生成与用户类别对应的控件配置信息。每个用户类别包括至少一个用户，该用户的用户标识对应其用户类别的控制配置信息。其中，控件库为预先设置，可以是数据库或文件系统，其中存储有多种控件。控件标识用于区分不同的控件，包括控件的编码、名称或关键字等。

进一步的，可以先向用户展示可视化配置界面，通过可视化配置界面获取用户在可视化配置界面选取的控件和控件的摆放位置，并获取用户输入的用户标识(管理员可以通过输入普通用户的用户标识来为普通用户配置控件配置信息)。具体的，可根据用户选取的控件和摆放位置生成与输入的用户标识对应的控件配置信息，该控件配置信息包括控件标识和控件的摆放位置(例如控件位于界面中的坐标位置等)。为管理员用户提供可视化的配置界面可以方便对展示给不同用户的web页面进行定制。

在一个实施例中，在获取控件配置指令之前，还可以获取控件编辑指令，并根据控件编辑指令将原始控件拼接成扩展控件，然后将扩展控件加入到控件库中。

可以预先设置多个原始控件，如文件上传控件、列表控件、树控件。然后向用户展示可视化的编辑界面，并在可视化编辑界面上展示原始控件。然后通过获取用户对可视化编辑界面上的原始控件的拖曳操作将多个原始控件拼接成扩展控件，编辑完成后，再为其分配唯一的控件标识，然后将扩展控件存储到控件库中。

进一步的，获取控件编辑指令后，还可以根据控件编辑指令对原始控件和扩展控件进行编辑。编辑的内容可包括控件的样式、控件事件、控件判断、界面结构(例如，默认摆放位置)、数据结构的预制扩展方法(例如，控件事件在数据库中对应的字段)。

例如，可预设素材库和样式库，并通过可视化的控件编辑界面获取用户选取的素材和样式修改控件的外观颜色和形状大小，或者根据用户添加的控件事件为控件添加事件处理逻辑。可将编辑好的控件作为新生成的扩展控件存储。

根据控件编辑指令对控件的样式、控件事件等等信息进行修改编辑，可以方便用户根据需要定制需要的控件。通过可视化界面展示控件编辑界面，可以方便用户查看、删除和测试编辑结果。

进一步的，获取web页面访问请求之后，还可以根据web页面访问请求获取用户的浏览器类型。可根据控件配置信息和浏览器类型获取与web页面对应的控件并加载到web页面中。

在预设控件和编辑控件时，可根据浏览器类型生成具有多个版本和相同标识的控件，并根据浏览器类型区分存储在控件库中。在根据控件配置信息获取与web页面对应的控件时，可先根据控件配置信息中的控件标识在控件库中选取与控件标识匹配的控件，然后再在选取的结果中查找与获取到的浏览器类型对应的控件，然后将该控件加载到web页面中。

将控件对应浏览器类型进行多版本的存储，可以避免在控件中添加浏览器类型判断的逻辑，使得在适配浏览器类型时，可预先针对浏览器类型选取合适版本的控件，避免了在控件中通过分割代码判断浏览器类型而导致的异常，从而提高了扩展性和稳定性。

跨浏览器的原始控件即为包含了跨浏览器逻辑的原始控件。不同的浏览器中的脚本标准和web页面标准不同，而跨浏览器的原始控件中的逻辑(通过识别浏览器的类型而调用适配多种浏览器的函数的逻辑)针对不同的浏览器采用了不同的实现方式来达到相同的效果。按照跨浏览器的逻辑将预设的原始控件拼接成扩展控件，可以使得拼接而成的扩展控件也包含跨浏览器的逻辑。

例如，IE(Internet Explorer，一种浏览器)和Firefox(一种浏览器)采用了不同的javascript(一种脚本语言)解析器，在某些函数的执行上有细微差别。跨浏览器的原始控件在设置时，均以IE和Firefox通用的函数进行定义。当相同的原始控件分别在IE和Firfox上加载时，就能显示相同的效果。

步骤S106，根据控件配置信息加载web页面的控件。

与web页面访问请求对应的web页面可以为预先设置，也可以根据请求参数动态生成。在根据web页面访问请求找到与其对应的web页面后将该web页面进行展示，然后根据控件配置信息中的控件标识获取与该web页面对应的控件(控件配置信息中，针对不同的web页面配置的控件不同)，然后将控件在该web页面上加载。进一步的，可通过从左至右及从上到下的加载顺序加载控件。

在一个实施例中，根据web页面访问请求提取用户标识之后，还可以先在缓存中查找与用户标识对应的控件和web页面，若找到，则展示web页面并在web页面上加载控件，否则，进入根据用户标识获取与用户标识对应的预设的控件配置信息的步骤。

在向用户展示web页面并在web页面上加载控件后，可以将加载了控件的web页面缓存，既可以缓存在浏览器也可以缓存在session中。使用缓存可以避免对于相同的web页面访问请求进行反复的查找控件配置信息的工作，从而提高了展示效率。

如图2所示，在一个实施例中，一种web页面展示系统，包括请求获取模块102、控件配置获取模块104以及界面展示模块106，其中：

请求获取模块102用于获取web页面访问请求和用户标识。

在一个实施例中，web应用定义的web页面访问请求为URL(UniformResource Locator，统一资源定位符)请求。用户可以通过在浏览器的地址栏输入URL来向web应用请求对应的web页面。

web页面访问请求中可以附加参数，该参数可以为用于区分不同用户或不同用户类型的用户标识，例如标识号码、用户帐号或姓名等。

在一个实施例中，web应用还会为每个访问用户建立session(会话缓存)，并在session中缓存该用户的用户标识。当获取到web页面访问请求后，先根据web页面访问请求获取该请求对应的session，然后再从session中提取出用户标识。

控件配置获取模块104用于根据用户标识获取与用户标识对应的控件配置信息。

如图3所示，web页面展示系统还包括控件配置模块108，可用于获取用户标识和控件配置指令，根据控件配置指令在预设的控件库中选取控件，根据选取的控件生成与用户标识对应的控件配置信息。

一个实施例中，控件配置模块108可用于根据用户输入的控件配置指令，并根据控件配置指令在预设的控件库中获取用户选取的控件的控件标识，然后根据选取控件的控件标识生成与用户标识对应的控件配置信息。

在另一个实施例中，控件配置信息可由管理员为多个用户类别分别设置控件配置信息。管理员在预设的控件库中为每个用户类别分别选取控件，然后根据选取控件的控件标识生成与用户类别对应的控件配置信息。每个用户类别包括至少一个用户，该用户的用户标识对应其用户类别的控制配置信息。其中，控件库为预先设置，可以是数据库或文件系统，其中存储有多种控件。控件标识用于区分不同的控件，包括控件的标识号编码、名称或关键字等。

进一步的，控件配置模块108可以用于先向用户展示可视化配置界面，然后记录用户在可视化配置界面上，通过拖曳的方式的选取的控件的控件标识和摆放位置，并获取用户输入的用户标识(管理员可以通过输入普通用户的用户标识来为普通用户配置控件配置信息)。具体的，可根据用户选取的控件和摆放位置生成与输入的用户标识对应的控件配置信息，该控件配置信息包括控件标识和控件的摆放位置(例如控件位于界面中的坐标位置等)。为管理员用户提供可视化的配置界面可以方便对展示给不同用户的web页面进行定制。

在一个实施例中，如图3所示，web页面展示系统还包括控件编辑模块110，可用于获取控件编辑指令，并根据控件编辑指令将原始控件拼接成扩展控件，然后将扩展控件加入到控件库中。

可以预先设置多个原始控件，如文件上传控件、列表控件、树控件。控件编辑模块110用于向用户展示可视化的编辑界面，并在可视化编辑界面上展示原始控件。控件编辑模块110还用于通过获取用户对可视化编辑界面上的原始控件的拖曳操作将多个原始控件拼接成扩展控件，编辑完成后，再为其分配唯一的控件标识，然后将扩展控件存储到控件库中。

进一步的，控件编辑模块110还可用于根据控件编辑指令对原始控件和扩展控件进行编辑。编辑的内容可包括控件的样式、控件事件、控件判断、界面结构(例如，默认摆放位置)、数据结构的预制扩展方法(例如，控件事件在数据库中对应的字段)。

例如，可预设素材库和样式库，并通过可视化的控件编辑界面获取用户选取的素材和样式修改控件的外观颜色和形状大小，或者根据用户添加的控件事件为控件添加事件处理逻辑。可将编辑好的控件作为新生成的扩展控件存储。

根据控件编辑指令对控件的样式、控件事件等等信息进行修改编辑，可以方便用户根据需要定制需要的控件。通过可视化界面展示控件编辑界面，可以方便用户查看、删除和测试编辑结果。

进一步的，请求获取模块102还可用于根据web页面访问请求获取用户的浏览器类型。界面展示模块106还可用于根据控件配置信息和浏览器类型获取与web页面对应的控件并加载到web页面中。

在预设控件和编辑控件时，控件编辑模块可用于110可根据浏览器类型生成具有多个版本和相同标识的控件，并根据浏览器类型区分存储在控件库中。界面展示模块106在根据控件配置信息获取与web页面对应的控件时，可先根据控件配置信息中的控件标识在控件库中选取与控件标识匹配的控件，然后再在选取的结果中查找与获取到的浏览器类型对应的控件，然后将该控件加载到web页面中。

将控件对应浏览器类型进行多版本的存储，可以避免在控件中添加浏览器类型判断的逻辑，使得在适配浏览器类型时，可预先针对浏览器类型选取合适版本的控件，避免了在控件中通过分割代码判断浏览器类型而导致的异常，从而提高了扩展性和稳定性。

跨浏览器的原始控件即为包含了跨浏览器逻辑的原始控件。不同的浏览器中的脚本标准和web页面标准不同，而跨浏览器的原始控件中的逻辑(通过识别浏览器的类型而调用适配多种浏览器的函数的逻辑)针对不同的浏览器采用了不同的实现方式来达到相同的效果。按照跨浏览器的逻辑将预设的原始控件拼接成扩展控件，可以使得拼接而成的扩展控件也包含跨浏览器的逻辑。

例如，IE(Internet Explorer，一种浏览器)和Firefox(一种浏览器)采用了不同的javascript(一种脚本语言)解析器，在某些函数的执行上有细微差别。跨浏览器的原始控件在设置时，均以IE和Firefox通用的函数进行定义。当相同的原始控件分别在IE和Firefox上加载时，就能显示相同的效果。

界面展示模块106据控件配置信息加载web页面的控件。

与web页面访问请求对应的web页面可以为预先设置，也可以根据请求参数动态生成。在根据web页面访问请求找到与其对应的web页面后将该web页面进行展示，然后根据控件配置信息中的控件标识获取与该web页面对应的控件(控件配置信息中，针对不同的web页面配置的控件不同)，然后将控件在该web页面上加载。进一步的，可通过从左至右及从上到下的加载顺序加载控件。

在一个实施例中，如图3所示，web页面展示系统还包括缓存模块112，可用于将所述控件和web页面与所述用户标识对应缓存。本实施例中，界面展示模块106还用于在缓存中查找与用户标识对应的控件和web页面，若找到，则展示web页面并在web页面上加载控件，否则，根据用户标识获取与用户标识对应的预设的控件配置信息。

在向用户展示web页面并在web页面上加载控件后，可以将加载了控件的web页面缓存，既可以缓存在浏览器也可以缓存在session中。使用缓存可以避免对于相同的web页面访问请求进行反复的查找控件配置信息的工作，从而提高了展示效率。

上述web页面展示方法和系统，预先为用户的的web页面访问请求设置对应的控件配置信息。在展示时，根据用户的类型获取与该用户对应的控件配置信息，然后将控件和web页面组合，即可向该用户展示与该用户对应的界面。而对于不同类型的用户只需预设不同类型的控件配置信息，而不用修改所有的web页面。从而使得web页面的展示适配性更高，扩展性更强。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种web页面展示方法，所述方法包括以下步骤：

获取用户的web页面访问请求和用户标识；

根据所述用户标识获取与所述用户标识对应的控件配置信息；

根据所述控件配置信息加载所述web页面的控件。

2.根据权利要求1所述的web页面展示方法，其特征在于，在所述获取用户的web页面访问请求的步骤之前，还包括：

获取用户标识和控件配置指令；

根据所述控件配置指令在预设的控件库中选取控件；

根据所述选取的控件生成与所述用户标识对应的控件配置信息。

3.根据权利要求2所述的web页面展示方法，其特征在于，所述预设的控件库中的控件包括原始控件和扩展控件；

在所述获取控件配置指令的步骤之前，还包括：

获取控件编辑指令；

根据所述控件编辑指令将所述原始控件拼接成扩展控件；

将所述扩展控件加入所述控件库中。

4.根据权利要求3所述的web页面展示方法，其特征在于，所述获取用户的web页面访问请求的步骤之后，还包括：

根据所述web页面访问请求获取用户的浏览器类型；

所述根据所述控件配置信息加载所述web页面的控件的步骤具体为：

根据所述控件配置信息和所述浏览器类型获取与所述web页面对应的控件并加载到所述web页面中。

5.根据权利要求1所述的web页面展示方法，其特征在于，在所述获取用户的web页面访问请求和用户标识的步骤之后，还包括：

在缓存中查找与所述用户标识对应的控件和网页，若找到，则展示所述web页面并在所述web页面上加载所述控件，否则，进入所述根据所述用户标识获取与所述用户标识对应的预设的控件配置信息的步骤。

6.一种web页面展示系统，其特征在于，包括以下模块：

请求获取模块，用于获取用户的web页面访问请求和用户标识；

控件配置获取模块，用于根据所述用户标识获取与所述用户标识对应的控件配置信息。

界面展示模块，用于根据所述控件配置信息加载所述web页面的控件。

7.根据权利要求6所述的web页面展示系统，其特征在于，还包括控件配置模块，用于获取用户标识和控件配置指令，根据所述控件配置指令在预设的控件库中选取控件，根据所述选取的控件生成与所述用户标识对应的控件配置信息。

8.根据权利要求7所述的web页面展示系统，其特征在于，所述预设的控件库中的控件包括原始控件和扩展控件；所述系统还包括：

控件编辑模块，用于获取控件编辑指令，根据所述控件编辑指令将所述原始控件拼接成扩展控件，将所述扩展控件加入所述控件库中。

9.根据权利要求8所述的web页面展示系统，其特征在于，所述请求获取模块还用于根据所述web页面访问请求获取用户的浏览器类型；所述界面展示模块还用于根据所述控件编辑指令和所述浏览器类型获取与所述web页面对应的控件并加载到所述web页面中。

10.根据权利要求6所述的web页面展示系统，其特征在于，还包括缓存模块，用于将所述控件和web页面与所述用户标识对应缓存；

所述界面展示模块还用于在缓存中查找与所述用户标识对应的控件和web页面，若找到，则展示所述web页面并在所述web页面上加载所述控件，否则，用于根据所述用户标识获取与所述用户标识对应的预设的控件配置信息。

Images