Flask实战第63天：评论布局和功能实现

评论后端逻辑实现

设计评论模型表， 编辑apps.models.py

class CommentModel(db.Model):
    __tablename__ = 'comment'
    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    content = db.Column(db.Text,nullable=False)
    create_time = db.Column(db.DateTime,default=datetime.now)
    post_id = db.Column(db.Integer,db.ForeignKey("post.id"))
    author_id = db.Column(db.String(100), db.ForeignKey("front_user.id"), nullable=False)

    post = db.relationship("PostModel",backref='comments')
    author = db.relationship("FrontUser",backref='comments')

同步表到数据库

python manage.py db migrate
python manage.py db upgrade

后端需要对评论进行表单验证，编辑front.forms.py

class AddCommentForm(BaseForm):
    content = StringField(validators=[InputRequired(message='请输入评论内容！')])
    post_id = IntegerField(validators=[InputRequired(message='请输入帖子id！')])

写视图函数，编辑front.views.py

from .forms import AddCommentForm
from apps.models import CommentModel
...

@bp.route('/acomment/',methods=['POST'])
@login_required
def add_comment():
    add_comment_form = AddCommentForm(request.form)
    if add_comment_form.validate():
        content = add_comment_form.content.data
        post_id = add_comment_form.post_id.data
        post = PostModel.query.get(post_id)
        if post:
            comment = CommentModel(content=content)
            comment.post = post
            comment.author = g.front_user
            db.session.add(comment)
            db.session.commit()
            return xjson.json_success()
        else:
            return xjson.json_param_error('没有这篇帖子！')
    else:
        return xjson.json_param_error(add_comment_form.get_error())

评论前端布局

在贴子详情那里绑定帖子id

评论需要用到ueditor编辑器，因此也要引入以下js

{% block head %}
    <script src="{{ url_for('static',filename='ueditor/ueditor.config.js') }}"></script>
    <script src="{{ url_for('static',filename='ueditor/ueditor.all.min.js') }}"></script>
    ...
{% endblock %}

编辑front_pdetail.css，设置样式

发表帖子必须要登录才行，为了判断是否登录，我们在front_base.html,设置个登录标签

最后,创建front_pdetail.js并引入