首页列表显示全部问答,完成问答详情页布局。在首页点击问答标题,链接到相应详情页。

1、首页列表显示全部问答:

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

py文件:

@app.route(‘/‘)
def moban():
    context = {
        ‘wenda‘: Wenda.query.order_by(‘creat_time‘).all()
    }
    return render_template(‘moban.html‘,**context)

html文件:

 <ul class="news-list">
        {% for foo in wenda %}
        <li class="list-group-item">
            <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
            <a href="#">{{ foo.author.username}}</a>
            <br>
            <a href="{{ url_for(‘detail‘,wenda_id= foo.id) }}">{{ foo.title }}</a>
            <br>
            <span class="badge" >{{ foo.creat_time }}</span>
            <p style="background-color: aqua">{{ foo.detail }}</p>
        </li>
        {%  endfor %}

    </ul>

2、完成问答详情页布局:

  1. 包含问答的全部信息
  2. 评论区
  3. 以往评论列表显示区。
{% extends ‘moban.html‘ %}
{% block title %}详情界面{% endblock %}
{% block head %}
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% endblock %}
{% block body %}
    <div class="col-md-2 column "></div>
    <div class="col-md-8 column ">
        <ul class="list-unstyled">
            <li>
                <h2 href="#" class="text-center">{{ wend.title }}</h2>
                <br>
                <p class="text-center">
                    <a href="#">
                        <small>{{ wend.author.username }}</small>
                    </a>&nbsp&nbsp&nbsp
                    <span class="pull-center"><small>{{ wend.creat_time }}</small></span>
                </p>
                <p>{{ wend.detail }}</p>
                <form>
                    <div class="form-group">
                    <textarea name="comment" class="form-control" rows="6" id="comment"
                              placeholder="请输入评论"></textarea>
                    </div>
                    <button type="submit" class="btn btn-default">发送</button>
                </form>
            </li>
        </ul>
    </div>
    <div class="col-md-2 column "></div>
{% endblock %}

3、在首页点击问答标题,链接到相应详情页。

@app.route(‘/detail?<wenda_id>‘)
def detail(wenda_id):
    wen = Wenda.query.filter(Wenda.id == wenda_id).first()
    return render_template(‘detail.html‘,wend=wen)
时间: 2024-08-04 03:45:19

首页列表显示全部问答,完成问答详情页布局。在首页点击问答标题,链接到相应详情页。的相关文章

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

首页列表显示全部问答: 将数据库查询结果传递到前端页面 Question.query.all() 前端页面循环显示整个列表. 问答排序 PY文件: @app.route('/') def index(): context={ 'touGao':Tougao.query.order_by('-time').all() } return render_template("index.html",**context) HTML: <div class="container&q

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

首页列表显示全部问答: 将数据库查询结果传递到前端页面 Question.query.all() 前端页面循环显示整个列表. 问答排序 # 遍历首页 @app.route('/') def base(): context = { 'username': Sent.query.all(), } return render_template('shouye.html',**context) 完成问答详情页布局: 包含问答的全部信息 评论区 以往评论列表显示区. <!DOCTYPE html> &l

Flask实战第62天:帖子详情页布局

在templates/front/下创建详情页面front_pdetail.html 编辑front.views.py创建详情页的视图函数 from flask import abort ... @bp.route('/p/<post_id>/') def post_detail(post_id): post = PostModel.query.get(post_id) if not post: abort(404) return render_template('front/front_pd

微信小程序点击列表跳转到对应详情页

点击列表跳转到对应详情页: 用自定义属性data-index保存当前点击列表的index,在点击跳转的方法中获取index并且拼接到要跳转的路径后面: 跳转到详情页,在onLoad钩子中通过参数options获取传过来的index,渲染对应的数据 原文地址:https://www.cnblogs.com/zxmonster/p/11583729.html

PHP.5-DIV+CSS布局网站首页实例

DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS的解析差异,需对其进行测试 不同浏览器的区别[http://www.wenkuxiazai.com/doc/5fd3b2774afe04a1b171de3e.html] 1.IE和FF居中不一样 text-align:center  #包中所有文本居中 2.IE指定的最小高度为18px,FF都可以

微信点击图文消息链接 在根据判断跳到另一个页面 但是 点关闭 将当前的关闭之后 会出现空白页

<script> function ss() { var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机location.href = '2.html?id=3323/#wechat_redirect'; } else if (u.indexOf('iPhone') > -1) {//苹果手机location.href = '2.html?id

如何布局网站首页

如何布局网站首页良好的页面布局及代码优化对用户体验和搜索引擎友好度有很好的促进作用.在设计网站首页应该注意以下几点:一.主导航覆盖的信息要全面导航是一个网站的重点,相当于文章的核心,跟标题作用差不多.方便用户快速了解网站大概信息.二.左侧分出二级导航二级导航是对主导航的进一步补充和说明,因为很多时候主导航想表达的信息不一定完善,这个时候就需要二级导航来进行补充.有效的提高用户体验.三.文字图片共存不管单一是图片还是文字.感觉都缺乏说服力.所以就需要图文并茂.这样更能向用户成功推荐一个产品.四.首

(java)selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出

selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出: 该情况适合能能循环page=1~n,并且每个网页随着循环可以打开的情况, 注意一定是自己拼接的url可以打开,如:http://ask.testfan.cn/articles?page=15,就可以翻到文章分类的第15页: import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.u

Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计

实现点击不同树节点打开不同tab页展示不同datagrid表数据设计 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求描述 如上图, 1.点击左侧树,叶子节点,打开不同的tab页,加载与节点对应的表数据 2.在上述打开页面中,进行新增,编辑,复制等操作,确保新增.复制等操作生成的数据只在该页面可见. 涉及思路与关键代码 1.单击左侧树时,叶子节点时,新增.激活一个tab页,打开.激活之前,设置tab页id属性值为树节点的ID,设置title属性为节点