BBS Forum (27)

BBS Forum (27)

27. The layout of the homepage post list is complete

(1) apps/

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,
    board_id = db.Column(db.Integer, db.ForeignKey(''))
    board = db.relationship('BoardModel', backref='posts')
    author_id = db.Column(db.String(50), db.ForeignKey(''), 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/

apost add author

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

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

Render all posts in the index to the front end

def index():
    banners = BannerModel.query.order_by(BannerModel.priority.desc()).limit(4)
    boards = BoardModel.query.all()
    posts = PostModel.query.all()
    context = {
    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 class="post-list-group">
                    {% for post in posts %}
                            <div class="author-avatar-group">
                                <img src="{{ or url_for('static',filename='common/images/logo.jpg') }}" alt="">

                            <div class="post-info-group">
                                <p class="post-title">{{ post.title }}</p>
                                <p class="post-info">
                                    <Span> OF: {{}} </span>
                                    <span>Post time: {{ post.create_time }}</span>
                                    <span>Number of readings:0</span>
                    {% endfor %}

(5) front/css/front_index.css

    margin: 0;
    vertical-align: baseline;

    border: 1px solid #ddd;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 5px;
    padding: 10px;

    overflow: hidden;
    list-style: none;

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

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

    background: #ccc;

    margin-top: 20px;

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

    float: left;

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

    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: BBS Forum (27)-Cloud + Community-Tencent Cloud