(4)Flask項目模板渲染初體驗

時間 2019-11-10

標籤 flask 項目模板渲染體驗欄目 Python 简体版

原文原文鏈接

1、準備靜態資源css

將項目使用到的靜態資源拷貝到static目錄
html

2、建立前臺首頁htmljquery

建立templates/home/home.html頁面，內容包含導航和底部版權兩部分，中間內容區域爲模板標籤。web

注意靜態資源路徑部分使用了模板標籤"{{url_for()}}"來訪問static目錄下的靜態資源，它的第一個參數是靜態資源目錄static，第二個參數是static目錄下面文件的名稱：flask

  1 <!doctype html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="renderer" content="webkit">
  7     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8     <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
  9     <title>微電影</title>
 10     <link rel="shortcut icon" href="{{ url_for('static', filename='base/images/logo.png') }}">
 11     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}">
 12     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap-movie.css') }}">
 13     <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
 14     <style>
 15         .navbar-brand>img {
 16             display: inline;
 17         }
 18 
 19     </style>
 20     <style>
 21         .media{
 22             padding:3px;
 23             border:1px solid #ccc
 24         }
 25 
 26     </style>
 27 </head>
 28 
 29 <body>
 30 <!--導航-->
 31 <nav class="navbar navbar-default navbar-fixed-top">
 32     <div class="container">
 33         <!--小屏幕導航按鈕和logo-->
 34         <div class="navbar-header">
 35             <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 36                 <span class="icon-bar"></span>
 37                 <span class="icon-bar"></span>
 38                 <span class="icon-bar"></span>
 39             </button>
 40             <a href="index.html" class="navbar-brand" style="width:250px;">
 41                 <img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;微電影
 42             </a>
 43         </div>
 44         <!--小屏幕導航按鈕和logo-->
 45         <!--導航-->
 46         <div class="navbar-collapse collapse">
 47             <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
 48                 <div class="form-group input-group">
 49                     <input type="text" class="form-control" placeholder="請輸入電影名！">
 50                     <span class="input-group-btn">
 51                         <a class="btn btn-default" href="search.html"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
 52                     </span>
 53                 </div>
 54             </form>
 55             <ul class="nav navbar-nav navbar-right">
 56                 <li>
 57                     <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span>&nbsp;電影</a>
 58                 </li>
 59                 <li>
 60                     <a class="curlink" href="login.html"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登陸</a>
 61                 </li>
 62                 <li>
 63                     <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span>&nbsp;註冊</a>
 64                 </li>
 65                 <li>
 66                     <a class="curlink" href="logout.html"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
 67                 </li>
 68                 <li>
 69                     <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp;會員</a>
 70                 </li>
 71             </ul>
 72         </div>
 73         <!--導航-->
 74 
 75     </div>
 76 </nav>
 77 <!--導航-->
 78 <!--內容-->
 79 <div class="container" style="margin-top:76px">
 80     {% block content %}{% endblock %}
 81 </div>
 82 <!--內容-->
 83 <!--底部-->
 84 <footer>
 85     <div class="container">
 86         <div class="row">
 87             <div class="col-md-12">
 88                 <p>
 89                     ©&nbsp;2017&nbsp;flaskmovie.xxx.com&nbsp;京ICP備 13046642號-2
 90                 </p>
 91             </div>
 92         </div>
 93     </div>
 94 </footer>
 95 <!--底部-->
 96 <script src="{{ url_for('static', filename='base/js/jquery.min.js') }}"></script>
 97 <script src="{{ url_for('static', filename='base/js/bootstrap.min.js') }}"></script>
 98 <script src="{{ url_for('static', filename='base/js/jquery.singlePageNav.min.js') }}"></script>
 99 <script src="{{ url_for('static', filename='base/js/wow.min.js') }}"></script>
100 <script src="{{ url_for('static', filename='lazyload/jquery.lazyload.min.js') }}"></script>
101 <script src="http://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
102 <script>
103     $(function() {
104         new WOW().init();
105     })
106 
107 </script>
108 <script>
109     $(document).ready(function() {
110         $("img.lazy").lazyload({
111             effect: "fadeIn"
112         });
113     });
114 
115 </script>
116 </body>
117 </html>

3、建立首頁內容區域bootstrap

建立templates/home/index.html內容，內容部分簡單輸出一句"Hello world!!!"：瀏覽器

{% extends "home/home.html" %}
{% block content %}
<h1>hello world!!!</h1>
{% endblock %}

4、修改視圖app

修改app/home/views.py文件：curl

1 # coding:utf8
2 from . import home
3 from flask import render_template
4 
5 @home.route("/")
6 def index():
7     return render_template("home/index.html")