您现在的位置是：网站首页 >Flask >Flask搭建微电影视频网站 Flask

【Flask微电影】27.电影页面上映轮播预告，搜索、标签筛选列表

admin2018年11月12日 21:58 【Flask | Html | Python 】 2094人已围观

Flask搭建微电影视频网站简介 利用Flask搭建微电影视频网站 Github地址：https://github.com/xyliurui/FlaskMovie

### 上映预告-首页轮播 #### 修改indexbanner首页轮播图视图 ```python @home.route("/indexbanner/") def indexbanner(): previews = Preview.query.all() return render_template('home/indexbanner.html', previews=previews) ``` #### 修改indexbanner.html首页轮播图显示模板 ```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> ``` ![BLOG_20181112_220057_39](/media/blog/images/2018/11/BLOG_20181112_220057_39.png "博客图集BLOG_20181112_220057_39.png") ### 电影搜索页面 #### 修改base.html搜索框功能禁止输入框回车提交，只能点击搜索按钮，然后添加js代码，获取搜索框的值 ```html <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搜索电影视图使用模糊搜索 ```python @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搜索结果显示模板 ```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> ``` ![BLOG_20181112_220114_60](/media/blog/images/2018/11/BLOG_20181112_220114_60.png "博客图集BLOG_20181112_220114_60.png") ### 电影标签筛选和列表 #### 修改index电影列表页视图增加筛选和分页功能 ```python @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 ```html <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电影展示页面模板 ```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 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` ![BLOG_20181112_220145_32](/media/blog/images/2018/11/BLOG_20181112_220145_32.png "博客图集BLOG_20181112_220145_32.png")