【百度云搜索伦意，搜各種資料:http://www.81ad.cn】
Flask 構建微電影視頻網(wǎng)站
已上線演示地址: http://movie.tbquan.cn
搭建前臺主頁頁面
靜態(tài)文件放入static目錄下
創(chuàng)建基礎頁面base.html
創(chuàng)建base.html用于公用的頁面頂部和底部
app/templates/home/base.html
修改靜態(tài)文件為{{ url_for('static', filename='base/css/bootstrap.min.css') }}格式姆泻，添加內容塊{% block content %}{% endblock %}零酪，用于中部內容顯示
<!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') }}">
<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="login.html"><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="logout.html"><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:76px">
{% block content %}{% endblock %}
</div>
<!--內容-->
<!--底部-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
? 2018 flaskmovie 備案
</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="http://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>
創(chuàng)建index.html模板
app/templates/home/index.html
{% extends 'home/base.html' %}
{% block content %}
<h1>你好</h1>
{% endblock %}
加載模板到首頁視圖
修改app/home/views.py
from . import home
from flask import render_template
@home.route("/")
def index():
return render_template('home/index.html')
訪問 http://127.0.0.1:5000/ 即可看到index頁面
BLOG_20181028_123128_12
知識點
- 靜態(tài)文件引入：
{{ url_for('static', filename='文件路徑') }} - 定義路由：
{{ url_for('模塊名.視圖名', 變量=參數(shù)) }} - 定義數(shù)據(jù)塊：
{% block 數(shù)據(jù)塊名稱 %}...{% endblock %}
搭建會員登錄頁面
創(chuàng)建登錄頁面login.html
創(chuàng)建app/templates/home/login.html
引入數(shù)據(jù)塊，添加登錄的表單
{% extends 'home/base.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 %}
創(chuàng)建登錄和登出視圖
在app/home/views.py中添加
@home.route('/login/')
def login():
return render_template('home/login.html')
@home.route('/logout/')
def logout():
return redirect(url_for('home.login'))
訪問 http://127.0.0.1:5000/login/ 或 http://127.0.0.1:5000/login/ 即可看到登錄表單
BLOG_20181028_123136_63
修改base.html登錄退出鏈接
<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.logout') }}"><span class="glyphicon glyphicon-log-out"></span> 退出</a>
</li>
這樣上方的登錄退出鏈接就會生效了四苇。
搭建會員注冊頁面
創(chuàng)建注冊表單register.html
新建app/templates/home/register.html
{% extends 'home/base.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 %}
創(chuàng)建注冊視圖
在app/home/views.py增加
@home.route('/register/')
def register():
return render_template('home/register.html')
BLOG_20181028_123226_90
修改base.html注冊鏈接
<li>
<a class="curlink" href="{{ url_for('home.register') }}"><span class="glyphicon glyphicon-plus"></span> 注冊</a>
</li>
這樣頂部的注冊鏈接就可用了
搭建會員中心頁面
創(chuàng)建會員中心菜單usermenu.html
app/templates/usermenu.html
用于會員中心左側菜單欄
<div class="col-md-3">
<div class="list-group">
<a href="{{ user_for('home.user') }}" class="list-group-item">
<span class="glyphicon glyphicon-user"></span> 會員中心
</a>
<a href="{{ user_for('home.pwd') }}" class="list-group-item">
<span class="glyphicon glyphicon-lock"></span> 修改密碼
</a>
<a href="{{ user_for('home.comments') }}" class="list-group-item">
<span class="glyphicon glyphicon-comment"></span> 評論記錄
</a>
<a href="{{ user_for('home.userlog') }}" class="list-group-item">
<span class="glyphicon glyphicon-calendar"></span> 登錄日志
</a>
<a href="{{ user_for('home.moviecollect') }}" class="list-group-item active">
<span class="glyphicon glyphicon-heart"></span> 收藏電影
</a>
</div>
</div>
修改base.html添加css數(shù)據(jù)塊
頁面頂部style標簽中
<!--........-->
<style>
.media{
padding:3px;
border:1px solid #ccc
}
</style>
{% block css %}{% endblock %}
創(chuàng)建會員中心user.html
增加額外的css孝凌，用于該頁面的樣式
{% extends 'home/base.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/usermenu.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="">
</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="">
</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="">
</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 %}
BLOG_20181028_123246_88
創(chuàng)建修改密碼pwd.html
{% extends 'home/base.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/usermenu.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 %}
BLOG_20181028_123308_95
修改usermuene.html菜單激活狀態(tài)
切換菜單，li便簽不是選中狀態(tài)月腋，增加id
<div class="col-md-3">
<div class="list-group">
<a id="m-1" href="{{ url_for('home.user') }}" class="list-group-item">
<span class="glyphicon glyphicon-user"></span> 會員中心
</a>
<a id="m-2" href="{{ url_for('home.pwd') }}" class="list-group-item">
<span class="glyphicon glyphicon-lock"></span> 修改密碼
</a>
<a id="m-3" href="{{ url_for('home.comments') }}" class="list-group-item">
<span class="glyphicon glyphicon-comment"></span> 評論記錄
</a>
<a id="m-4" href="{{ url_for('home.userlog') }}" class="list-group-item">
<span class="glyphicon glyphicon-calendar"></span> 登錄日志
</a>
<a id="m-5" href="{{ url_for('home.moviecollect') }}" class="list-group-item">
<span class="glyphicon glyphicon-heart"></span> 收藏電影
</a>
</div>
</div>
修改base.html創(chuàng)建js數(shù)據(jù)塊
添加到頁面底部</body>上方蟀架，用于該頁面的js添加
{% block js %}{% endblock %}
</body>
修改user.html和pwd.html菜單選中active
修改user.html，底部增加以下代碼榆骚，當點擊會員中心后片拍，會在id="m-1"上添加active的樣式，表明激活該選項妓肢。
{% block js %}
<script>
$(document).ready(function() {
$("#m-1").addClass('active');
});
</script>
{% endblock %}
修改pwd.html捌省，底部增加
{% block js %}
<script>
$(document).ready(function() {
$("#m-2").addClass('active');
});
</script>
{% endblock %}
BLOG_20181028_123318_44
BLOG_20181028_123337_25
創(chuàng)建評論記錄comments.html
{% extends 'home/base.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/usermenu.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>
</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 () {
$("#m-3").addClass('active');
});
</script>
{% endblock %}
BLOG_20181028_123354_22
創(chuàng)建用戶日志userlog.html
{% extends 'home/base.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/usermenu.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>
</table>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#m-4").addClass('active');
});
</script>
{% endblock %}
BLOG_20181028_123413_98
創(chuàng)建收藏電影moviecollect.html
{% extends 'home/base.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/usermenu.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="環(huán)太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環(huán)太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻纲缓，研制出了高大的機器戰(zhàn)士與來犯怪獸進行對抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="環(huán)太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">環(huán)太平洋<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
該片主要講述了人類為了抵抗怪獸的進攻喊废，研制出了高大的機器戰(zhàn)士與來犯怪獸進行對抗的故事祝高。
</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 () {
$("#m-5").addClass('active');
});
</script>
{% endblock %}
BLOG_20181028_123422_50
創(chuàng)建會員中心視圖
在app/home/views.py增加
@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('/userlog/')
def userlog():
return render_template('home/userlog.html')
@home.route('/moviecollect/')
def moviecollect():
return render_template('home/moviecollect.html')
修改base.html會員和主頁鏈接
<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.user') }}"><span class="glyphicon glyphicon-user"></span> 會員</a>
</li>
修改user.html和pwd.html按鈕鏈接
當用戶點擊按鈕會自動跳轉到會員中心，表單提交試用js實現(xiàn)污筷，后面再增加工闺。
user.html
<a href="{{ url_for('home.user') }}" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span> 保存修改</a>
pwd.html
<a href="{{ url_for('home.user') }}" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> 修改密碼</a>
修改login.html和register.html按鈕鏈接
login.html
<a href="{{ url_for('home.user') }}" class="btn btn-lg btn-success btn-block">登錄</a>
register.html
<a href="{{ url_for('home.user') }}" class="btn btn-lg btn-success btn-block">注冊</a>
