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

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

首页列表显示全部问答：

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

   {% 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)
   
   

4. 完成问答详情页布局：
   1. 包含问答的全部信息
   2. 评论区
   3. 以往评论列表显示区。

      {% 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;
      }

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

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

   

    

   

    

posted @ 2017-12-06 13:25 林丹宜 阅读( ...) 评论( ...) 编辑 收藏