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

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

主py文件:

@app.route('/')
def sy():
    context = {
        'questions': Question.query.all()
    }
    return render_template('sy.html', **context)

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

首页HTML:

{% extends 'dh.html' %}
{% block title %}首页{% endblock %}
{% block head %}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../static/css/sy.css">
{% endblock %}
{% block main %}
    <div class="nr-box">
        <ul class="list-group">
            {% for foo in questions %}
            <li class="list-group-item">
            <img style="width: 30px" src="{{ url_for('static',filename='../static/image/tx.jpg') }}" alt="64">
                <a href="http://127.0.0.1:5000/xq/">{{ foo.author.username }}</a><br>
                <p>问题:{{ foo.title }}</p><br>
                <p>详情:{{ foo.detail }}</p><br>
                <span class="badge" style="margin-left: 60%">{{ foo.creat_time }}发布时间</span>
                <p style="margin-left: 25%"></p>
            </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}

详情页HTML:

{% extends 'dh.html' %}
{% block title %}
    反馈详情
{% endblock  %}
{% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='../static/css/xq.css') }}">
{% endblock  %}
{% block main %}
   <div class="page-header">
   <h3>问题:{{ title }}
       <br><small>作者:{{ author_id }}<br>
           发布时间:{{ creat_time }}</small></h3>
    <p class="lead">详情:{{ detail }} </p>
    <form action="{{ url_for('xq') }}" method="post"></form>
    <div class="form-group">
        <textarea class="form-control" rows="6" id="questionTitle" placeholder="请写下你的评论"
                      style="height: 100px" ></textarea>
    </div>
   <div class="submit-button">
       <br>
       <button type="submit" style="float:right" id="submit-button">发送</button>
    </div>
  </form>
    <ul class="list-group" style="margin: 10px"></ul>
   </div>
{% endblock %}

 

 

posted @ 2017-12-05 17:02  101黎思琦  阅读(139)  评论(0编辑  收藏  举报