一百四十三：CMS系统之评论布局和功能一

模型

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 manager.py db migrate
python manager.py db upgrade

form

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

视图

@bp.route('/acomment/', methods=['POST'])
@login_required
def acomment():
    """ 添加评论 """
    form = AddCommentForm(request.form)
    if form.validate():
        content = form.content.data
        post_id = 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 restful.success()
        else:
            return restful.params_error('没有这个帖子')
    else:
        return restful.params_error(form.get_error())

页面

{% extends 'front/front_base.html' %}
{% from 'common/_macros.html' import static %}

{% block title %}
    {{ post.title }}
{% endblock %}

{% block head %}
    <script src="{{ static('ueditor/ueditor.config.js') }}"></script>
    <script src="{{ static('ueditor/ueditor.all.min.js') }}"></script>
    <script src="{{ static('front/js/front_post_detail.js') }}"></script>
    <link rel="stylesheet" href="{{ static('front/css/front_post_detail.css') }}">
{% endblock %}

{% block body %}
    <div class="lg-container">
        <div class="post-container">
            <h2>{{ post.title }}</h2>
            <p class="post-info-group">
                <span>发表时间：{{ post.create_time }}</span>
                <span>作者：{{ post.author.username }}</span>
                <span>所属板块：{{ post.board.name }}</span>
                <span>阅读数：{{ post.read_count }}</span>
                <span>评论数：0</span>
            </p>
            <article class="post-content">
                {{ post.content|safe }} {# 标识此html为安全，即渲染，否则会渲染为纯文本 #}
            </article>
        </div>
        <div class="comment-group">
            <h3>评论列表</h3>
            <ul class="comment-list-group">
                {% for comment in post.comments %}
                    <li>{{ comment.content }}</li>
                {% endfor %}
            </ul>
        </div>
        <div class="add-comment-group">
            <h3>发表评论</h3>
            <script id="editor" type="text/plain" style="height: 100px"></script>
            <div class="comment-btn-group">
                <button class="btn btn-primary">发表评论</button>
            </div>
        </div>

    </div>
    <div class="sm-container"></div>
{% endblock %}

js，初始化ueditor，并且定制ueditor工具栏按钮：http://fex.baidu.com/ueditor/#start-toolbar

$(function () {
   //初始化ueditor
    var ue = UE.getEditor('editor', {
        'serverUrl': '/ueditor/upload/',
        // 定制uedtior工具栏按钮
        "toolbars": [
            [
                'undo', //撤销
                'redo', //重做
                'bold', //加粗
                'italic', //斜体
                'source', //源代码
                'blockquote', //引用
                'selectall', //全选
                'insertcode', //代码语言
                'fontfamily', //字体
                'fontsize', //字号
                'simpleupload', //单图上传
                'emotion' //表情
            ]
        ]
    })
});

css

/* 评论列表 */
.comment-group{
    margin-top: 20px;
    border: 1px solid #e8e8e8;
    padding: 10px;
}
.add-comment-group{
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #e8e8e8;
}
.add-comment-group h3{
    margin-bottom: 10px;
}
.comment-btn-group{
    margin-top: 10px;
    text-align: right;
}

效果