13.首页内容展示

Drummor 发布于2019-07-30 15:30 / 3070人阅读

摘要：发布问答界面与功能以及完成了，我们要把用户发布的内容在首页展示出来，逻辑也是很简单，在请求的时候，从中获取所有的数据，在中使用循环将每一个对象的内容写上去。

发布问答界面与功能以及完成了，我们要把用户发布的内容在首页展示出来，逻辑也是很简单，在请求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 %}

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

{% endblock %}

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

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

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

附上html代码：

{% extends "base.html" %}

{% block static_files %}

{% endblock %}

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

{% block body_part %}

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

{% 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;
}

云服务器 GPU云服务器首页内容 wwwjiuseteng13 ubuntu 13 W13

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/41287.html

腾讯新闻中心首页改版啦

摘要：本人博客正式地址腾讯新闻中心的首页改版啦，欢迎访问。这次新闻首页的改版，是从零开始写的一个新页面。除要闻页卡外，其他页卡的新闻均是通过的方式获取的。总结新页面上线后，还会有很多后续的功能需要添加。本人博客：http://www.xiabingbao.com 正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision ...

MadPecker 2019-08-02 15:54 评论0 收藏0
腾讯新闻中心首页改版啦

摘要：本人博客正式地址腾讯新闻中心的首页改版啦，欢迎访问。这次新闻首页的改版，是从零开始写的一个新页面。除要闻页卡外，其他页卡的新闻均是通过的方式获取的。总结新页面上线后，还会有很多后续的功能需要添加。本人博客：http://www.xiabingbao.com 正式地址：http://www.xiabingbao.com/news/2016/05/16/qq-news-revision ...

SillyMonkey 2019-08-19 18:20 评论0 收藏0
我是如何优化网站首页性能的

摘要：分位值解释分位值目前是我们看性能指标的一个重要参考点。为什么是，因为跟进高的优化经验，分位值的数据取点最能放大问题。分位值下，一个散文件可能就是的影响。最近接到一个任务，首页性能优化。目标：95分位值下看到页面框架主体内容6s（优化前10s左右），优化提升40% 看到操作详细内容9s（优化前12s左右），优化提升25%。侧面看出我们系统的庞大程度吧，这个不值得骄傲，项目...

kun_jian 2019-08-19 17:43 评论0 收藏0
wordpress主题酱茄Free v1.0.0开源版自媒体资讯博客主题模板

摘要：主题主题酱茄开源版自媒体资讯博客主题模板酱茄主题由酱茄开发的一款免费开源的主题，主题专为博客资讯自媒体网站而设计，遵循开源协议发布。wordpress主题酱茄Free v1.0.0开源版自媒体资讯博客主题模板酱茄free主题由酱茄开发的一款免费开源的WordPress主题，主题专为WordPress博客、资讯、自媒体网站而设计，遵循GPL V2.0开源协议发布。运行环境酱茄Free主题当前...

番茄西红柿 2021-08-21 14:02 评论0 收藏2637
Web开发系列【1】实用的网页布局（PC端）

摘要：利用左侧浮动，右侧盒子通过形成了。三列布局这是比较复杂的布局，适合有复杂操作功能的网页，如各大电商网站。建议升级您的浏览器，或使用等高级浏览器，将会得到更好的体验在熟悉那些常用的软件、工具后，我们正式开始开发，在前期准备工作之后，我们要做的事情是写页面，也就是网页布局。在w3c、菜鸟、慕课网等等网站上都有基础的 HTML+CSS 知识讲解，在初期学习中，跟着教程全部过一遍就差不多了。...

Andrman 2019-08-02 16:05 评论0 收藏0