【Flask微电影】06.搭建前台页面-电影列表、搜索播放页面
2018-10-28 本文已影响44人
吾星喵
搭建电影列表页面
修改base.html添加内容外层数据块
<!--内容-->
{% block container %}
<div class="container" style="margin-top:76px">
{% block content %}{% endblock content %}
</div>
{% endblock container %}
<!--内容-->
添加indexbanner.html轮播图页面
将indexbanner.html相应的静态文件放入static/banner/目录中
添加app/templates/home/indexbanner.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>热映电影</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='banner/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='banner/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='banner/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='banner/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='banner/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='banner/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='banner/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='banner/js/script.js') }}"></script>
</body>
</html>
添加首页轮播视图
在home/views.py增加
@home.route("/indexbanner/")
def indexbanner():
return render_template('home/indexbanner.html')
修改index.html添加电影列表
使用{% for i in range(12) %}{% endfor %}这样jinja2的语法生成多个内容
{% extends 'home/base.html' %}
{% block container %}
<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.indexbanner') }}"></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> 最近</span></a>
<a class="label label-default"><span class="glyphicon glyphicon-time"></span> 2017</span></a>
<a class="label label-default"><span class="glyphicon glyphicon-time"></span> 2016</span></a>
<a class="label label-default"><span class="glyphicon glyphicon-time"></span> 2015</span></a>
<a class="label label-default"><span class="glyphicon glyphicon-time"></span> 更早</span></a>
</td>
</tr>
<tr>
<td>播放数量</td>
<td>
<a class="label label-success"><span class="glyphicon glyphicon-arrow-down"></span> 从高到底</span></a>
<a class="label label-danger"><span class="glyphicon glyphicon-arrow-up"></span> 从低到高</span></a>
</td>
</tr>
<tr>
<td>评论数量</td>
<td>
<a class="label label-success"><span class="glyphicon glyphicon-arrow-down"></span> 从高到底</span></a>
<a class="label label-danger"><span class="glyphicon glyphicon-arrow-up"></span> 从低到高</span></a>
</td>
</tr>
</table>
</div>
{% for i in range(12) %}
<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="{{ url_for('static', filename='js/holder.min.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>
{% endfor %}
<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 %}
image.png
搭建电影搜索页面
添加search.html搜索结果页面
{% extends 'home/base.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>
<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 %}
image.png
添加电影搜索视图
@home.route('/search/')
def search():
return render_template('home/search.html')
修改base.html搜索链接
<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>
修改base.html添加logo链接
<a href="{{ url_for('home.index') }}" class="navbar-brand" style="width:250px;">
<img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;"> 微电影
</a>
搭建电影播放页面
添加play.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>
<!--播放页面-->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jwplayer/skins/stormtrooper.css') }}">
<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>
SyntaxHighlighter.all();
</script>
<!--播放页面-->
{% 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="{{ url_for('home.user') }}">
<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="{{ url_for('home.user') }}">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="{{ url_for('home.user') }}">
<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="{{ url_for('home.user') }}">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 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>
<!--播放页面-->
{% endblock %}
image.png
image.png
添加播放视图
@home.route('/play/')
def play():
return render_template('home/play.html')
修改index.html播放链接
<a href="{{ url_for('home.play') }}" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span> 播放</a>
修改moviecollect.html播放链接
<div class="media">
<div class="media-left">
<a href="{{ url_for('home.play') }}">
<img class="media-object" src="holder.js/131x83" alt="环太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">环太平洋<a href="{{ url_for('home.play') }}" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
</div>
</div>
