BBS论坛（二十七）
2025年01月16日 05:54:47
LIKE.TG | 发现全球营销软件&服务汇聚顶尖互联网营销和AI营销产品，提供一站式出海营销解决方案。唯一官网：www.like.tg
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;
}
LIKE.TG：汇集全球营销软件&服务，助力出海企业营销增长。提供最新的“私域营销获客”“跨境电商”“全球客服”“金融支持”“web3”等一手资讯新闻。
点击【联系客服】 🎁 免费领 1G 住宅代理IP/proxy， 即刻体验 WhatsApp、LINE、Telegram、Twitter、ZALO、Instagram、signal等获客系统，社媒账号购买 & 粉丝引流自助服务或关注【LIKE.TG出海指南频道】、【LIKE.TG生态链-全球资源互联社区】连接全球出海营销资源。
本文由LIKE.TG编辑部转载自互联网并编辑，如有侵权影响，请联系官方客服，将为您妥善处理。
This article is republished from public internet and edited by the LIKE.TG editorial department. If there is any infringement, please contact our official customer service for proper handling.
Server deployment全球论坛人工智能论坛全球峰会发展论坛战略论坛开放论坛程序员论坛互联网峰会科技峰会
