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

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

 

@app.route('/')
def home():
    context={
        'question':Question.query.order_by('-creat_time').all()
    }
    return render_template('shouye.html',**context)

 

{% extends'base.html' %}
{% block title %}
    Home
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/shouye css.css')}}" type="text/css">
{% endblock %}
{% block main %}
<body>

<br>
<p class="comment">
    <img class="comment_pic"  src="../static/images/34.jpg">
    <p class="wenti">Question</p>
    <li class="detail">
        <span class="icon" aria-hidden="true"></span>
        <a href="#">username</a>
        <br>
        <a href="#">title</a>
        <span class="badge">creat_time</span>
        <p >detail{{ question }}</p>
    </li></ul>

<div class="all">
    <div class="pic">
        <ul class="list-group" style=" padding-left: 0; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.498039) 0 0 0 0;"></ul>
         {% for foo in questions %}
        <a href="">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510070680095&di=d3cf459d5bce389863664ada351cce45&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2359570068%2C2558894582%26fm%3D214%26gp%3D0.jpg"></a>
        <div class="wenzi1"><a  href="">飞翼零式</a></div>
    </div>
    <div class="pic">
        <a href="">
            <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3338b612b23533faf5b6942890e89a22/3c6d55fbb2fb431647c2456623a4462308f7d3c8.jpg"></a>
        <div class="wenzi2"><a href="">自由高达</a></div>
    </div>
    <div class="pic">
        <a href="">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510070817385&di=89436cb74cd23899275374a9c04cdba0&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F645f98f910da9a9872088c985309566ce0af87bc.jpg"></a>
        <div class="wenzi3"><a href="">正义高达</a></div>
    </div>
    <div class="pic">
        <a href="">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510070779926&di=7276ba43d58fbb65efee930b973c659e&imgtype=0&src=http%3A%2F%2Fimg2081.poco.cn%2Fmypoco%2Fmyphoto%2F20110822%2F02%2F64108346201108220201501060672178394_025.jpg"></a>
        <div class="wenzi4"><a href="">死神高达</a></div>
    </div>
     {% endfor %}
</div>
</body>
{% endblock %}
</html>

 

{% extends 'shouye.html' %}
{% block title %}问答详情{% endblock %}
{% block main %}
    <div class="page-header">
        <h3>Title{{ ques }}<br>
            <small>author {{ ques.author_id }}{{ ques.creat_time }}</small>
        </h3>
    </div>
    <p class="lead">detail{{ ques.detail }}</p>
    <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="write your comment"></textarea>
    </div>
    <button type="submit" class="btn btn-default">发送</button>
    </form>
    <ul class="list-group" style="margin: 10px"></ul>

{% endblock %}

 

posted on 2017-12-05 19:11  122叶远超  阅读(167)  评论(0)  编辑  收藏  举报

导航