接口测试平台代码实现27: 项目详情页的导航功能
如果发生代码问题特别混乱导致无法自主修复的情况，请及时下载项目的打包百度网盘链接，在第25节的末尾。对比代码或者干脆直接覆盖
这里再唠叨两句：
1.作者明白大家想要立即举一反三各种花样的玩法，不过我们目前功力尚浅，容易玩出事导致修复成本太大。所以建议还是完全照搬当前教程，等全部学完之后你会发现自己的水平不仅仅是代码量的增加，所谓熟能生巧，到时候再打造自己专属的一套平台也可。
2.对于很多不理解为何要自己动手硬写硬学这么基础/底层的东西，比如js/css等，明明网上可以随便下一个开源平台/框架/手脚架。其实如果抱着这个思想是很危险的，底层技术决定上层建筑。不要被太多的傻瓜式工具弄的我们丧失了自主设计/研发的能力。换个现实的说法，下一个开源平台改都不用改很简单，那么公司为何还需要你呢？还需要测试开发呢？我们自己的价值何在呢？应届生都能做的事为啥要花高价招我们这种老兵呢？全国百万个测试人员，你比别人到底强在哪呢？ 真正的价值，等你已经拥有足够扎实的技术水平的时候才会体现出来。这是长远计划，战略目标，需要自己慢慢体会。当然本系列也会大规模使用bootstrap3来减轻负担。
言归正传，本节开始设计导航，教程都是属于半学习/半实验的性质。所以我们尽可能多的掌握一些，技多不压身。
我们之前已经成功建立 三个子页面，并且打通了从项目列表页进入后默认进入接口库的链路
接下来就是要 设计一个导航功能，让用户在 三个子页面中可以来回跳转。
关于导航我们有很多设计：
- 单纯的三个按钮组合
2.面包屑导航
3.简易菜单
4.导航栏
其实每种实现起来 无非就是超链接。都不难。不过我们这里选择了第四种，考虑到后续我们还会加入其他子模块。所以要做的就是顶部的一整个导航栏
颜色上 这种灰白就可以，不要太明显 抢了中间主要的内容。
截图中的第四种 出自，bootstrap的标准导航组。在这之前，我们需要修改一个之前章节中出现的导入顺序错误的问题。
打开welcome.html，众所周知，这个文件是我们的公共文件，这里除了菜单外，其他所有引入的js/css都会 在任何其他子页面中同样生效。但是我们之前引入的时候，有个顺序出现了错误。
就是
bootstrap.min.js必须在
jquery-1.11.0.min.js之后引入才不会报错。
我们在head标签内找到了bootstrap.min.js的引入
然后剪切走这句，粘贴到下面
这是我们之前的一个小疏忽导致的bug，现在已修复。让我们继续开发导航栏吧：
打开P_apis.html：
添加以下div：
删掉了我们上一节中的那个h2的标题。并把项目名称project_name融合到了新的导航栏中，宽度等css均已设置好，大家先复制到自己代码中。这段代码出自bootstrap的官方教程中的导航栏demo，别问为什么这么写，我只能说人家就是这么设计的，你只要在上面跟着改改就好了。
目前的4个超链接：返回项目列表/接口库/用例库/项目设置
我们要给它们的超链接补全。
注意，这里我用了很多????? ，这些问号应该是什么？应该是放项目id的，所以我们在进入这个页面的时候，其实应该除了带上项目名称外，也要带上项目id 。才能让我们的这些导航真正实现。
我们先把这段代码源码 放出来，大家粘贴好：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation" style="position: absolute;top: 0px;left: 80px;width:-webkit-calc(100% - 200px);z-index: 1">
<div class="container-fluid">
<div class="navbar-header">
<span style="font-size: xx-small" class="navbar-brand" >项目名称：{{ project.name }}</span>
<a class="navbar-brand" href="/project_list/">返回项目列表</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="/apis/?????/">接口库</a></li>
<li><a href="/cases/?????/">用例库</a></li>
<li><a href="/project_set/?????/">项目设置</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>然后我们要去修改后台views.py中的控制返回各个页面数据的分发器函数：
def child_json(eid,oid=''):我们本来是要增加项目id的，可是这里我们会觉得后续很可能还会有很多项目内的字段需要传输进来，那么我们为啥不干脆把整个项目本身传给前端呢？
当然可以：修改成如下即可：
我们不再只传输一个project_name了。而是改成了把整个project都给前端。
然后我们去修改前端页面：
我们之前使用过project_name 这个参数，不过现在这个参数已经没了，取而代之的是含有整个项目内容的 project
我们再从里面提取任何字段，都后面加个 . 即可。
比如项目名称：project.name
项目id：project.id
修改好后，我们重启服务刷新页面，看看有没有什么问题：
果然没问题，那么我们继续把project.id填入到各个超链接中吧～
我们刷新页面测试，发现全部可以正常跳转，没有报错。说明成功
这时我们发现了一个问题：
就是跳转到 用例库/项目设置 页面的时候，这个导航就看不到了。那是因为我们仅仅把这个导航放在了 接口库页面而已。
那这个时候我们怎么才能在其他俩个子模块也显示这个导航呢？
这里给大家提供3种思路：
- 把这段代码 nav标签，复制到其他俩个子页面中即可
- 把这段代码单独做成一个新页面，然后接口列表进入的是这个新页面，新页面在做3个子页面，用来单独展示 接口库/用例库/项目设置
3.把这段代码放在公共页面welcome.html中，并且控制好显示/隐藏
以上三种思路，第二种最复杂。第一种最简单。
所以我们教程中 就采用最简单的方法，等大家都学完后，可以自己尝试换成其他方法：
粘贴复制开始，把nav标签，复制到其他俩个子页面的html中：P_cases.html/P_project_set.html
然后别忘了 我们还要设置好数据返回，之前我们只给写了接口库返回项目数据的if判断。
打开views.py中的child_json()函数：
别忘了还要修改下面的进入页面的函数：
复制稍作修改，成功后，让我们等待服务重启，刷新页面再次测试：
发现点击其他俩个子页面都没啥问题，可以成功显示导航栏了
但是我们这里也发现了一个小瑕疵。就是这选中深色的表现不对：
比如此时我已经进入了用例库，但是导航上依然显示的是选中的接口库。
其实这点我们不用担心，就是个样式问题而已，没有影响功能。
我们只需要先搞清楚 是什么决定这个选中深色的 即可解决：
其实就是我们的这个导航中的 三个li标签 内的class属性，有没有发现，具有class=active的 就会显示深色？
那么我们只需要在P_cases.html和P_projevt_set.html俩个页面内 把这个class属性分别移动到 对应的 li标签即可：
用例库页面：
项目设置页面：
好了，我们现在再次刷新页面看看效果？
完美～
好了今天教程到这里就结束了
腾讯云开发者
