zoukankan      html  css  js  c++  java
  • 首页列表显示全部问答,完成问答详情页布局

    1. 首页列表显示全部问答:
      1. 将数据库查询结果传递到前端页面 Question.query.all()
      2. 前端页面循环显示整个列表。
      3. 问答排序
        python文件
        @app.route('/')
        def lx():
            context = {
                'questions': Ques.query.all()
            }
            return render_template('lx3.html', **context)
        html文件
        {% block body %}
            <div class="container">
            <div class="row clearfix">
                <div class="col-md-2 column">
                </div>
                <div class="col-md-8 column">
                    {% for foo in questions %}
                        <div class="list-group">
                            <a href="#" class="list-group-item active">作者:{{ foo.author_id }}</a>
        
                            <div class="list-group-item">
                                <h4 class="list-group-item-heading">
                                    {{ foo.title }}
                                </h4>
                                <p class="list-group-item-text">
                                    {{ foo.detail }}
                                </p>
                            </div>
                            <div class="list-group-item">
                                <span class="badge">发布时间:{{ foo.create_time }}</span> 发布时间
                            </div>
                        </div>
                    {% endfor %}
                    <div class="col-md-2 column">
                    </div>
                </div>
            </div>
        {% endblock %}
        1. 完成问答详情页布局:
          1. 包含问答的全部信息
          2. 评论区
          3. 以往评论列表显示区。
            python文件
            
            @app.route('/detail/<question_id>')
            def detail(question_id):
                quest = Ques.query.filter(Ques.id==question_id).first()
                return  render_template('detail.html',quest=quest)
            html文件
            {% block detailbody %}
                <div class="container">
                    <div class="row clearfix">
                        <div class="col-md-3 column">
                        </div>
                        <div class="col-md-6 column">
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <h3>
                                        {{ quest.title }}
                                    </h3> <span class="label label-default">{{ quest.author.username }}</span> <span
                                        class="label label-default">{{ quest.author.create_time }}</span>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <p>
                                        {{ quest.detail }}
                                    </p>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <textarea id="comment" name="comment" rows="8" placeholder="请输入评论"></textarea>
                                </div>
                            </div>
                            <button type="button" class="btn btn-default btn-block">发送</button>
                        </div>
                        <div class="col-md-3 column">
                        </div>
                    </div>
                </div>
            {% endblock %}
  • 相关阅读:
    没有人可以阻碍我前进的脚步 , 遇佛杀佛,遇魔杀魔
    1/2 2008
    错过,用心
    公会平台
    久违的、讨厌的感觉
    CSS选择符
    jquery ajax
    2013年职业规划
    js小助手
    css 伪类
  • 原文地址:https://www.cnblogs.com/951111ldj/p/7946525.html
Copyright © 2011-2022 走看看