python操做三大主流數據庫(5)python操做mysql⑤使用Jinja2模板提取優化頁面展現

時間 2019-11-10

標籤 python 三大主流數據庫 mysql 使用 jinja2 jinja 模板提取優化頁面展現欄目 Python 简体版

原文原文鏈接

python操做mysql⑤使用Jinja2模板提取優化頁面展現javascript

在templates目錄下的index.html、cat.html等頁面有一些共同的元素，代碼比較冗餘
能夠使用模板提取公共代碼，在各網頁中集成模板便可，這樣會是代碼看起來更加優雅css

1.模板頁面home_base.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-3.3.7-dist/css/bootstrap.min.css')}}">
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='datatables.min.css')}}">
  <script type="text/javascript" src="{{ url_for('static', filename='jquery-3.3.1.min.js')}}"></script>
  <script type="text/javascript">
        $(document).ready(function() {
            $('#example').DataTable();
        } );
  </script>
  {% block head %}
  <title>首頁</title>
  {% endblock %}
</head>
<body>
<div class="container">
    <h1>新聞列表</h1>
  <nav class="navbar navbar-inverse">
      <!-- 頁面頭部 -->
      <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          
      </div>
      <div id="navbar-menu" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
              <li class="active"><a href="/">首頁</a></li>
              <li><a href="{{url_for('cat', name='推薦')}}">推薦</a></li>
              <li><a href="{{url_for('cat', name='百家')}}">百家</a></li>
              <li><a href="{{url_for('cat', name='推薦')}}">本地</a></li>
              <li><a href="{{url_for('cat', name='圖片')}}">圖片</a></li>
          </ul>
      </div>
  </nav>

<!-- 新聞內容部分 -->
{% block content %}
<!-- 內容區域 -->
{% endblock %}

</div>
{% block extrajs %}
<!-- 其餘腳本 -->
{% endblock %}
</body>
</html>

2.首頁index.htmljava

{% extends 'home_base.html' %}
{% block content%}

<div id="content" class="row-fluid">
        <div class="col-md-12">
        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>圖片</th>
                <th>簡介</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
            </tr>
        </tfoot>
        <tbody>
        {% for obj in news_list %}
        <tr>
              <td>
              <img width=120 height=60 src="{{ obj.image }}" alt="圖片">
              </td>
              <td>
              <p>
                <a href="{{ url_for('detail', pk=obj.id) }}">{{ obj.title }}</a>
                <small>{{ obj.created_at }}</small>
              </p>
              </td>
        </tr>
        {% endfor %}
        </tbody>
        </table>
        </div>
</div>
</div>
{% endblock %}
{% block extrajs %}
<script type="text/javascript" src="{{ url_for('static', filename = 'datatables.min.js')}}"></script>
{% endblock %}

3.詳情頁detail.htmlpython

{% extends 'home_base.html' %}

  {% block head %}
  <title>新聞詳情</title>
  {% endblock %}
{% block content%}


<div id="content" class="row-fluid">
        <div class="col-md-9">
            <h2>新聞詳情，來自新聞id> {{obj.id}}</h2>

        </div>

         <div class="col-md-12">
        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>具體新聞內容</th>
            </tr>
        </thead>

        <tbody>

        <tr>
              <td>
              <img width=600 height=500 src="{{ obj.image }}" alt="圖片">
              </td>
              <td>
        </tr>

        <tr>

              <td>
              <p>
                {{ obj.title }}
                <small>{{ obj.created_at }}</small>
              </p>
              </td>
        </tr>

        </tbody>
        </table>
        </div>
</div>

</div>
{% endblock %}
</body>
</html>

4.專欄頁面cat.htmlmysql

{% extends 'home_base.html' %}
{% block head%}
<title>{{ name }}</title>
{% endblock %}
{% block content%}

<div id="content" class="row-fluid">
        <div class="col-md-12">
        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>圖片</th>
                <th>簡介</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
            </tr>
        </tfoot>
        <tbody>
        {% for obj in news_list %}
        <tr>
              <td>
              <img width=120 height=60 src="{{ obj.image }}" alt="圖片">
              </td>
              <td>
              <p>
                <a href="{{ url_for('detail', pk=obj.id) }}">{{ obj.title }}</a>
                <small>{{ obj.created_at }}</small>
              </p>
              </td>
        </tr>
        {% endfor %}
        </tbody>
        </table>
        </div>
</div>
</div>
{% endblock %}
{% block extrajs %}
<script type="text/javascript" src="{{ url_for('static', filename = 'datatables.min.js')}}"></script>
{% endblock %}