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

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


27-----BBS论坛的更多相关文章

  1. Python之路,Day17 - 分分钟做个BBS论坛

    Python之路,Day17 - 分分钟做个BBS论坛   本节内容: 项目:开发一个简单的BBS论坛 需求: 整体参考"抽屉新热榜" + "虎嗅网" 实现不同 ...

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

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

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

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

  4. python第一百三十天 ---简单的BBS论坛

    简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...

  5. Django小项目简单BBS论坛

    开发一个简单的BBS论坛 项目需求: 1 整体参考"抽屉新热榜" + "虎嗅网" 2 实现不同论坛版块 3 帖子列表展示 4 帖子评论数.点赞数展示 5 在线用 ...

  6. Python开发一个简单的BBS论坛

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

  7. bbs论坛浏览器兼容性问题

    一直都是在chrome上进行调试,今天终于把bbs论坛这个项目搭建完了,进入IE.Firefox看了看 吓哭了!!! 火狐 Edge chrome 特别是加了<!DOCTYPE html> ...

  8. 开源BBS论坛软件推荐

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

  9. LNMP环境搭建BBS论坛及伪静态

    我们在mysql备份 LNMP环境中的数据库迁移为独立的服务器的基础上搭建BBS论坛:  [root@bqh-117 ~]# mysql -uroot -p123456 Welcome to the ...

  10. Django项目 BBS论坛

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

随机推荐

  1. 使用VBSCRIPT安装字体

    根据新系统要求,经常要部署一些原来系统里没有的字体,原先我为了图省事经常会要求用户手动安装字体文件,虽然Windows的易用性做得相当不错,但是仍然要照顾一些不会安装字体的人,其实把这些字体打包进安装 ...

  2. Emgu cv3.0.0 图像收集

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  3. ROS Learning-028 (提高篇-006 A Mobile Base-04) 控制移动平台 --- (Python编程)控制虚拟机器人的移动(不精确的制定目标位置)

    ROS 提高篇 之 A Mobile Base-04 - 控制移动平台 - (Python编程)控制虚拟机器人的移动(不精确的制定目标位置) 我使用的虚拟机软件:VMware Workstation ...

  4. 10.model/view实例(3)

    任务:3x2的表格,第一个单元格显示当前时间 思考: 1.data函数里面QTime::currentTime()显示当前时间 2.但是这个事件是一个固定的时间,不会变动 3.需要时间变动,View就 ...

  5. Entity Framework Tutorial Basics(5):Create Entity Data Model

    Create Entity Data Model: Here, we are going to create an Entity Data Model (EDM) for SchoolDB datab ...

  6. serializeArray()和.serialize()的区别、联系

    serializeArray()和.serialize()的区别.联系   <form id='addForm' action='UserAdd.action' type='post'> ...

  7. 泛型List<T>转存为XML文档

    经常会有这情况,在程序处理结果为泛型List<T>,但为了能把这些集合输出XML文档.Insus.NET就因此问题,演示一个范例.在程序中,创建一个类: List<T>的集合手 ...

  8. Kotlin 数据类型(数值类型)

    Kotlin 的常见数据类型: 类型 范围 byte -128~127 short 32767-32768 int -2147483648~2147483647 long 92233720368547 ...

  9. python3中模块初识

    python的模块使用方法 1.用于显示python的环境变量 import sys print(sys.path) 运行路径执行结果如下: ['F:\\codes', 'F:\\codes', 'C ...

  10. 关于nohup命令

    nohup java -jar Test.jar --server.port=443 > console.log 2>&1 & 关于nohup命令 when using t ...