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

【Flask微电影】06.搭建前台页面-电影列表、搜索播放页面

admin2018年10月28日 12:37 【Flask | Html | Python 】 2194人已围观

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

## 搭建电影列表页面 ### 修改base.html添加内容外层数据块 ```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** ```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**增加 ```python @home.route("/indexbanner/") def indexbanner(): return render_template('home/indexbanner.html') ``` ### 修改index.html添加电影列表使用`{% for i in range(12) %}{% endfor %}`这样jinja2的语法生成多个内容 ```html {% 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 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 %} ``` ![BLOG_20181028_123953_83](/media/blog/images/2018/10/BLOG_20181028_123953_83.png "博客图集BLOG_20181028_123953_83.png") ## 搭建电影搜索页面 ### 添加search.html搜索结果页面 ```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 %} ``` ![BLOG_20181028_124010_34](/media/blog/images/2018/10/BLOG_20181028_124010_34.png "博客图集BLOG_20181028_124010_34.png") ### 添加电影搜索视图 ```python @home.route('/search/') def search(): return render_template('home/search.html') ``` ### 修改base.html搜索链接 ```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链接 ```html <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播放页面 ```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 %} ``` ![BLOG_20181028_124049_45](/media/blog/images/2018/10/BLOG_20181028_124049_45.png "博客图集BLOG_20181028_124049_45.png") ![BLOG_20181028_124052_51](/media/blog/images/2018/10/BLOG_20181028_124052_51.png "博客图集BLOG_20181028_124052_51.png") ### 添加播放视图 ```python @home.route('/play/') def play(): return render_template('home/play.html') ``` ### 修改index.html播放链接 ```html <a href="{{ url_for('home.play') }}" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span> 播放</a> ``` ### 修改moviecollect.html播放链接 ```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> ```