一、准备静态资源
将项目使用到的静态资源拷贝到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;"> 微电影 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> 搜索</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> 电影</a> 58 </li> 59 <li> 60 <a class="curlink" href="login.html"><span class="glyphicon glyphicon-log-in"></span> 登录</a> 61 </li> 62 <li> 63 <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span> 注册</a> 64 </li> 65 <li> 66 <a class="curlink" href="logout.html"><span class="glyphicon glyphicon-log-out"></span> 退出</a> 67 </li> 68 <li> 69 <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span> 会员</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 © 2017 flaskmovie.xxx.com 京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/
【结束】