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

最新推荐文章于 2025-09-10 17:59:49 发布
转载 最新推荐文章于 2025-09-10 17:59:49 发布 · 92 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/-064/p/7942824.html
文章标签：

#python #前端 #数据库 #ViewUI

本文介绍了一个简单的问答网站的前后端实现方式，包括使用 Flask 框架搭建后端服务，进行数据库操作来管理和展示问答内容；前端则采用 HTML 结合 Bootstrap 实现了列表展示和详情页布局。
  1. 首页列表显示全部问答：
    1. 将数据库查询结果传递到前端页面 Question.query.all()
    2. 前端页面循环显示整个列表。
    3. 问答排序
  2. 完成问答详情页布局：
    1. 包含问答的全部信息
    2. 评论区
    3. 以往评论列表显示区。
  3. 在首页点击问答标题，链接到相应详情页。

代码如下：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
      <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>

</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">python</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    首页
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">java</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>

                </ul>
            </li>
            <li class="active"><a href="#">问答</a></li>
        </ul>
    </div>
    </div>
</nav>

<ul class="list-group">

    <li class="list-group-item" style="width: 800px">


     <a class="wrap-img" href="#" target="_blank">
      <img src="http://www.bookmarkye.com/3.jpg" width="50px" >
    </a>
      <span class="glyphicon glyphicon-left" aria-hidden="true"></span>
        <a  href="#" target="_blank">{{ user }}</a>
        <br>
         <a  href="#">{{ title }}</a>
     <span class="badge">{{time  }}</span>
              <p style="">{{ detail }}
    </p>


    </li>
     {% for foo in questions %}
         <li class="list-group-item" style="width: 800px">


     <a class="wrap-img" href="#" target="_blank">
      <img src="http://www.bookmarkye.com/3.jpg" width="50px" >
    </a>
      <span class="glyphicon glyphicon-left" aria-hidden="true"></span>
        <a  href="#" target="_blank">{{foo.author.username }}</a>
        <br>
         <a  href="{{ url_for('detail',question_id=foo.id)}}">{{ foo.title }}</a>
     <span class="badge">{{ foo.creat_time }}</span>
              <p style="">{{ foo.detail }}
    </p>
  {% endfor %}

</ul>

</body>
</html>

detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>


</head>
<body>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column">
        </div>
        <div class="col-md-6 column">

            <p>
             <h3>这是标题</h3>
            </p>

            <p>
                <textarea>这里输入评论内容</textarea>
            </p>
            <p>

            </p> <button type="button" class="btn btn-default">发送</button>
            <h1>用户评论</h1><br>
            <ul>

                <li class="list-group-item">这是第一条评论</li>
                <li class="list-group-item">这是第二条评论</li>
                <li class="list-group-item">这是第三条评论</li>
            </ul>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>
</body>
</html>

py

from flask import Flask
from flask import render_template,request,redirect,url_for,session
import config
from functools import wraps
from datetime import datetime
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config.from_object(config)
db = SQLAlchemy(app)

class User(db.Model):
    __tablename__ = 'user'
    # 建立一个表user
    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    username = db.Column(db.String(20),nullable=False)
    password = db.Column(db.String(20),nullable=False)
    say = db.Column(db.String(50))

# db.create_all()

class Question(db.Model):
    __tablename__ = 'question'

    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    title = db.Column(db.String(100),nullable=False)
    detail = db.Column(db.Text,nullable=False)
    creat_time = db.Column(db.DateTime,default=datetime.now)
    author_id=db.Column(db.Integer,db.ForeignKey('user.id'))
    author=db.relationship('User',backref=db.backref('question'))

# db.create_all()

#添加数据
# user=User(username='hua',password='11111')
# db.session.add(user)
# db.session.commit()
#


# 添加数据
# question=Question(title='huangdahua1',detail='111')
# db.session.add(question)
# db.session.commit()

@app.route('/')
def index():
    context={
        'user':'huadahua',
        'title':'大家好”',
        'time':'2017-09-29',
        'detail':'这是我的python',
        'questions':Question.query.order_by('-creat_time').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)

if __name__ == '__main__':
    app.run()

运行结果：

转载于:https://www.cnblogs.com/-064/p/7942824.html

pinyougou:第一个前端（HTML+css）项目,通过HTML和css构建电商网站首页、列表页、详情页
05-09
pinyougou this is my first project about html + css 品优购的项目是本人在结束HTML+css学习之后实践的第一个完整练手项目，其中大部分内容都是由我自主构思完成，当然遇到问题也会通过查看教学视频以及查看已有案例源码来解决。 其中主要的练习素材是从‘黑马程序员’获取，以此减小非技术成本。
首页列表显示全部问答，完成问答详情页布局
weixin_30565327的博客
12-01 106
首页列表显示全部问答： 将数据库查询结果传递到前端页面 Question.query.all() @app.route('/shouye/') def shouye(): context = { 'questions':Question.query.order_by('create_time').all() } return rende...
html列表详情页,如何区分一个页面是列表页还是详情页
weixin_34638776的博客
06-07 2031
解析页面是做爬虫的过程中的重要环节，而且如果站点多了，解析也会变得非常复杂，所以智能化解析就可能是一个不错的解决方案。如果我们能够容忍一定的错误率，那么我们可以利用智能化解析算法帮我们提取一些内容，简单高效。 那有没有办法做到一个网站的全自动化解析呢？ 比如来了一个博客网站，我能首先识别出来这是一个列表页还是文章(详情)页，然后提取列表页的每篇文章的链接，然后跳转到每篇文章(详情)页再提取文章相关...
基于Vue30框架结合TypeScript技术栈开发的知乎风格问答社区前端项目_包含首页问答列表_问题详情页_个人中心_消息通知_搜索功能_点赞收藏评论互动_用户登录注册_标签分.zip
08-12
1. 首页问答列表：展示社区中热门问题的列表，用户可以直接浏览问题及对应的简短回答，激发用户参与互动的热情。 2. 问题详情页：当用户点击某个问题时，会跳转至问题详情页，这里详细展示问题内容、用户回答、点赞...
问答公益博客整站网站模板
04-02
4. **整站**：意味着模板覆盖了网站的所有关键部分，包括首页、分类页、详情页、用户中心等，可快速构建一个完整的网站结构。 【文件名称列表】虽然没有提供具体的文件名，但通常一个整站网站模板会包含以下几类...
ask.rar_ask module_ask问答_dedecms_mark_ico.gif
09-24
"ask问答模板"通常包含问题列表、问题详情、回答区域、用户交互等元素，旨在提供清晰、简洁且互动性强的页面布局。"dedecms_mark_ico.gif"可能是模板中的一个标记图标，用于视觉上的引导或提示，提升用户体验。 在...
Flask问答平台模板，前端代码
09-04
在设计这样的平台时，前端代码需要考虑到用户交互的便利性，例如方便的提问和回答输入框、清晰的问题列表以及合理的页面布局。同时，还需要考虑响应式设计，以确保在不同设备上都能提供良好的用户体验。 在Flask...
从问答到直播，小蜜虚拟主播的多模态技术实践-赵中州.pdf
08-30
从知识库问答到直播的转变，技术上经历了从FAQ任务型对话、意图分类到非结构化内容问答、文档问答和视觉问答的演进。为了适应直播环境，需要构建知识图谱进行推理，并进行情感计算以驱动虚拟主播的行为。人脸重建...
torch神经网络入门级设备测试
m0_71002812的博客
09-07 1721
本文介绍了一个基于PyTorch的CPU与GPU性能评估系统，用于比较不同硬件在求解常微分方程(ODE)的神经网络模型中的计算效率。系统包含以下核心功能： 自动检测CUDA可用性及GPU配置 构建多层前馈神经网络模型求解二阶ODE 性能基准测试：分别在CPU/GPU上运行相同训练任务，计算加速比 内存使用分析：对比CPU/GPU张量的内存占用情况 梯度计算专项测试：评估反向传播耗时差异 评估结果显示，在处理大规模数据(≥5000个数据点)时，GPU凭借并行计算优势可获得显著加速效果。系统适用于科研人员优化物
AI驱动的软件测试：革命性的自动化、缺陷检测与实验优化
zzywxc787的博客
09-06 718
人工智能（AI）和机器学习（ML）技术的融入，正在从根本上重塑软件测试的格局，将其从一种主要是手动的、重复性的任务转变为一种智能的、预测性的、且持续优化的过程。*说明：多臂老虎机算法（MAB）由于将更多流量分配给了更好的版本B，其累积回报（点击次数）的增长速度远快于传统A/B测试（固定50/50分流）。： 利用NLP技术（如文本分类）自动分析新提交的Bug报告的内容、标题和描述，将其自动分类（如“前端UI问题”、“后端API错误”），并推荐或分配给最合适的开发人员（基于谁修改了相关代码文件）。
SAP HANA Scale-out 03：Performance Guide
最新发布
SAP攻城狮
09-10 946
HEX EngineThe SAP HANA Execution Engine (HEX)是一个查询执行引擎，从长远来看将取代其他SAP HANA引擎，如连接引擎和OLAP引擎.所有功能都整合在HEX中,从而消除不同引擎之间的物化过程。HEX引擎通过在准备阶段创建适当的SQL计划来连接SQL层和存储层。HEX引擎中的数据是流式处理的，因此可以快速获取第一批结果行，而无需等待所有结果行都被处理。HEX引擎中的操作符是管道化的，改进了并行化并可以减少内存消耗。
知识图谱——图数据库与项目构建
renjt01的博客
09-10 247
知识图谱——图数据库与项目构建 一、图数据库 1.Neo4j 2.neo4j使用 3.创建节点 4.创建关系 5.删除所有节点和关系 6.效果展示 二、知识问答项目构建 1、前端构建 2、大模型进行问题分类和命名实体识别 3、python操作neo4j数据库 4、后端构建
【Python】 数据容器通用操作完全指南
Hy_g_g_e_的博客
09-10 387
Python数据容器（如列表、元组、字符串、集合、字典等）支持多种通用操作，包括成员检测（in/not in）、长度判断（len()）、布尔判断（空容器为False）、迭代遍历（for循环、enumerate()、zip()）、比较操作（==、<）、复制操作（浅拷贝/深拷贝）以及类型转换（list()、tuple()等）。这些通用操作能提高编程效率，适用于各种常见场景，如数据验证、输入处理、数据转换等。掌握这些通用方法可以更灵活地处理不同类型的数据容器。
LeetCode Hot 100 Python (71~80)
朝花夕拾。
09-08 804
LeetCode Hot 100 第71~80题的Python实现
Python实现生成矩形、三角形、六边形和圆形点云
不枯石的学习笔记
09-06 909
本文介绍了使用Python生成规则几何形状点云的方法，包括矩形、三角形、六边形和圆形。主要内容包括：1）基本步骤概述，涵盖参数定义、采样、噪声添加和可视化；2）四种几何形状的具体生成算法和示例代码；3）应用场景分析，如工业检测、机器人导航和虚拟现实；4）综合程序实现，通过Tkinter界面实现点云生成与可视化。文中详细说明了每种形状的采样算法（如重心坐标法、极坐标采样）和实现细节，并提供了完整的Python代码示例。该内容为三维点云处理的基础技术，适用于计算机视觉、机器人学等领域的研究和开发。
Flask问答系统设计：完整源码及文件结构指南
HTML页面文件共有7个，它们是构成问答系统前端界面的基本元素，涵盖了用户交互的各个页面，如问题列表页、问题详情页、提问页等。前端设计使用了HTML和CSS技术来确保界面的友好性和响应式设计，JavaScript则用来增强...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值