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

Posted 2020-10-16 林丹宜

tags:

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

首页列表显示全部问答：

将数据库查询结果传递到前端页面 Question.query.all()
前端页面循环显示整个列表。

问答排序

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

{% endblock %}
{% block main %}


       <ul class="list1" >
           {% for foo in questions %}
               <img src="../static/images/myself.jpg" width="60" height="60">

               <li class="list-group-item">
                  <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
               {% if username %}
                  <li class="zero"><a href="{{ url_for(\'detail\') }}">{{ username }}</a></li>
               {% endif %}
                    <a class="#"></a>
                   <br>
               <span class="badge">{{ foo.creat_time }}</span>
               <li class="one"  href="#">{{ foo.title }}</li>
               <li class="two"><p style="text-indent: 18px">{{ foo.detail }}</p></li>
               </li>
           {% endfor %}
       </ul>

{% endblock %}

@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 type="text/css" rel="stylesheet" href="../static/css/detail.css">
{% endblock %}
{% block main %}
    <ul class="list">
        <p>用户名</p>
        <p>问题</p>
        <li class="answer"><p style="text-indent: 18px">回答</p></li>
        <span class="badge">时间</span>
        <a href="a">回复♥</a>
        <a href="b">送礼</a>
        <div>
          <input id="com" name="comment" type="text"   placeholder="我也说一句..." >
        </div>
    </ul>

{% endblock %}

.list{
    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    width:500px;
    height:600px;
    background-color:azure;
    box-shadow: 10px 10px 5px #888888;
    border:2px solid antiquewhite;
    padding:20px 40px 20px 40px;
    border-radius:25px;
    list-style: none;
}
.answer{
    border: 1px solid;
    border-color: aquamarine;
    height: 50px;
    font-size: 15px;
}

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

@app.route(\'/detail\')
def detail():
    return render_template("detail.html")

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

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

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

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