[发明专利]一种基于云海IOP平台创建导航条的方法

说明书

技术领域

本发明涉及网络技术领域，具体地说是一种基于云海IOP平台创建导航条的方法。

背景技术

云海IOP(In-cloud Open Platform，简称“云海IOP”)是一款快速搭建云计算及大数据处理环境，提供简单、高效、可靠服务的平台级产品，可以帮助客户快速构建云计算和大数据处理平台，降低应用上云成本，挖掘海量数据全新价值，是浪潮多年来在公安、通信、烟草等行业信息化领域深耕云计算和大数据技术应用的实践成果。云海IOP包括云计算大数据基础架构、IOP Manager、开放服务、开发者中心&应用商店四部分内容，帮助客户快速实现业务上云、数据整合及应用创新。云海IOP提供软件定义计算、存储及网络的能力；IOP Manager对软件定义的基础资源进行管控，提供部署安装、服务编排及运维监控等功能；并对基础资源实现多租户化和服务化，对外提供基础服务、应用服务以及大数据服务；云海IOP提供了一套应用及服务生命周期管理的工具，以实现开发运维一体化。提高开发效率，支撑应用创新。

云海IOP以开源云计算和大数据技术体系为主线，通过构建大规模分布式计算和存储集群，实现计算资源的弹性利用，海量数据的高效处理以及应用的云化。云海IOP通过实践对各类开源组件做了深度集成、调优和适配开发，让各类组件高效、稳定的协同工作。

近年来随着大数据、云计算的发展，云平台也越来越多。云平台页面的跳转大都根据菜单栏进行点击跳转到第一级页面，然后再在页面上进行下钻到多级页面。当跳转的页面多了，就需要给用户标记你现在所在的位置，并且提供一种能回到上一级别页面的方式，因此就需要在页面的顶端加一个页面导航条。一般平台的导航条都是在页面固定写死，或者配置固定参数的形式来生成导航条的，但是这样会使得页面在不同的菜单下复用时，造成导航内容有误或层级资源不玩中的情况。同时每个页面的开发人员写代码的风格不同，就造成了页面导航展示内容风格也不同。

基于此，设计一种基于云海IOP平台创建导航条的方法，该发明可以根据用户的点击路径来生成导航条,使导航条的内容风格上得到了统一，也使得统一页面可以出现在不同的菜单层级下面，同时也避免了每个页面开发者去写页面导航的工作。

发明内容

本发明的技术任务是解决现有技术的不足，提供一种基于云海IOP平台创建导航条的方法。

本发明的技术方案是按以下方式实现的：

一种基于云海IOP平台创建导航条的方法，该方法基于云海IOP平台，通过定义一个统一的导航条处理函数以及一个全局的变量存储页面的name与url信息来监控并记录用户的点击路径，并通过用户的点击路径生成导航条。

所涉及该方法的具体实现过程包括：

S10：定义一个全局的数组变量 var breadcrumb = new Arrry()，用来记录用户点击的路径，同时，定义一个统一处理导航条的函数，通过监控用户的点击动作来创建导航条；

S20：点击菜单栏里菜单加载出的第一级页面不配置导航条，从第一级页面下钻的页面需要配置导航条；

S30：当页面从第一级页面下钻到第二级页面时，第二级页面的顶部需要添加元素<ol class="breadcrumb minus" data-name="page"></ol>，其中data-name中的值是此页面的name，然后需要遍历数组 breadcrumb，取出来里面的值，根据name值与url值以及此页面的name值生成导航条，放到页面的顶部元素<ol>中；

S40：在用户每次点击菜单栏菜单跳转页面时清空数组 breadcrumb，并且此时加载的页面为第一级页面，在此页面上通过超链接下钻的页面称为第二级页面，在第二级页面上通过超链接跳转的页面为第三级页面，依次类推。

执行所涉及步骤S20时，当用户点击菜单栏里的菜单加载页面的时候，需要先重置数组变量 breadcrumb为空数组对象，即breadcrumb = []，然后把此页面的name信息与url信息记录到变量 breadcrumb中，即 breadcrumb.push({

name: name,

url: url

}，其中url为此页面的url，name为此页面对应的菜单栏里菜单的text值。

执行所涉及步骤S30时，还需要在变量 breadcrumb中记录下此页面的name与url，为下钻到第三级页面时生成导航条做准备。