首页列表显示所有问答,完成问答详情页布局。

  1. 首页列表显示所有问答:
    1. 将数据库查询结果传递到前端页面 Question.query.all()
    2. 前端页面循环显示整个列表。
    3. 问答排序
  2. 完成问答详情页布局:
    1. 包含问答的所有信息
    2. 评论区
    3. 以往评论列表显示区。
  3. 在首页点击问答标题,连接到相应详情页。

 

1.javascript

<ul class="list-group " style="width: 50%; margin:0 auto">
<p1>Answer Information</p1>
{% for foo in questions %}
<li class="list-group-item">
    <span class="glyphicon glyphicon-align-leaf" aria-hidden="true"></span>
    <a href="#">{{ foo.author.username }}</a>
    <br>
    <a href="#" class="title">{{ foo.title }}</a>
    <span class="badge" style="margin-left: 60%">{{ foo.create_time }}</span>

<p style="text-indent: 18px">{{ foo.detail }}</p>
</li>
{% endfor %}

</ul>

 

 

 

2.css

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


<ul class="list-group " style="width: 50%; margin:0 auto">
<p1>Comment Information</p1>

<li class="list-group-item">
    <span class="glyphicon glyphicon-align-leaf" aria-hidden="true"></span>
    <a href="#">name</a>
    <br>
    <a href="#" class="title">title</a>
    <span class="badge" style="margin-left: 60%">creat_time</span>

<p style="text-indent: 18px">detail</p>
</li>
<hr>
    <form action="{{url_for('question')}}" method="post">
    <div class="form-group">
        <textarea name="new_comment" class="form-control" rows="3" id="new_comment" placeholder="评论内容" style="width: 626px;height:150px;"></textarea>
    </div>
    <button type="submit" class="btn btn-default">发送</button>
    </form>
    <br>    <br>
    评论:
<li class="list-group-item">
    <span class="glyphicon glyphicon-align-leaf" aria-hidden="true"></span>


    <br>




</li>
</ul>

{% endblock %}

 

3.html

连接到详情页前端

<a href="{{url_for('detail')}}" class="title">{{ foo.title }}</a>
相关文章
相关标签/搜索