13.首页内容展示

赵融
• 阅读 1961

发布问答界面与功能以及完成了,我们要把用户发布的内容在首页展示出来,逻辑也是很简单,在请求home.html的时候,从Questions中获取所有的数据,在home.html中使用for循环将每一个对象的内容写上去。
home视图函数改写如下:

@app.route('/')
def home():
    questions = Questions.query.order_by(Questions.create_time.desc()).all()
    return render_template('home.html', questions=questions)

与之前相比,增加了一行从Questions中获取所有数据,并按创建时间倒序排列,因为网页的内容一般都是从新到旧的。然后把获取的数据用questions这个参数传入home.html,因此我们要在home.html增加处理questions的代码,如下:

{% extends 'base.html' %}

{% block page_name %}首页{% endblock %}

{% block body_part %}
<ul>
{% for question in questions %}
    <li>
        <div>{{ question.title }}</div>
        <div>{{ question.content }}</div>
        <div>{{ question.author.username }}</div>
        <div>{{ question.create_time }}</div>
    </li>
{% endfor %}
</ul>
{% endblock %}

这里也很好理解,从questions中遍历所有的数据,每一个for对应一个li标签,li标签了显示问题的标题、内容、作者及创建时间,其中获取作者的username是通过6.ORM与SQLAlchemy (2) - 模型关系与引用提到的反向引用实现的。此时主页的内容显示如下:

13.首页内容展示

再随便发布一条,首页也会增加,并且新发布的会位于最上面:

13.首页内容展示

到现在展示的功能已经算是实现了,我们再美化一下html,通过authoravatar_path字段把头像也显示出来,最终的效果如下:

13.首页内容展示

附上html代码:

{% extends 'base.html' %}

{% block static_files %}
<link rel="stylesheet" href="{{ url_for('static',filename='css/home.css') }}"/>
{% endblock %}

{% block page_name %}首页{% endblock %}

{% block body_part %}
<ul>
{% for question in questions %}
    <li>
        <div class="avatar-group">
            <img src="{{ url_for('static',filename=question.author.avatar_path) }}" class="img-circle"/>
        </div>
        <div class="question-group">
            <p class="question-title"><a href="#">{{ question.title }}</a></p>
            <p class="question-content">{{ question.content }}</p>
            <p class="question-info">
                <span class="question-author">{{ question.author.username }}</span>
                <span class="question-time">{{ question.create_time }}</span>
            </p>
        </div>
    </li>
{% endfor %}
</ul>
{% endblock %}

对应的home.css代码:

.body-container ul{
    list-style: none;
    padding: 0 10px;
}

.body-container li{
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.avatar-group{
    width: 38px;
    float: left;
}

.img-circle{
    width: 38px;
}

.question-group{
    margin-left: 10px;
    width: 525px;
    float: left;
}

.question-title{
    font-weight: 900;
    color: #259;
}

.question-content{
    text-indent: 2em;
}

.question-info{
    text-align: right;
}

.question-author{
    margin-right: 10px;
}
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
虾米大王 虾米大王
3年前
java代码012
code012.jspInserttitlehere<%JSP内置对象1.request用于处理HTTP请求中的各项参数。如,删除可以通过request对象的getParameter()方法获取如,request.getParameter("id")在请求转发时,需要把一些数据传递到转发后的页面处理。就需要用到request的se
虾米大王 虾米大王
2年前
java代码049
code049.jsp新闻发布新闻发布标题:内容:
Wesley13 Wesley13
3年前
4cast
4castpackageloadcsv.KumarAwanish发布:2020122117:43:04.501348作者:KumarAwanish作者邮箱:awanish00@gmail.com首页:
Stella981 Stella981
3年前
PowerDesigner列名、注释内容互换
在用PowerDesigner时,常常在NAME或Comment中写中文在Code中写英文,Name只会显示给我们看,Code会使用在代码中,但Comment中的文字会保存到数据库TABLE的Description中,有时候我们写好了Name再写一次Comment很麻烦,以下两段代码就可以解决这个问题。在PowerDesigner中PowerDesig
飞鹅官方账号 飞鹅官方账号
11个月前
五、飞鹅官网API接口文档
接口列表1.获取网站信息请求方法:GET请求URL:/api/site/getSiteInfo请求参数无返回结果json"code":1,"data":"id":1,//id"title":"SampleSiteName",//网站名称"intro":"T
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
鸿蒙小林 鸿蒙小林
1个月前
《伴时匣》app开发技术分享--表单提交准备(4)
技术栈Appgalleryconnect开发准备上一节我们实现了用户登录功能,现在我们进入首页,可以开始准备着手发布我们的日期计划了,在这之前我们先实现信息表的创建。在首页实现一个标题栏,一个悬浮的按钮。功能分析我们的信息表要展示的内容很多,首先是我们的事