【Flask微电影】28.电影播放详情，评论，显示评论列表

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

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

电影播放详情

修改play电影播放视图

@home.route('/play/<int:movie_id>/')
def play(movie_id):
    movie = Movie.query.join(Tag).filter(
        Tag.id == Movie.tag_id,
        Movie.id == int(movie_id)
    ).first_or_404()
    return render_template('home/play.html', movie=movie)

修改paly.html电影播放页模板

<table class="table">
    <tr>
        <td style="width:30%;color:#ccc;font-weight:bold;font-style:italic;">
            <span class="glyphicon glyphicon-film"></span>&nbsp;片名
        </td>
        <td>{{ movie.title }}</td>
    </tr>
    <tr>
        <td style="color:#ccc;font-weight:bold;font-style:italic;">
            <span class="glyphicon glyphicon-tag"></span>&nbsp;标签
        </td>
        <td>{{ movie.tag.name }}</td>
    </tr>
    <tr>
        <td style="color:#ccc;font-weight:bold;font-style:italic;">
            <span class="glyphicon glyphicon-time"></span>&nbsp;片长
        </td>
        <td>{{ movie.length }} 分钟</td>
    </tr>
    <tr>
        <td style="color:#ccc;font-weight:bold;font-style:italic;">
            <span class="glyphicon glyphicon-map-marker"></span>&nbsp;地区
        </td>
        <td>{{ movie.area }}</td>
    </tr>
    <tr>
        <td style="color:#ccc;font-weight:bold;font-style:italic;">
            <span class="glyphicon glyphicon-star"></span>&nbsp;星级
        </td>
        <td>
            <div>
                {% for i in range(movie.star) %}
                    <span class="glyphicon glyphicon-star" style="color:#FFD119"></span>
                {% endfor %}
                {% for i in range(5 - movie.star) %}
                    <span class="glyphicon glyphicon-star-empty" style="color:#FFD119"></span>
                {% endfor %}
            </div>
        </td>
    </tr>
    <tr>
        <td style="color:#ccc;font-weight:bold;font-style:italic;">
            <span class="glyphicon glyphicon-calendar"></span>&nbsp;上映时间
        </td>
        <td>{{ movie.release_time }}</td>
    </tr>
    <tr>
        <td style="color:#ccc;font-weight:bold;font-style:italic;">
            <span class="glyphicon glyphicon-play"></span>&nbsp;播放数量
        </td>
        <td>{{ movie.play_num }}</td>
    </tr>
    <tr>
        <td style="color:#ccc;font-weight:bold;font-style:italic;">
            <span class="glyphicon glyphicon-comment"></span>&nbsp;评论数量
        </td>
        <td>{{ movie.comment_num }}</td>
    </tr>
    <tr>
        <td style="color:#ccc;font-weight:bold;font-style:italic;">
            <span class="glyphicon glyphicon-picture"></span>&nbsp;影片介绍
        </td>
        <td>
            {{ movie.info }}
        </td>
    </tr>
</table>


<script type="text/javascript">
    jwplayer("moviecontainer").setup({
        flashplayer: "{{ url_for('static', filename='jwplayer/jwplayer.flash.swf') }}",
        playlist: [{
            file: "{{ url_for('static', filename='media/' + 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": 400,
        height: 500,
        width: 774,
    });
</script>
<!--播放页面-->

修改index.html电影列表页详情链接

<a href="{{ url_for('home.play', movie_id=movie.id) }}" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>

电影评论

创建电影评论表单

class CommentForm(FlaskForm):
    content = TextAreaField(
        label='内容',
        validators=[
            DataRequired('请输入内容')
        ],
        description='内容',
        render_kw={
            # 'id': "input_content"
            'class': "form-control",
            'rows': "5"
        }
    )
    submit = SubmitField(
        label='提交评论',
        render_kw={
            "class": "btn btn-success",
            "id": "btn-sub"
        }
    )

修改play提交评论视图

@home.route('/play/<int:movie_id>/', methods=['GET', 'POST'])
def play(movie_id):
    movie = Movie.query.join(Tag).filter(
        Tag.id == Movie.tag_id,
        Movie.id == int(movie_id)
    ).first_or_404()

    if request.method == 'GET':
        movie.play_num += 1
        db.session.commit()

    form = CommentForm()
    if 'login_user' not in session:
        form.submit.render_kw = {
            'disabled': "disabled",
            "class": "btn btn-success",
            "id": "btn-sub"
        }
    if form.validate_on_submit() and 'login_user' in session:
        data = form.data
        comment = Comment(
            content=data['content'],
            movie_id=movie.id,
            user_id=session['login_user_id']
        )
        db.session.add(comment)
        movie.comment_num += 1
        db.session.commit()
        flash('评论成功', category='ok')
        return redirect(url_for('home.play', movie_id=movie.id))
    return render_template('home/play.html', movie=movie, form=form)

修改play.html增加评论模板

{% if 'login_user' not in session %}
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert">
            <span aria-hidden="true">×</span>
            <span class="sr-only">Close</span>
        </button>
        <strong>请先<a href="{{ url_for('home.login') }}" class="text-info">登录</a>，才可参与评论！</strong>
    </div>
{% endif %}
<ol class="breadcrumb" style="margin-top:6px;">
    <li>全部评论({{ movie.comment_num }})</li>
</ol>
<form role="form" style="margin-bottom:6px;" method="post">
    <div class="form-group">
        <div>
            <label for="input_content">{{ form.content.label }}</label>
            {{ form.content }}
        </div>
        <div class="col-xs-12" id="error_content"></div>
    </div>
    {{ form.csrf_token }}
    {{ form.submit }}
    &nbsp;
    {% if 'login_user' in session %}
        <a class="btn btn-danger" id="btn-col"><span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影</a>
    {% endif %}
</form>

image.png

电影评论列表

播放页面增加爱电影评论列表

修改play增加评论列表视图

@home.route('/play/<int:movie_id>/page/<int:page>/', methods=['GET', 'POST'])
def play(movie_id=None, page=None):
    movie = Movie.query.join(Tag).filter(
        Tag.id == Movie.tag_id,
        Movie.id == int(movie_id)
    ).first_or_404()

    if request.method == 'GET' and int(request.args.get('page', 0)) != 1:
        movie.play_num += 1  # 访问量加1
        db.session.commit()

    form = CommentForm()
    if 'login_user' not in session:
        form.submit.render_kw = {
            'disabled': "disabled",
            "class": "btn btn-success",
            "id": "btn-sub"
        }
    if form.validate_on_submit() and 'login_user' in session:
        data = form.data
        comment = Comment(
            content=data['content'],
            movie_id=movie.id,
            user_id=session['login_user_id']
        )
        db.session.add(comment)
        movie.comment_num += 1
        db.session.commit()
        flash('评论成功', category='ok')
        return redirect(url_for('home.play', movie_id=movie.id, page=1))

    if page is None:
        page = 1
    # 查询的时候关联标签，采用join来加进去,多表关联用filter,过滤用filter_by
    page_comments = Comment.query.join(
        Movie
    ).join(
        User
    ).filter(
        Movie.id == movie.id,
        User.id == Comment.user_id
    ).order_by(
        Comment.add_time.desc()
    ).paginate(page=page, per_page=10)

    return render_template('home/play.html', movie=movie, form=form, page_comments=page_comments)

修改play.html评论列表模板

<ul class="commentList">
    {% for comment in page_comments.items %}
        <li class="item cl">
            <a href="{{ url_for('home.user') }}">
                <i class="avatar size-L radius">
                    {% if comment.user.face %}
                        <img alt="50x50" src="{{ url_for('static', filename='user/' + comment.user.face) }}" class="img-circle" style="border:1px solid #abcdef;width: 50px">
                    {% else %}
                        <img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
                    {% endif %}
                </i>
            </a>
            <div class="comment-main">
                <header class="comment-header">
                    <div class="comment-meta">
                        <a class="comment-author" href="{{ url_for('home.user') }}">{{ comment.user.name }}</a>
                        评论于
                        <time title="{{ comment.add_time }}" datetime="{{ comment.add_time }}">{{ comment.add_time }}</time>
                    </div>
                </header>
                <div class="comment-body">
                    <p>{{ comment.content }}</p>
                </div>
            </div>
        </li>
    {% endfor %}
</ul>
<div class="col-md-12 text-center">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="{{ url_for('home.play', movie_id=movie.id, page=1) }}" aria-label="First">
                    <span aria-hidden="true">首页</span>
                </a>
            </li>
            {% if page_comments.has_prev %}
                <li>
                    <a href="{{ url_for('home.play', movie_id=movie.id, page=page_comments.prev_num) }}" aria-label="Previous">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            {% endif %}

            {%- for page in page_comments.iter_pages() %}
                {% if page %}
                    {% if page != page_comments.page %}
                        <li><a href="{{ url_for('home.play', movie_id=movie.id, page=page) }}">{{ page }}</a></li>
                    {% else %}
                        <li><a style="background: #0d6aad; color: white">{{ page }}</a></li>
                    {% endif %}
                {% endif %}
            {%- endfor %}

            {% if page_comments.has_next %}
                <li>
                    <a href="{{ url_for('home.play', movie_id=movie.id, page=page_comments.next_num) }}" aria-label="Next">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            {% endif %}
            <li>
                <a href="{{ url_for('home.play', movie_id=movie.id, page=page_comments.pages) }}" aria-label="Last">
                    <span aria-hidden="true">尾页</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

修改index.html跳转播放链接

<a href="{{ url_for('home.play', movie_id=movie.id, page=1) }}" class="btn btn-primary" target="_blank" role="button"><span class="glyphicon glyphicon-play"></span>&nbsp;播放</a>

[图片上传失败...(image-2ae175-1542031492695)]