基於python flask的自動化測試平臺(一)--模板繼承與導航欄構造
阿新 • • 發佈：2019-01-05
模板繼承使用的是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頁面
index頁面
ok模板繼承搞定了，給我省去了很多的麻煩