Flask开发微电影网站(八)

1.后台管理之电影预告管理

1.1 定义电影预告表单

在app的admin目录的forms.py文件中，定义电影预告表单

# 预告表单
class PreviewForm(FlaskForm):
    title = StringField(
        label="预告标题",
        validators=[
            DataRequired("请输入预告标题!")
        ],
        description="预告标题",
        render_kw={
            "class": "form-control",
            "placeholder": "请输入预告标题!",
        }
    )

    logo = FileField(
        label="预告封面",
        validators=[
            DataRequired("请上传预告封面!")
        ],
        description="预告封面",
    )
    submit = SubmitField(
        "编辑",
        render_kw={
            "class": "btn btn-primary",
        }
    )

1.2 电影管理之所有电影预告列表

1.2.1 电影管理之电影预告列表视图函数

在admin目录下的views.py文件中定义电影预告列表视图函数

电影预告列表视图函数需要被登录控制装饰器和权限控制装饰器同时装饰

@admin.route('/preview/list/<int:page>', methods=["GET"])
@admin_login_req
@admin_auth
def preview_list(page=None):
    if page is None:
        page = 1
    page_data = Preview.query.order_by(Preview.addtime.desc()).paginate(page=page, per_page=10)

    return render_template("admin/preview_list.html", page_data=page_data)

1.2.2 电影管理之电影预告列表前端页面

电影预告列表页面继承admin.html页面，还需要导入admin_page.html页面以实现分页效果

{% extends 'admin/admin.html' %}
{% import "ui/admin_page.html" as pg %}

{% 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">
                        {% for msg in get_flashed_messages(category_filter=["ok"]) %}
                            <div class="alert alert-success alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4><i class="icon fa fa-check"></i> 操作成功</h4>
                                {{ msg }}
                            </div>
                        {% endfor %}

                        <table class="table table-hover">
                            <tbody>
                            <tr>
                                <th>编号</th>
                                <th>预告标题</th>
                                <th>预告封面</th>
                                <th>添加时间</th>
                                <th>操作事项</th>
                            </tr>

                            {% for v in page_data.items %}
                                <tr>
                                    <td>{{ v.id }}</td>
                                    <td>{{ v.title }}</td>
                                    <td>
                                        <img data-src="{{ url_for("static",filename="uploads/"+v.logo) }}"
                                             class="img-responsive center-block" alt="">
                                    </td>
                                    <td>{{ v.addtime }}</td>
                                    <td>
                                        <a href="{{ url_for('admin.preview_edit',id=v.id) }}"
                                           class="label label-success">编辑</a>
                                        &nbsp;
                                        <a href="{{ url_for('admin.preview_del',id=v.id) }}" class="label label-danger">删除</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="box-footer clearfix">
                        {{ pg.page(page_data,"admin.preview_list") }}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            $("#g-4").addClass('active');
            $("#g-4-2").addClass('active');
        });
    </script>
{% endblock %}

1.3 电影管理之添加电影预告

1.3.1 电影管理之添加电影预告视图函数

在admin目录下的views.py文件中定义添加电影预告视图函数

添加电影预告视图函数需要被登录控制装饰器和权限控制装饰器同时装饰

@admin.route('/preview/add/', methods=["GET", "POST"])
@admin_login_req
@admin_auth
def preview_add():
    form = PreviewForm()
    if form.validate_on_submit():
        data = form.data
        file_logo = secure_filename(form.logo.data.filename)

        if not os.path.exists(app.config["UP_DIR"]):
            os.makedirs(app.config["UP_DIR"])
            os.chmod(app.config["UP_DIR"])
        logo = change_filename(file_logo)
        form.logo.data.save(app.config["UP_DIR"] + logo)
        preview = Preview(
            title=data.get("title"),
            logo=logo
        )
        db.session.add(preview)
        db.session.commit()
        flash("添加预告成功!", "ok")
        return redirect(url_for("admin.preview_add"))
    return render_template("admin/preview_add.html", form=form)

1.3.2 电影管理之添加电影预告前端页面

电影预告列表页面继承admin.html页面

{% extends 'admin/admin.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">

                            {% for msg in get_flashed_messages(category_filter=["ok"]) %}
                                <div class="alert alert-success alert-dismissible">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
                                    </button>
                                    <h4><i class="icon fa fa-check"></i> 操作成功</h4>
                                    {{ msg }}
                                </div>
                            {% endfor %}

                            <div class="form-group">
                                <label for="input_title">{{ form.title.label }}</label>
                                {{ form.title }}
                                {% for err in form.title.errors %}
                                    <div class="col-md-12">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="form-group">
                                <label for="input_logo">{{ form.logo.label }}</label>
                                {{ form.logo }}
                                {% for err in form.logo.errors %}
                                    <div class="col-md-12">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                                <img data-src="holder.js/700x320" style="margin-top:5px;" class="img-responsive"
                                     alt="">
                            </div>
                        </div>
                        <div class="box-footer">
                            {{ form.csrf_token }}
                            {{ form.submit }}
                        </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-4").addClass('active');
            $("#g-4-1").addClass('active');
        });
    </script>
{% endblock %}

1.4 电影管理之编辑电影预告

1.4.1 电影管理之编辑电影预告视图函数

在admin目录下的views.py文件中定义编辑电影预告视图函数

编辑电影预告视图函数需要被登录控制装饰器和权限控制装饰器同时装饰

@admin.route("/preview/edit/<int:id>/", methods=['GET', 'POST'])
@admin_login_req
@admin_auth
def preview_edit(id=None):
    form = PreviewForm()
    form.logo.validators = []
    preview = Preview.query.get_or_404(int(id))
    if request.method == "GET":
        form.title.data = preview.title
    if form.validate_on_submit():
        data = form.data
        if form.logo.data.filename != "":
            file_logo = secure_filename(form.logo.data.filename)
            preview.logo = change_filename(file_logo)
            form.logo.data.save(app.config["UP_DIR"] + preview.logo)
        preview.title = data.get("title")
        db.session.add(preview)
        db.session.commit()
        flash("修改预告成功！", "ok")
        return redirect(url_for("admin.preview_edit", id=id))
    return render_template("admin/preview_edit.html", form=form, preview=preview)

1.4.2 电影管理之编辑电影预告前端页面

电影预告列表页面继承admin.html页面

{% extends "admin/admin.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" method="post" enctype="multipart/form-data">
                        <div class="box-body">

                            <!--消息闪现-->
                            {% for msg in get_flashed_messages(category_filter=["ok"]) %}
                                <div class="alert alert-success alert-dismissible">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×
                                    </button>
                                    <h4><i class="icon fa fa-check"></i> 操作成功</h4>
                                    {{ msg }}
                                </div>
                            {% endfor %}

                            <div class="form-group">
                                <label for="input_title">{{ form.title.label }}</label>
                                {{ form.title }}
                                <!--报错信息-->
                                {% for err in form.title.errors %}
                                    <div class="col-md-12">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="form-group">
                                <label for="input_logo">{{ form.logo.label }}</label>
                                {{ form.logo }}
                                <!--报错信息-->
                                {% for err in form.logo.errors %}
                                    <div class="col-md-12">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                                <img src="{{ url_for('static',filename='uploads/'+preview.logo) }}"
                                     style="margin-top:5px;" class="img-responsive"
                                     alt="">
                            </div>
                        </div>
                        <div class="box-footer">
                            {{ form.submit }}
                            {{ form.csrf_token }}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!--内容-->
{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            $("#g-4").addClass("active");
            $("#g-4-1").addClass("active");
        });
    </script>
{% endblock %}

1.5 电影管理之删除电影预告

1.5.1 电影管理之删除电影视预告图函数

在admin目录下的views.py文件中定义删除电影预告视图函数

删除电影预告视图函数需要被登录控制装饰器和权限控制装饰器同时装饰

@admin.route("/preview/del/<int:id>/", methods=['GET', 'POST'])
@admin_login_req
@admin_auth
def preview_del(id=None):
    preview = Preview.query.get_or_404(int(id))
    db.session.delete(preview)
    db.session.commit()

    flash("删除预告成功！", "ok")
    return redirect(url_for("admin.preview_list", page=1))

1.后台管理之会员管理

2.1 会员管理之所有会员列表

2.1.1 会员管理之会员列表视图函数

在admin目录下的views.py文件中定义会员列表视图函数

会员列表视图函数需要被登录控制装饰器和权限控制装饰器同时装饰

@admin.route('/user/list/<int:page>/', methods=['GET'])
@admin_login_req
@admin_auth
def user_list(page=None):
    if page is None:
        page = 1
    page_data = User.query.order_by(User.addtime.asc()).paginate(page=page, per_page=3)
    return render_template("admin/user_list.html", page_data=page_data)

2.1.2 会员管理之会员列表前端页面

电影预告列表页面继承admin.html页面，还需要导入admin_page.html页面以实现分页效果

{% extends 'admin/admin.html' %}
{% import "ui/admin_page.html" as pg %}

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

                        <!--消息提示-->
                        {% for msg in get_flashed_messages(category_filter=["ok"]) %}
                            <div class="alert alert-success alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4><i class="icon fa fa-check"></i> 操作成功</h4>
                                {{ msg }}
                            </div>
                        {% endfor %}

                        <table class="table table-hover">
                            <tbody>
                            <tr>
                                <th>编号</th>
                                <th>昵称</th>
                                <th>邮箱</th>
                                <th>手机</th>
                                <th>头像</th>
                                <th>注册时间</th>
                                <th>操作事项</th>
                            </tr>
                            {% for v in page_data.items %}
                                <tr>
                                    <td>{{ v.id }}</td>
                                    <td>{{ v.name }}</td>
                                    <td>{{ v.email }}</td>
                                    <td>{{ v.face }}</td>
                                    <td>
                                        <img src="{{ url_for('static',filename='uploads/users/%s'% v.face) }}"
                                             style="width:50px;" class="img-responsive center-block" alt="">
                                    </td>
                                    <td>{{ v.addtime }}</td>
                                    <td>
                                        <a class="label label-success" href="{{ url_for('admin.user_view',id=v.id) }}">查看</a>
                                        &nbsp;
                                        <a class="label label-danger" href="{{ url_for('admin.user_del',id=v.id) }}">删除</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="box-footer clearfix">
                        {{ pg.page(page_data,'admin.user_list') }}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
    $(document).ready(function () {
    $("#g-5").addClass('active');
    $("#g-5-1").addClass('active');
    });
{% endblock %}

2.2 会员管理之查看会员

2.2.1 会员管理之查看会员视图函数

在admin目录下的views.py文件中定义查看会员详细信息视图函数

查看会员详细信息视图函数需要被登录控制装饰器和权限控制装饰器同时装饰

@admin.route('/user/view/<int:id>/', methods=['GET'])
@admin_login_req
@admin_auth
def user_view(id=None):
    user = User.query.get_or_404(int(id))
    return render_template("admin/user_view.html", user=user)

2.2.2 会员管理之查看会员前端页面

电影预告列表页面继承admin.html页面

{% extends 'admin/admin.html' %}

{% block css %}
    <style>
        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            vertical-align: middle;
            text-align: left;
        }

        .td_bd {
            font-weight: bold;
        }
    </style>
{% 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>
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover">
                            <tbody>
                            <tr>
                                <td class="td_bd">编号：</td>
                                <td>{{ user.id }}</td>
                            </tr>
                            <tr>
                                <td class="td_bd">昵称：</td>
                                <td>{{ user.name }}</td>
                            </tr>
                            <tr>
                                <td class="td_bd">邮箱：</td>
                                <td>{{ user.email }}</td>
                            </tr>
                            <tr>
                                <td class="td_bd">手机：</td>
                                <td>{{ user.phone }}</td>
                            </tr>
                            <tr>
                                <td class="td_bd">头像：</td>
                                <td>
                                    <img src="{{ url_for('static',filename='uploads/users/' + user.face) }}"
                                         style="width:100px;" class="img-responsive" alt="">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_bd">注册时间：</td>
                                <td>
                                    {{ user.addtime }}
                                </td>
                            </tr>
                            <tr>
                                <td class="td_bd">唯一标志符：</td>
                                <td>
                                    {{ user.uuid }}
                                </td>
                            </tr>
                            <tr>
                                <td class="td_bd">个性简介：</td>
                                <td>
                                    {{ user.info }}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
    $(document).ready(function () {
    $("#g-5").addClass('active');
    $("#g-5-1").addClass('active');
    });
{% endblock %}

2.3 会员管理之删除会员

2.3.1 会员管理之删除会员视图函数

在admin目录下的views.py文件中定义删除会员视图函数

删除会员视图函数需要被登录控制装饰器和权限控制装饰器同时装饰

@admin.route("/user/del/<int:id>/", methods=['GET'])
@admin_login_req
@admin_auth
def user_del(id=None):
    user = User.query.get_or_404(int(id))
    db.session.delete(user)
    db.session.commit()
    flash("删除会员成功", "ok")
    return redirect(url_for('admin.user_list', page=1))

3.后台管理之电影评论管理

3.1 电影管理之所有电影评论列表

3.1.1 电影管理之电影评论列表视图函数

在admin目录下的views.py文件中定义电影评论列表视图函数

电影评论列表视图函数需要被登录控制装饰器和权限控制装饰器同时装饰

@admin.route('/comment/list/<int:page>/', methods=['GET'])
@admin_login_req
@admin_auth
def comment_list(page=None):
    if page is None:
        page = 1
    page_data = Comment.query.join(Movie).join(User).filter(
        Movie.id == Comment.movie_id,
        User.id == Comment.user_id
    ).order_by(Comment.addtime).paginate(page=page, per_page=10)

    return render_template("admin/comment_list.html", page_data=page_data)

3.1.2 电影管理之电影评论列表前端页面

电影预告列表页面继承admin.html页面，还需要导入admin_page.html页面以实现分页效果

{% extends 'admin/admin.html' %}
{% import "ui/admin_page.html" as pg %}

{% 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 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 box-comments">

                    <!--消息提示-->
                    {% for msg in get_flashed_messages(category_filter=["ok"]) %}
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <h4><i class="icon fa fa-check"></i> 操作成功</h4>
                        {{ msg }}
                    </div>
                    {% endfor %}

                        {% for v in page_data.items %}
                        <div class="box-comment">
                            <img class="img-circle img-sm"
                                 src="{{ url_for('static',filename='uploads/users/%s' % v.user.face) }}" alt="User Image">
                            <div class="comment-text">
                                    <span class="username">
                                        {{ v.user.name }}
                                        <span class="text-muted pull-right">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                            &nbsp;
                                            {{ v.addtime }}
                                        </span>
                                    </span>
                                关于电影<a>《{{ v.movie.title }}》</a>的评论：{{ v.content }}
                                <br><a href="{{ url_for('admin.comment_del',id=v.id) }}" class="label label-danger pull-right">删除</a>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="box-footer clearfix">
                        {{ pg.page(page_data,"admin.comment_list") }}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
    $(document).ready(function () {
    $("#g-6").addClass('active');
    $("#g-6-1").addClass('active');
    });
{% endblock %}

3.2 电影管理之删除电影评论

3.2.1 电影管理之删除电影评论视图函数

在admin目录下的views.py文件中定义删除电影评论视图函数

删除电影评论视图函数需要被登录控制装饰器和权限控制装饰器同时装饰

@admin.route("/comment/del/<int:id>/", methods=['GET'])
@admin_login_req
@admin_auth
def comment_del(id=None):
    comment = Comment.query.get_or_404(int(id))
    db.session.delete(comment)
    db.session.commit()
    flash("删除评论成功", "ok")
    return redirect(url_for("admin.comment_list", page=1))