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:;
padding:;
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;
}

BBS论坛(二十七)的更多相关文章

  1. BBS论坛(十七)

    17.首页导航条实现和代码抽离 (1)temlates/common/_head.html <meta name="csrf-token" content="{{ ...

  2. python 学习笔记二十 django项目bbs论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  3. 开源BBS论坛软件推荐

    七款开源BBS论坛软件推荐(1) 本文介绍了七个开源的BBS论坛软件(在英文界一般叫做Forum).可能国内的朋友们比较熟悉Discuz!和PHPwind,但其实我们的选择还是很多的,而且下面介绍的这 ...

  4. Django项目 BBS论坛

    BBS论坛 一.项目表分析 二.自定义form组件 三.注册功能 四.BBS论坛 登录功能

  5. Java,面试题,简历,Linux,大数据,常用开发工具类,API文档,电子书,各种思维导图资源,百度网盘资源,BBS论坛系统 ERP管理系统 OA办公自动化管理系统 车辆管理系统 各种后台管理系统

    Java,面试题,简历,Linux,大数据,常用开发工具类,API文档,电子书,各种思维导图资源,百度网盘资源BBS论坛系统 ERP管理系统 OA办公自动化管理系统 车辆管理系统 家庭理财系统 各种后 ...

  6. Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点

    开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...

  7. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  8. Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  9. Citrix 服务器虚拟化之二十七 XenApp6.5发布服务器桌面

    Citrix 服务器虚拟化之二十七  XenApp6.5发布服务器桌面 XenApp可发布以下类型的资源向用户提供信息访问,这些资源可在服务器或桌面上虚拟化: 1)  服务器桌面:发布场中服务器的整个 ...

  10. 转:二十七、Java图形化界面设计——容器(JFrame)

    转:http://blog.csdn.net/liujun13579/article/details/7756729 二十七.Java图形化界面设计——容器(JFrame) 程序是为了方便用户使用的, ...

随机推荐

  1. Redis持久化persistence

    一.前言 由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能,将数据保存到磁盘上,当redis重启后,可以从磁盘中恢复数据. R ...

  2. C# 串口操作系列(4) -- 协议篇,文本协议数据解析

    C# 串口操作系列(4) -- 协议篇,文本协议数据解析 标签: c#uiobjectstringbyte 2010-06-09 01:50 19739人阅读 评论(26) 收藏 举报  分类: 通讯 ...

  3. bzoj1124_枪战_基环树

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1124 https://www.luogu.org/problemnew/show/P34 ...

  4. 动态规划——Dungeon Game

    这又是个题干很搞笑的题目:恶魔把公主囚禁在魔宫的右下角,骑士从魔宫的左上角开始穿越整个魔宫到右下角拯救公主,为了以最快速度拯救公主,骑士每次只能向下或者向右移动一个房间, 每个房间内都有一个整数值,负 ...

  5. 1062 Text Reverse

    http://acm.hdu.edu.cn/showproblem.php?pid=1062 思路: 最主要的是通过getline函数存取字符串. 如何读取单个单词,并且反向输出? 用\n作为单个单词 ...

  6. Round #3

    题源:感谢 by hzwer 水灾(sliker.cpp/c/pas) 1000MS  64MB 大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的 ...

  7. UVALive 2474 Balloons in a Box(枚举)

    https://vjudge.net/contest/277824#problem/A 尤其是模拟题,三思而后敲!!! 纠错了好久,主要还是没有处理好:单点若还未放气球,其他气球可以膨胀越过它(即可以 ...

  8. Django ORM 知识概要

    相关命令 python3 manage.py makemigrations 根据模型生成相关迁移文件 python3 manage.py migrate 根据迁移文件,将表结构更新到数据库中,并在Dj ...

  9. 性能测试学习 第八课--LR12中针对WebServices协议的三种脚本开发模式

    一,webservices协议简介 webservices是建立可交互操作的分布式应用程序的新平台,它通过一系列的标准和协议来保证程序之间的动态连接, 其中最基本的协议包括soap,wsdl,uddi ...

  10. Python爬虫(1):基础知识

    爬虫基础知识 一.什么是爬虫? 向网站发起请求,获取资源后分析并提取有用数据的程序. 二.爬虫的基本流程 1.发起请求 2.获取内容 3.解析内容 4.保存数据 三.Request和Response ...