Flask開發微電影網站(七)

1.背景管理之電影管理

1.1 定義電影表單

在app的admin目錄的forms.py檔案中，定義電影表單

# 電影表單
class MovieForm(FlaskForm):
    title = StringField(
        label="片名",
        validators=[
            DataRequired("請輸入片名!")
        ],
        description="片名",
        render_kw={
            "class": "form-control",
            "id": 'input_name',
            'placeholder': '請輸入片名！'
        }
    )

    url = FileField(
        label="檔案",
        validators=[
            DataRequired("請上傳檔案!")
        ],
        description="檔案"
    )

    info = TextAreaField(
        label="簡介",
        validators=[
            DataRequired("請輸入簡介!")
        ],
        description="簡介",
        render_kw={
            "class": "form-control",
            "rows": 10
        }
    )

    logo = FileField(
        label="封面",
        validators=[
            DataRequired("請上傳封面!")
        ],
        description="封面",
    )
    star = SelectField(
        label="星級",
        validators=[
            DataRequired("請選擇星級!")
        ],
        coerce=int,
        choices=[(1, "1星"), (2, "2星"), (3, "3星"), (4, "4星"), (5, "5星")],
        render_kw={
            "class": "form-control",
        }
    )
    tag_id = SelectField(
        label="标簽",
        validators=[
            DataRequired("請選擇标簽!"),
        ],
        coerce=int,
        choices=[(v.id, v.name) for v in tags],
        description="标簽",
        render_kw={
            "class": "form-control",
        }
    )
    area = StringField(
        label="地區",
        validators=[
            DataRequired("請輸入地區!")
        ],
        description="地區",
        render_kw={
            "class": "form-control",
            'placeholder': '請輸入地區！'
        }
    )
    length = StringField(
        label="片長",
        validators=[
            DataRequired("請輸入片長!")
        ],
        description="片長",
        render_kw={
            "class": "form-control",
            "id": 'input_name',
            'placeholder': '請輸入片長！'
        }
    )
    release_time = StringField(
        label="上映時間",
        validators=[
            DataRequired("請輸入上映時間!")
        ],
        description="上映時間",
        render_kw={
            "class": "form-control",
            "id": 'input_release_time',
            'placeholder': '請輸入上映時間！'
        }
    )
    submit = SubmitField(
        "編輯",
        render_kw={
            'class': 'btn btn-primary'
        }
    )           

1.2 電影管理之所有電影清單

1.2.1 電影管理之電影清單視圖函數

擷取電影的所有相關資訊，傳回給前端進行展示

# 電影清單
@admin.route('/movie/list/<int:page>', methods=["GET"])
@admin_login_req
@admin_auth
def movie_list(page=None):
    if page is None:
        page = 1
    page_data = Movie.query.join(Tag).filter(Tag.id == Movie.tag_id).order_by(
        Movie.addtime.desc()
    ).paginate(page=page, per_page=10)
    return render_template("admin/movie_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">x</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>
                                <th>評論數量</th>
                                <th>上映時間</th>
                                <th>操作事項</th>
                            </tr>
                            {% for v in page_data.items %}
                                <tr>
                                    <td>{{ v.id }}</td>
                                    <td>{{ v.title }}</td>
                                    <td>{{ v.length }}</td>
                                    <td>{{ v.tag.name }}</td>
                                    <td>{{ v.area }}</td>
                                    <td>{{ v.star }}</td>
                                    <td>{{ v.playnum }}</td>
                                    <td>{{ v.commentnum }}</td>
                                    <td>{{ v.release_time }}</td>
                                    <td>
                                        <a href="{{ url_for("admin.movie_edit",id=v.id) }}" class="label label-success">編輯</a>
                                        &nbsp;
                                        <a href="{{ url_for("admin.movie_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.movie_list") }}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

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

1.3 電影管理之添加電影

1.3.1 電影管理之上傳電影修改檔案名稱方法

電影上傳到網站背景，要重新生成新的檔案名，然後儲存在資料庫中

在admin目錄的views.py檔案中定義修改上傳電影名稱的方法

# 修改檔案名稱
def change_filename(filename):
    fileinfo = os.path.splitext(filename)
    filename = datetime.datetime.now().strftime("%Y%m%d%H%M%S") + str(uuid.uuid4().hex) + fileinfo[-1]
    return filename           

1.3.2 電影管理之添加電影視圖函數

# 添加電影
@admin.route('/movie/add/', methods=["POST", "GET"])
@admin_login_req
@admin_auth
def movie_add():
    form = MovieForm()
    if form.validate_on_submit():
        data = form.data

        file_url = secure_filename(form.url.data.filename)
        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'], "rw")
        url = change_filename(file_url)
        logo = change_filename(file_logo)
        form.url.data.save(app.config['UP_DIR'] + url)
        form.logo.data.save(app.config['UP_DIR'] + logo)

        movie = Movie(
            title=data.get("title"),
            url=url,
            info=data.get("info"),
            star=int(data.get("star")),
            tag_id=int(data.get("tag_id")),
            area=data.get("Searching for Usages in Project Files..."),
            release_time=data.get("release_time"),
            length=data.get("length"),
            logo=logo,
            playnum=0,
            commentnum=0,
        )
        db.session.add(movie)
        db.session.commit()
        flash("添加電影成功!", "ok")
        return redirect(url_for("admin.movie_list", page=1))

    return render_template("admin/movie_add.html", form=form)           

1.3.3 電影管理之添加電影前端頁面

添加電影前端頁面繼承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-2">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="form-group">
                                <label for="input_url">{{ form.url.label }}</label>
                                {{ form.url }}
                                {% for err in form.url.errors %}
                                    <div class="col-md-2">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                                <div style="margin-top:5px;">
                                    <div id="moviecontainer"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="input_info">{{ form.info.label }}</label>
                                {{ form.info }}
                                {% for err in form.info.errors %}
                                    <div class="col-md-2">
                                        <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-2">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                                <img data-src="holder.js/262x166" style="margin-top:5px;" class="img-responsive"
                                     alt="">
                            </div>
                            <div class="form-group">
                                <label for="input_star">{{ form.star.label }}</label>
                                {{ form.star }}
                                {% for err in form.star.errors %}
                                    <div class="col-md-2">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="form-group">
                                <label for="input_tag_id">{{ form.tag_id.label }}</label>
                                {{ form.tag_id }}
                                {% for err in form.tag_id.errors %}
                                    <div class="col-md-2">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="form-group">
                                <label for="input_area">{{ form.area.label }}</label>
                                {{ form.area }}
                                {% for err in form.area.errors %}
                                    <div class="col-md-2">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="form-group">
                                <label for="input_length">{{ form.length.label }}</label>
                                {{ form.length }}
                                {% for err in form.length.errors %}
                                    <div class="col-md-2">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="form-group">
                                <label for="input_release_time">{{ form.release_time.label }}</label>
                                {{ form.release_time }}
                                {% for err in form.release_time.errors %}
                                    <div class="col-md-2">
                                        <font style="color:red">{{ err }}</font>
                                    </div>
                                {% endfor %}
                            </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>
        $(document).ready(function () {
            $('#input_release_time').datepicker({
                autoclose: true,
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
            });

            $("#g-3").addClass('active');
            $("#g-3-1").addClass('active');
        });
    </script>

{% endblock %}           

1.4 電影管理之編輯電影

1.4.1 電影管理之編輯電影視圖函數

# 編輯電影
@admin.route("/movie/edit/<int:id>", methods=["GET", "POST"])
@admin_login_req
@admin_auth
def movie_edit(id=None):
    form = MovieForm()
    form.url.validators = []
    form.logo.validators = []
    movie = Movie.query.get_or_404(int(id))

    if request.method == 'GET':
        form.info.data = movie.info
        form.tag_id.data = movie.tag_id
        form.star.data = movie.star
    if form.validate_on_submit():
        data = form.data
        movie_count = Movie.query.filter_by(title=data["title"]).count()
        if movie_count == 1 and movie.title != data.get("title"):
            flash("片名已經存在，請重新輸入!", "err")
            return redirect(url_for("admin.movie_edit", id=id))
        if not os.path.exists(app.config['UP_DIR']):
            os.makedirs(app.config['UP_DIR'])
            os.chmod(app.config['UP_DIR'])

        if form.url.data.filename != "":
            file_url = secure_filename(form.url.data.filename)
            movie_url = change_filename(file_url)
            form.url.data.save(app.config["UP_DIR"] + movie.url)

        if form.logo.data.filename != "":
            file_logo = secure_filename(form.logo.data.filename)
            movie.logo = change_filename(file_logo)
            form.logo.data.save(app.config["UP_DIR"] + movie.logo)

        movie.title = data.get("title")
        movie.info = data.get("info")
        movie.star = data.get("star")
        movie.tag_id = data.get("tag_id")
        movie.area = data.get("area")
        movie.release_time = data.get("release_time")
        movie.length = data.get("length")

        db.session.add(movie)
        db.session.commit()
        flash("修改電影成功!", "ok")
        return redirect(url_for("admin.movie_list", page=1))
    return render_template("admin/movie_edit.html", form=form, movie=movie)           

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

                        {% for msg in get_flashed_messages(category_filter=["err"]) %}
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <h4><i class="icon fa fa-ban"></i> 操作失敗</h4>
                            {{ msg }}
                        </div>
                    </div>
                    {% endfor %}

                        <div class="form-group">
                            <label for="input_title">{{ form.title.label }}</label>
                            <!--給個初始值-->
                            {{ form.title(value=movie.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_url">{{ form.url.label }}</label>
                            {{ form.url }}
                            {% for err in form.url.errors %}
                            <div class="col-md-12">
                                <font style="color:red">{{ err }}</font>
                            </div>
                            {% endfor %}
                            <div style="margin-top:5px;">
                                <div id="moviecontainer"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="input_info">{{ form.info.label }}</label>
                            {{ form.info }}
                            {% for err in form.info.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/'+movie.logo) }}" style="margin-top:5px;" class="img-responsive"
                                 alt="">
                        </div>
                        <div class="form-group">
                            <label for="input_star">{{ form.star.label }}</label>
                            {{ form.star }}
                            {% for err in form.star.errors %}
                            <div class="col-md-12">
                                <font style="color:red">{{ err }}</font>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-group">
                            <label for="input_tag_id">{{ form.tag_id.label }}</label>
                            {{ form.tag_id }}
                            {% for err in form.tag_id.errors %}
                            <div class="col-md-12">
                                <font style="color:red">{{ err }}</font>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-group">
                            <label for="input_area">{{ form.area.label }}</label>
                            {{ form.area(value=movie.area) }}
                            {% for err in form.area.errors %}
                            <div class="col-md-12">
                                <font style="color:red">{{ err }}</font>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-group">
                            <label for="input_length">{{ form.length.label }}</label>
                            {{ form.length(value=movie.length) }}
                            {% for err in form.length.errors %}
                            <div class="col-md-12">
                                <font style="color:red">{{ err }}</font>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-group">
                            <label for="input_release_time">{{ form.release_time.label }}</label>
                            {{ form.release_time(value=movie.release_time) }}
                            {% for err in form.release_time.errors %}
                            <div class="col-md-12">
                                <font style="color:red">{{ err }}</font>
                            </div>
                            {% endfor %}
                        </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='uploads/'+movie.url) }}",
            title: "{{ movie.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',
        });

        $("#g-3").addClass("active");
        $("#g-3-1").addClass("active");
    });

</script>
{% endblock %}           

1.5 電影管理之删除電影

1.5 電影管理之删除電影視圖函數

# 電影删除
@admin.route("/movie/del/<int:id>/", methods=['GET'])
@admin_login_req
@admin_auth
def movie_del(id=None):
    movie = Movie.query.get_or_404(int(id))
    db.session.delete(movie)
    db.session.commit()

    flash("删除電影成功!", "ok")
    return redirect(url_for("admin.movie_list", page=1))