13.首頁(yè)內(nèi)容展示

Drummor 發(fā)布于2019-07-30 15:30 / 3152人閱讀

摘要：發(fā)布問(wèn)答界面與功能以及完成了，我們要把用戶發(fā)布的內(nèi)容在首頁(yè)展示出來(lái)，邏輯也是很簡(jiǎn)單，在請(qǐng)求的時(shí)候，從中獲取所有的數(shù)據(jù)，在中使用循環(huán)將每一個(gè)對(duì)象的內(nèi)容寫(xiě)上去。

發(fā)布問(wèn)答界面與功能以及完成了，我們要把用戶發(fā)布的內(nèi)容在首頁(yè)展示出來(lái)，邏輯也是很簡(jiǎn)單，在請(qǐng)求home.html的時(shí)候，從Questions中獲取所有的數(shù)據(jù)，在home.html中使用for循環(huán)將每一個(gè)對(duì)象的內(nèi)容寫(xiě)上去。
將home視圖函數(shù)改寫(xiě)如下：

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

與之前相比，增加了一行從Questions中獲取所有數(shù)據(jù)，并按創(chuàng)建時(shí)間倒序排列，因?yàn)榫W(wǎng)頁(yè)的內(nèi)容一般都是從新到舊的。然后把獲取的數(shù)據(jù)用questions這個(gè)參數(shù)傳入home.html，因此我們要在home.html增加處理questions的代碼，如下：

{% extends "base.html" %}

{% block page_name %}首頁(yè){% endblock %}

{% block body_part %}

{% for question in questions %}
    
        {{ question.title }}
        {{ question.content }}
        {{ question.author.username }}
        {{ question.create_time }}
    
{% endfor %}

{% endblock %}

這里也很好理解，從questions中遍歷所有的數(shù)據(jù)，每一個(gè)for對(duì)應(yīng)一個(gè)li標(biāo)簽，li標(biāo)簽了顯示問(wèn)題的標(biāo)題、內(nèi)容、作者及創(chuàng)建時(shí)間，其中獲取作者的username是通過(guò)6.ORM與SQLAlchemy （2） - 模型關(guān)系與引用提到的反向引用實(shí)現(xiàn)的。此時(shí)主頁(yè)的內(nèi)容顯示如下：

再隨便發(fā)布一條，首頁(yè)也會(huì)增加，并且新發(fā)布的會(huì)位于最上面：

到現(xiàn)在展示的功能已經(jīng)算是實(shí)現(xiàn)了，我們?cè)倜阑幌?b>html，通過(guò)author的avatar_path字段把頭像也顯示出來(lái)，最終的效果如下：

附上html代碼：

{% extends "base.html" %}

{% block static_files %}

{% endblock %}

{% block page_name %}首頁(yè){% endblock %}

{% block body_part %}

{% for question in questions %}
    
        
            
        
        
            {{ question.title }}
            {{ question.content }}
            
                {{ question.author.username }}
                {{ question.create_time }}
            
        
    
{% endfor %}

{% endblock %}

對(duì)應(yīng)的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;
}