首页列表显示全部问答，完成问答详情页布局。

Posted 2020-10-16 郑淑莹

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了首页列表显示全部问答，完成问答详情页布局。相关的知识，希望对你有一定的参考价值。

首页列表显示全部问答：
1. 将数据库查询结果传递到前端页面 Question.query.all()
2. 前端页面循环显示整个列表。
3. 问答排序
完成问答详情页布局：
1. 包含问答的全部信息
2. 评论区
3. 以往评论列表显示区。

在首页点击问答标题，链接到相应详情页。

@app.route(\'/index/\')
def index():
    context={
        \'questions\':Question.query.all()
    }
    return render_template(\'index.html\',**context)

{% extends\'base.html\' %}

{% block title %}
    首页
{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for(\'static\',filename=\'css/index.css\') }}">
{% endblock %}

{% block main %}
    <div class="index">
    <div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E5%B0%8F%E7%8C%AA%E4%BD%A9%E5%A5%87&rsv_pq=f77d08900001a419&rsv_t=45ebl8vOLWaojJB%2BJqWl4G2jgewDoaq6Eal6j0Zx2EIT96apylRhpP3Koqg&rqlang=cn&rsv_enter=1&rsv_sug3=6&rsv_sug1=6&rsv_sug7=100">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477292746&di=b4d222e641b5c06b07c55cd205bba706&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161220%2Fca4c1e06ab854a40bb2590408a7b2f19_th.jpg"></a>
            <div class="desc"><a href="http://www.baidu.com/">小猪佩奇</a></div>
        </div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%89%98%E9%A9%AC%E6%96%AF%E5%92%8C%E4%BB%96%E7%9A%84%E6%9C%8B%E5%8F%8B%E4%BB%AC&oq=%25E5%25B0%258F%25E7%258C%25AA%25E4%25BD%25A9%25E5%25A5%2587&rsv_pq=eb12f7da00019eba&rsv_t=de8cbtTwyWVcQv6xzo8AEbWJhamBkxPdSWJh9Imdf5qYr8rt2NZHXCfYWNg&rqlang=cn&rsv_enter=1&inputT=3189&rsv_sug3=14&rsv_sug1=14&rsv_sug7=100&rsv_sug2=1&prefixsug=tuomasi&rsp=2&rsv_sug4=3188">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477829747&di=fd07b5cc8dd393392af74d2b90404779&imgtype=0&src=http%3A%2F%2Ffdfs.xmcdn.com%2Fgroup23%2FM06%2F8A%2F7E%2FwKgJL1h52lGCOLCQAAEaqmTeglU035.jpg"></a>
            <div class="desc"><a href="http://www.baidu.com/">托马斯和他的朋友们</a></div>
        </div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0&oq=%25E6%2589%2598%25E9%25A9%25AC%25E6%2596%25AF%25E5%2592%258C%25E4%25BB%2596%25E7%259A%2584%25E6%259C%258B%25E5%258F%258B%25E4%25BB%25AC&rsv_pq=d23a15630001b4ed&rsv_t=7430JNuHLv7607LmZ%2B%2BWE2eYL%2Fp7GhOQe3j0f5S9RCnmHRWM5plbXIAinRg&rqlang=cn&rsv_enter=1&inputT=2790&rsv_sug3=20&rsv_sug1=19&rsv_sug7=100&rsv_sug2=1&prefixsug=maohe%2520&rsp=0&rsv_sug4=2790">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477964743&di=46e94537aabf5867005957b87cd85799&imgtype=0&src=http%3A%2F%2Fcdn.aixifan.com%2Fdotnet%2Fartemis%2Fu%2Fcms%2Fwww%2F201603%2F2615504731cpun6r.jpg"></a>
            <div class="desc"><a href="http://www.baidu.com/">猫和老鼠</a></div>
        </div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%A4%A9%E7%BA%BF%E5%AE%9D%E5%AE%9D&oq=%25E7%258C%25AB%25E5%2592%258C%25E8%2580%2581%25E9%25BC%25A0&rsv_pq=8de48b3f0001c6b3&rsv_t=94c1qlZLktBv27KJJZA0Sxe9rIX64JhNE%2F7O030MAq3wDdaGuEiv99uR8Jg&rqlang=cn&rsv_enter=1&inputT=2790&rsv_sug3=27&rsv_sug1=26&rsv_sug7=100&bs=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478000480&di=5fe3f1bdcea73b098ec174ea6a7b5f8b&imgtype=0&src=http%3A%2F%2Fd2xosoyzehxi5w.cloudfront.net%2Fwp-content%2Fuploads%2F2014%2F12%2Fteletubbies-sun-baby-jess-smith-3.jpg"></a>
            <div class="desc"><a href="http://www.baidu.com/">天线宝宝</a></div>
        </div>
    </div>
    <br><hr>
    <p>{{ username }}context</p>
    <div id="list-container">
        <ul class="list-group" style="...">
            {% for foo in questions %}
                <li>
                    <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                    用户：<a href="#" target="_blank">{{ foo.author.username }}</a>
                    <br>
                    <a href="#" target="_blank">{{ foo.title }}</a>
                    <span class="badge">{{ foo.create_time }}</span>
                    <p style="text-indent: 18px">{{ foo.detail }}</p>
                </li>
            {% endfor %}
        </ul>
    </div>
    </div>
{% endblock %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="../static/css/questiondetail.css">
</head>
<body>
<div class="post">
    <div class="artical">
        <h1>{{ title }}</h1>
        <span class="name" aria-hidden="true"></span>
        <a href="#" target="_blank">username</a>
        <span class="badge">creat_time</span>
        <hr>
        <p style="text-indent: 18px">detail</p>
    </div>
    <div class="sign-container">
        <label for="QuestionDetail">
            <textarea class="form-control" rows="8" id="QuestionDetail" name="detail"></textarea>
        </label>
        <br>
        <input type="submit" value="评论" style="float: right">
    </div>
    <br><hr>
    <div id="list-container">
        <ul class="list-group">
            {% for foo in questions %}
                <li>
                    <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                    用户：<a href="#" target="_blank">{{ foo.author.username }}</a>
                    <br>
                    <span class="badge">{{ foo.create_time }}</span>
                    <p style="text-indent: 18px">{{ foo.detail }}</p>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

</body>
</html>

以上是关于首页列表显示全部问答，完成问答详情页布局。的主要内容，如果未能解决你的问题，请参考以下文章

首页列表显示全部问答，完成问答详情页布局。

首页列表显示全部问答，完成问答详情页布局

首页列表显示全部问答，完成问答详情页布局。