美文网首页
Flask 构建微电影视频网站(2.2)

Flask 构建微电影视频网站(2.2)

作者: 听你讲故事啊 | 来源:发表于2018-12-01 11:26 被阅读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;">&nbsp;微电影
            </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>&nbsp;搜索</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>&nbsp;电影</a>
                </li>
                <li>
                    <a class="curlink" href="{{ url_for('home.login') }}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
                </li>
                <li>
                    <a class="curlink" href="{{ url_for('home.regist') }}"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
                </li>
                <li>
                    <a class="curlink" href="{{ url_for('home.lougot') }}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
                </li>
                <li>
                    <a class="curlink" href="{{ url_for('home.user') }}"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
                </li>
            </ul>
        </div>
        <!--导航-->

    </div>
</nav>
<!--导航-->
<!--内容-->

{% block content %}

{% endblock %}


<!--内容-->
<!--底部-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    ©&nbsp;2018&nbsp;movie.cht3.top&nbsp;京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">&nbsp;标签一</span></a>
                            &nbsp;
                            <a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
                            &nbsp;
                            <a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
                            &nbsp;
                            <a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
                            &nbsp;
                            <a class="label label-info"><span class="glyphicon glyphicon-tag">&nbsp;标签一</span></a>
                    </tr>
                    <tr>
                        <td>电影星级</td>
                        <td>
                            <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;一星</span></a>
                            &nbsp;
                            <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;二星</span></a>
                            &nbsp;
                            <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;三星</span></a>
                            &nbsp;
                            <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;四星</span></a>
                            &nbsp;
                            <a class="label label-warning"><span class="glyphicon glyphicon-star">&nbsp;五星</span></a>
                        </td>
                    </tr>
                    <tr>
                        <td>上映时间</td>
                        <td>
                            <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;最近</span></a>
                            &nbsp;
                            <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;2017</span></a>
                            &nbsp;
                            <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;2016</span></a>
                            &nbsp;
                            <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;2015</span></a>
                            &nbsp;
                            <a class="label label-default"><span class="glyphicon glyphicon-time">&nbsp;更早</span></a>
                        </td>
                    </tr>
                    <tr>
                        <td>播放数量</td>
                        <td>
                            <a class="label label-success"><span class="glyphicon glyphicon-arrow-down">&nbsp;从高到底</span></a>
                            &nbsp;
                            <a class="label label-danger"><span class="glyphicon glyphicon-arrow-up">&nbsp;从低到高</span></a>
                        </td>
                    </tr>
                    <tr>
                        <td>评论数量</td>
                        <td>
                            <a class="label label-success"><span class="glyphicon glyphicon-arrow-down">&nbsp;从高到底</span></a>
                            &nbsp;
                            <a class="label label-danger"><span class="glyphicon glyphicon-arrow-up">&nbsp;从低到高</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>&nbsp;播放</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>&nbsp;播放</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>&nbsp;播放</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&nbsp;/&nbsp;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&nbsp;/&nbsp;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>&nbsp;搜索</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>&nbsp;电影介绍</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>&nbsp;片名
                            </td>
                            <td>环太平洋</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-tag"></span>&nbsp;标签
                            </td>
                            <td>科幻</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-time"></span>&nbsp;片长
                            </td>
                            <td>05:04</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-map-marker"></span>&nbsp;地区
                            </td>
                            <td>美国</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-star"></span>&nbsp;星级
                            </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>&nbsp;上映时间
                            </td>
                            <td>2013年7月12日</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-play"></span>&nbsp;播放数量
                            </td>
                            <td>1000</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-comment"></span>&nbsp;评论数量
                            </td>
                            <td>1000</td>
                        </tr>
                        <tr>
                            <td style="color:#ccc;font-weight:bold;font-style:italic;">
                                <span class="glyphicon glyphicon-picture"></span>&nbsp;影片介绍
                            </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>&nbsp;电影评论</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>&nbsp;提交评论</a>
                        &nbsp;
                        <a class="btn btn-danger" id="btn-col"><span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影</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&nbsp;/&nbsp;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进行查看

    相关文章

      网友评论

          本文标题：Flask 构建微电影视频网站(2.2)

          本文链接：https://www.haomeiwen.com/subject/bovlcqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Flask 构建微电影视频网站(2.2)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！