基于python flask的自动化测试平台(一)--模板继承与导航栏构造

模板继承使用的是flask中的模板继承，在基础模板中使用{% block content %}{% endblock %}，然后在其他模板中通过

{% extends "base.html" %}
{% block content%}

这里为页面模板区域

{% endblock %}

这样就能实现模板的继承，从而在多个页面中引用基础模板，而不需要在每个页面都写同样的代码。

这里导航栏的代码就需要写在基础模板base.html中，因为其他页面都会有导航栏，下面请看代码

先定义app/templates/base.html

<html>
    <head>
        <script type="text/javascript" src = "{{url_for('static', filename='jquery.js')}}"></script>
        <script type="text/javascript" src = "{{url_for('static', filename='bootstrap/js/bootstrap.min.js')}}"></script>
        <script type="text/javascript" src = "{{url_for('static', filename='bootstrap/jquery.min.js')}}"></script>
        <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap/css/bootstrap.min.css')}}">
        <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap/css/bootstrap.css')}}">
        <!--如果页面模板在后台传入了标题，那页面的标题就是（传入标题+ '- 测试平台'），否则就是'测试平台'-->
        {% if title %}
        <title>{{ title}} - 测试平台</title>
        {% else %}
        <title>测试平台</title>
        {% endif %}
        <style>
            h2{text-align: center}
            a{font-size: 17px}
            sub{font-size: 18px}
        </style>
    </head>
    <h2>测试平台</h2>
    <!--导航栏的实现是用了bootstrap的navbar-->
    <div class="navbar navbar-inverse" role="navigation">
        <div class="navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a class="home" href="#" style="color: white">主页</a> </li>
                <li><a class="home" href="#" style="color: white">项目管理</a> </li>
                <li><a class="home" href="#" style="color: white">模块管理</a> </li>
                <li><a class="home" href="#" style="color: white">用例管理</a> </li>
                <li><a class="home" href="#" style="color: white">测试报告</a> </li>
                <li>
                    <div class="btn-group">
                        <button type="button" class="btn dropdown-toggle" style="margin-top: 7px;font-size: 16px;color: white;background: black" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            UI工具
                        </button>
                        <ul class="dropdown-menu" style="background: black">
                            <li><a href="#" style="color: white">人员新增</a> </li>
                            <li><a href="#" style="color: white">资格注册</a> </li>
                        </ul>
                    </div>
                </li>
                <li id="right">
                    {% if not session.logged_in %}
                    <a class="link" href="#" style="color: white">登录</a>
                    {% else %}
                    <a class="link" href="#" style="color: white">退出</a>
                    {% endif %}
                </li>
            </ul>
        </div>
    </div>
    <body>
        <div id="body">
            {% block content %}{% endblock %}
        </div>
    </body>
</html>

定义和基础模板了，那么在其他页面只要引用就好了，现在将基础模板引用到主页app/templates/index.html上

{% extends "base.html" %}
{% block content%}
<html>
    <head>
        <title>{{ title }}</title>
    </head>
    <body>
        <h1>
            Hello,world
        </h1>
    </body>
</html>
{% endblock %}

以及app/templates/login.html上

{% extends "base.html" %}
{% block content%}
<head>
    <style type="text/css">
        .container{
            width: 40%;
            height: 50%;
            font-size: 16px;
            background: #F2F2F2;
            border-radius: 7%;
        }
        #sub{font-size: 16px}
    </style>
</head>
<div class="container">
    <h2>登录</h2>
    <form action="{{ url_for('login')}}" method="post" name="login" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">账号:</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="username"><br><br>
            </div>
            <div class="col-sm-1"></div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">密码:</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="password"><br><br>
            </div>
            <div class="col-sm-1"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-8">
                <input class="form-control btn btn-primary" type="submit" id="sub" value="提交">
            </div>
            <div class="col-sm-1"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
                {% if error %}
                <p class="error">
                    <strong>Error:</strong>{{ error }}
                </p>
                {% endif %}
            </div>
        </div>
    </form>
</div>
{% endblock %}

然后刷新页面重新进入/login与/index查看

login页面

基于python flask的自动化测试平台(一)--模板继承与导航栏构造

index页面

基于python flask的自动化测试平台(一)--模板继承与导航栏构造

ok模板继承搞定了，给我省去了很多的麻烦

基于python flask的自动化测试平台(一)--模板继承与导航栏构造

相关推荐