Flask 構建微電影視訊網站(二)
阿新 • • 發佈：2018-11-19
搭建前臺頁面
前臺佈局搭建
將static中的檔案拷貝到專案的static目錄下
在app/templates/home下新建home.html,當作基礎模板,並修改靜態資源連結
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no"> <title>微電影</title> <link rel="shortcut icon" href="{{ url_for('static', filename='base/images/logo.png') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap-movie.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}"> <style> .navbar-brand>img { display: inline; } </style> <style> .media{ padding:3px; border:1px solid #ccc } </style> </head> <body> <!--導航--> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!--小螢幕導航按鈕和logo--> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand" style="width:250px;"> <img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;"> 微電影 </a> </div> <!--小螢幕導航按鈕和logo--> <!--導航--> <div class="navbar-collapse collapse"> <form class="navbar-form navbar-left" role="search" style="margin-top:18px;"> <div class="form-group input-group"> <input type="text" class="form-control" placeholder="請輸入電影名！"> <span class="input-group-btn"> <a class="btn btn-default" href="search.html"><span class="glyphicon glyphicon-search"></span> 搜尋</a> </span> </div> </form> <ul class="nav navbar-nav navbar-right"> <li> <a class="curlink" href="index.html"><span class="glyphicon glyphicon-film"></span> 電影</a> </li> <li> <a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span> 登入</a> </li> <li> <a class="curlink" href="register.html"><span class="glyphicon glyphicon-plus"></span> 註冊</a> </li> <li> <a class="curlink" href="{{ url_for('home.lougot') }}"><span class="glyphicon glyphicon-log-out"></span> 退出</a> </li> <li> <a class="curlink" href="user.html"><span class="glyphicon glyphicon-user"></span> 會員</a> </li> </ul> </div> <!--導航--> </div> </nav> <!--導航--> <!--內容--> <div class="container" style="margin-top:120px"> {% block content %} {% endblock %} </div> <!--內容--> <!--底部--> <footer> <div class="container"> <div class="row"> <div class="col-md-12"> <p> © 2018 movie.cht3.top 京ICP備 13046642號-2 </p> </div> </div> </div> </footer> <!--底部--> <script src="{{ url_for('static', filename='base/js/jquery.min.js') }}"></script> <script src="{{ url_for('static', filename='base/js/bootstrap.min.js') }}"></script> <script src="{{ url_for('static', filename='base/js/jquery.singlePageNav.min.js') }}"></script> <script src="{{ url_for('static', filename='base/js/wow.min.js') }}"></script> <script src="{{ url_for('static', filename='lazyload/jquery.lazyload.min.js') }}"></script> <script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script> <script> $(function() { new WOW().init(); }) </script> <script> $(document).ready(function() { $("img.lazy").lazyload({ effect: "fadeIn" }); }); </script> </body> </html>
新建index.html,繼承home.html
{% extends 'home/home.html' %}
{% block content %}
<h1>hello,world</h1>
{% endblock %}修改檢視函式
app/home/views.py
@home.route('/')
def index():
return render_template('home/index.html')執行,瀏覽器訪問,就可看到主頁面了
會員登入頁面搭建
新建login.html
{% extends 'home/home.html' %} {% block content %} <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-log-in"></span> 會員登入</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_contact"><span class="glyphicon glyphicon-user"></span> 賬號</label> <input id="input_contact" class="form-control input-lg" placeholder="使用者名稱/郵箱/手機號碼" name="contact" type="text" autofocus> </div> <div class="col-md-12" id="error_contact"></div> <div class="form-group"> <label for="input_password"><span class="glyphicon glyphicon-lock"></span> 密碼</label> <input id="input_password" class="form-control input-lg" placeholder="密碼" name="password" type="password" value=""> </div> <div class="col-md-12" id="error_password"></div> <a href="user.html" class="btn btn-lg btn-success btn-block">登入</a> </fieldset> </form> </div> </div> </div> </div> {% endblock %}
建立檢視函式
@home.route('/login/')
def login():
return render_template('home/login.html')
@home.route('/lougot/')
def lougot():
return redirect(url_for('home.index'))瀏覽器訪問即可看到登陸頁面
會員註冊頁面搭建
新建regist.html
{% extends 'home/home.html' %} {% block content %} <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> 會員註冊</h3> </div> <div class="panel-body"> <form role="form"> <fieldset> <div class="form-group"> <label for="input_name"><span class="glyphicon glyphicon-user"></span> 暱稱</label> <input id="input_name" class="form-control input-lg" placeholder="暱稱" name="name" type="text" autofocus> </div> <div class="col-md-12" id="error_name"></div> <div class="form-group"> <label for="input_email"><span class="glyphicon glyphicon-envelope"></span> 郵箱</label> <input id="input_email" class="form-control input-lg" placeholder="郵箱" name="email" type="email" autofocus> </div> <div class="col-md-12" id="error_email"></div> <div class="form-group"> <label for="input_phone"><span class="glyphicon glyphicon-phone"></span> 手機</label> <input id="input_phone" class="form-control input-lg" placeholder="手機" name="phone" type="text" autofocus> </div> <div class="col-md-12" id="error_phone"></div> <div class="form-group"> <label for="input_password"><span class="glyphicon glyphicon-lock"></span> 密碼</label> <input id="input_password" class="form-control input-lg" placeholder="密碼" name="password" type="password" value=""> </div> <div class="col-md-12" id="error_password"></div> <div class="form-group"> <label for="input_repassword"><span class="glyphicon glyphicon-lock"></span> 確認密碼</label> <input id="input_repassword" class="form-control input-lg" placeholder="確認密碼" name="repassword" type="password" value=""> </div> <div class="col-md-12" id="error_repassword"></div> <a href="user.html" class="btn btn-lg btn-success btn-block">註冊</a> </fieldset> </form> </div> </div> </div> </div> {% endblock %}
建立檢視函式
@home.route('/regist/')
def regist():
return render_template('home/regist.html')修改home.html中的連結
<li>
<a class="curlink" href="{{ url_for('home.regist') }}"><span class="glyphicon glyphicon-plus"></span> 註冊</a>
</li>訪問即可看到註冊頁面
會員中心頁面搭建
新建menu.html, 會員中心左側選單欄
<div class="col-md-3">
<div class="list-group">
<a id="home_user" href="{{ url_for('home.user') }}" class="list-group-item">
<span class="glyphicon glyphicon-user"></span> 會員中心
</a>
<a id="home_pwd" href="{{ url_for('home.pwd') }}" class="list-group-item">
<span class="glyphicon glyphicon-lock"></span> 修改密碼
</a>
<a id="home_comments" href="{{ url_for('home.comments') }}" class="list-group-item">
<span class="glyphicon glyphicon-comment"></span> 評論記錄
</a>
<a id="home_loginlog" href="{{ url_for('home.loginlog') }}" class="list-group-item">
<span class="glyphicon glyphicon-calendar"></span> 登入日誌
</a>
<a id="home_moviecol" href="{{ url_for('home.moviecol') }}" class="list-group-item">
<span class="glyphicon glyphicon-heart"></span> 收藏電影
</a>
</div>
</div>新建檢視函式
@home.route('/user/')
def user():
return render_template('home/user.html')
@home.route('/pwd/')
def pwd():
return render_template('home/pwd.html')
@home.route('/comments/')
def comments():
return render_template('home/comments.html')
@home.route('/loginlog/')
def loginlog():
return render_template('home/loginlog.html')
@home.route('/moviecol/')
def moviecol():
return render_template('home/moviecol.html')根據檢視函式新建HTML
app/templates/home/user.html
{% extends 'home/home.html' %}
{% block css %}
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
padding-right: 3px;
padding-left: 3px;
}
</style>
{% endblock %}
{% block content %}
{% include 'home/menu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 會員中心</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_name"><span class="glyphicon glyphicon-user"></span> 暱稱</label>
<input id="input_name" class="form-control" placeholder="暱稱" name="name" type="text" autofocus value="jinlong">
</div>
<div class="col-md-12" id="error_name"></div>
<div class="form-group">
<label for="input_email"><span class="glyphicon glyphicon-envelope"></span> 郵箱</label>
<input id="input_email" class="form-control" placeholder="郵箱" name="email" type="email" autofocus value="[email protected]">
</div>
<div class="col-md-12" id="error_email"></div>
<div class="form-group">
<label for="input_phone"><span class="glyphicon glyphicon-phone"></span> 手機</label>
<input id="input_phone" class="form-control" placeholder="手機" name="phone" type="text" autofocus value="13700632835">
</div>
<div class="col-md-12" id="error_phone"></div>
<div class="form-group">
<label for="input_face"><span class="glyphicon glyphicon-picture"></span> 頭像</label>
<img src="holder.js/100x100" class="img-responsive img-rounded">
<a class="btn btn-primary" style="margin-top:6px;"><span class="glyphicon glyphicon-open"></span> 上傳頭像</a>
<input id="input_face" class="form-control" name="face" type="hidden" autofocus>
</div>
<div class="col-md-12" id="error_face"></div>
<div class="form-group">
<label for="input_info"><span class="glyphicon glyphicon-edit"></span> 簡介</label>
<textarea class="form-control" rows="10" id="input_info">十年窗下無人問，一舉成名天下知</textarea>
</div>
<div class="col-md-12" id="error_info"></div>
<a href="user.html" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span> 儲存修改</a>
</fieldset>
</form>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#home_user").addClass("active");
})
</script>
{% endblock %}app/templates/home/pwd.html
{% extends 'home/home.html' %}
{% block css %}
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
padding-right: 3px;
padding-left: 3px;
}
</style>
{% endblock %}
{% block content %}
{% include 'home/menu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 修改密碼</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span> 舊密碼</label>
<input id="input_oldpwd" class="form-control" placeholder="舊密碼" name="oldpwd" type="password" autofocus>
</div>
<div class="col-md-12" id="error_oldpwd"></div>
<div class="form-group">
<label for="input_newpwd"><span class="glyphicon glyphicon-lock"></span> 新密碼</label>
<input id="input_newpwd" class="form-control" placeholder="新密碼" name="newpwd" type="password" autofocus>
</div>
<div class="col-md-12" id="error_newpwd"></div>
<a href="login.html" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> 修改密碼</a>
</fieldset>
</form>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#home_pwd").addClass("active");
})
</script>
{% endblock %}app/templates/home/comments.html
{% extends 'home/home.html' %}
{% block css %}
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
padding-right: 3px;
padding-left: 3px;
}
</style>
{% endblock %}
{% block content %}
{% include 'home/menu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 評論記錄</h3>
</div>
<div class="panel-body">
<ul class="commentList">
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
評論於
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
</div>
</header>
<div class="comment-body">
<p>這電影真好看！</p>
</div>
</div>
</li>
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
評論於
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
</div>
</header>
<div class="comment-body">
<p>這電影真好看！</p>
</div>
</div>
</li>
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
評論於
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
</div>
</header>
<div class="comment-body">
<p>這電影真好看！</p>
</div>
</div>
</li>
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
評論於
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
</div>
</header>
<div class="comment-body">
<p>這電影真好看！</p>
</div>
</div>
</li>
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
評論於
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51</time>
</div>
</header>
<div class="comment-body">
<p>這電影真好看！</p>
</div>
</div>
</li>
</ul>
<div class="col-md-12 text-center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="First">
<span aria-hidden="true">首頁</span>
</a>
</li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一頁</span>
</a>
</li>
<li><a href="#">1 / 10</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下一頁</span>
</a>
</li>
<li>
<a href="#" aria-label="Last">
<span aria-hidden="true">尾頁</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#home_comments").addClass("active");
})
</script>
{% endblock %}app/templates/home/loginlog.html
{% extends 'home/home.html' %}
{% block css %}
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
padding-right: 3px;
padding-left: 3px;
}
</style>
{% endblock %}
{% block content %}
{% include 'home/menu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 登入日誌</h3>
</div>
<div class="panel-body">
<table class="table table-bordered">
<tr>
<td style="width:10%">編號</td>
<td style="width:30%">登入時間</td>
<td style="width:30%">登入IP</td>
<td style="width:30%">登入地址</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>雲南昆明</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>雲南昆明</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>雲南昆明</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>雲南昆明</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>雲南昆明</td>
</tr>
</table>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#home_loginlog").addClass("active");
})
</script>
{% endblock %}app/templates/home/moviecol.html
{% extends 'home/home.html' %}
{% block css %}
<style>
.navbar-brand>img {
display: inline;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
padding-right: 3px;
padding-left: 3px;
}
.media{
padding:3px;
border:1px solid #ccc
}
</style>
{% endblock %}
{% block content %}
{% include 'home/menu.html' %}
<div class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 收藏電影</h3>
</div>
<div class="panel-body">
<div class="col-md-12">
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="環太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻，研製出了高大的機器戰士與來犯怪獸進行對抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="環太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻，研製出了高大的機器戰士與來犯怪獸進行對抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="環太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻，研製出了高大的機器戰士與來犯怪獸進行對抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="環太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻，研製出了高大的機器戰士與來犯怪獸進行對抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="環太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻，研製出了高大的機器戰士與來犯怪獸進行對抗的故事。
</div>
</div>
</div>
<div class="col-md-12 text-center" style="margin-top:6px;">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="First">
<span aria-hidden="true">首頁</span>
</a>
</li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一頁</span>
</a>
</li>
<li><a href="#">1 / 10</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下一頁</span>
</a>
</li>
<li>
<a href="#" aria-label="Last">
<span aria-hidden="true">尾頁</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#home_moviecol").addClass("active");
})
</script>
{% endblock %}瀏覽器訪問即可看到會員中心頁面了
電影列表頁面搭建
新建檢視函式,index的檢視函式前面已經寫過了
@home.route('/animation/')
def animation():
return render_template('home/animation.html')新建app/templates/home/layout.html檔案,當作index.html的基模板
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
<title>微電影</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='base/images/logo.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap-movie.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">
<style>
.navbar-brand>img {
display: inline;
}
.media{
padding:3px;
border:1px solid #ccc
}
</style>
{% block css %}{% endblock %}
</head>
<body>
<!--導航-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--小螢幕導航按鈕和logo-->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand" style="width:250px;">
<img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;"> 微電影
</a>
</div>
<!--小螢幕導航按鈕和logo-->
<!--導航-->
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="請輸入電影名！">
<span class="input-group-btn">
<a class="btn btn-default" href="search.html"><span class="glyphicon glyphicon-search"></span> 搜尋</a>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="curlink" href="{{ url_for('home.index') }}"><span class="glyphicon glyphicon-film"></span> 電影</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span> 登入</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.regist') }}"><span class="glyphicon glyphicon-plus"></span> 註冊</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.lougot') }}"><span class="glyphicon glyphicon-log-out"></span> 退出</a>
</li>
<li>
<a class="curlink" href="{{ url_for('home.user') }}"><span class="glyphicon glyphicon-user"></span> 會員</a>
</li>
</ul>
</div>
<!--導航-->
</div>
</nav>
<!--導航-->
<!--內容-->
{% block content %}
{% endblock %}
<!--內容-->
<!--底部-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
© 2018 movie.cht3.top 京ICP備 13046642號-2
</p>
</div>
</div>
</div>
</footer>
<!--底部-->
<script src="{{ url_for('static', filename='base/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/jquery.singlePageNav.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/wow.min.js') }}"></script>
<script src="{{ url_for('static', filename='lazyload/jquery.lazyload.min.js') }}"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script>
$(function() {
new WOW().init();
})
</script>
<script>
$(document).ready(function() {
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
</script>
{% block js %}
{% endblock %}
</body>
</html>新建app/templates/home/animation.html,輪播圖
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>熱映電影</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='anim/css/style.css') }}">
</head>
<body>
<!--輪播圖 開始 -->
<div class="main_banner">
<div class="main_banner_wrap">
<canvas id="myCanvas" width="150" height="150"></canvas>
<div class="main_banner_box" id="m_box">
<a href="javascript:void(0)" class="banner_btn js_pre">
<span class="banner_btn_arrow"><i></i></span>
</a>
<a href="javascript:void(0)" class="banner_btn btn_next js_next">
<span class="banner_btn_arrow"><i></i></span>
</a>
<ul>
<li id="imgCard0">
<a href=""><span style="opacity:0;"></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0020150102211033.jpg') }}" alt="">
<p style="bottom:0">周杰倫粉絲版MV</p>
</li>
<li id="imgCard1">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0120150101183428.jpg') }}" alt="">
<p>樂侃有聲節目第二期</p>
</li>
<li id="imgCard2">
<a href=""><span style="opacity:0.4;" ></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0320150101183351.jpg') }}" alt="">
<p>樂見大牌：”榮“耀之聲，”維“我獨尊</p>
</li>
<li id="imgCard3">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0420150101224343.jpg') }}" alt="">
<p>王力巨集四年心血結晶</p>
</li>
<li id="imgCard4">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="{{ url_for('static', filename='anim/main_banner/big0720150102210934.jpg') }}" alt="">
<p>MV精選：《武媚》女神團美豔大比拼</p>
</li>
</ul>
<!--火狐倒影圖層-->
<p id="rflt"></p>
<!--火狐倒影圖層-->
</div>
<!--序列號按鈕-->
<div class="btn_list">
<span class="curr"></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<!--輪播圖 結束 -->
<script type="text/javascript" src="{{ url_for('static', filename='anim/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='anim/js/script.js') }}"></script>
</body>
</html>新建app/static/anim資料夾,將animation中的靜態資源拷貝到這個資料夾下
修改index.html內容
{% extends 'home/layout.html' %}
{% block content %}
<!--熱門電影-->
<section id="hotmovie" style="margin-top:76px">
<div class="container">
<div class="row wow fadeInRight" data-wow-delay="0.6s">
<div class="row">
<iframe class="wow fadeIn" width="100%" height="375px" frameborder=0 scrolling=no src="{{ url_for('home.animation') }}"></iframe>
</div>
</div>
</div>
</section>
<!--熱門電影-->
<!--電影列表-->
<section id="movielist">
<div class="container">
<div class="row wow fadeIn" data-wow-delay="0.6s">
<div class="col-md-12 table-responsive">
<table class="table text-left table-bordered" id="movietags">
<tr>
<td style="width:10%;">電影標籤</td>
<td style="width:90%;">
<a class="label label-info"><span class="glyphicon glyphicon-tag"> 標籤一</span></a>
<a class="label label-info"><span class="glyphicon glyphicon-tag"> 標籤一</span></a>
<a class="label label-info"><span class="glyphicon glyphicon-tag"> 標籤一</span></a>
<a class="label label-info"><span class="glyphicon glyphicon-tag"> 標籤一</span></a>
<a class="label label-info"><span class="glyphicon glyphicon-tag"> 標籤一</span></a>
</tr>
<tr>
<td>電影星級</td>
<td>
<a class="label label-warning"><span class="glyphicon glyphicon-star"> 一星</span></a>
<a class="label label-warning"><span class="glyphicon glyphicon-star"> 二星</span></a>
<a class="label label-warning"><span class="glyphicon glyphicon-star"> 三星</span></a>
<a class="label label-warning"><span class="glyphicon glyphicon-star"> 四星</span></a>
<a class="label label-warning"><span class="glyphicon glyphicon-star"> 五星</span></a>
</td>
</tr>
<tr>
<td>上映時間</td>
<td>
<a class="label label-default"><span class="glyphicon glyphicon-time"> 最近</span></a>
<a class="label label-default"><span class="glyphicon glyphicon-time"> 2017</span></a>
<a class="label label-default"><span class="glyphicon glyphicon-time"> 2016</span></a>
<a class="label label-default"><span class="glyphicon glyphicon-time"> 2015</span></a>
<a class="label label-default"><span class="glyphicon glyphicon-time"> 更早</span></a>
</td>
</tr>
<tr>
<td>播放數量</td>
<td>
<a class="label label-success"><span class="glyphicon glyphicon-arrow-down"> 從高到底</span></a>
<a class="label label-danger"><span class="glyphicon glyphicon-arrow-up"> 從低到高</span></a>
</td>
</tr>
<tr>
<td>評論數量</td>
<td>
<a class="label label-success"><span class="glyphicon glyphicon-arrow-down"> 從高到底</span></a>
<a class="label label-danger"><span class="glyphicon glyphicon-arrow-up"> 從低到高</span></a>
</td>
</tr>
</table>
</div>
<div class="col-md-3">
<div class="movielist text-center">
<!--<img data-original="holder.js/262x166"
class="img-responsive lazy center-block" alt="">-->
<img src="holder.js/262x166" class="img-responsive center-block" alt="">
<div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
<span style="color:#999;font-style: italic;">環太平洋</span><br>
<div>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
</div>
</div>
<a href="play.html" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span> 播放</a>
</div>
</div>
<div class="col-md-3">
<div class="movielist text-center">
<!--<img data-original="holder.js/262x166"
class="img-responsive lazy center-block" alt="">-->
<img src="holder.js/262x166" class="img-responsive center-block" alt="">
<div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
<span style="color:#999;font-style: italic;">環太平洋</span><br>
<div>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
</div>
</div>
<a href="play.html" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span> 播放</a>
</div>
</div>
<div class="col-md-3">
<div class="movielist text-center">
<!--<img data-original="holder.js/262x166"
class="img-responsive lazy center-block" alt="">-->
<img src="holder.js/262x166" class="img-responsive center-block" alt="">
<div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
<span style="color:#999;font-style: italic;">環太平洋</span><br>
<div>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
</div>
</div>
<a href="play.html" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span> 播放</a>
</div>
</div>
<div class="col-md-12">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="First">
<span aria-hidden="true">首頁</span>
</a>
</li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一頁</span>
</a>
</li>
<li><a href="#">1 / 10</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下一頁</span>
</a>
</li>
<li>
<a href="#" aria-label="Last">
<span aria-hidden="true">尾頁</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<!--電影列表-->
{% endblock %}瀏覽器訪問即可看到主頁面
電影搜尋頁面搭建
檢視函式
@home.route('/search/')
def search():
return render_template('home/search.html')新建app/templates/home/search.html
{% extends 'home/home.html' %}
{% block content %}
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb" style="margin-top:6px;">
<li>與"xxx"有關的電影，共x部</li>
</ol>
</div>
<div class="col-md-12">
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="環太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻，研製出了高大的機器戰士與來犯怪獸進行對抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="環太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻，研製出了高大的機器戰士與來犯怪獸進行對抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="環太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻，研製出了高大的機器戰士與來犯怪獸進行對抗的故事。
</div>