Flask 构建微电影视频网站(2.2)
2018-12-01 本文已影响0人
听你讲故事啊
电影列表页面搭建
新建视图函数,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进行查看
