27、Flask構建彈幕微電影網(wǎng)站-電影頁面上映輪播預告，搜索、標簽篩選列表

【百度云搜索，搜各種資料:http://www.81ad.cn】

【百度云搜索，搜各種資料:http://www.lqkweb.com】

Flask 構建微電影視頻網(wǎng)站

已上線演示地址: http://movie.tbquan.cn

上映預告-首頁輪播

修改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>
BLOG_20181112_220057_39

電影搜索頁面

修改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>&nbsp;搜索</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>
BLOG_20181112_220114_60

電影標簽篩選和列表

修改index電影列表頁視圖

增加篩選和分頁功能

@home.route("/<int:page>/")
def index(page):
    if not page:
        page = 1
    all_tag = Tag.query.all()
    # 星級轉(zhuǎn)換
    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)  # 獲取星級數(shù)字，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;">&nbsp;微電影
</a>

<li>
    <a class="curlink" href="{{ url_for('home.index', page=1) }}"><span class="glyphicon glyphicon-film"></span>&nbsp;電影</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>&nbsp;所有</a>
                    &nbsp;
                {% 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>&nbsp;{{ tag.name }}</a>
                    &nbsp;
                {% 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>&nbsp;所有</a>
                &nbsp;
                {% 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>&nbsp;{{ star.info }}</a>
                    &nbsp;
                {% 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">&nbsp;所有</span></a>
                &nbsp;
                <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">&nbsp;最近</span></a>
                &nbsp;
                {% 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">&nbsp;{{ year }}</span></a>
                    &nbsp;
                {% 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">&nbsp;更早</span></a>
            </td>
        </tr>
        <tr>
            <td>播放數(shù)量</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">&nbsp;從高到底</span></a>
                &nbsp;
                <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">&nbsp;從低到高</span></a>
            </td>
        </tr>
        <tr>
            <td>評論數(shù)量</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">&nbsp;從高到底</span></a>
                &nbsp;
                <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">&nbsp;從低到高</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>&nbsp;播放</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
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 家裝記之一～～俗話說，要潑煩就裝修。但有些事你躲得了初一，躲不了十五。話說碗子當了社會閑人，首要大事湊是先給自己安...
    瘦人碗子閱讀 448評論 0贊 5
  • 題記：一門課程，帶給了我們什么？我們不能只去看它變了多少花樣，上了多少節(jié)課，參與了多少人。而是要看它是否接...
    肅南205尚曉軍閱讀 4,909評論 65贊 137
  • 《穩(wěn)住是根本》劉友龍。持續(xù)原創(chuàng)分享1200天。 穩(wěn)是改變的定海神針！穩(wěn)生定，定生慧！無論是在咨詢中還是在教...
    陳_8749閱讀 143評論 0贊 0
  • 亦能飄零久閱讀 200評論 0贊 0

友情鏈接更多精彩內(nèi)容