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 電影管理之編輯電影預告前端頁面

{% 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 會員管理之會員清單前端頁面

{% 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 會員管理之檢視會員前端頁面

{% 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 電影管理之電影評論清單前端頁面

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