Flask 构建微电影视频网站(二)
搭建前台页面
前台布局搭建
将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="1780316635@qq.com">
</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>
</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">
<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>
{% endblock %}
修改home.html和layout.html文件中的search链接
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="请输入电影名！">
<span class="input-group-btn">
<a class="btn btn-default" href="{{ url_for('home.search') }}"><span class="glyphicon glyphicon-search"></span> 搜索</a>
</span>
</div>
浏览器访问即可进行查询
电影详情页面搭建
视图函数
@home.route('/play/')
def play():
return render_template('home/play.html')
新建app/templates/home/play.html
{% extends 'home/home.html' %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jwplayer/skins/stormtrooper.css') }}">
<script>
SyntaxHighlighter.all();
</script>
<!--播放页面-->
<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 %}
<div class="row">
<div class="col-md-8">
<div id="moviecontainer"></div>
</div>
<div class="col-md-4" style="height:500px;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-facetime-video"></span> 电影介绍</h3>
</div>
<div class="panel-body" style="height:459px;">
<table class="table">
<tr>
<td style="width:30%;color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-film"></span> 片名
</td>
<td>环太平洋</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-tag"></span> 标签
</td>
<td>科幻</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-time"></span> 片长
</td>
<td>05:04</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-map-marker"></span> 地区
</td>
<td>美国</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-star"></span> 星级
</td>
<td>
<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>
</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-calendar"></span> 上映时间
</td>
<td>2013年7月12日</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-play"></span> 播放数量
</td>
<td>1000</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-comment"></span> 评论数量
</td>
<td>1000</td>
</tr>
<tr>
<td style="color:#ccc;font-weight:bold;font-style:italic;">
<span class="glyphicon glyphicon-picture"></span> 影片介绍
</td>
<td>
该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-12" style="margin-top:6px;">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-comment"></span> 电影评论</h3>
</div>
<div class="panel-body">
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<strong>请先<a href="login.html" target="_blank" class="text-info">登录</a>，才可参与评论！</strong>
</div>
<ol class="breadcrumb" style="margin-top:6px;">
<li>全部评论(5)</li>
</ol>
<form role="form" style="margin-bottom:6px;">
<div class="form-group">
<div>
<label for="input_content">内容</label>
<textarea id="input_content"></textarea>
</div>
<div class="col-xs-12" id="error_content"></div>
</div>
<a class="btn btn-success" id="btn-sub"><span class="glyphicon glyphicon-edit"></span> 提交评论</a>
<a class="btn btn-danger" id="btn-col"><span class="glyphicon glyphicon-heart"></span> 收藏电影</a>
</form>
<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>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.config.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.all.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='jwplayer/jwplayer.js') }}"></script>
<script>
var ue = UE.getEditor('input_content',{
toolbars: [
['fullscreen', 'emotion', 'preview', 'link']
],
initialFrameWidth:"100%",
initialFrameHeight:"100",
});
</script>
<script type="text/javascript">
jwplayer.key = "P9VTqT/X6TSP4gi/hy1wy23BivBhjdzVjMeOaQ==";
</script>
<script type="text/javascript">
jwplayer("moviecontainer").setup({
flashplayer: "{{ url_for('static', filename='jwplayer/jwplayer.flash.swf') }}",
playlist: [{
file: "{{ url_for('static', filename='video/htpy.mp4') }}",
title: "环太平洋"
}],
modes: [{
type: "html5"
}, {
type: "flash",
src: "{{ url_for('static', filename='jwplayer/jwplayer.flash.swf') }}"
}, {
type: "download"
}],
skin: {
name: "vapor"
},
"playlist.position": "left",
"playlist.size": 400,
height: 500,
width: 774,
});
</script>
<!--播放页面-->
<script>
$(function() {
new WOW().init();
})
</script>
<script>
$(document).ready(function() {
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
</script>
{% endblock %}
修改其它页面的播放视频按钮链接
play.html -> {{ url_for('home.play') }}
404页面搭建
视图函数,放在__init__文件中
全局404(AOP)
app/__init__.py
@app.errorhandler(404)
def page_not_found(err):
return render_template('home/404.html'), 404
新建app/templates/home/404.html
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>消失在宇宙星空中的404页面</title>
<link href="{{ url_for('static', filename='404/404.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 代码 开始 -->
<div class="fullScreen" id="fullScreen">
<img class="rotating" src="{{ url_for('static', filename='404/spaceman.svg') }}">
<div class="pagenotfound-text">
<h1>迷失在太空中！</h1>
<h2><a href="{{ url_for('home.index') }}">返回首页</a></h2>
</div>
<canvas id="canvas2d"></canvas>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='404/404.js') }}"></script>
<!-- 代码 结束 -->
</body>
</html>
浏览器随便输入一个不存在的url进行查看
