【Flask微电影】27.电影页面上映轮播预告，搜索、标签筛选列
2018-11-12 本文已影响52人
吾星喵
个人博客，欢迎查看：https://blog.starmeow.cn/
Github地址：https://github.com/xyliurui/FlaskMovie
上映预告-首页轮播
修改indexbanner首页轮播图视图
@home.route("/indexbanner/")
def indexbanner():
previews = Preview.query.all()
return render_template('home/indexbanner.html', previews=previews)
修改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>
{% for preview in previews %}
<li id="imgCard{{ preview.id-1 }}">
<a href=""><span style="opacity:0;"></span></a>
<img src="{{ url_for('static', filename='media/' + preview.logo) }}" alt="">
<p style="bottom:0">{{ preview.title }}</p>
</li>
{% endfor %}
</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>
image.png
电影搜索页面
修改base.html搜索框功能
禁止输入框回车提交，只能点击搜索按钮，然后添加js代码，获取搜索框的值
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="请输入电影名！" id="keyword" value="{{ keyword }}"
onkeydown="if(event.keyCode===13)return false;"
>
<span class="input-group-btn">
<a class="btn btn-default" id="do_search"><span class="glyphicon glyphicon-search"></span> 搜索</a>
</span>
</div>
<script>
$(document).ready(function () {
$("#do_search").click(function () {
let keyword = $('#keyword').val();
location.href = "{{ url_for('home.search') }}?keyword=" + keyword;
});
})
</script>
修改search搜索电影视图
使用模糊搜索
@home.route('/search/')
def search():
keyword = request.args.get('keyword')
search_movies = Movie.query.filter(
Movie.title.ilike("%" + keyword + "%")
).order_by(
Movie.add_time.desc()
)
search_count = Movie.query.filter(Movie.title.ilike("%" + keyword + "%")).count()
return render_template('home/search.html', keyword=keyword, search_movies=search_movies, search_count=search_count)
修改search.html搜索结果显示模板
<div class="col-md-12">
{% for search_movie in search_movies %}
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="{{ url_for('static', filename='media/' + search_movie.logo) }}" alt="{{ search_movie.title }}" style="width: 150px">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ search_movie.title }}<a href="play.html" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
{{ search_movie.info }}
</div>
</div>
{% endfor %}
</div>
image.png
电影标签筛选和列表
修改index电影列表页视图
增加筛选和分页功能
@home.route("/<int:page>/")
def index(page):
if not page:
page = 1
all_tag = Tag.query.all()
# 星级转换
star_list = [(1, '1星'), (2, '2星'), (3, '3星'), (4, '4星'), (5, '5星')]
all_star = map(lambda x: {'num': x[0], 'info': x[1]}, star_list)
# 年份列表
import time
now_year = time.localtime()[0]
year_range = [year for year in range(int(now_year)-1, int(now_year)-5, -1)]
# print(year_range)
page_movies = Movie.query
selected = dict()
tag_id = request.args.get('tag_id', 0) # 获取链接中的标签id，0为显示所有
if int(tag_id) != 0:
page_movies = page_movies.filter_by(tag_id=tag_id)
selected['tag_id'] = tag_id
star_num = request.args.get('star_num', 0) # 获取星级数字，0为显示所有
if int(star_num) != 0:
page_movies = page_movies.filter_by(star=star_num)
selected['star_num'] = int(star_num)
time_year = request.args.get('time_year', 1) # 1为所有日期，0为更早，月份为所选
from sqlalchemy import extract, exists, between
if int(time_year) == 0:
page_movies = page_movies # !!!没写这个功能
elif int(time_year) == 1:
page_movies = page_movies # 所有年份的电影
else:
page_movies = page_movies.filter(extract('year', Movie.release_time) == time_year) # 筛选年份
selected['time_year'] = time_year
play_num = request.args.get('play_num', 1) # 1为从高到低，0为从低到好
if int(play_num) == 1:
page_movies = page_movies.order_by(
Movie.play_num.desc()
)
else:
page_movies = page_movies.order_by(Movie.play_num.asc())
selected['play_num'] = play_num
comment_num = request.args.get('comment_num', 1) # 1为从高到低，0为从低到好
if int(comment_num) == 1:
page_movies = page_movies.order_by(
Movie.comment_num.desc()
)
else:
page_movies = page_movies.order_by(Movie.comment_num.asc())
selected['comment_num'] = comment_num
page_movies = page_movies.paginate(page=page, per_page=12)
return render_template('home/index.html',
all_tag=all_tag,
all_star=all_star,
now_year=now_year,
year_range=year_range,
selected=selected,
page_movies=page_movies)
修改base.html首页链接增加page
<a href="{{ url_for('home.index', page=1) }}" class="navbar-brand" style="width:250px;">
<img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;"> 微电影
</a>
<li>
<a class="curlink" href="{{ url_for('home.index', page=1) }}"><span class="glyphicon glyphicon-film"></span> 电影</a>
</li>
修改index.html电影展示页面模板
<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" href="{{ url_for('home.index', page=1) }}?tag_id=0&star_num={{ selected['star_num'] }}&time_year={{ selected['time_year'] }}&play_num={{ selected['play_num'] }}&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-tag"></span> 所有</a>
{% for tag in all_tag %}
<a class="label label-info" href="{{ url_for('home.index', page=1) }}?tag_id={{ tag.id }}&star_num={{ selected['star_num'] }}&time_year={{ selected['time_year'] }}&play_num={{ selected['play_num'] }}&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-tag"></span> {{ tag.name }}</a>
{% endfor %}
</tr>
<tr>
<td>电影星级</td>
<td>
<a class="label label-warning" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num=0&time_year={{ selected['time_year'] }}&play_num={{ selected['play_num'] }}&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-star"></span> 所有</a>
{% for star in all_star %}
<a class="label label-warning" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num={{ star.num }}&time_year={{ selected['time_year'] }}&play_num={{ selected['play_num'] }}&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-star"></span> {{ star.info }}</a>
{% endfor %}
</td>
</tr>
<tr>
<td>上映时间</td>
<td>
<a class="label label-default" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num={{ selected['star_num'] }}&time_year=1&play_num={{ selected['play_num'] }}&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-time"> 所有</span></a>
<a class="label label-default" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num={{ selected['star_num'] }}&time_year={{ now_year }}&play_num={{ selected['play_num'] }}&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-time"> 最近</span></a>
{% for year in year_range %}
<a class="label label-default" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num={{ selected['star_num'] }}&time_year={{ year }}&play_num={{ selected['play_num'] }}&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-time"> {{ year }}</span></a>
{% endfor %}
<a class="label label-default" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num={{ selected['star_num'] }}&time_year=0&play_num={{ selected['play_num'] }}&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-time"> 更早</span></a>
</td>
</tr>
<tr>
<td>播放数量</td>
<td>
<a class="label label-success" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num={{ selected['star_num'] }}&time_year={{ selected['time_year'] }}&play_num=1&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-arrow-down"> 从高到底</span></a>
<a class="label label-danger" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num={{ selected['star_num'] }}&time_year={{ selected['time_year'] }}&play_num=0&comment_num={{ selected['comment_num'] }}"><span class="glyphicon glyphicon-arrow-up"> 从低到高</span></a>
</td>
</tr>
<tr>
<td>评论数量</td>
<td>
<a class="label label-success" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num={{ selected['star_num'] }}&time_year={{ selected['time_year'] }}&play_num={{ selected['play_num'] }}&comment_num=1"><span class="glyphicon glyphicon-arrow-down"> 从高到底</span></a>
<a class="label label-danger" href="{{ url_for('home.index', page=1) }}?tag_id={{ selected['tag_id'] }}&star_num={{ selected['star_num'] }}&time_year={{ selected['time_year'] }}&play_num={{ selected['play_num'] }}&comment_num=0"><span class="glyphicon glyphicon-arrow-up"> 从低到高</span></a>
</td>
</tr>
</table>
</div>
{% for movie in page_movies.items %}
<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='media/' + movie.logo) }}" class="img-responsive center-block" alt="" style="height: 180px; width: 260px">
<div class="text-left" style="margin-left:auto;margin-right:auto;width:210px;">
<span style="color:#999;font-style: italic;">{{ movie.title }}</span><br>
<div>
{% for i in range(movie.star) %}
<span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
{% endfor %}
{% for i in range(5 - movie.star) %}
<span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
{% endfor %}
</div>
</div>
<a href="{{ url_for('home.play') }}" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span> 播放</a>
</div>
</div>
{% endfor %}
<div class="col-md-12">
{% import 'home/pagination.html' as pg %}
{{ pg.render_pagination(page_movies, 'home.index') }}
</div>
链接构成：http://127.0.0.1:5000/1/?tag_id=0&star_num=0&time_year=1&play_num=0&comment_num=1
image.png
