BBS论坛（二十七）

27.首页帖子列表布局完成

（1）apps/models.py

把帖子跟用户关联起来

class PostModel(db.Model):
    __tablename__ = 'post'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    title = db.Column(db.String(200), nullable=False)
    content = db.Column(db.Text, nullable=False)
    create_time = db.Column(db.DateTime, default=datetime.now)
    board_id = db.Column(db.Integer, db.ForeignKey('board.id'))
    board = db.relationship('BoardModel', backref='posts')
    author_id = db.Column(db.String(50), db.ForeignKey('front_user.id'), nullable=False)
    author = db.relationship('FrontUser', backref='posts')

把之前数据库里面的帖子都删了，migrate、upgrade后重新发表新帖子

（2）front/views.py

apost添加author

@bp.route('/apost/', methods=['POST', 'GET'])
@login_requried
def apost():
    #....

            post.author = g.front_user   
    #....
            return restful.params_error(message=form.get_error())

index里面渲染所有的帖子给前端

@bp.route('/')
def index():
    banners = BannerModel.query.order_by(BannerModel.priority.desc()).limit(4)
    boards = BoardModel.query.all()
    posts = PostModel.query.all()
    context = {
        'banners':banners,
        'boards':boards,
        'posts':posts,
    }
    return render_template('front/front_index.html',**context)

（4）front/front_index.html

<ul class="post-group-head">
                    <li class="active"><a href="#">最新</a></li>
                    <li><a href="#">精华帖子</a></li>
                    <li><a href="#">点赞最多</a></li>
                    <li><a href="#">评论最多</a></li>
                </ul>

                <ul class="post-list-group">
                    {% for post in posts %}
                        <li>
                            <div class="author-avatar-group">
                                <img src="{{ post.author.avatar or url_for('static',filename='common/images/logo.jpg') }}" alt="">
                            </div>

                            <div class="post-info-group">
                                <p class="post-title">{{ post.title }}</p>
                                <p class="post-info">
                                    <span>作者:{{ post.author.username }}</span>
                                    <span>发表时间:{{ post.create_time }}</span>
                                    <span>评论:0</span>
                                    <span>阅读数 :0</span>
                                </p>
                            </div>
                        </li>
                    {% endfor %}
                </ul>

（5）front/css/front_index.css

*{
    margin: 0;
    padding:0;
    vertical-align: baseline;
}

.post-group{
    border: 1px solid #ddd;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 5px;
    padding: 10px;
}

.post-group-head{
    overflow: hidden;
    list-style: none;
}

.post-group-head li{
    float: left;
    padding: 5px 10px;
}

.post-group-head a{
    color: #333;
}

.post-group-head li.active{
    background: #ccc;
}



.post-list-group{
    margin-top: 20px;
}

.post-list-group li{
    overflow: hidden;
    padding-bottom: 20px;
}

.author-avatar-group{
    float: left;
}

.author-avatar-group img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.post-info-group{
    float: left;
    margin-left: 10px;
    border-bottom: 1px solid #e6e6e6;
    width: 85%;
    padding-bottom: 10px;
}

.post-info-group .post-info{
    margin-top: 10px;
    font-size: 12px;
    color: #8c8c8c;
}

.post-info span{
    margin-right: 10px;
}