CN110162720A - 网页页面加载方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请揭示了一种网页页面加载方法、装置、计算机设备及存储介质，其中，网页页面加载方法，包括：根据预存的菜单数据生成含有菜单列表的应用界面，并对菜单列表中的各个菜单项进行路由的加载；接收用户针对目标菜单项的菜单内容访问请求，并判断目标菜单项是否已完成路由的加载；若目标菜单项已完成路由的加载，则响应菜单内容访问请求，加载出对应目标菜单项的菜单内容。该网页页面加载方法可动态配置菜单，当需要增删改菜单时，无需修改主框架的js文件，提高了灵活性。

Description

网页页面加载方法、装置、计算机设备及存储介质

技术领域

本申请涉及到计算机技术领域，特别是涉及到一种网页页面加载方法、装置、计算机设备及存储介质。

背景技术

AngularJS是一款基于JavaScript的前端MVC框架，主要用于动态应用程序的开发工作，能有效的简化开发过程的复杂度，提高测试和开发效率，通过AngularJS可以实现多视图的单页面应用，而所谓单页面应用是指一种基于Web的应用或者网站，这种单页面在与用户交互的时候，当用户点击某个物件或者按键的时候不会跳转到其他的页面。

其中，在单页面应用的开发中，路由是前端构建单页面应用必不可少的组成部分，通过AngularJS路由，用户可通过不同的URL(Uniform Resource Locator，统一资源定位符)访问不同的内容，实现单页面跳转。

然而AngularJS的路由一般都是写在主框架的js文件中的(即路由是写在代码中的)，无法动态进行配置，而菜单与路由又是一一对应的关系(即不同的菜单对应不同的路由)，当需要增删改菜单时，通常需要频繁地修改主框架的js文件，因此灵活性较差。

发明内容

本申请的主要目的为提供一种网页页面加载方法、装置、计算机设备及存储介质，该网页页面加载方法可动态配置菜单，当需要增删改菜单时，无需修改主框架的js文件，提高了灵活性。

本申请提出一种网页页面加载方法，包括：

根据预存的菜单数据生成含有菜单列表的应用界面，并对菜单列表中的各个菜单项进行路由的加载；

接收用户针对目标菜单项的菜单内容访问请求，并判断目标菜单项是否已完成路由的加载，其中，菜单项包括目标菜单项；

若目标菜单项已完成路由的加载，则响应菜单内容访问请求，加载出对应目标菜单项的菜单内容。

进一步地，根据预存的菜单数据生成含有菜单列表的应用界面的步骤，包括：

从目标数据库中获取预存的菜单数据并进行框架页面的加载，其中，菜单数据包括菜单名称和菜单图标；

根据菜单名称和菜单图标，对框架页面进行渲染，获得应用界面。

进一步地，菜单数据还包括各个菜单项对应的路由地址、模板地址和菜单控制器，对菜单列表中的各个菜单项进行路由的加载的步骤，包括：

将路由地址、模板地址和菜单控制器进行关联，以建立路由地址、模板地址和菜单控制器之间的映射关系；

将关联后的路由地址、模板地址和菜单控制器与对应的菜单项进行绑定。

进一步地，判断目标菜单项是否已完成路由的加载的步骤，包括：

判断是否接收到路由加载完成的广播通知；

若接收到路由加载完成的广播通知，则判定目标菜单项已完成路由的加载。

进一步地，当各个菜单项均已完成路由的加载时，将预设的全局变量设置为真，判断目标菜单项是否已完成路由的加载的步骤，包括：

判断全局变量是否为真；

若全局变量为真，则判定目标菜单项已完成路由的加载。

进一步地，菜单内容访问请求包括路由地址，响应菜单内容访问请求，加载出对应目标菜单项的菜单内容的步骤，包括：

根据路由地址，确定出与路由地址相对应的菜单控制器和模板地址；

根据模板地址从目标数据库中查询出与模板地址相对应的菜单内容；

将菜单内容渲染至应用界面的指定显示区域内，加载出对应目标菜单项的菜单内容。

进一步地，前述的网页页面加载方法，还包括：

间隔预设时间获取菜单内容访问请求的历史访问记录；

根据历史访问记录，挑选出指定路由地址，其中，指定路由地址为历史访问记录中出现次数最多的路由地址；

将指定路由地址设置为默认路由地址。

本申请还提出一种网页页面加载装置，包括：

数据处理模块，用于根据预存的菜单数据生成含有菜单列表的应用界面，并对菜单列表中的各个菜单项进行路由的加载；

判断模块，用于接收用户针对目标菜单项的菜单内容访问请求，并判断目标菜单项是否已完成路由的加载，其中，菜单项包括目标菜单项；

加载模块，用于当目标菜单项已完成路由的加载时，响应菜单内容访问请求，加载出对应目标菜单项的菜单内容。

本申请还提出一种计算机设备，包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现前述的网页页面加载方法的步骤。

本申请还提出一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现前述的网页页面加载方法的步骤。

本申请的有益效果是：本申请实施例提供的网页页面加载方法通过将菜单数据预存于数据库中，实现了逻辑与数据的分离，当进行页面加载时，通过从数据库中异步获取菜单数据，并根据获取到的菜单数据生成含有菜单列表的应用界面，同时根据菜单数据对菜单列表中的各个菜单项进行路由的加载，这样，当目标菜单项完成路由的加载时，即可响应用户针对目标菜单项的菜单内容访问请求，加载出对应的菜单内容，当需要增删改菜单时，只需对后台数据库中的菜单数据进行维护即可，而无需修改主框架的js文件，使得开发人员在前端开发过程中，可更专注于每个菜单功能自身的代码，从而实现了菜单的动态配置，提高了灵活性。

附图说明

图1是本申请一实施中网页页面加载方法的流程示意图；

图2是本申请一实施中网页页面加载装置的结构示意图；

图3是本申请一实施中数据处理模块的结构示意图；

图4是本申请一实施中判断模块的结构示意图；

图5是本申请另一实施中判断模块的结构示意图；

图6是本申请一实施中加载模块的结构示意图；

图7是本申请另一实施中网页页面加载装置的结构示意图；

图8是本申请一实施中AngularJS的框架页面示意图；

图9是本申请一实施中计算机设备的结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

参照图1，本申请实施例提出一种网页页面加载方法，可适用于在单页面应用中进行网页页面的加载的情况，该方法可以由网页页面加载装置来执行，该网页页面加载装置可由硬件和/或软件组成，且一般可集成在所有包含Web前端系统开发功能的智能终端设备中，该方法包括：

S11，根据预存的菜单数据生成含有菜单列表的应用界面，并对菜单列表中的各个菜单项进行路由的加载；

S12，接收用户针对目标菜单项的菜单内容访问请求，并判断目标菜单项是否已完成路由的加载，其中，菜单项包括目标菜单项；

若是，则执行S13，响应菜单内容访问请求，加载出对应目标菜单项的菜单内容。

在上述步骤S11中，预存的菜单数据为存储在数据库中与菜单项的信息相对应的数据，例如菜单项为“人员管理”，则预存的菜单数据为存储在数据库中与“人员管理”相关的信息所对应的数据，其主要作用在于向用户展示应用界面的布局及页面内容(即应用界面中所含有的菜单项以及各个菜单项所对应的菜单内容)，具体地，当触发开启页面加载时(如通过登录页面进行触发)，网页页面加载装置将从数据库中异步获取菜单数据并进行菜单数据的加载，以生成含有菜单列表的应用界面以及对菜单列表中的各个菜单项进行路由的加载，其中，在菜单数据加载的过程中，根据菜单数据对前端的显示界面进行渲染可生成含有菜单列表的应用界面，而根据菜单数据对菜单项进行路由的加载，其目的在于为菜单列表中的各个菜单项配置对应的路由，当某个菜单项配置好对应的路由后，后续才能通过路由的跳转加载出与该菜单项相对应的菜单内容，例如，菜单列表中含有“设备管理”和“人员管理”这两个菜单项，则需要为这两个菜单项配置对应的路由，路由配置好后，在前端的应用界面上才能加载出对应“设备管理”的菜单内容和对应“人员管理”的菜单内容。

在上述步骤S12中，具体地，用户可根据自身需求通过点击目标菜单项、输入目标菜单项对应的菜单地址(如在浏览器的网址输入栏输入目标菜单项对应的菜单地址)等方式来访问目标菜单项对应的菜单内容，即菜单内容访问请求可通过点击目标菜单项、输入目标菜单项对应的链接地址等方式发出，由于访问目标菜单项对应的菜单内容需要通过路由的跳转来完成，因此当网页页面加载装置接收到该菜单内容访问请求时，需要判断该菜单项对应的路由是否已加载完成，具体地，由于在菜单项进行路由的加载过程中，不同的阶段会触发不同的事件，因此可通过为这些事件设置监听器，监听路由加载完成事件，当通过监听器监听到路由加载完成事件时，则网页页面加载装置可据此判断出目标菜单项已完成路由的加载。

在上述步骤S13中，具体地，当目标菜单项完成路由的加载后，则网页页面加载装置可即刻响应用户的菜单内容访问请求，针对用户所选定的菜单项(即目标菜单项)，跳转至对应目标菜单项的路由上，进而通过该路由从数据库中获取对应目标菜单项的菜单内容进行加载，例如，用户需要访问菜单项“人员管理”对应的菜单内容(即此时的目标菜单项为“人员管理”)，则当通过监听器监听到路由加载完成事件时，网页页面加载装置可据此跳转到与菜单项“人员管理”对应的路由上，通过该路由从数据库中获取对应的菜单内容，然后将该菜单内容加载到应用界面上进行显示，从而加载出对应菜单项“人员管理”的网页页面。

在本实施例中，该网页页面加载方法通过将菜单数据预存于数据库中，实现了逻辑与数据的分离，当进行页面加载时，通过从数据库中异步获取菜单数据，并根据获取到的菜单数据生成含有菜单列表的应用界面，同时根据菜单数据对菜单列表中的各个菜单项进行路由的加载，这样，当目标菜单项完成路由的加载时，即可响应用户针对目标菜单项的菜单内容访问请求，加载出对应的菜单内容，当需要增删改菜单时，只需对后台数据库中的菜单数据进行维护即可，而无需修改主框架的js文件，使得开发人员在前端开发过程中，可更专注于每个菜单功能自身的代码，从而实现了菜单的动态配置，提高了灵活性。

在一个优选的实施例中，根据预存的菜单数据生成含有菜单列表的应用界面的步骤，包括：

S11A，从目标数据库中获取预存的菜单数据并进行框架页面的加载，其中，菜单数据包括菜单名称和菜单图标；

S11B，根据菜单名称和菜单图标，对框架页面进行渲染，获得应用界面。

在上述步骤S11A中，菜单数据可能存储在后台服务器中，也可能缓存在前端内存(如浏览器内存)中，一般地，当首次进行页面的加载时，网页页面加载装置会调用预设的链接地址(即URL)，通过该链接地址从后台服务器中查询出对应的菜单数据，然后保存至前端内存中，这样，当后续再次进行页面的加载时，网页页面加载装置会先检查前端内存中是否已存在菜单数据，如果前端内存中已存在菜单数据，则无需再调用预设的链接地址来获取后台服务器中的菜单数据，这样既可减轻服务器的运行负担，又可提高数据的获取效率，进而提高网页页面加载的效率；具体地，当触发开启页面加载时(如通过登录页面进行触发)，网页页面加载装置将从目标数据库(前端内存或后台服务器)中异步加载菜单数据，同时进行框架页面的加载，以便进行后续操作。

在上述步骤S11B中，菜单数据包括多个菜单项以及每个菜单项对应的名称和图标，具体地，可通过AngularJS中的angular.forEach方法对菜单数据进行遍历，获得菜单数据中每个菜单项对应的名称和图标，然后通过对菜单项进行赋值显示操作，将菜单名称赋值给对应的菜单图标，从而可获得菜单列表，另外，由于加载菜单数据和加载框架页面是同时进行的，而AngularJS的框架页面是静态页面，因此会提前加载出来，进而当获得菜单列表时，通过将菜单列表渲染至框架页面的指定区域上即可获得展示于用户的含有菜单列表的应用界面，其中，如图8所示，一般地，AngularJS的框架页面包括三部分区域：头部区域100、菜单栏展示区域200和菜单内容展示区域300，因此在生成的应用界面中，用户可在菜单展示区域200中查看到菜单列表中的各个菜单项。

在本实施例中，由于AngularJS的框架页面是静态页面，因此可提前先加载出来，后续再加载菜单项和对应的菜单内容，与传统的框架页面和菜单同步进行加载的常规技术手段相比，可节省页面加载的时间。

在一个优选的实施例中，菜单数据还包括各个菜单项对应的路由地址、模板地址和菜单控制器，对菜单列表中的各个菜单项进行路由的加载的步骤，包括：

S11a，将路由地址、模板地址和菜单控制器进行关联，以建立路由地址、模板地址和菜单控制器之间的映射关系；

将关联后的路由地址、模板地址和菜单控制器与对应的菜单项进行绑定。

在本实施例中，菜单数据还包括每个菜单项对应的路由地址、模板地址和菜单控制器，具体地，可通过AngularJS中的angular.forEach方法对菜单数据进行遍历，获得菜单数据中每个菜单项对应的路由地址、模板地址和菜单控制器，然后通过AngularJS内置的$routeProvider(即路由提供器，一个用于配置路由的内置服务)将路由地址、模板地址和菜单控制器进行关联，建立起三者之间一一对应的映射关系，进而将关联后的路由地址、模板地址和菜单控制器与对应的菜单项进行绑定，从而实现对各个菜单项的路由配置，其中，路由地址可通过哈希值的形式呈现；具体地，在本申请实施例中，可通过以下代码对菜单数据进行遍历，获得每个菜单项对应的菜单名称、菜单图标、路由地址、模板地址和菜单控制器：

在一个优选的实施例中，可通过以下方式判断目标菜单项是否已完成路由的加载：

S12A，判断是否接收到路由加载完成的广播通知；

若接收到路由加载完成的广播通知，则执行S12B，判定目标菜单项已完成路由的加载。

在本实施例中，具体地，由于在菜单项进行路由的加载过程中，不同的阶段会触发不同的事件，而这些事件都是自动从AngularJS的$rootScope(即全局作用域)中广播下去的，因此最好的做法是在全局作用域中设置监听器，监听路由加载完成事件，然而在AngularJS的全局作用域中设置监听器具有现实的技术困难，因此可在菜单内容的路由作用区域(相当于应用界面的菜单内容展示区域)之外设置一个主控制器(即设置一个Controller，该Controller的名称为“MainController”)，这样，既可通过主控制器实现对路由加载完成事件的监听，又可通过主控制器负责路由的跳转，而且还可通过主控制器负责框架页面的加载；

具体地，可事先将用于查询菜单数据的链接地址(即上述URL)设进路由提供器中，当首次进行页面的加载时，可通过路由提供器调用该链接地址，进而路由提供器根据该链接地址从后台服务器中查询出对应的菜单数据，然后保存至前端内存中，由于加载菜单数据和加载框架页面是同时进行的，因此路由提供器查询菜单数据和主控制器加载框架页面也是同时进行的，当路由提供器查询出菜单数据后，路由提供器会同时对各个菜单项进行路由的加载(即为各个菜单项配置路由)，当所有菜单项均已完成路由的加载后，路由器提供器会向主控制器发送一个“路由加载完成”的广播通知，当主控制器监听到该广播通知时，则可据此判定目标菜单项已完成路由的加载，此时可进入S13进行相关操作。

在一个优选的实施例中，当各个菜单项均已已完成路由的加载时，将预设的全局变量设置为真，此时可通过以下方式判断目标菜单项是否已完成路由的加载：

S12a，判断全局变量是否为真；

若全局变量为真，则执行S12b，判定目标菜单项已完成路由的加载。

在本实施例中，由于在页面加载的过程中，可能会出现以下情况：在主控制器开启监听功能去监听路由加载完成事件之前，路由提供器已经完成路由的加载并发送“路由加载完成”的广播通知，这就会导致此时即便路由已经加载完成了，但由于主控器还没开启监听功能，进而不能及时接收到“路由加载完成”的广播通知，从而后续主控制器也不会进行路由的跳转，导致无法及时加载出对应的菜单内容，为防止这种情况的发生，具体地，可事先在全局作用域中设置一个变量，将其定义为全局变量，当所有菜单项均已完成路由的加载时，可通过路由提供器将该全局变量设置为真(即“true”)，进而在主控制器开启监听功能去监听路由加载完成事件之前，可通过主控制器先判断该全局变量是否为真(true)，若全局变量为真，则说明所有菜单项均已完成路由的加载，此时主控制器可据此直接进行路由的跳转，而无需开启监听来接收路由提供器发送的“路由加载完成”的广播通知；若全局变量并非为真，则说明并未完成对所有菜单项的路由加载，此时主控制器可据此开启监听功能，监听路由加载完成事件；因此在主控器还没开启监听功能之前，可先通过主控制器判断全局变量是否为真，这样可避免前述情况的发生，从而有利于提高页面加载的效率。

在一个优选的实施例中，菜单内容访问请求包括路由地址，响应菜单内容访问请求，加载出对应目标菜单项的菜单内容的步骤，包括：

S131，根据路由地址，确定出与路由地址相对应的菜单控制器和模板地址；

S132，根据模板地址从目标数据库中查询出与模板地址相对应的菜单内容；

S133，将菜单内容渲染至应用界面的指定显示区域内，加载出对应目标菜单项的菜单内容。

在上述步骤S131中，当通过路由提供器完成对各个菜单项的路由的加载时，可通过主控制器进行路由的跳转，具体地，由于每个菜单项都有其对应的路由地址、模板地址和菜单控制器，而且路由地址、模板地址、菜单控制器三者之间又是一一对应的映射关系，因此主控制器可根据菜单内容访问请求中的路由地址确定出相对应的菜单控制器和模板地址，此时可进入步骤S132。

在上述步骤S132中，当确定出对应的菜单控制器和模板地址时，可交由菜单控制器执行加载菜单内容的过程，具体地，菜单控制器调用模板地址从目标数据库(后台服务器或前端内存)中查询出与模板地址相对应的菜单内容，然后将获取到的菜单内容填充到预先与菜单控制器相绑定的视图页面上，结合成用户可真正看到的html文件，此时可进入步骤S133。

在上述步骤S133中，具体地，获得html文件后，通过将其渲染至应用界面的指定显示区域内即可加载出对应菜单项的菜单内容，从而实现网页页面的加载，其中，该指定显示区域为菜单内容显示区域。

在一个优选的实施例中，前述的网页页面加载方法，还包括：

S14，间隔预设时间获取菜单内容访问请求的历史访问记录；

S15，根据历史访问记录，挑选出指定路由地址，其中，指定路由地址为历史访问记录中出现次数最多的路由地址；

S16，将指定路由地址设置为默认路由地址。

在本实施例中，一般地，在单页面应用的开发中，一般会通过AngularJS的$urlRouterProvider(在AngularJS中，$urlRouterProvider为一个可用于设置默认路由的内置服务)设置一个默认路由地址，当用户登录页面后，系统会根据默认路由地址自动加载出默认页面(一般默认页面为首页页面)，然后用户再通过点击菜单项等方式访问对应的菜单内容，但由于用户对不同菜单项的使用需求是不一样的，如果默认页面不是用户所需要的页面，则用户需要通过点击菜单项等方式访问所需的菜单内容，从而不利于提高用户体验，因此需要针对此情况进行改善，具体地，由于用户在使用过程中是通过点击菜单项等方式发出菜单内容访问请求，系统再根据菜单内容访问请求的路由地址加载出对应的菜单内容的，而且用户在使用过程中会在前端(如浏览器)留下浏览痕迹，因此网页页面加载装置可通过每隔一段时间(即间隔预设时间)获取菜单内容访问请求的历史访问记录，进而根据历史访问请求中的路由地址获知用户对不同菜单项的使用需求，例如，某个路由地址在历史访问记录中出现次数最多，而由于每个菜单项都有其对应的路由地址，因此可据此推断出用户对该路由地址对应的菜单项的使用需求最大，进而通过AngularJS的$urlRouterProvider将该路由地址设置为默认路由地址，这样当后续用户再次登录页面后，系统会根据修改后的默认路由地址自动加载出对应的页面，而该页面中展示的菜单内容很大程度上是用户所需要访问的，从而有利于提高用户体验；其中，预设时间可根据实际情况由用户自行设定，也可以是系统默认设置而不可更改的，例如，预设时间可以是一天、两天、三天等，只要能满足使用要求即可，对此不作具体的限制。

参照图2，本申请实施例还提出一种网页页面加载装置，包括：

数据处理模块11，用于根据预存的菜单数据生成含有菜单列表的应用界面，并对菜单列表中的各个菜单项进行路由的加载；

判断模块12，用于接收用户针对目标菜单项的菜单内容访问请求，并判断目标菜单项是否已完成路由的加载，其中，菜单项包括所述目标菜单项；

加载模块13，用于当目标菜单项已完成路由的加载时，响应菜单内容访问请求，加载出对应目标菜单项的菜单内容。

在上述数据处理模块11中，预存的菜单数据为存储在数据库中与菜单项的信息相对应的数据，例如菜单项为“人员管理”，则预存的菜单数据为存储在数据库中与“人员管理”相关的信息所对应的数据，其主要作用在于向用户展示应用界面的布局及页面内容(即应用界面中所含有的菜单项以及各个菜单项所对应的菜单内容)，具体地，当触发开启页面加载时(如通过登录页面进行触发)，数据处理模块11将从数据库中异步获取菜单数据并进行菜单数据的加载，以生成含有菜单列表的应用界面以及对菜单列表中的各个菜单项进行路由的加载，其中，在菜单数据加载的过程中，数据处理模块11根据菜单数据对前端的显示界面进行渲染可生成含有菜单列表的应用界面，而数据处理模块11根据菜单数据对菜单项进行路由的加载，其目的在于为菜单列表中的各个菜单项配置对应的路由，当某个菜单项配置好对应的路由后，后续才能通过路由的跳转加载出与该菜单项相对应的菜单内容，例如，菜单列表中含有“设备管理”和“人员管理”这两个菜单项，则需要为这两个菜单项配置对应的路由，路由配置好后，在前端的应用界面上才能加载出对应“设备管理”的菜单内容和对应“人员管理”的菜单内容。

在上述判断模块12中，具体地，用户可根据自身需求通过点击目标菜单项、输入目标菜单项对应的菜单地址(如在浏览器的网址输入栏输入目标菜单项对应的菜单地址)等方式来访问目标菜单项对应的菜单内容，即菜单内容访问请求可通过点击目标菜单项、输入目标菜单项对应的链接地址等方式发出，由于访问目标菜单项对应的菜单内容需要通过路由的跳转来完成，因此当网页页面加载装置接收到该菜单内容访问请求时，需要通过判断模块12判断该菜单项对应的路由是否已加载完成，具体地，由于在菜单项进行路由的加载过程中，不同的阶段会触发不同的事件，因此可通过为这些事件设置监听器，监听路由加载完成事件，当判断模块12通过监听器监听到路由加载完成事件时，则判断模块12可据此判断出目标菜单项已完成路由的加载。

在上述加载模块13中，具体地，当目标菜单项完成路由的加载后，则加载模块13可即刻响应用户的菜单内容访问请求，针对用户所选定的菜单项(即目标菜单项)，跳转至对应目标菜单项的路由上，进而通过该路由从数据库中获取对应该菜单项的菜单内容进行加载，例如，用户需要访问菜单项“人员管理”对应的菜单内容(即此时的目标菜单项为“人员管理”)，则当判断模块12通过监听器监听到路由加载完成事件时，加载模块13可据此跳转到与菜单项“人员管理”对应的路由上，通过该路由从数据库中获取对应的菜单内容，然后将该菜单内容加载到应用界面上进行显示，从而加载出对应菜单项“人员管理”的网页页面。

在本实施例中，该网页页面加载装置通过将菜单数据预存于数据库中，实现了逻辑与数据的分离，当进行页面加载时，通过从数据库中异步获取菜单数据，并根据获取到的菜单数据生成含有菜单列表的应用界面，同时根据菜单数据对菜单列表中的各个菜单项进行路由的加载，这样，当目标菜单项完成路由的加载时，即可响应用户针对目标菜单项的菜单内容访问请求，加载出对应的菜单内容，当需要增删改菜单时，只需对后台数据库中的菜单数据进行维护即可，而无需修改主框架的js文件，使得开发人员在前端开发过程中，可更专注于每个菜单功能自身的代码，从而实现了菜单的动态配置，提高了灵活性。

参照图3，在一个优选的实施例中，数据处理模块11，包括：

获取单元11A，用于从目标数据库中获取预存的菜单数据并进行框架页面的加载，其中，菜单数据包括菜单名称和菜单图标；

渲染单元11B，用于根据菜单名称和菜单图标，对框架页面进行渲染，获得应用界面。

在上述获取单元11A中，菜单数据可能存储在后台服务器中，也可能缓存在前端内存(如浏览器内存)中，一般地，当首次进行页面的加载时，获取单元11A会调用预设的链接地址(即URL)，通过该链接地址从后台服务器中查询出对应的菜单数据，然后保存至前端内存中，这样，当后续再次进行页面的加载时，获取单元11A会先检查前端内存中是否已存在菜单数据，如果前端内存中已存在菜单数据，则无需再调用预设的链接地址来获取后台服务器中的菜单数据，这样既可减轻服务器的运行负担，又可提高数据的获取效率，进而提高网页页面加载的效率；具体地，当触发开启页面加载时(如通过登录页面进行触发)，获取单元11A将从目标数据库(前端内存或后台服务器)中异步加载菜单数据，同时进行框架页面的加载，以便进行后续操作。

在上述渲染单元11B中，菜单数据包括多个菜单项以及每个菜单项对应的名称和图标，具体地，获取单元11A可通过AngularJS中的angular.forEach方法对菜单数据进行遍历，获得菜单数据中每个菜单项对应的名称和图标，然后通过对菜单项进行赋值显示操作，将菜单名称赋值给对应的菜单图标，从而可获得菜单列表，另外，由于加载菜单数据和加载框架页面是同时进行的，而AngularJS的框架页面是静态页面，因此会提前加载出来，进而当获得菜单列表时，可通过渲染单元11B将菜单列表渲染至框架页面的指定区域上即可获得展示于用户的含有菜单列表的应用界面，其中，如图8所示，一般地，AngularJS的框架页面包括三部分区域：头部区域100、菜单栏展示区域200和菜单内容展示区域300，因此在生成的应用界面中，用户可在菜单展示区域200中查看到菜单列表中的各个菜单项。

在本实施例中，由于AngularJS的框架页面是静态页面，因此可提前先加载出来，后续再加载菜单项和对应的菜单内容，与传统的框架页面和菜单同步进行加载的常规技术手段相比，可节省页面加载的时间。

参照图3，在一个优选的实施例中，菜单数据还包括各个菜单项对应的路由地址、模板地址和菜单控制器，数据处理模块11还包括：

关联单元11a，用于将路由地址、模板地址和菜单控制器进行关联，以建立路由地址、模板地址和菜单控制器之间的映射关系；

绑定单元11b，用于将关联后的所述路由地址、模板地址和菜单控制器与对应的菜单项进行绑定。

在本实施例中，菜单数据还包括每个菜单项对应的路由地址、模板地址和菜单控制器，具体地，获取单元11A可通过AngularJS中的angular.forEach方法对菜单数据进行遍历，获得菜单数据中每个菜单项对应的路由地址、模板地址和菜单控制器，然后关联单元11a通过AngularJS内置的$routeProvider(即路由提供器，一个用于配置路由的内置服务)将路由地址、模板地址和菜单控制器进行关联，建立起三者之间一一对应的映射关系，进而通过绑定单元11b将关联后的路由地址、模板地址和菜单控制器与对应的菜单项进行绑定，从而实现对各个菜单项的路由配置，其中，路由地址可通过哈希值的形式呈现；具体地，在本申请实施例中，获取单元11A可通过以下代码对菜单数据进行遍历，获得每个菜单项对应的菜单名称、菜单图标、路由地址、模板地址和菜单控制器：

参照图4，在一个优选的实施例中，判断模块12，包括：

第一判断单元12A，用于判断是否接收到路由加载完成的广播通知；

第一判定单元12B，用于当接收到路由加载完成的广播通知时，判定目标菜单项已完成路由的加载。

在本实施例中，具体地，由于在菜单项进行路由的加载过程中，不同的阶段会触发不同的事件，而这些事件都是自动从AngularJS的$rootScope(即全局作用域)中广播下去的，因此最好的做法是在全局作用域中设置监听器，监听路由加载完成事件，然而在AngularJS的全局作用域中设置监听器具有现实的技术困难，因此可在菜单内容的路由作用区域(相当于应用界面的菜单内容展示区域)之外设置一个主控制器(即设置一个Controller，该Controller的名称为“MainController”)，这样，既可通过主控制器实现对路由加载完成事件的监听，又可通过主控制器负责路由的跳转，而且还可通过主控制器负责框架页面的加载；

具体地，可事先将用于查询菜单数据的链接地址(即上述URL)设进路由提供器中，当首次进行页面的加载时，获取单元11A可通过路由提供器调用该链接地址，进而路由提供器根据该链接地址从后台服务器中查询出对应的菜单数据，然后保存至前端内存中，由于加载菜单数据和加载框架页面是同时进行的，因此路由提供器查询菜单数据和主控制器加载框架页面也是同时进行的，当获取单元11A通过路由提供器查询出菜单数据后，路由加载单元11a可通过路由提供器同时对各个菜单项进行路由的加载(即为各个菜单项配置路由)，当所有菜单项均已完成路由的加载后，路由器提供器会向主控制器发送一个“路由加载完成”的广播通知，当主控制器监听到该广播通知时，则第一判断单元12A可据此判断出主控制器接收到路由加载完成的广播通知，进而第一判定单元12B可据此判定目标菜单项已完成路由的加载，此时可交由加载模块13进行相关操作。

参照图5，在另一个优选的实施例中，当菜单项已完成路由的加载时，将预设的全局变量设置为真，此时判断模块12包括：

第二判断单元12a，用于判断全局变量是否为真；

第二判定单元12b，用于当全局变量为真时，判定目标菜单项已完成路由的加载。

在本实施例中，由于在页面加载的过程中，可能会出现以下情况：在主控制器开启监听功能去监听路由加载完成事件之前，路由提供器已经完成路由的加载并发送“路由加载完成”的广播通知，这就会导致此时即便路由已经加载完成了，但由于主控器还没开启监听功能，进而不能及时接收到“路由加载完成”的广播通知，从而后续主控制器也不会进行路由的跳转，导致无法及时加载出对应的菜单内容，为防止这种情况的发生，具体地，可事先在全局作用域中设置一个变量，将其定义为全局变量，当所有菜单项均已完成路由的加载时，可通过路由提供器将该全局变量设置为真(即“true”)，进而在主控制器开启监听功能去监听路由加载完成事件之前，第二判断单元12a可通过主控制器先判断该全局变量是否为真(true)，若全局变量为真，则第二判定单元12b可据此判定目标菜单项已完成路由的加载，此时主控制器可据此直接进行路由的跳转，而无需开启监听来接收路由提供器发送的“路由加载完成”的广播通知；若全局变量并非为真，则第二判定单元12b可据此判定目标菜单项未完成路由的加载，此时主控制器可据此开启监听功能，监听路由加载完成事件；因此在主控器还没开启监听功能之前，可先通过主控制器判断全局变量是否为真，这样可避免前述情况的发生，从而有利于提高页面加载的效率。

参照图6，在一个优选的实施例中，菜单内容访问请求包括路由地址，加载模块13包括：

确定单元131，用于根据路由地址，确定出与路由地址相对应的菜单控制器和模板地址；

查询单元132，用于根据模板地址从目标数据库中查询出与模板地址相对应的菜单内容；

加载单元133，用于将菜单内容渲染至应用界面的指定显示区域内，加载出对应目标菜单项的菜单内容。

在上述确定单元131中，当通过路由提供器完成对各个菜单项的路由的加载时，可通过主控制器进行路由的跳转，具体地，由于每个菜单项都有其对应的路由地址、模板地址和菜单控制器，而且路由地址、模板地址、菜单控制器三者之间又是一一对应的映射关系，因此确定单元131可通过主控制器根据菜单内容访问请求中的路由地址确定出相对应的菜单控制器和模板地址，此时可交由查询单元132执行相关操作。

在上述查询单元132中，当确定单元131确定出对应的菜单控制器和模板地址时，可交由菜单控制器执行加载菜单内容的过程，具体地，查询单元132可通过菜单控制器调用模板地址，进而根据模板地址从目标数据库(后台服务器或前端内存)中查询出与模板地址相对应的菜单内容，然后查询单元132将获取到的菜单内容填充到预先与菜单控制器相绑定的视图页面上，结合成用户可真正看到的html文件，此时可交由加载单元133执行相关操作。

在上述加载单元133中，具体地，当查询单元132获得html文件后，可通过加载单元133将其渲染至应用界面的指定显示区域内即可加载出对应菜单项的菜单内容，从而实现网页页面的加载，其中，该指定显示区域为菜单内容显示区域。

参照图7，在一个优选的实施例中，前述的网页页面加载装置还包括：

获取模块14，用于间隔预设时间获取菜单内容访问请求的历史访问记录；

挑选模块15，用于根据历史访问记录，挑选出指定路由地址，其中，指定路由地址为历史访问记录中出现次数最多的路由地址；

设置模块16，用于将指定路由地址设置为默认路由地址。

在本实施例中，一般地，在单页面应用的开发中，一般会通过AngularJS的$urlRouterProvider设置一个默认路由地址，当用户登录页面后，系统会根据默认路由地址自动加载出默认页面(一般默认页面为首页页面)，然后用户再通过点击菜单项等方式访问对应的菜单内容，但由于用户对不同菜单项的使用需求是不一样的，如果默认页面不是用户所需要的页面，则用户需要通过点击菜单项等方式访问所需的菜单内容，从而不利于提高用户体验，因此需要针对此情况进行改善，具体地，由于用户在使用过程中是通过点击菜单项等方式发出菜单内容访问请求，系统再根据菜单内容访问请求的路由地址加载出对应的菜单内容的，而且用户在使用过程中会在前端(如浏览器)留下浏览痕迹，因此获取模块14可通过每隔一段时间(即间隔预设时间)获取菜单内容访问请求的历史访问记录，进而挑选模块15可根据历史访问请求中的路由地址获知用户对不同菜单项的使用需求，例如，某个路由地址在历史访问记录中出现次数最多，而由于每个菜单项都有其对应的路由地址，因此挑选模块15可据此推断出用户对该路由地址对应的菜单项的使用需求最大，进而设置模块16可通过AngularJS的$urlRouterProvider将该路由地址设置为默认路由地址，这样当后续用户再次登录页面后，系统会根据修改后的默认路由地址自动加载出对应的页面，而该页面中展示的菜单内容很大程度上是用户所需要访问的，从而有利于提高用户体验；其中，预设时间可根据实际情况由用户自行设定，也可以是系统默认设置而不可更改的，例如，预设时间可以是一天、两天、三天等，只要能满足使用要求即可，对此不作具体的限制。

参照图9，本申请实施例中还提供一种计算机设备，该计算机设备可以是服务器，其内部结构可以如图9所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储网页页面加载方法程序等。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种网页页面加载方法。

上述处理器执行上述网页页面加载方法，根据预存的菜单数据生成含有菜单列表的应用界面，并对菜单列表中的各个菜单项进行路由的加载；接收用户针对目标菜单项的菜单内容访问请求，并判断目标菜单项是否已完成路由的加载，其中，菜单项包括目标菜单项；若目标菜单项已完成路由的加载，则响应菜单内容访问请求，加载出对应目标菜单项的菜单内容。

在一个实施例中，上述根据预存的菜单数据生成含有菜单列表的应用界面的步骤，包括：从目标数据库中获取预存的菜单数据并进行框架页面的加载，其中，菜单数据包括菜单名称和菜单图标；根据菜单名称和菜单图标，对框架页面进行渲染，获得应用界面。

在一个实施例中，上述菜单数据还包括各个菜单项对应的路由地址、模板地址和菜单控制器，上述对菜单列表中的菜单项进行路由的加载的步骤，包括：将路由地址、模板地址和菜单控制器进行关联，以建立路由地址、模板地址和菜单控制器之间的映射关系；将关联后的路由地址、模板地址和菜单控制器与对应的菜单项进行绑定。

在一个实施例中，上述判断目标菜单项是否已完成路由的加载的步骤，包括：判断是否接收到路由加载完成的广播通知；若接收到路由加载完成的广播通知，则判定目标菜单项已完成路由的加载。

在一个实施例中，当各个菜单项均已完成路由的加载时，将预设的全局变量设置为真，上述判断目标菜单项是否已完成路由的加载的步骤，包括：判断全局变量是否为真；若全局变量为真，则判定目标菜单项已完成路由的加载。

在一个实施例中，上述菜单内容访问请求包括路由地址，上述响应菜单内容访问请求，加载出对应目标菜单项的菜单内容的步骤，包括：根据路由地址，确定出与路由地址相对应的菜单控制器和模板地址；根据模板地址从目标数据库中查询出与模板地址相对应的菜单内容；将菜单内容渲染至应用界面的指定显示区域内，加载出对应目标菜单项的菜单内容。

在一个实施例中，上述网页页面加载方法，还包括：间隔预设时间获取菜单内容访问请求的历史访问记录；根据历史访问记录，挑选出指定路由地址，其中，指定路由地址为历史访问记录中出现次数最多的路由地址；将指定路由地址设置为默认路由地址。

本领域技术人员可以理解，图9中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定。

本申请实施例的计算机设备，通过将菜单数据预存于数据库中，实现了逻辑与数据的分离，当进行页面加载时，通过从数据库中异步获取菜单数据，并根据获取到的菜单数据生成含有菜单列表的应用界面，同时根据菜单数据对菜单列表中的各个菜单项进行路由的加载，这样，当目标菜单项完成路由的加载时，即可响应用户针对目标菜单项的菜单内容访问请求，加载出对应的菜单内容，当需要增删改菜单时，只需对后台数据库中的菜单数据进行维护即可，而无需修改主框架的js文件，使得开发人员在前端开发过程中，可更专注于每个菜单功能自身的代码，从而实现了菜单的动态配置，提高了灵活性。

本申请实施例还提出一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现一种网页页面加载方法，根据预存的菜单数据生成含有菜单列表的应用界面，并对菜单列表中的各个菜单项进行路由的加载；接收用户针对目标菜单项的菜单内容访问请求，并判断目标菜单项是否已完成路由的加载；若目标菜单项已完成路由的加载，则响应菜单内容访问请求，加载出对应目标菜单项的菜单内容。

上述网页页面加载方法，通过将菜单数据预存于数据库中，实现了逻辑与数据的分离，当进行页面加载时，通过从数据库中异步获取菜单数据，并根据获取到的菜单数据生成含有菜单列表的应用界面，同时根据菜单数据对菜单列表中的各个菜单项进行路由的加载，这样，当目标菜单项完成路由的加载时，即可响应用户针对目标菜单项的菜单内容访问请求，加载出对应的菜单内容，当需要增删改菜单时，只需对后台数据库中的菜单数据进行维护即可，而无需修改主框架的js文件，使得开发人员在前端开发过程中，可更专注于每个菜单功能自身的代码，从而实现了菜单的动态配置，提高了灵活性。

在一个实施例中，上述根据预存的菜单数据生成含有菜单列表的应用界面的步骤，包括：从目标数据库中获取预存的菜单数据并进行框架页面的加载，其中，菜单数据包括菜单名称和菜单图标；根据菜单名称和菜单图标，对框架页面进行渲染，获得应用界面。

在一个实施例中，上述菜单数据还包括各个菜单项对应的路由地址、模板地址和菜单控制器，上述对菜单列表中的各个菜单项进行路由的加载的步骤，包括：将路由地址、模板地址和菜单控制器进行关联，以建立路由地址、模板地址和菜单控制器之间的映射关系；将关联后的路由地址、模板地址和菜单控制器与对应的菜单项进行绑定。

在一个实施例中，上述判断菜单项是否已完成路由的加载的步骤，包括：判断是否接收到路由加载完成的广播通知；若接收到路由加载完成的广播通知，则判定目标菜单项已完成路由的加载。

在一个实施例中，当各个菜单项均已完成路由的加载时，将预设的全局变量设置为真，上述判断菜单项是否已完成路由的加载的步骤，包括：判断全局变量是否为真；若全局变量为真，则判定目标菜单项已完成路由的加载。

在一个实施例中，上述菜单内容访问请求包括路由地址，上述响应菜单内容访问请求，加载出对应目标菜单项的菜单内容的步骤，包括：根据路由地址，确定出与路由地址相对应的菜单控制器和模板地址；根据模板地址从目标数据库中查询出与模板地址相对应的菜单内容；将菜单内容渲染至应用界面的指定显示区域内，加载出对应目标菜单项的菜单内容。

在一个实施例中，上述网页页面加载方法，还包括：间隔预设时间获取菜单内容访问请求的历史访问记录；根据历史访问记录，挑选出指定路由地址，其中，指定路由地址为历史访问记录中出现次数最多的路由地址；将指定路由地址设置为默认路由地址。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储与一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM通过多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双速据率SDRAM(SSRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其它变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其它要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种网页页面加载方法，其特征在于，包括：

根据预存的菜单数据生成含有菜单列表的应用界面，并对所述菜单列表中的各个菜单项进行路由的加载；

接收用户针对目标菜单项的菜单内容访问请求，并判断所述目标菜单项是否已完成路由的加载，其中，所述菜单项包括所述目标菜单项；

若所述目标菜单项已完成路由的加载，则响应所述菜单内容访问请求，加载出对应所述目标菜单项的菜单内容。

2.根据权利要求1所述的网页页面加载方法，其特征在于，根据预存的菜单数据生成含有菜单列表的应用界面的步骤，包括：

从目标数据库中获取预存的菜单数据并进行框架页面的加载，其中，所述菜单数据包括菜单名称和菜单图标；

根据所述菜单名称和菜单图标，对所述框架页面进行渲染，获得所述应用界面。

3.根据权利要求2所述的网页页面加载方法，其特征在于，所述菜单数据还包括各个所述菜单项对应的路由地址、模板地址和菜单控制器，所述对所述菜单列表中的各个菜单项进行路由的加载的步骤，包括：

将所述路由地址、模板地址和菜单控制器进行关联，以建立所述路由地址、模板地址和菜单控制器之间的映射关系；

将关联后的所述路由地址、模板地址和菜单控制器与对应的所述菜单项进行绑定。

4.根据权利要求3所述的网页页面加载方法，其特征在于，所述判断所述目标菜单项是否已完成路由的加载的步骤，包括：

判断是否接收到路由加载完成的广播通知；

若接收到路由加载完成的广播通知，则判定所述目标菜单项已完成路由的加载。

5.根据权利要求3所述的网页页面加载方法，其特征在于，当各个所述菜单项均已完成路由的加载时，将预设的全局变量设置为真，所述判断所述目标菜单项是否已完成路由的加载的步骤，包括：

判断所述全局变量是否为真；

若所述全局变量为真，则判定所述目标菜单项已完成路由的加载。

6.根据权利要求3所述的网页页面加载方法，其特征在于，所述菜单内容访问请求包括所述路由地址，所述响应所述菜单内容访问请求，加载出对应所述目标菜单项的菜单内容的步骤，包括：

根据所述路由地址，确定出与所述路由地址相对应的所述菜单控制器和模板地址；

根据所述模板地址从所述目标数据库中查询出与所述模板地址相对应的菜单内容；

将所述菜单内容渲染至所述应用界面的指定显示区域内，加载出对应所述目标菜单项的菜单内容。

7.根据权利要求6所述的网页页面加载方法，其特征在于，还包括：

间隔预设时间获取所述菜单内容访问请求的历史访问记录；

根据所述历史访问记录，挑选出指定路由地址，其中，所述指定路由地址为历史访问记录中出现次数最多的所述路由地址；

将所述指定路由地址设置为默认路由地址。

8.一种网页页面加载装置，其特征在于，包括：

数据处理模块，用于根据预存的菜单数据生成含有菜单列表的应用界面，并对所述菜单列表中的各个菜单项进行路由的加载；

判断模块，用于接收用户针对目标菜单项的菜单内容访问请求，并判断所述目标菜单项是否已完成路由的加载，其中，所述菜单项包括所述目标菜单项；

加载模块，用于当所述目标菜单项已完成路由的加载时，响应所述菜单内容访问请求，加载出对应所述目标菜单项的菜单内容。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的网页页面加载方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的网页页面加载方法的步骤。