基于Django的轻量级接口测试平台二

Posted yjlch1016

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于Django的轻量级接口测试平台二相关的知识，希望对你有一定的参考价值。

QQ群：529063263

GitHub：https://github.com/yjlch1016/dapi

 

一、登录页login.html：

% load static %

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="robots" content="NONE,NOARCHIVE"/>

    <title>登录 | 测试平台</title>

    <link href="% static ‘xadmin/vendor/bootstrap/css/bootstrap.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link rel="stylesheet" type="text/css" id="site-theme"
          href="% static ‘xadmin/css/themes/bootstrap-xadmin.css‘ %"/>
    <link href="% static ‘xadmin/vendor/font-awesome/css/font-awesome.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.main.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.plugins.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.responsive.css‘ %"
          type="text/css" media="screen" rel="stylesheet">

    <script type="text/javascript"
            src="% static ‘xadmin/vendor/jquery/jquery.js‘ %"></script>

    <style type="text/css">
        #panel-login 
            max-width: 350px;
        

        #panel-login .controls 
            padding: 0px 15px 15px !important;
        

        #panel-login .alert-block 
            padding: 0px;
        

        #panel-login .alert-block ul 
            margin: 10px 15px;
            padding-left: 0px;
        

        #panel-login .alert-block ul li 
            list-style-type: none;
        
    </style>
</head>

<body class="login">

<div class="container">
    <form action="/login/" method="post" id="login-form">
        % csrf_token %
        # 登录表单 #
        # 防止csrf跨站请求伪造 #

        <div class="panel panel-default panel-single" id="panel-login">
            <div class="panel-heading">
                <h2 class="form-signin-heading" align="center">测试平台</h2>
                <img src="/static/img/img_login.gif" align="center" alt="人生苦短，我用Python">
            </div>
            <div class="panel-body">

                <div id="div_id_username" class="row">
                    <div class="controls clearfix">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                            <input class="form-control input-lg" id="id_username" maxlength="254" name="form_user_name"
                                   type="text" placeholder="请输入用户名">
                        </div>
                    </div>
                </div>

                <div id="div_id_password" class="row">
                    <div class="controls clearfix">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
                            <input class="form-control input-lg" id="id_password" name="form_password" type="password"
                                   placeholder="请输入密码">
                        </div>
                    </div>
                </div>
                 error 
                <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
            </div>
        </div>
    </form>
</div>

<div id="footer">
    <hr/>
    <footer class="text-center">
        <p>测试部门</p>
    </footer>
</div>

<script type="text/javascript">
    document.getElementById(‘id_username‘).focus()
</script>


<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.core.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.widget.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.mouse.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.sortable.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/bootstrap/js/bootstrap.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/js/xadmin.main.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/js/xadmin.responsive.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.effect.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/js/xadmin.plugin.themes.js‘ %"></script>

</body>
</html>

技术图片

 

 

二、首页home.html：

% load static %

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="robots" content="NONE,NOARCHIVE"/>

    <title>首页 | 测试平台</title>

    <link href="% static ‘xadmin/vendor/bootstrap/css/bootstrap.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link rel="stylesheet" type="text/css" id="site-theme"
          href="% static ‘xadmin/css/themes/bootstrap-xadmin.css‘ %"/>
    <link href="% static ‘xadmin/vendor/font-awesome/css/font-awesome.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.main.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.plugins.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.responsive.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.page.dashboard.css‘ %"
          type="text/css" media="screen" rel="stylesheet">

    <script type="text/javascript"
            src="% static ‘xadmin/vendor/jquery/jquery.js‘ %"></script>

</head>

<body class="dashboard">

<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">测试平台</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav pull-right">
            <li class="dropdown">
                <a class="dropdown-toggle">
                    <strong>欢迎你～ user </strong></a>
            </li>
            <li>
                <a href="/logout/">
                    <i class="show-sm fa fa-sign-out"></i>
                    <span class="hide-sm">退出</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<div id="body-content" class="clearfix row">

    <div id="left-side" class="col-sm-1 col-md-2">
        <ul class="well nav nav-pills nav-stacked nav-sitemenu hide-sm">
            <div class="panel-heading">
                <h6 class="panel-title">
                    <i class="fa-fw fa fa-money"></i>
                    接口管理
                </h6>
            </div>
            <li>
                <a href="/product/">
                    <i class="fa-fw fa fa-cloud"></i>
                    产品线列表</a>
            </li>
            <li>
                <a href="/module/">
                    <i class="fa-fw fa fa-truck"></i>
                    模块列表
                </a>
            </li>
            <li>
                <a href="/case_group/">
                    <i class="fa-fw fa fa-globe"></i>
                    用例组列表
                </a>
            </li>
            <li>
                <a href="/interface/">
                    <i class="fa-fw fa fa-fire"></i>
                    用例列表
                </a>
            </li>
        </ul>
    </div>
</div>

<div id="footer">
    <hr/>
    <footer class="text-center">
        <p>测试部门</p>
    </footer>
</div>


<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.core.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.widget.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.mouse.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.sortable.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/bootstrap/js/bootstrap.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/js/xadmin.main.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/js/xadmin.responsive.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/vendor/jquery-ui/jquery.ui.effect.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/js/xadmin.page.dashboard.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/js/xadmin.plugin.portal.js‘ %"></script>
<script type="text/javascript"
        src="% static ‘xadmin/js/xadmin.plugin.themes.js‘ %"></script>

</body>
</html>

技术图片

 

 

三、产品列表页product.html：

% load static %
# 加载静态文件的相对路径 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="robots" content="NONE,NOARCHIVE"/>

    <title>产品线 | 测试平台</title>

    <link href="% static ‘xadmin/vendor/bootstrap/css/bootstrap.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    # href="% 静态文件夹名称 ‘要引用的文件路径与名称‘ %" #
    <link rel="stylesheet" type="text/css" id="site-theme"
          href="% static ‘xadmin/css/themes/bootstrap-xadmin.css‘ %"/>
    <link href="% static ‘xadmin/vendor/font-awesome/css/font-awesome.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.main.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.plugins.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.responsive.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.widget.editable.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.form.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/vendor/bootstrap-datepicker/css/datepicker.css‘ %"
          type="text/css" media="screen" rel="stylesheet">
    <link href="% static ‘xadmin/css/xadmin.plugins.css‘ %"
          type="text/css" media="screen" rel="stylesheet">

    <script type="text/javascript"
            src="% static ‘xadmin/vendor/jquery/jquery.js‘ %"></script>

    <style type="text/css">
        .btn-toolbar 
            margin-top: 0;
        

        #content-block.full-content 
            margin-left: 0;
        
    </style>

    <style type="text/css">
        table 
            table-layout: fixed;
        

        td 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        
    </style>
</head>
<body class="change-list">

<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">测试平台</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav pull-right">
            <li class="dropdown">
                <a class="dropdown-toggle">
                    <strong>欢迎你～ user </strong>
                </a>
            </li>
            <li>
                <a href="/logout/">
                    <i class="show-sm fa fa-sign-out"></i>
                    <span class="hide-sm">退出</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<div id="body-content" class="clearfix row">
    <div id="left-side" class="col-sm-1 col-md-2">
        <div class="panel-group hide-sm nav-sitemenu col-md-2" id="nav-accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h6 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#nav-accordion"
                           href="#nav-panel-1">
                            <i class="fa-fw fa fa-money"></i>
                            接口管理
                        </a>
                    </h6>
                </div>
                <div id="nav-panel-1" class="list-group panel-collapse collapse in">
                    <a href="/product/" class="list-group-item active">
                        <i class="fa-fw fa fa-cloud"></i>
                        产品线列表
                    </a>
                    <a href="/module/" class="list-group-item">
                        <i class="fa-fw fa fa-truck"></i>
                        模块列表
                    </a>
                    <a href="/case_group/" class="list-group-item">
                        <i class="fa-fw fa fa-globe"></i>
                        用例组列表
                    </a>
                    <a href="/interface/" class="list-group-item">
                        <i class="fa-fw fa fa-fire"></i>
                        用例列表
                    </a>
                </div>
            </div>
        </div>

        <ul class="well nav nav-list nav-sitemenu show-sm">
            <li class="app_menu">
                <a href="/home/">
                    <i class="icon fa-fw fa fa-home"></i>
                </a>
                <hr/>
            </li>
            <li class="app_menu dropdown-submenu  active">
                <a href="#" class="section">
                    <i class="icon fa-fw fa fa-money"></i>
                </a>
                <hr/>
                <ul class="dropdown-menu">
                    <li class="active">
                        <a href="/product/">
                            <i class="fa-fw fa fa-cloud"></i>
                            产品线列表
                        </a>
                    </li>
                    <li>
                        <a href="/module/">
                            <i class="fa-fw fa fa-truck"></i>
                            模块列表
                        </a>
                    </li>
                    <li>
                        <a href="/case_group/">
                            <i class="fa-fw fa fa-globe"></i>
                            用例组列表
                        </a>
                    </li>
                    <li>
                        <a href="/interface/">
                            <i class="fa-fw fa fa-fire"></i>
                            用例列表
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="content-block" class="col-sm-11 col-md-10">
        <ul class="breadcrumb">
            <li>
                <a href="/home/">首页</a>
            </li>
            <li>
                产品线列表            
</li>
        </ul>

        <div class="navbar content-navbar navbar-default navbar-xs">
            <div class="navbar-collapse collapse">

                <form class="navbar-form navbar-left" method="get">
                    % csrf_token %                    
<div class="input-group search-group">
                        <input id="searchbar" class="form-control"
type="search" name="form_product_name_s"
placeholder="产品线名称" required>
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-search">搜索产品线</i>
                            </button>
                        </span>
                    </div>
                </form>

                <div class="navbar-btn pull-right hide-xs">
                    <a class="btn btn-primary" data-toggle="modal" href="#addProduct">
<!-- 点击会触发增加产品线模态框 -->
<i class="fa fa-plus"></i>
                        增加产品线                    
</a>
                </div>
            </div>
        </div>

        <div class="results table-responsive">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th scope="col" class="sortable sorted ascending">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                ID                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                产品线名称                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                产品描述                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                产品经理                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                开发人员                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                测试人员                            
</a>
                        </div>
                    </th>
                    <th scope="col">
                        <span style="color: red">模块总数</span>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                创建时间                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                修改时间                            
</a>
                        </div>
                    </th>
                    <th scope="col">
                        <span style="color: green">修改</span>
                    </th>
                    <th scope="col">
                        <span style="color: blue">删除</span>
                    </th>
                </tr>
                </thead>
                <tbody>
                % for p in p_list %                    
<tr class="grid-item">
                        <td id="product_id_t"> p.id </td>
                        <td id="product_name_t"> p.product_name </td>
                        <td id="product_describe_t"> p.product_describe </td>
                        <td id="product_manager_t"> p.product_manager </td>
                        <td id="developer_t"> p.developer </td>
                        <td id="tester_t"> p.tester </td>
                        <td>
                            <span style="color: red">
                             p.products.all.count                                 
# 反向统计所包含的外键的总数 #
</span>
                        </td>
                        <td class="nowrap"> p.create_time </td>
                        <td class="nowrap"> p.update_time </td>
                        <td>
                            <a class="icon fa fa-edit"
style="color: green"
data-toggle="modal"
href="#updateProduct"
onclick="updateProduct(this)">
<!-- 点击会触发修改产品线模态框 -->
                                修改                            
</a>
                        </td>
                        <td>
                            <a class="icon fa fa-times"
style="color: blue"
data-toggle="modal"
href="#deleteProduct"
onclick="getProductId( p.id ,‘ p.product_name ‘)">
<!-- 点击会触发删除产品线模态框 -->
                                删除                            
</a>
                        </td>
                    </tr>
                % endfor %                
</tbody>
            </table>
        </div>

        <ul class="pagination">
            <li>
                <span>
                    共<span class="text-success"> p_count </span>产品线                
</span>
            </li>
            <li class="step-links">
                % if p_list.has_previous %                    
<a href="?page=1">首页</a>
                    <a href="?page= p_list.previous_page_number ">上一页</a>
                % endif %                

<span class="current">
                    第 p_list.number 页 共 p_list.paginator.num_pages 页                
</span>

                % if p_list.has_next %                    
<a href="?page= p_list.next_page_number ">下一页</a>
                    <a href="?page= p_list.paginator.num_pages ">尾页</a>
                % endif %            
</li>
        </ul>

    </div>
</div>

<!-- 增加产品线模态框 -->
<div class="modal fade" id="addProduct"
tabindex="-1" role="dialog"
aria-labelledby="addProductLabel" aria-hidden="true"
data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 900px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="addProductLabel">增加产品线</h4>
            </div>
            <div class="modal-body">

                <form class="exform" action="/product_add/" method="post" id="productinfo_form">
                    % csrf_token %                    
<div class="form-container row clearfix">
                        <div class="column form-column main col col-sm-12 form-horizontal">
                            <div class="panel panel-default fieldset">
                                <div class="panel-heading">
                                    <i class=‘icon fa fa-chevron-up chevron‘></i>
                                    <h3 class="panel-title">产品信息部分</h3>
                                </div>
                                <div class="panel-body ">
                                    <div id="div_id_product_name"
class="form-group">
                                        <label for="id_product_name"
class="control-label  requiredField">
                                            产品线名称                                            
<span class="asteriskField">*</span>
                                        </label>
                                        <div class="controls ">
                                            <input type="text" name="form_product_name_a"
class="text-field admintextinputwidget form-control" maxlength="32"
required id="id_product_name">
                                            <p id="hint_id_product_name"
class="help-block">
                                                请输入产品线名称                                            
</p>
                                        </div>
                                    </div>
                                    <div id="div_id_product_describe"
class="form-group">
                                        <label for="id_product_describe"
class="control-label ">
                                            产品描述                                        
</label>
                                        <div class="controls ">
                                            <textarea name="form_product_describe_a" cols="40" rows="10"
class="textarea-field admintextareawidget form-control"
id="id_product_describe"></textarea>
                                            <p id="hint_id_product_describe"
class="help-block">
                                                请输入产品描述                                            
</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default fieldset">
                                <div class="panel-heading">
                                    <i class=‘icon fa fa-chevron-up chevron‘></i>
                                    <h3 class="panel-title">人员部分</h3>
                                </div>
                                <div class="panel-body ">
                                    <div id="div_id_product_manager"
class="form-group">
                                        <label for="id_product_manager"
class="control-label  requiredField">
                                            产品经理                                            
<span class="asteriskField">*</span>
                                        </label>
                                        <div class="controls ">
                                            <input type="text" name="form_product_manager_a"
class="text-field admintextinputwidget form-control" maxlength="11"
required id="id_product_manager">
                                            <p id="hint_id_product_manager"
class="help-block">
                                                请输入产品经理                                            
</p>
                                        </div>
                                    </div>
                                    <div id="div_id_developer" class="form-group">
                                        <label for="id_developer"
class="control-label ">
                                            开发人员                                        
</label>
                                        <div class="controls ">
                                            <input type="text" name="form_developer_a"
class="text-field admintextinputwidget form-control" maxlength="11"
id="id_developer">
                                            <p id="hint_id_developer"
class="help-block">
                                                请输入开发人员                                            
</p>
                                        </div>
                                    </div>
                                    <div id="div_id_tester" class="form-group">
                                        <label for="id_tester"
class="control-label ">
                                            测试人员                                        
</label>
                                        <div class="controls ">
                                            <input type="text" name="form_tester_a"
class="text-field admintextinputwidget form-control" maxlength="11"
id="id_tester">
                                            <p id="hint_id_tester" class="help-block">
                                                请输入测试人员                                            
</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions well well-sm clearfix">
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            <i class="fa fa-undo"></i>
                            取消                        
</button>
                        <button type="submit" class="default btn btn-primary hide-xs">
                            <i class="fa fa-save"></i>
                            增加                        
</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 修改产品线模态框 -->
<div class="modal fade" id="updateProduct" tabindex="-1" role="dialog" aria-labelledby="updateProductLabel"
aria-hidden="true"
data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 900px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="updateProductLabel">修改产品线</h4>
            </div>
            <div class="modal-body">
                <form class="exform" action="/product_update/"
method="post" id="productinfo_form">
                    % csrf_token %                    
<input type=‘hidden‘ id=‘product_id_u‘
name="form_product_id_u" value=‘‘/>
                    <div class="form-container row clearfix">
                        <div class="column form-column main col col-sm-12 form-horizontal">
                            <div class="panel panel-default fieldset">
                                <div class="panel-heading">
                                    <i class=‘icon fa fa-chevron-up chevron‘></i>
                                    <h3 class="panel-title">产品信息部分</h3></div>
                                <div class="panel-body ">
                                    <div id="div_id_product_name" class="form-group">
                                        <label for="id_product_name"
class="control-label  requiredField">
                                            产品线名称                                            
<span class="asteriskField">*</span>
                                        </label>
                                        <div class="controls ">
                                            <input type="text" name="form_product_name_u"
value=""
class="text-field admintextinputwidget form-control" maxlength="32"
required id="product_name_u">
                                            <p id="hint_id_product_name" class="help-block">
                                                请输入产品线名称                                            
</p>
                                        </div>
                                    </div>
                                    <div id="div_id_product_describe" class="form-group">
                                        <label for="id_product_describe" class="control-label ">产品描述                                        
</label>
                                        <div class="controls ">
                                            <textarea name="form_product_describe_u" cols="40"
rows="10"
class="textarea-field admintextareawidget form-control"
id="product_describe_u">
                                            </textarea>
                                            <p id="hint_id_product_describe" class="help-block">
                                                请输入产品描述                                            
</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default fieldset">
                                <div class="panel-heading">
                                    <i class=‘icon fa fa-chevron-up chevron‘></i>
                                    <h3 class="panel-title">人员部分</h3>
                                </div>
                                <div class="panel-body ">
                                    <div id="div_id_product_manager" class="form-group">
                                        <label for="id_product_manager"
class="control-label  requiredField">
                                            产品经理                                            
<span class="asteriskField">*</span>
                                        </label>
                                        <div class="controls ">
                                            <input type="text" name="form_product_manager_u" value=""
class="text-field admintextinputwidget form-control" maxlength="11"
required id="product_manager_u">
                                            <p id="hint_id_product_manager" class="help-block">
                                                请输入产品经理                                            
</p>
                                        </div>
                                    </div>
                                    <div id="div_id_developer" class="form-group">
                                        <label for="id_developer"
class="control-label ">
                                            开发人员                                        
</label>
                                        <div class="controls ">
                                            <input type="text" name="form_developer_u"
value=""
class="text-field admintextinputwidget form-control" maxlength="11"
id="developer_u">
                                            <p id="hint_id_developer" class="help-block">
                                                请输入开发人员                                            
</p>
                                        </div>
                                    </div>
                                    <div id="div_id_tester" class="form-group">
                                        <label for="id_tester"
class="control-label ">
                                            测试人员                                        
</label>
                                        <div class="controls ">
                                            <input type="text" name="form_tester_u"
value=""
class="text-field admintextinputwidget form-control" maxlength="11"
id="tester_u">
                                            <p id="hint_id_tester" class="help-block">
                                                请输入测试人员                                            
</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions well well-sm clearfix">
                            <button type="button" class="btn btn-info" data-dismiss="modal">
                                <i class="fa fa-undo"></i>
                                取消                            
</button>
                            <button type="submit" class="default btn btn-primary hide-xs">
                                <i class="fa fa-file-text"></i>
                                修改                            
</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 删除产品线模态框 -->
<div class="modal fade" id="deleteProduct"
tabindex="-1" role="dialog"
aria-labelledby="deleteProductLabel" aria-hidden="true"
data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="deleteProductLabel">删除产品线</h4>
            </div>
            <div class="modal-body">

                <form action="/product_delete/" method="post">
                    % csrf_token %                    
<input type="hidden"
id="product_id_d"
name="form_product_id_d"
value=""/>
<!-- 定义一个隐藏的input，用于传值 -->
<div class="alert alert-warning">
                        请确认要删除选中的产品线吗？它所包含的模块也将被删除！                    
</div>
                    <div class="alert alert-danger" id="product_name_d">
                    </div>
                    <div class="form-actions well well-sm">
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            <i class="fa fa-undo"></i>
                            取消                        
</button>
                        <button type="submit" class="default btn btn-primary hide-xs">
                            <i class="fa fa-trash-o"></i>
                            删除                        
</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <hr/>
    <footer class="text-center">
        <p>测试部门</p>
    </footer>
</div>

<script>
function updateProduct(obj)         
var tr = $(obj).parent().parent();
var id = tr.children("td#product_id_t").text();
var name = tr.children("td#product_name_t").text();
var describe = tr.children("td#product_describe_t").text();
var manager = tr.children("td#product_manager_t").text();
var developer = tr.children("td#developer_t").text();
var tester = tr.children("td#tester_t").text();
//取值
$(‘#product_id_u‘).val(id);
$(‘#product_name_u‘).val(name);
$(‘#product_describe_u‘).val(describe);
$(‘#product_manager_u‘).val(manager);
$(‘#developer_u‘).val(developer);
$(‘#tester_u‘).val(tester);
//赋值
        console.log(id);
        console.log(name);
        console.log(describe);
        console.log(manager);
        console.log(developer);
        console.log(tester);
//打印日志
    
</script>

<script>
function getProductId(ID, NAME)         
$(‘#product_id_d‘).val(ID);
$(‘#product_name_d‘).html(NAME);
        console.log(ID);
        console.log(NAME);
        

//向删除模态框传递产品线id与产品线名称
</script>

<!-- 二次确认弹窗 -->
<script>
$(function ()         
$(‘#addProduct .btn-primary‘).on(‘click‘,
function ()                 
alert(‘嘿，确认增加产品线吗？‘);
            );
$(‘#addProduct .btn-info‘).on(‘click‘,
function ()                 
alert(‘嘿，确认取消吗？‘);
            );

$(‘#updateProduct .btn-primary‘).on(‘click‘,
function ()                 
alert(‘嘿，确认修改产品线吗？‘);
            );
$(‘#updateProduct .btn-info‘).on(‘click‘,
function ()                 
alert(‘嘿，确认取消吗？‘);
            );

$(‘#deleteProduct .btn-primary‘).on(‘click‘,
function ()                 
alert(‘嘿，确认删除产品线吗？‘);
            );
$(‘#deleteProduct .btn-info‘).on(‘click‘,
function ()                 
alert(‘嘿，确认取消吗？‘);
            );
    );
</script>

<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.main.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.responsive.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.effect.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.portal.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.formset.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.page.form.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.themes.js"></script>

</body>
</html>

技术图片

 

 

四、模块列表module.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="robots" content="NONE,NOARCHIVE"/>

    <title>模块 | 测试平台</title>

    <link href="/static/xadmin/vendor/bootstrap/css/bootstrap.css" type="text/css" media="screen" rel="stylesheet">
    <link rel="stylesheet" type="text/css" id="site-theme" href="/static/xadmin/css/themes/bootstrap-xadmin.css"/>
    <link href="/static/xadmin/vendor/font-awesome/css/font-awesome.css" type="text/css" media="screen"
          rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.main.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.plugins.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.responsive.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/select2/select2.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.widget.editable.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.form.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/bootstrap-datepicker/css/datepicker.css" type="text/css" media="screen"
          rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.plugins.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/selectize/selectize.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/selectize/selectize.bootstrap3.css" type="text/css" media="screen"
          rel="stylesheet">

    <script type="text/javascript" src="/static/xadmin/vendor/jquery/jquery.js"></script>

    <style type="text/css">
        .btn-toolbar 
            margin-top: 0;
        

        #content-block.full-content 
            margin-left: 0;
        
    </style>

    <style type="text/css">
        table 
            table-layout: fixed;
        

        td 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        
    </style>
</head>

<body class="change-list">

<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">测试平台</a>
    </div>
    <div class="navbar-collapse collapse">

        <ul class="nav navbar-nav pull-right">
            <li class="dropdown">
                <a class="dropdown-toggle">
                    <strong>欢迎你～ user </strong>
                </a>
            </li>
            <li>
                <a href="/logout/">
                    <i class="show-sm fa fa-sign-out"></i>
                    <span class="hide-sm">退出</span>
                </a>
            </li>
        </ul>

    </div>
</div>

<div id="body-content" class="clearfix row">
    <div id="left-side" class="col-sm-1 col-md-2">
        <div class="panel-group hide-sm nav-sitemenu col-md-2" id="nav-accordion">

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h6 class="panel-title">
                        <a class="accordion-toggle"
                           data-toggle="collapse"
                           data-parent="#nav-accordion"
                           href="#nav-panel-1">
                            <i class="fa-fw fa fa-money"></i>
                            接口管理
                        </a>
                    </h6>
                </div>
                <div id="nav-panel-1" class="list-group panel-collapse collapse in">

                    <a href="/product/" class="list-group-item">
                        <i class="fa-fw fa fa-cloud"></i>
                        产品线列表</span>
                    </a>
                    <a href="/module/" class="list-group-item active">
                        <i class="fa-fw fa fa-truck"></i>
                        模块列表</span>
                    </a>
                    <a href="/case_group/" class="list-group-item">
                        <i class="fa-fw fa fa-globe"></i>
                        用例组列表</span>
                    </a>
                    <a href="/interface/" class="list-group-item">
                        <i class="fa-fw fa fa-fire"></i>
                        用例列表</span>
                    </a>
                </div>
            </div>
        </div>

        <ul class="well nav nav-list nav-sitemenu show-sm">
            <li class="app_menu">
                <a href="/home/"><i class="icon fa-fw fa fa-home"></i></a>
                <hr/>
            </li>
            <li class="app_menu dropdown-submenu  active">
                <a href="#" class="section">
                    <i class="icon fa-fw fa fa-money"></i>
                </a>
                <hr/>
                <ul class="dropdown-menu">
                    <li>
                        <a href="/product/">
                            <i class="fa-fw fa fa-cloud"></i>
                            产品线列表</a>
                    </li>
                    <li class="active">
                        <a href="/module/">
                            <i class="fa-fw fa fa-truck"></i>
                            模块列表</a>
                    </li>
                    <li>
                        <a href="/case_group/">
                            <i class="fa-fw fa fa-globe"></i>
                            用例组列表</a>
                    </li>
                    <li>
                        <a href="/interface/">
                            <i class="fa-fw fa fa-fire"></i>
                            用例列表</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="content-block" class="col-sm-11 col-md-10">
        <ul class="breadcrumb">
            <li>
                <a href="/home/">首页</a>
            </li>
            <li>
                模块列表            
</li>
        </ul>

        <div class="navbar content-navbar navbar-default navbar-xs">
            <div class="navbar-collapse collapse">

                <form class="navbar-form navbar-left" method="get">
                    % csrf_token %                    
<div class="input-group search-group">
                        <input id="searchbar" class="form-control"
type="search" name="form_module_name_s"
placeholder="模块名称" required>
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-search">搜索模块</i>
                            </button>
                        </span>
                    </div>
                </form>

                <div class="navbar-btn pull-right hide-xs">
                    <a class="btn btn-primary" data-toggle="modal" href="#addModule">
<!-- 点击会触发增加模块模态框 -->
<i class="fa fa-plus"></i>
                        增加模块                    
</a>
                </div>
            </div>
        </div>

        <div class="results table-responsive">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th scope="col" class="sortable sorted ascending">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                模块ID                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle" style="color: red">
                                产品线                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                模块名称                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                模块描述                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                创建时间                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                修改时间                            
</a>
                        </div>
                    </th>
                    <th scope="col">
                        <span style="color: green">修改</span>
                    </th>
                    <th scope="col">
                        <span style="color: blue">删除</span>
                    </th>
                </tr>
                </thead>
                <tbody>
                % for m in m_list %                    
<tr class="grid-item">
                        <td id="module_id_t"> m.id </td>
                        <td style="color: red"> m.module_group </td>
                        <td id="module_name_t"> m.module_name </td>
                        <td id="module_describe_t"> m.module_describe </td>
                        <td class="nowrap"> m.create_time </td>
                        <td class="nowrap"> m.update_time </td>
                        <td>
                            <a class="icon fa fa-edit"
style="color: green"
data-toggle="modal"
href="#updateModule"
onclick="updateModule(this)">
<!-- 点击会触发修改模块模态框 -->
                                修改                            
</a>
                        </td>
                        <td>
                            <a class="icon fa fa-times"
style="color: blue"
data-toggle="modal"
href="#deleteModule"
onclick="getModuleId( m.id ,‘ m.module_name ‘)">
<!-- 点击会触发删除模块模态框 -->
                                删除                            
</a>
                        </td>
                    </tr>
                % endfor %                
</tbody>
            </table>
        </div>

        <ul class="pagination">
            <li>
                <span>
                    共<span class="text-success"> m_count </span>模块                
</span>
            </li>
            <li class="step-links">
                % if m_list.has_previous %                    
<a href="?page=1">首页</a>
                    <a href="?page= m_list.previous_page_number ">上一页</a>
                % endif %                

<span class="current">
                    第 m_list.number 页 共 m_list.paginator.num_pages 页                
</span>

                % if m_list.has_next %                    
<a href="?page= m_list.next_page_number ">下一页</a>
                    <a href="?page= m_list.paginator.num_pages ">尾页</a>
                % endif %            
</li>
        </ul>

    </div>
</div>

<!-- 增加模块模态框-->
<div class="modal fade" id="addModule"
tabindex="-1" role="dialog"
aria-labelledby="addModuleLabel" aria-hidden="true"
data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 900px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="addModuleLabel">增加模块</h4>
            </div>
            <div class="modal-body">

                <form class="exform" action="/module_add/" method="post" id="moduleinfo_form">
                    % csrf_token %                    
<div class="form-container row clearfix">
                        <div class="column form-column main col col-sm-12 form-horizontal">
                            <div class="panel panel-default fieldset">
                                <div class="panel-heading">
                                    <i class=‘icon fa fa-chevron-up chevron‘></i>
                                    <h3 class="panel-title">模块信息部分</h3>
                                </div>
                                <div class="panel-body ">
                                    <div id="div_id_module_group" class="form-group">
                                        <label for="id_module_group" class="control-label  requiredField">
                                            产品线<span class="asteriskField">*</span>
                                        </label>
                                        <div class="controls ">
                                            <div class="control-wrap" id="id_module_group_wrap_container">
                                                <select name="form_module_group_a"
class="adminselectwidget form-control"
required id="module_group_a">
                                                    <option value="" selected>---------</option>
                                                    % for p in p_list %                                                        
<option value=" p.id "> p.product_name </option>
# 利用外键查询 #
                                                    % endfor %                                                
</select>
                                            </div>
                                            <p id="hint_id_module_group" class="help-block">请选择产品线</p>
                                        </div>
                                    </div>
                                    <div id="div_id_module_name" class="form-group">
                                        <label for="id_module_name" class="control-label  requiredField">
                                            模块名称<span class="asteriskField">*</span>
                                        </label>
                                        <div class="controls ">
                                            <input type="text" name="form_module_name_a"
class="text-field admintextinputwidget form-control" maxlength="32"
required id="module_name_a">
                                            <p id="hint_id_module_name" class="help-block">请输入模块名称</p>
                                        </div>
                                    </div>
                                    <div id="div_id_module_describe" class="form-group">
                                        <label for="id_module_describe" class="control-label ">
                                            模块描述                                        
</label>
                                        <div class="controls ">
                                            <textarea name="form_module_describe_a" cols="40" rows="10"
class="textarea-field admintextareawidget form-control"
id="module_describe_a"></textarea>
                                            <p id="hint_id_module_describe" class="help-block">请输入模块描述</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions well well-sm clearfix">
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            <i class="fa fa-undo"></i>
                            取消                        
</button>
                        <button type="submit" class="default btn btn-primary hide-xs">
                            <i class="fa fa-save"></i>
                            增加                        
</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 修改模块模态框 -->
<div class="modal fade" id="updateModule"
tabindex="-1" role="dialog"
aria-labelledby="updateModuleLabel" aria-hidden="true"
data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 900px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="updateModuleLabel">修改模块</h4>
            </div>
            <div class="modal-body">
                <form class="exform" action="/module_update/" method="post" id="moduleinfo_form">
                    % csrf_token %                    
<input type=‘hidden‘
id=‘module_id_u‘
name="form_module_id_u"
value=‘‘/>
                    <div class="form-container row clearfix">
                        <div class="column form-column main col col-sm-12 form-horizontal">
                            <div class="panel panel-default fieldset">
                                <div class="panel-heading">
                                    <i class=‘icon fa fa-chevron-up chevron‘></i>
                                    <h3 class="panel-title">模块信息部分</h3>
                                </div>
                                <div class="panel-body ">
                                    <div id="div_id_module_group" class="form-group">
                                        <label for="id_module_group"
class="control-label  requiredField">
                                            产品线                                            
<span class="asteriskField">*</span>
                                        </label>
                                        <div class="controls ">
                                            <div class="control-wrap" id="id_module_group_wrap_container">
                                                <select name="form_module_group_u"
class="adminselectwidget form-control"
required id="module_group_u">
                                                    <option value="" selected>---------</option>
                                                    % for p in p_list %                                                        
<option value=" p.id "> p.product_name </option>
                                                    % endfor %                                                
</select>
                                            </div>
                                            <p id="hint_id_module_group" class="help-block">请选择产品线</p>
                                        </div>
                                    </div>
                                    <div id="div_id_module_name" class="form-group"><label for="id_module_name"
class="control-label  requiredField">
                                        模块名称<span class="asteriskField">*</span> </label>
                                        <div class="controls "><input type="text"
name="form_module_name_u" value=""
class="text-field admintextinputwidget form-control"
maxlength="32" required id="module_name_u">
                                            <p id="hint_id_module_name" class="help-block">请输入模块名称</p></div>
                                    </div>
                                    <div id="div_id_module_describe" class="form-group"><label for="id_module_describe"
class="control-label ">
                                        模块描述                                    
</label>
                                        <div class="controls "><textarea name="form_module_describe_u" cols="40"
rows="10"
class="textarea-field admintextareawidget form-control"
id="module_describe_u"></textarea>
                                            <p id="hint_id_module_describe" class="help-block">请输入模块描述</p></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions well well-sm clearfix">
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            <i class="fa fa-undo"></i>
                            取消                        
</button>
                        <button type="submit" class="default btn btn-primary hide-xs">
                            <i class="fa fa-file-text"></i>
                            修改                        
</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 删除模块模态框 -->
<div class="modal fade" id="deleteModule"
tabindex="-1" role="dialog"
aria-labelledby="deleteModuleLabel" aria-hidden="true"
data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="deleteModuleLabel">删除模块</h4>
            </div>
            <div class="modal-body">

                <form action="/module_delete/" method="post">
                    % csrf_token %                    
<input type="hidden"
id="module_id_d"
name="form_module_id_d"
value=""/>
<!-- 定义一个隐藏的input，用于传值 -->
<div class="alert alert-warning">
                        请确认要删除选中的模块吗？                    
</div>
                    <div class="alert alert-danger" id="module_name_d">
                    </div>
                    <div class="form-actions well well-sm">
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            <i class="fa fa-undo"></i>
                            取消                        
</button>
                        <button type="submit" class="default btn btn-primary hide-xs">
                            <i class="fa fa-trash-o"></i>
                            删除                        
</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function updateModule(obj)         
var tr = $(obj).parent().parent();
var id = tr.children("td#module_id_t").text();
var name = tr.children("td#module_name_t").text();
var describe = tr.children("td#module_describe_t").text();
//取值
$(‘#module_id_u‘).val(id);
$(‘#module_name_u‘).val(name);
$(‘#module_describe_u‘).val(describe);
//赋值
        console.log(id);
        console.log(name);
        console.log(describe);
//打印日志
    
</script>

<script>
function getModuleId(ID, NAME)         
$(‘#module_id_d‘).val(ID);
$(‘#module_name_d‘).html(NAME);
        console.log(ID);
        console.log(NAME);
        

//向删除模态框传递模块id与模块名称
</script>

<!-- 二次确认弹窗 -->
<script>
$(function ()         
$(‘#addModule .btn-primary‘).on(‘click‘,
function ()                 
alert(‘嘿，确认增加模块吗？‘);
            );
$(‘#addModule .btn-info‘).on(‘click‘,
function ()                 
alert(‘嘿，确认取消吗？‘);
            );

$(‘#updateModule .btn-primary‘).on(‘click‘,
function ()                 
alert(‘嘿，确认修改模块吗？‘);
            );
$(‘#updateModule .btn-info‘).on(‘click‘,
function ()                 
alert(‘嘿，确认取消吗？‘);
            );

$(‘#deleteModule .btn-primary‘).on(‘click‘,
function ()                 
alert(‘嘿，确认删除模块吗？‘);
            );
$(‘#deleteModule .btn-info‘).on(‘click‘,
function ()                 
alert(‘嘿，确认取消吗？‘);
            );
    );
</script>


<div id="footer">
    <hr/>
    <footer class="text-center">
        <p>测试部门</p>
    </footer>
</div>

<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.main.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.responsive.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.effect.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.portal.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/selectize/selectize.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.quick-form.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.page.form.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.themes.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/select2/select2.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/select2/select2_locale_zh-hans.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.widget.select.js"></script>

</body>
</html>

技术图片

 

 

五、用例组列表页case_group.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="robots" content="NONE,NOARCHIVE"/>

    <title>用例组 | 测试平台</title>

    <link href="/static/xadmin/vendor/bootstrap/css/bootstrap.css" type="text/css" media="screen" rel="stylesheet">
    <link rel="stylesheet" type="text/css" id="site-theme" href="/static/xadmin/css/themes/bootstrap-xadmin.css"/>
    <link href="/static/xadmin/vendor/font-awesome/css/font-awesome.css" type="text/css" media="screen"
          rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.main.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.plugins.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.responsive.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/select2/select2.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.plugin.formset.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.form.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/selectize/selectize.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/selectize/selectize.bootstrap3.css" type="text/css" media="screen"
          rel="stylesheet">

    <script type="text/javascript" src="/static/xadmin/vendor/jquery/jquery.js"></script>

    <style type="text/css">
        .btn-toolbar 
            margin-top: 0;
        

        #content-block.full-content 
            margin-left: 0;
        
    </style>

    <style type="text/css">
        table 
            table-layout: fixed;
        

        td 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        
    </style>

</head>

<body class="change-list">

<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">测试平台</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav pull-right">

            <li class="dropdown">
                <a class="dropdown-toggle">
                    <strong>欢迎你～ user </strong>
                </a>
            </li>
            <li>
                <a href="/logout/">
                    <i class="show-sm fa fa-sign-out"></i>
                    <span class="hide-sm">退出</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<div id="body-content" class="clearfix row">
    <div id="left-side" class="col-sm-1 col-md-2">

        <div class="panel-group hide-sm nav-sitemenu col-md-2" id="nav-accordion">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h6 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#nav-accordion"
                           href="#nav-panel-1">
                            <i class="fa-fw fa fa-money"></i>
                            接口管理
                        </a>
                    </h6>
                </div>
                <div id="nav-panel-1" class="list-group panel-collapse collapse in">
                    <a href="/product/" class="list-group-item">
                        <i class="fa-fw fa fa-cloud"></i>
                        产品线列表
                    </a>
                    <a href="/module/" class="list-group-item">
                        <i class="fa-fw fa fa-truck"></i>
                        模块列表
                    </a>
                    <a href="/case_group/" class="list-group-item active">
                        <i class="fa-fw fa fa-globe"></i>
                        用例组列表
                    </a>
                    <a href="/interface/" class="list-group-item">
                        <i class="fa-fw fa fa-fire"></i>
                        用例列表
                    </a>
                </div>
            </div>
        </div>


        <ul class="well nav nav-list nav-sitemenu show-sm">
            <li class="app_menu">
                <a href="/home/">
                    <i class="icon fa-fw fa fa-home"></i>
                </a>
                <hr/>
            </li>
            <li class="app_menu dropdown-submenu  active">
                <a href="#" class="section">
                    <i class="icon fa-fw fa fa-money"></i>
                </a>
                <hr/>
                <ul class="dropdown-menu">
                    <li>
                        <a href="/product/">
                            <i class="fa-fw fa fa-cloud"></i>
                            产品线列表
                        </a>
                    </li>
                    <li>
                        <a href="/module/">
                            <i class="fa-fw fa fa-truck"></i>
                            模块列表
                        </a>
                    </li>
                    <li class="active">
                        <a href="case_group/">
                            <i class="fa-fw fa fa-globe"></i>
                            用例组列表
                        </a>
                    </li>
                    <li>
                        <a href="/interface/">
                            <i class="fa-fw fa fa-fire"></i>
                            用例列表
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="content-block" class="col-sm-11 col-md-10">
        <ul class="breadcrumb">
            <li>
                <a href="/home/">首页</a>
            </li>
            <li>
                用例组列表
            </li>
        </ul>

        <div class="navbar content-navbar navbar-default navbar-xs" data-toggle="breakpoint"
             data-class-xs="navbar content-navbar navbar-inverse navbar-xs"
             data-class-sm="navbar content-navbar navbar-default navbar-xs">

            <div class="navbar-collapse collapse">
                <form class="navbar-form navbar-left" method="get">
                    % csrf_token %                    
<div class="input-group search-group">
                        <input id="searchbar" class="form-control" type="text" name="form_case_group_name_s" value=""
placeholder="用例组名称" required>
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-search">搜索用例组</i>
                            </button>
                        </span>
                    </div>
                </form>

                <div class="navbar-btn pull-right hide-xs">
                    <a class="btn btn-primary" data-toggle="modal" href="#addCaseGroup">
<!-- 点击会触发增加用例组模态框 -->
<i class="fa fa-plus"></i>
                        增加用例组                    
</a>
                </div>
            </div>
        </div>

        <div class="results table-responsive">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th scope="col" class="sortable sorted ascending">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                ID                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                用例组名称                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                用例组描述                            
</a>
                        </div>
                    </th>
                    <th scope="col">
                        <span style="color: red">用例总数</span>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                创建时间                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                修改时间                            
</a>
                        </div>
                    </th>
                    <th scope="col">
                        <span style="color: green">修改</span>
                    </th>
                    <th scope="col">
                        <span style="color: blue">删除</span>
                    </th>
                </tr>
                </thead>
                <tbody>
                % for c in c_list %                    
<tr class="grid-item">
                        <td id="case_group_id_t"> c.id </td>
                        <td id="case_group_name_t"> c.case_group_name </td>
                        <td id="case_group_describe_t"> c.case_group_describe </td>
                        <td>
                            <span style="color: red"> c.groups.all.count </span>
# 反向统计所包含的外键的总数 #
</td>
                        <td class="nowrap"> c.create_time </td>
                        <td class="nowrap"> c.update_time </td>
                        <td>
                            <a class="icon fa fa-edit"
style="color: green"
data-toggle="modal"
href="#updateCaseGroup"
onclick="updateCaseGroup(this)">
<!-- 点击会触发修改用例组模态框 -->
                                修改                            
</a>
                        </td>
                        <td>
                            <a class="icon fa fa-times"
style="color: blue"
data-toggle="modal"
href="#deleteCaseGroup"
onclick="getCaseGroupId( c.id ,‘ c.case_group_name ‘)">
<!-- 点击会触发删除用例组模态框 -->
                                删除                            
</a>
                        </td>
                    </tr>
                % endfor %                
</tbody>
            </table>
        </div>

        <ul class="pagination">
            <li>
                <span>
                    共<span class="text-success"> c_count </span>用例组                
</span>
            </li>
            <li class="step-links">
                % if c_list.has_previous %                    
<a href="?page=1">首页</a>
                    <a href="?page= c_list.previous_page_number ">上一页</a>
                % endif %                

<span class="current">
                    第 c_list.number 页 共 c_list.paginator.num_pages 页                
</span>

                % if c_list.has_next %                    
<a href="?page= c_list.next_page_number ">下一页</a>
                    <a href="?page= c_list.paginator.num_pages ">尾页</a>
                % endif %            
</li>
        </ul>

    </div>
</div>

<!-- 增加用例组模态框 -->
<div class="modal fade" id="addCaseGroup" tabindex="-1" role="dialog" aria-labelledby="addCaseGroupLabel"
aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 900px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="addCaseGroupLabel">增加用例组</h4>
            </div>
            <div class="modal-body">
                <form class="exform" action="/case_group_add/" method="post" id="casegroupinfo_form">
                    % csrf_token %                    
<div class="form-container row clearfix">
                        <div class="column form-column main col col-sm-12 form-horizontal">
                            <div class="panel panel-default fieldset">
                                <div class="panel-heading">
                                    <i class=‘icon fa fa-chevron-up chevron‘></i>
                                    <h3 class="panel-title">用例组信息部分</h3>
                                </div>
                                <div class="panel-body ">
                                    <div id="div_id_case_group_name" class="form-group">
                                        <label for="id_case_group_name" class="control-label  requiredField">
                                            用例组名称                                            
<span class="asteriskField">*</span>
                                        </label>
                                        <div class="controls ">
                                            <input type="text" name="form_case_group_name_a"
class="text-field admintextinputwidget form-control" maxlength="32"
required id="id_case_group_name">
                                            <p id="hint_id_case_group_name" class="help-block">
                                                请输入用例组名称                                            
</p>
                                        </div>
                                    </div>
                                    <div id="div_id_case_group_describe" class="form-group">
                                        <label for="id_case_group_describe" class="control-label ">用例组描述                                        
</label>
                                        <div class="controls ">
                                            <input type="text" name="form_case_group_describe_a"
class="text-field admintextinputwidget form-control" maxlength="255"
id="id_case_group_describe">
                                            <p id="hint_id_case_group_describe" class="help-block">
                                                请输入用例组描述                                            
</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions well well-sm clearfix">
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            <i class="fa fa-undo"></i>
                            取消                        
</button>
                        <button type="submit" class="default btn btn-primary hide-xs">
                            <i class="fa fa-save"></i>
                            增加                        
</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 修改用例组模态框 -->
<div class="modal fade" id="updateCaseGroup" tabindex="-1" role="dialog" aria-labelledby="updateCaseGroupLabel"
aria-hidden="true"
data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 900px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="updateCaseGroupLabel">修改用例组</h4>
            </div>
            <div class="modal-body">

                <form class="exform" action="/case_group_update/" method="post" id="casegroupinfo_form">
                    % csrf_token %                    
<input type=‘hidden‘ id=‘case_group_id_u‘
name="form_case_group_id_u" value=‘‘/>
                    <div class="form-container row clearfix">
                        <div class="column form-column main col col-sm-12 form-horizontal">
                            <div class="panel panel-default fieldset">
                                <div class="panel-heading">
                                    <i class=‘icon fa fa-chevron-up chevron‘></i>
                                    <h3 class="panel-title">用例组信息部分</h3>
                                </div>
                                <div class="panel-body ">
                                    <div id="div_id_case_group_name" class="form-group">
                                        <label for="id_case_group_name" class="control-label  requiredField">
                                            用例组名称                                            
<span class="asteriskField">*</span>
                                        </label>
                                        <div class="controls ">
                                            <input type="text" name="form_case_group_name_u" value=""
class="text-field admintextinputwidget form-control" maxlength="32"
required id="case_group_name_u">
                                            <p id="hint_id_case_group_name" class="help-block">
                                                请输入用例组名称                                            
</p>
                                        </div>
                                    </div>
                                    <div id="div_id_case_group_describe" class="form-group">
                                        <label for="id_case_group_describe" class="control-label ">
                                            用例组描述                                        
</label>
                                        <div class="controls ">
                                            <input type="text" name="form_case_group_describe_u" value=""
class="text-field admintextinputwidget form-control" maxlength="255"
id="case_group_describe_u">
                                            <p id="hint_id_case_group_describe" class="help-block">
                                                请输入用例组描述                                            
</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions well well-sm clearfix">
                            <button type="button" class="btn btn-info" data-dismiss="modal">
                                <i class="fa fa-undo"></i>
                                取消                            
</button>
                            <button type="submit" class="default btn btn-primary hide-xs">
                                <i class="fa fa-file-text"></i>
                                修改                            
</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 删除用例组模态框 -->
<div class="modal fade" id="deleteCaseGroup"
tabindex="-1" role="dialog"
aria-labelledby="deleteCaseGroupLabel" aria-hidden="true"
data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="deleteCaseGroupLabel">删除用例组</h4>
            </div>
            <div class="modal-body">

                <form action="/case_group_delete/" method="post">
                    % csrf_token %                    
<input type="hidden"
id="case_group_id_d"
name="form_case_group_id_d"
value=""/>
<!-- 定义一个隐藏的input，用于传值 -->
<div class="alert alert-warning">
                        请确认要删除选中的用例组吗？它所包含的用例也将被删除！                    
</div>
                    <div class="alert alert-danger" id="case_group_name_d">
                    </div>
                    <div class="form-actions well well-sm">
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            <i class="fa fa-undo"></i>
                            取消                        
</button>
                        <button type="submit" class="default btn btn-primary hide-xs">
                            <i class="fa fa-trash-o"></i>
                            删除                        
</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <hr/>
    <footer class="text-center">
        <p>测试部门</p>
    </footer>
</div>

<script>
function updateCaseGroup(obj)         
var tr = $(obj).parent().parent();
var id = tr.children("td#case_group_id_t").text();
var name = tr.children("td#case_group_name_t").text();
var describe = tr.children("td#case_group_describe_t").text();
//取值
$(‘#case_group_id_u‘).val(id);
$(‘#case_group_name_u‘).val(name);
$(‘#case_group_describe_u‘).val(describe);
//赋值
        console.log(id);
        console.log(name);
        console.log(describe);
//打印日志
    
</script>

<script>
function getCaseGroupId(ID, NAME)         
$(‘#case_group_id_d‘).val(ID);
$(‘#case_group_name_d‘).html(NAME);
        console.log(ID);
        console.log(NAME);
        

//向删除模态框传递用例组id与用例组名称
</script>

<!-- 二次确认弹窗 -->
<script>
$(function ()         
$(‘#addCaseGroup .btn-primary‘).on(‘click‘,
function ()                 
alert(‘嘿，确认增加用例组吗？‘);
            );
$(‘#addCaseGroup .btn-info‘).on(‘click‘,
function ()                 
alert(‘嘿，确认取消吗？‘);
            );

$(‘#updateCaseGroup .btn-primary‘).on(‘click‘,
function ()                 
alert(‘嘿，确认修改用例组吗？‘);
            );
$(‘#updateCaseGroup .btn-info‘).on(‘click‘,
function ()                 
alert(‘嘿，确认取消吗？‘);
            );

$(‘#deleteCaseGroup .btn-primary‘).on(‘click‘,
function ()                 
alert(‘嘿，确认删除用例组吗？‘);
            );
$(‘#deleteCaseGroup .btn-info‘).on(‘click‘,
function ()                 
alert(‘嘿，确认取消吗？‘);
            );
    );
</script>

<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.main.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.responsive.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.effect.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.portal.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/selectize/selectize.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.formset.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.page.form.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.themes.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/select2/select2.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/select2/select2_locale_zh-hans.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.widget.select.js"></script>

</body>
</html>

技术图片

 

 

六、用例列表页interface.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="robots" content="NONE,NOARCHIVE"/>

    <title>用例 | 测试平台</title>

    <link href="/static/xadmin/vendor/bootstrap/css/bootstrap.css" type="text/css" media="screen" rel="stylesheet">
    <link rel="stylesheet" type="text/css" id="site-theme" href="/static/xadmin/css/themes/bootstrap-xadmin.css"/>
    <link href="/static/xadmin/vendor/font-awesome/css/font-awesome.css" type="text/css" media="screen"
          rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.main.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.plugins.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.responsive.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/select2/select2.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.widget.editable.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.form.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/bootstrap-datepicker/css/datepicker.css" type="text/css" media="screen"
          rel="stylesheet">
    <link href="/static/xadmin/css/xadmin.plugins.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/selectize/selectize.css" type="text/css" media="screen" rel="stylesheet">
    <link href="/static/xadmin/vendor/selectize/selectize.bootstrap3.css" type="text/css" media="screen"
          rel="stylesheet">

    <script type="text/javascript" src="/static/xadmin/vendor/jquery/jquery.js"></script>

    <style type="text/css">
        .btn-toolbar 
            margin-top: 0;
        

        #content-block.full-content 
            margin-left: 0;
        
    </style>
</head>

<body class="change-list">

<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">测试平台</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav pull-right">
            <li class="dropdown">
                <a class="dropdown-toggle">
                    <strong>欢迎你～ user </strong>
                </a>
            </li>
            <li>
                <a href="/logout/">
                    <i class="show-sm fa fa-sign-out"></i>
                    <span class="hide-sm">退出</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<div id="body-content" class="clearfix row">
    <div id="left-side" class="col-sm-1 col-md-2">

        <div class="panel-group hide-sm nav-sitemenu col-md-2" id="nav-accordion">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h6 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#nav-accordion"
                           href="#nav-panel-1">
                            <i class="fa-fw fa fa-money"></i>
                            接口管理
                        </a>
                    </h6>
                </div>
                <div id="nav-panel-1" class="list-group panel-collapse collapse in">
                    <a href="/product/" class="list-group-item">
                        <i class="fa-fw fa fa-cloud"></i>
                        产品线列表
                    </a>
                    <a href="/module/" class="list-group-item">
                        <i class="fa-fw fa fa-truck"></i>
                        模块列表
                    </a>
                    <a href="/case_group/" class="list-group-item">
                        <i class="fa-fw fa fa-globe"></i>
                        用例组列表
                    </a>
                    <a href="/interface/" class="list-group-item active">
                        <i class="fa-fw fa fa-fire"></i>
                        用例列表
                    </a>
                </div>
            </div>
        </div>

        <ul class="well nav nav-list nav-sitemenu show-sm">
            <li class="app_menu">
                <a href="/home/"><i class="icon fa-fw fa fa-home"></i></a>
                <hr/>
            </li>
            <li class="app_menu dropdown-submenu  active">
                <a href="#" class="section">
                    <i class="icon fa-fw fa fa-money"></i>
                </a>
                <hr/>
                <ul class="dropdown-menu">
                    <li>
                        <a href="/product/">
                            <i class="fa-fw fa fa-cloud"></i>
                            产品线列表
                        </a>
                    </li>
                    <li>
                        <a href="/module/">
                            <i class="fa-fw fa fa-truck"></i>
                            模块列表
                        </a>
                    </li>
                    <li>
                        <a href="/case_group/">
                            <i class="fa-fw fa fa-globe"></i>
                            用例组列表
                        </a>
                    </li>
                    <li class="active">
                        <a href="/interface/">
                            <i class="fa-fw fa fa-fire"></i>
                            用例列表
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="content-block" class="col-sm-11 col-md-10">

        <ul class="breadcrumb">
            <li>
                <a href="/home/">首页</a>
            </li>
            <li>用例列表</li>
        </ul>

        <div class="navbar content-navbar navbar-default navbar-xs" data-toggle="breakpoint"
             data-class-xs="navbar content-navbar navbar-inverse navbar-xs"
             data-class-sm="navbar content-navbar navbar-default navbar-xs">
            <div class="navbar-collapse collapse">

                <form class="navbar-form navbar-left" method="get">
                    % csrf_token %                    
<div class="input-group search-group">
                        <input id="searchbar" class="form-control" type="text" name="form_case_name_s" value=""
placeholder="用例名称" required>
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-search">搜索用例</i>
                            </button>
                        </span>
                    </div>
                </form>

                <div class="navbar-btn pull-right hide-xs">
                    <a href="/interface_add/" class="btn btn-primary">
                        <i class="fa fa-plus"></i>
                        增加用例                    
</a>
                </div>
            </div>
        </div>

        <div class="results table-responsive">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th scope="col" class="sortable sorted ascending">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                用例ID                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle" style="color: red">
                                用例组                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                用例名称                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                接口地址                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                请求方式                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                请求参数                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                请求头                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                请求体类型                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                请求体                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                预期结果                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                响应断言方式                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                开启正则表达式                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                正则表达式变量名                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                正则表达式模板                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                响应代码                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                实际结果                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                是否通过                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                创建时间                            
</a>
                        </div>
                    </th>
                    <th scope="col" class="sortable">
                        <div class="dropdown pull-left">
                            <a class="dropdown-toggle">
                                修改时间                            
</a>
                        </div>
                    </th>
                    <th scope="col">
                        <span style="color: green">修改</span>
                    </th>
                    <th scope="col">
                        <span style="color: blue">删除</span>
                    </th>
                </tr>
                </thead>
                <tbody>
                % for i in i_list %                    
<tr class="grid-item">
                        <td> i.id </td>
                        <td style="color: red"> i.case_group </td>
                        <td> i.case_name </td>
                        <td> i.interface_url </td>
                        <td> i.request_mode </td>
                        <td> i.request_parameter </td>
                        <td> i.request_head </td>
                        <td> i.body_type </td>
                        <td> i.request_body </td>
                        <td> i.expected_result </td>
                        <td> i.response_assert </td>
                        <td> i.regular_expression </td>
                        <td> i.regular_variable </td>
                        <td> i.regular_template </td>
                        <td> i.response_code </td>
                        <td> i.actual_result </td>
                        <td>
                            <i class="fa fa-question-circle muted"></i>
                             i.pass_status                         
</td>
                        <td class="nowrap"> i.create_time </td>
                        <td class="nowrap"> i.update_time </td>
                        <td>
                            <a class="icon fa fa-edit" style="color: green" href="/interface_update/">
                                修改                            
</a>
                        </td>
                        <td>
                            <a class="icon fa fa-times" style="color: blue" href="/interface_delete/">
                                删除                            
</a>
                        </td>
                    </tr>
                % endfor %                
</tbody>
            </table>
        </div>

        <ul class="pagination">
            <li>
                <span>共<span class="text-success"> i_count </span>用例</span>
            </li>
            <li class="step-links">
                % if i_list.has_previous %                    
<a href="?page=1">首页</a>
                    <a href="?page= i_list.previous_page_number ">上一页</a>
                % endif %                

<span class="current">
                    第 i_list.number 页 共 i_list.paginator.num_pages 页                
</span>

                % if i_list.has_next %                    
<a href="?page= i_list.next_page_number ">下一页</a>
                    <a href="?page= i_list.paginator.num_pages ">尾页</a>
                % endif %            
</li>
        </ul>

    </div>
</div>


<div id="footer">
    <hr/>
    <footer class="text-center">
        <p>测试部门</p>
    </footer>
</div>

<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.main.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.responsive.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/jquery-ui/jquery.ui.effect.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/selectize/selectize.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.quick-form.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.editable.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.details.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.bookmark.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.filters.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.actions.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.page.list.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.plugin.themes.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/select2/select2.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.widget.datetime.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.page.form.js"></script>
<script type="text/javascript" src="/static/xadmin/vendor/select2/select2_locale_zh-hans.js"></script>
<script type="text/javascript" src="/static/xadmin/js/xadmin.widget.select.js"></script>

</body>
</html>

技术图片

 

以上是关于基于Django的轻量级接口测试平台二的主要内容，如果未能解决你的问题，请参考以下文章

基于 HttpRunner 的接口测试平台--HttpRunnerManager

基于HttpRunner的接口自动化测试平台HttpRunnerManager

自动化测试平台：开发用户认证接口

dapi 基于Django的轻量级测试平台六 怎样使用压测功能

开源接口测试平台

Django+Vue+Docker搭建接口测试平台实战