您现在的位置是: 网站首页 >Flask >Flask搭建微电影视频网站 Flask
【Flask微电影】06.搭建前台页面-电影列表、搜索播放页面
admin2018年10月28日 12:37 【Flask | Html | Python 】 2590人已围观
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 data-original="holder.js/262x166" class="img-responsive lazy center-block" alt="">--> <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> ```
很赞哦! (3)
相关文章
文章交流
- emoji
当前用户
未登录,点击 登录专题目录
- 【Flask微电影】01.环境搭建项目目录分析
- 【Flask微电影】02.使用蓝图构建项目目录
- 【Flask微电影】03.安装mysql数据库及配置
- 【Flask微电影】04.定义数据模型,生成数据表和初始用户
- 【Flask微电影】05.搭建前台页面-会员登录注册和会员中心
- 【Flask微电影】06.搭建前台页面-电影列表、搜索播放页面
- 【Flask微电影】07.搭建后台页面-后台登陆、后台主页页面
- 【Flask微电影】08.搭建后台页面-密码修改、主页控制面板
- 【Flask微电影】09.搭建后台页面-标签管理、电影管理、预告管理
- 【Flask微电影】10.搭建后台页面-会员管理、评论管理
- 【Flask微电影】11.搭建后台页面-收藏管理、日志管理
- 【Flask微电影】12.搭建后台页面-权限管理、角色管理、管理员管理
- 【Flask微电影】13.管理员登录、退出、装饰器进行访问控制
- 【Flask微电影】14.电影标签管理:增删查改
- 【Flask微电影】15.电影内容管理:增删查改
- 【Flask微电影】16.电影预告管理:增删查改
- 【Flask微电影】17.网站会员管理:查看会员和删除
- 【Flask微电影】18.电影评论管理:评论列表和删除
- 【Flask微电影】19.用户收藏电影:收藏列表和删除
- 【Flask微电影】20.会员修改密码,表单下拉列表同步数据库
- 【Flask微电影】21.基于角色访问控制-权限管理:增删查改
- 【Flask微电影】22.基于角色访问控制-角色管理:增删查改
- 【Flask微电影】23.基于角色访问控制-管理员管理和访问权限控制
- 【Flask微电影】24.前台会员中心,会员注册登录退出
- 【Flask微电影】25.会员中心登录要求,会员资料和密码修改
- 【Flask微电影】26.电影会员评论、会员登录日志、会员收藏列表
- 【Flask微电影】27.电影页面上映轮播预告,搜索、标签筛选列表
- 【Flask微电影】28.电影播放详情,评论,显示评论列表
- 【Flask微电影】29.电影收藏功能,增加电影播放弹幕
- 【Flask微电影】30.项目完成检查,nginx部署网站