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


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

    py:

    @app.route('/')
    def index():
        context = {
            'question':Question.query.all()
        }
        return render_template('index.html',**context)
    
    
    @app.route('/detail/<question_id>')
    def detail(question_id):
            quest = Question.query.filter(Question.id == question_id).first()
            return render_template('detail.html', ques=quest)

    html:

    {% extends'base.html' %}
    {% block title %}
    首页{
    % endblock %}
    
    {% block head %}
        <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css')}}" type="text/css">
    {% endblock %}
    
    {%  block main %}
        <img src="{{ url_for('static',filename='images/qalogo.jpg') }}"alt="qa">
        <p>{{ username }}context</p>
        <ul class="list-group" style="margin-top: 6.2% ; margin-left: 25%; 50%; ">
            {% for foo in question %}
                <li class="list-group-item">
                    <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                    <a href="{{ url_for('detail',queation_id = foo.id) }}">{{ foo.title}}</a>
                    <a style="text-indent: 18px">{{ foo.detail }}</a>
                    <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                    <a href="{{ url_for('usercenter',user_id=foo.author_id) }}">{{ foo.author.username }}评论:({{ foo.comments|length }})</a>
                    <span class="badge">{{ foo.create_time }}</span>
    
                </li>
             {% endfor %}
        </ul>
    
    
    </body>
    {% endblock %}
    </html>

     

  • 相关阅读:
    提高PHP运行速度的几大方法
    如何判断Javascript对象是否存在
    CSS属性选择器中的通配符
    jQuery对象与dom对象的转换
    jquery的clone方法bug的修复
    IntelliJ IDEA 开发工具项目maven管理
    Socket连接与HTTP连接
    C#枚举数值与名称的转换
    JSSDK制作思路
    iOS强制横竖屏转换
  • 原文地址:https://www.cnblogs.com/0055sun/p/7994241.html
Copyright © 2020-2023  润新知