首頁列表顯示所有問答,完成問答詳情頁佈局。

  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>
相關文章
相關標籤/搜索