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