(4)Flask项目模板渲染初体验

一、准备静态资源

将项目使用到的静态资源拷贝到static目录

二、创建前台首页html

创建templates/home/home.html页面，内容包含导航和底部版权两部分，中间内容区域为模板标签。

注意静态资源路径部分使用了模板标签"{{url_for()}}"来访问static目录下的静态资源，它的第一个参数是静态资源目录static，第二个参数是static目录下面文件的名称：

  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="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>

三、创建首页内容区域

创建templates/home/index.html内容，内容部分简单输出一句"Hello world!!!"：

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

四、修改视图

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

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")

这里使用到了模板渲染引擎包render_template。

五、运行查看效果

运行manage.py，浏览器访问 http://127.0.0.1:5000/

【结束】