接口测试平台-25：项目详情页的导航功能

最新推荐文章于 2021-04-03 21:31:55 发布

向往的美好生活

最新推荐文章于 2021-04-03 21:31:55 发布

阅读量257

点赞数

原文链接：https://blog.csdn.net/qq_22795513/category_10122661.html

版权

接口测试平台专栏收录该内容

112 篇文章 15 订阅

订阅专栏

1. 导航：使接口库、项目设置、用例库可以互相跳转

关于导航我们有很多设计：

单纯的三个按钮组合

面包屑导航

简易菜单

导航栏

每种的实现无非就是超链接。这里选择第四种，考虑到后续会加入其他子模块。所以要做顶部的整个导航栏

颜色这种灰白就可以，不要太明显抢了中间主要的内容。

截图中的第四种出自bootstrap的标准导航组。在这之前，需要修改一个之前章节中出现的导入顺序错误的问题。

2. 修复bug（其实前面已经修复了）

welcome.html，除了菜单外，所有引入的js/css都会在其他子页面中生效。但之前引入时，有个顺序出现错误。

bootstrap.min.js必须在jquery-1.11.0.min.js之后引入才不会报错

3. 增加导航

打开P_apis.html

<!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

if eid == 'P_apis.html':
    project = DB_project.objects.filter(id=oid)[0]
    res = {"project": project}

之前的P_apis.html中project_name改为project.name

效果如下：

果然没问题，那么继续把project.id填入到各个超链接中吧～

<div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="/apis/{{ project.id}}/">接口库</a></li>
        <li><a href="/cases/{{ project.id}}/">用例库</a></li>
        <li><a href="/project_set/{{ project.id}}/">项目设置</a></li>
    </ul>
</div>

4. 子页面导航常驻

把这段代码 nav标签，复制到其他俩个子页面中即可
把这段代码做成新页面，接口列表进入的是这个新页面，新页面在做3个子页面，用来单独展示接口库/用例库/项目设置
把这段代码放在公共页面welcome.html中，并且控制好显示/隐藏

第二种最复杂。第一种最简单。这里用第一种：把nav标签，复制到其他子页面中：P_cases.html/P_project_set.html

然后别忘了还要设置好数据返回，之前只给写了接口库返回项目数据的if判断。

修改views.py中的child_json()函数（此处拆开是为了拓展）：

# 控制不同的页面返回不同的数据：数据分发器
def child_json(eid, oid=''):
    res = {}
    if eid == 'home.html':
        data = DB_home_href.objects.all()
        res = {"hrefs": data}

    if eid == 'project_list.html':
        data = DB_project.objects.all()
        res = {"projects": data}

    if eid == 'P_apis.html':
        project = DB_project.objects.filter(id=oid)[0]
        res = {"project": project}

    if eid == 'P_cases.html':
        project = DB_project.objects.filter(id=oid)[0]
        res = {"project": project}

    if eid == 'P_project_set.html':
        project = DB_project.objects.filter(id=oid)[0]
        res = {"project": project}
    return res