码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2019-09-18 17:29:54      阅读：159      评论：0      收藏：0      [点我收藏+]

标签：step   cloud   dism   bar   required   python   login   inter   tst   

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的轻量级接口测试平台二

标签：step   cloud   dism   bar   required   python   login   inter   tst   

原文地址：https://www.cnblogs.com/yjlch1016/p/11543808.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！