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

1. 首頁列表顯示所有問答：
   1. 將數據庫查詢結果傳遞到前端頁面 Question.query.all()
   2. 前端頁面循環顯示整個列表。
   3. 問答排序
2. 完成問答詳情頁佈局：
   1. 包含問答的所有信息
   2. 評論區
   3. 以往評論列表顯示區。
3. 在首頁點擊問答標題，連接到相應詳情頁。

 

1.首頁列表顯示所有問答：

python代碼以下：

 1 @app.route('/',methods=['GET','POST'])
 2 def index():
 3     # context = {
 4     #     'userName' : "AllianceHacker",
 5     #     'toTime' : '11小時前',
 6     #     'title' : 'PHP是世界是最好的語言',
 7     #     'context' : 'PHP是世界是最好的語言,這是一個不須要有疑問的問題，誰不服能夠來戰啊！！！'
 8     # }
 9     context = {
10         'books' : Book.query.order_by('-createdate').all(),
11     }
12     return render_template('home.html',**context)

 

html代碼以下：

 

  1 <div class="context">
  2         <div class="index index-left"></div>
  3         <div class="index index-center">
  4             <div class="picture">
  5                 <div class="layui-carousel" id="test1">
  6                     <div carousel-item>
  7                         <div><img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/></div>
  8                         <div><img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/></div>
  9                         <div><img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/></div>
 10                         <div><img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/></div>
 11                         <div><img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/></div>
 12                     </div>
 13                 </div>
 14 
 15             </div>
 16             <br><br>
 17             <div class="index-question">
 18                 <div class="question-left">
 19                     <ul>
 20                         <li>
 21                             <div class="item-one">
 22                                 <div class="author">
 23                                     <a class="avatar" target="_blank" href="#">
 24                                         <img src="http://www.bookmarkye.com/alliance.png" width="64px">
 25                                     </a>
 26                                     <div class="info">
 27                                         <a class="nickname" target="_blank" href="#">趙蘇七sukie</a>
 28                                         <span class="time">5小時前</span>
 29                                     </div>
 30                                 </div>
 31                                 <div class="title">
 32                                     <a target="_blank"
 33                                        href="#">我是男性，假如我在泰坦尼克號上，我不會讓婦女先走</a>
 34                                 </div>
 35                                 <div class="abstract">
 36                                     <p>
 37                                         最近一個很火的社區出了一篇帖子，發帖者是一位男性。
 38                                         他說，每次看泰坦尼克號上讓婦女小孩先走相似的情節，我都很鬱悶。憑什麼男人就該死？我寧願抓鬮，公平。要不就讓頭等艙先走，畢竟...
 39                                     </p>
 40                                 </div>
 41                                 <div class="meta">
 42                                     <a class="collection-tag" target="_blank" href="#">社會熱點</a>
 43                                     <a target="_blank" href="#">
 44                                         <span>　瀏覽： 4462</span>
 45                                     </a>
 46                                     <a target="_blank" href="#">
 47                                         <span>　評論： 101</span>
 48                                     </a>
 49                                     <span>　點贊： 134</span>
 50                                 </div>
 51                             </div>
 52                         </li>
 53                         {% for book in books %}
 54                         <li>
 55                             <div class="item-one">
 56                                 <div class="author">
 57                                     <a class="avatar" target="_blank" href="#">
 58                                         <img src="http://www.bookmarkye.com/5.jpg" width="64px;">
 59                                     </a>
 60                                     <div class="info">
 61                                         <a class="nickname" target="_blank" href="#">{{ book.authorClass.title }}</a>
 62                                         <span class="time">{{ book.createdate }}</span>
 63                                     </div>
 64                                 </div>
 65                                 <div class="title">
 66                                     <a target="_blank"
 67                                        href="{{ url_for('poi',book_id=book.id) }}">{{ book.title }}</a>
 68                                 </div>
 69                                 <div class="abstract">
 70                                     <p>
 71                                         {{ book.content }}
 72                                     </p>
 73                                 </div>
 74                                 <div class="meta">
 75                                     <a class="collection-tag" target="_blank" href="#">社會熱點{{ book.classificationClass.name }}</a>
 76                                     <a target="_blank" href="#">
 77                                         <span>　瀏覽： 99999+</span>
 78                                     </a>
 79                                     <a target="_blank" href="#">
 80                                         <span>　評論： 51428</span>
 81                                     </a>
 82                                     <span>　點贊： 6666</span>
 83                                 </div>
 84                             </div>
 85                         </li>
 86                         {% endfor %}
 87                     </ul>
 88                 </div>
 89                 <div class="question-right">
 90                     <div class="picture">
 91                         <img src="{{ url_for('static', filename='img/index_p2.png') }}" width="100%"/>
 92                     </div>
 93                     <div class="picture">
 94                         <img src="{{ url_for('static', filename='img/index_p3.png') }}" width="100%"/>
 95                     </div>
 96                 </div>
 97             </div>
 98         </div>
 99         <div class="index index-right"></div>
100     </div>

 

 

 

運行結果以下：