【Flask微电影】09.搭建后台页面-标签管理、电影管理、预告管理

Github地址：https://github.com/xyliurui/FlaskMovie ## 搭建后台标签管理页面 ### 添加tag_add.html添加标签页面 ```html {% extends 'admin/base.html' %} {% block content %} <section class="content-header"> <h1>微电影管理系统</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> 标签管理</a></li> <li class="active">添加标签</li> </ol> </section> <section class="content" id="showcontent"> <div class="row"> <div class="col-md-12"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">添加标签</h3> </div> <form role="form"> <div class="box-body"> <div class="form-group"> <label for="input_name">标签名称</label> <input type="text" class="form-control" id="input_name" placeholder="请输入标签名称！"> </div> </div> <div class="box-footer"> <button type="submit" class="btn btn-primary">添加</button> </div> </form> </div> </div> </div> </section> {% endblock %} {% block js %} <script> // 激活菜单栏 $(document).ready(function() { $("#g-2").addClass('active'); $("#g-2-1").addClass('active'); }) </script> {% endblock %} ```  ### 添加tag_list.html标签列表页面 ```html {% extends 'admin/base.html' %} {% block content %} <section class="content-header"> <h1>微电影管理系统</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> 标签管理</a></li> <li class="active">标签列表</li> </ol> </section> <section class="content" id="showcontent"> <div class="row"> <div class="col-md-12"> <div class="box box-primary"> <div class="box-header"> <h3 class="box-title">标签列表</h3> <div class="box-tools"> <div class="input-group input-group-sm" style="width: 150px;"> <input type="text" name="table_search" class="form-control pull-right" placeholder="请输入关键字..."> <div class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="fa fa-search"></i> </button> </div> </div> </div> </div> <div class="box-body table-responsive no-padding"> <table class="table table-hover"> <tbody> <tr> <th>编号</th> <th>名称</th> <th>添加时间</th> <th>操作事项</th> </tr> {% for i in range(5) %} <tr> <td>1</td> <td>科幻</td> <td>2018-10-10</td> <td> <a class="label label-success">编辑</a> &nbsp; <a class="label label-danger">删除</a> </td> </tr> {% endfor %} </tbody> </table> </div> <div class="box-footer clearfix"> <ul class="pagination pagination-sm no-margin pull-right"> <li><a href="#">首页</a></li> <li><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">下一页</a></li> <li><a href="#">尾页</a></li> </ul> </div> </div> </div> </div> </section> {% endblock %} {% block js %} <script> // 激活菜单栏 $(document).ready(function () { $("#g-2").addClass('active'); $("#g-2-2").addClass('active'); }) </script> {% endblock %} ```  ### 添加标签管理视图 ```python @admin.route("/tag/add/") def tag_add(): return render_template('admin/tag_add.html') @admin.route("/tag/list/") def tag_list(): return render_template('admin/tag_list.html') ``` ### 修改base.html添加标签链接和激活 ```html <li class="treeview" id="g-2"> <a href="#"> <i class="fa fa-tags" aria-hidden="true"></i> <span>标签管理</span> <span class="label label-primary pull-right">2</span> </a> <ul class="treeview-menu"> <li id="g-2-1"> <a href="{{ url_for('admin.tag_add') }}"> <i class="fa fa-circle-o"></i> 添加标签 </a> </li> <li id="g-2-2"> <a href="{{ url_for('admin.tag_list') }}"> <i class="fa fa-circle-o"></i> 标签列表 </a> </li> </ul> </li> ``` ## 搭建后台电影列表管理页面 ### 添加movie_add.html添加电影页面 ```html {% extends 'admin/base.html' %} {% block css %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='jwplayer/skins/stormtrooper.css') }}"> {% endblock %} {% block content %} <section class="content-header"> <h1>微电影管理系统</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li> <li class="active">添加电影</li> </ol> </section> <section class="content" id="showcontent"> <div class="row"> <div class="col-md-12"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">添加电影</h3> </div> <form role="form"> <div class="box-body"> <div class="form-group"> <label for="input_title">片名</label> <input type="text" class="form-control" id="input_title" placeholder="请输入片名！"> </div> <div class="form-group"> <label for="input_url">文件</label> <input type="file" id="input_url"> <div style="margin-top:5px;"> <div id="moviecontainer"></div> </div> </div> <div class="form-group"> <label for="input_info">介绍</label> <textarea class="form-control" rows="10" id="input_info"></textarea> </div> <div class="form-group"> <label for="input_logo">封面</label> <input type="file" id="input_logo"> <img data-src="holder.js/262x166" style="margin-top:5px;" class="img-responsive" alt=""> </div> <div class="form-group"> <label for="input_star">星级</label> <select class="form-control" id="input_star"> <option value="1">1星</option> <option value="2">2星</option> <option value="3">3星</option> <option value="4">4星</option> <option value="5">5星</option> </select> </div> <div class="form-group"> <label for="input_tag_id">标签</label> <select class="form-control" id="input_tag_id"> <option value="1">科幻</option> <option value="2">冒险</option> <option value="3">爱情</option> <option value="4">动作</option> <option value="5">战争</option> </select> </div> <div class="form-group"> <label for="input_area">地区</label> <input type="text" class="form-control" id="input_area" placeholder="请输入地区！"> </div> <div class="form-group"> <label for="input_length">片长</label> <input type="text" class="form-control" id="input_length" placeholder="请输入片长！"> </div> <div class="form-group"> <label for="input_release_time">上映时间</label> <input type="text" class="form-control" id="input_release_time" placeholder="请选择上映时间！"> </div> </div> <div class="box-footer"> <button type="submit" class="btn btn-primary">添加</button> </div> </form> </div> </div> </div> </section> {% endblock %} {% block js %} <!--播放页面--> <script src="{{ url_for('static',filename='jwplayer/jwplayer.js') }}"></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": 200, height: 250, width: 387, }); </script> <script> $(document).ready(function () { $('#input_release_time').datepicker({ autoclose: true, format: 'yyyy-mm-dd', language: 'zh-CN', }); }); </script> <script> // 激活菜单栏 $(document).ready(function () { $("#g-3").addClass('active'); $("#g-3-1").addClass('active'); }) </script> {% endblock %} ```  ### 添加movie_list.html电影列表页面 ```html {% extends 'admin/base.html' %} {% block css %} {% endblock %} {% block content %} <section class="content-header"> <h1>微电影管理系统</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> 电影管理</a></li> <li class="active">电影列表</li> </ol> </section> <section class="content" id="showcontent"> <div class="row"> <div class="col-md-12"> <div class="box box-primary"> <div class="box-header"> <h3 class="box-title">电影列表</h3> <div class="box-tools"> <div class="input-group input-group-sm" style="width: 150px;"> <input type="text" name="table_search" class="form-control pull-right" placeholder="请输入关键字..."> <div class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="fa fa-search"></i> </button> </div> </div> </div> </div> <div class="box-body table-responsive no-padding"> <table class="table table-hover"> <tbody> <tr> <th>编号</th> <th>片名</th> <th>片长</th> <th>标签</th> <th>地区</th> <th>星级</th> <th>播放数量</th> <th>评论数量</th> <th>上映时间</th> <th>操作事项</th> </tr> {% for i in range(5) %} <tr> <td>1</td> <td>环太平洋</td> <td>5分钟</td> <td>科幻</td> <td>美国</td> <td>5</td> <td>0</td> <td>0</td> <td>2017-01-01</td> <td> <a class="label label-success">编辑</a> &nbsp; <a class="label label-danger">删除</a> </td> </tr> {% endfor %} </tbody> </table> </div> <div class="box-footer clearfix"> <ul class="pagination pagination-sm no-margin pull-right"> <li><a href="#">首页</a></li> <li><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">下一页</a></li> <li><a href="#">尾页</a></li> </ul> </div> </div> </div> </div> </section> {% endblock %} {% block js %} <script> // 激活菜单栏 $(document).ready(function () { $("#g-3").addClass('active'); $("#g-3-2").addClass('active'); }) </script> {% endblock %} ```  ### 添加电影管理视图 ```python @admin.route("/movie/add/") def movie_add(): return render_template('admin/movie_add.html') @admin.route("/movie/list/") def movie_list(): return render_template('admin/movie_list.html') ``` ### 修改base.html添加电影标签和激活 ```html <li class="treeview" id="g-3"> <a href="#"> <i class="fa fa-file-video-o" aria-hidden="true"></i> <span>电影管理</span> <span class="label label-primary pull-right">2</span> </a> <ul class="treeview-menu"> <li id="g-3-1"> <a href="{{ url_for('admin.movie_add') }}"> <i class="fa fa-circle-o"></i> 添加电影 </a> </li> <li id="g-3-2"> <a href="{{ url_for('admin.movie_list') }}"> <i class="fa fa-circle-o"></i> 电影列表 </a> </li> </ul> </li> ``` ## 搭建后台预告管理页面 ### 添加preview_add.html添加预告页面 ```html {% extends 'admin/base.html' %} {% block content %} <section class="content-header"> <h1>微电影管理系统</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> 预告管理</a></li> <li class="active">添加预告</li> </ol> </section> <section class="content" id="showcontent"> <div class="row"> <div class="col-md-12"> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">添加预告</h3> </div> <form role="form"> <div class="box-body"> <div class="form-group"> <label for="input_title">预告标题</label> <input type="text" class="form-control" id="input_title" placeholder="请输入预告标题！"> </div> <div class="form-group"> <label for="input_logo">预告封面</label> <input type="file" id="input_logo"> <img data-src="holder.js/700x320" style="margin-top:5px;" class="img-responsive" alt=""> </div> </div> <div class="box-footer"> <button type="submit" class="btn btn-primary">添加</button> </div> </form> </div> </div> </div> </section> {% endblock %} {% block js %} <script> // 激活菜单栏 $(document).ready(function () { $("#g-4").addClass('active'); $("#g-4-1").addClass('active'); }) </script> {% endblock %} ```  ### 添加preview_list.html显示预告页面 ```html {% extends 'admin/base.html' %} {% block content %} <section class="content-header"> <h1>微电影管理系统</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> 预告管理</a></li> <li class="active">预告列表</li> </ol> </section> <section class="content" id="showcontent"> <div class="row"> <div class="col-md-12"> <div class="box box-primary"> <div class="box-header"> <h3 class="box-title">预告列表</h3> <div class="box-tools"> <div class="input-group input-group-sm" style="width: 150px;"> <input type="text" name="table_search" class="form-control pull-right" placeholder="请输入关键字..."> <div class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="fa fa-search"></i> </button> </div> </div> </div> </div> <div class="box-body table-responsive no-padding"> <table class="table table-hover"> <tbody> <tr> <th>编号</th> <th>预告标题</th> <th>预告封面</th> <th>添加时间</th> <th>操作事项</th> </tr> {% for i in range(5) %} <tr> <td>1</td> <td>环太平洋</td> <td> <img data-src="holder.js/140x64" class="img-responsive center-block" alt=""> </td> <td>2017-06-01</td> <td> <a class="label label-success">编辑</a> &nbsp; <a class="label label-danger">删除</a> </td> </tr> {% endfor %} </tbody> </table> </div> <div class="box-footer clearfix"> <ul class="pagination pagination-sm no-margin pull-right"> <li><a href="#">首页</a></li> <li><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">下一页</a></li> <li><a href="#">尾页</a></li> </ul> </div> </div> </div> </div> </section> {% endblock %} {% block js %} <script> // 激活菜单栏 $(document).ready(function () { $("#g-4").addClass('active'); $("#g-4-2").addClass('active'); }) </script> {% endblock %} ```  ### 添加预告管理视图 ```python @admin.route("/preview/add/") def preview_add(): return render_template('admin/preview_add.html') @admin.route("/preview/list/") def preview_list(): return render_template('admin/preview_list.html') ``` ### 修改base.html添加预告链接和激活 ```html <li class="treeview" id="g-4"> <a href="#"> <i class="fa fa-film" aria-hidden="true"></i> <span>预告管理</span> <span class="label label-primary pull-right">2</span> </a> <ul class="treeview-menu"> <li id="g-4-1"> <a href="{{ url_for('admin.preview_add') }}"> <i class="fa fa-circle-o"></i> 添加预告 </a> </li> <li id="g-4-2"> <a href="{{ url_for('admin.preview_list') }}"> <i class="fa fa-circle-o"></i> 预告列表 </a> </li> </ul> </li> ```

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/9a1158154dfa42caddbd0694a4e9bdc8/

很赞哦！ (0)