BBS Forum (27)

BBS Forum (27)

27. The layout of the homepage post list is complete

(1) apps/models.py

Associate posts with users

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

Delete all the posts in the previous database, and republish new posts after migrate and upgrade

(2) front/views.py

apost add author

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

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

Render all posts in the index to the front end

@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="#">Latest</a></li>
                    <li><a href="#">Essence post</a></li>
                    <li><a href="#">Most likes</a></li>
                    <li><a href="#">Most comments</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> OF: {{post.author.username}} </span>
                                    <span>Post time: {{ post.create_time }}</span>
                                    <span>Comments:0</span>
                                    <span>Number of readings: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;
}
Reference: https://cloud.tencent.com/developer/article/1390475 BBS Forum (27)-Cloud + Community-Tencent Cloud