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

个人博客，欢迎查看：https://blog.starmeow.cn/

Github地址：https://github.com/xyliurui/FlaskMovie

搭建后台标签管理页面

添加tag_add.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 %}

image.png

添加tag_list.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 %}

image.png

添加标签管理视图

@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添加标签链接和激活

<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添加电影页面

{% 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 %}

image.png

添加movie_list.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 %}

image.png

添加电影管理视图

@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添加电影标签和激活

<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添加预告页面

{% 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 %}

image.png

添加preview_list.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 %}

image.png

添加预告管理视图

@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添加预告链接和激活

<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>