首頁列表顯示所有問答，完成問答詳情頁佈局。

時間 2020-09-14

標籤首頁列表顯示所有問答完成詳情佈局简体版

原文原文鏈接

首頁列表顯示所有問答：
1. 將數據庫查詢結果傳遞到前端頁面 Question.query.all()
2. 前端頁面循環顯示整個列表。
3. 問答排序
完成問答詳情頁佈局：
1. 包含問答的所有信息
2. 評論區
3. 以往評論列表顯示區。
在首頁點擊問答標題，連接到相應詳情頁。

代碼以下：javascript

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()
# 創建一筆表question
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()
class Log(db.Model):
    __tablename__ = 'log'
    # 創建一個表log
    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)


#db.create_all()

# 添加數據
# user=User(username='yujiujiu2',password='11111')
# db.session.add(user)
# db.session.commit()
#

# 查找數據
# user=User.query.filter(User.username=='yujiujiu').first()
# print(user.username,user.password)


# 修改數據
# user=User.query.filter(User.username=='yujiujiu').first()
# user.password='666667'
# print(user.username,user.password)
# db.session.commit()


# 刪除數據
# user=User.query.filter(User.username=='yujiujiu2').first()
# db.session.delete(user)
# db.session.commit()



@app.route('/')
def index():
    context={
        # 'user':'yubozhi',
        # 'title':'硬盤不是「背鍋俠」',
        # 'time':'2017-11-29',
        # 'detail':'昔日上將懸樑，今天硬盤入黨。說這話的是一位資深前媒體人。 光天化日之下，硬盤居然壞了！衆目睽睽之下，硬盤居然壞了！！大庭廣衆之下，硬盤居然壞了！！！ 重要的事情說三遍！！！ ...',
        'questions':Question.query.order_by('-creat_time').all()

    }
    return render_template('basic.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=question_id)



#第1種寫法，存入Log表裏面的數據與User表對比

# @app.route('/login/',methods=['GET','POST'])
# def login():
#     if request.method=='GET':
#         return render_template('login.html')
#     else:
#         username=request.form.get('username')
#         password=request.form.get('password')
#
#         log=Log.query.filter(User.username==username,User.password==password).first()
#         #判斷用戶名是否存在
#         if log:
#             log = Log(username=username, password=password)
#             db.session.add(log)
#             db.session.commit()
#             return redirect(url_for('index'))
#
#         else:
#
#             return u' error username or password'

# 從新定向到首頁

#第二種寫法

@app.route('/login/',methods=['GET','POST'])
def login():
    if request.method=='GET':
        return render_template('login.html')
    else:
        usern=request.form.get('username')
        passw=request.form.get('password')
        user=User.query.filter(User.username==usern).first()
        #判斷用戶名是否存在
        if user:

            if user.password==passw:
                session['user'] = usern#字典鍵值
                session.permanent = True
                return redirect(url_for('index'))
            else:
                return u' password error'
        else:
            return u' username  not existed'



#判斷是否登錄，有則在導航欄顯示用戶名
@app.context_processor
def mycontext():
    usern=session.get('user')
    if usern:
        return {'username':usern}
    else:
        return {}

#登出，清除session
@app.route('/logout')
def logout():
    session.clear()
    return redirect(url_for('index'))



#發佈前登錄裝飾器
def loginFirst(func):  # 參數是函數
    @wraps(func)
    def wrapper(*args, **kwargs):  # 定義個函數將其返回
        if session.get('user'):
            return func(*args, **kwargs)
        else:
            return redirect(url_for('login'))
    return wrapper  # 返回一個函數





#登錄前驗證，進入評論進入問答頁
@app.route('/question/',methods=['GET','POST'])
@loginFirst
def question():
    if request.method=='GET':
        return render_template('question.html')
    else:
        title=request.form.get('title')
        detail = request.form.get('detail')
        author_id = User.query.filter(User.username ==session.get('user')).first().id
        question = Question(title=title, detail=detail, author_id=author_id)
        db.session.add(question)
        db.session.commit()
        return redirect(url_for('index'))



@app.route('/zhuce/',methods=['GET','POST'])
def zhuce():
    if request.method=='GET':
        return render_template('zhuce.html')
    else:
        username=request.form.get('username')
        password=request.form.get('password')
        say=request.form.get('say')
        user=User.query.filter(User.username==username).first()
        #判斷用戶名是否存在
        if user:
            return u' username existed'
        else:
            user=User(username=username,password=password,say=say)
            db.session.add(user)
            db.session.commit()
            return redirect(url_for('login'))
# 從新定向到登陸頁



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

detail.htmlcss

{% extends 'basic.html' %}
{% block aa %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename="css/login.css") }}">
    <script language="javascript" type="text/javascript" src="{{ url_for('static',filename="js/login.js") }}"></script>


{#<div class="container" style="min-height: 500px;">#}
    <div class="row clearfix">
        <div class="col-md-3 column">
        </div>
        <div class="col-md-5 column">
<div class="page-header">
    <h3>Title{{ ques }}<br>
    <small>author r</small></h3>
</div>
            <p class="lead">detail</p>
            <hr>
            <form action="{{ url_for('question') }}" method="post" style="">
                <div class="form-group">
                    <textarea name="new_comment" class="form-control"  row="3" id="new-comment" placeholder="write your comment"></textarea>
                </div>
                <button type="button" class="btn btn-default">發送</button>
            </form>
        <hr>
<h3>評論區</h3><br>


<div class="basic_box" style="padding-bottom: 50px;">
    <ul class="list-group" style="margin-bottom: 10px">



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


                <a class="wrap-img" href="#" target="_blank">
                    <img src="http://www.bookmarkye.com/9.jpg" width="50px">
                </a>
                <span class="glyphicon glyphicon-left" aria-hidden="true"></span>

                <br>
                <a href="#">我就是我</a>
                <span class="badge">發佈時間:6小時前</span>
                <p style="">這篇文章寫得太好啦！！
                </p>


            </li>

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


                <a class="wrap-img" href="#" target="_blank">
                    <img src="http://www.bookmarkye.com/5.jpg" width="50px">
                </a>
                <span class="glyphicon glyphicon-left" aria-hidden="true"></span>

                <br>
                <a href="#">喵喵</a>
                <span class="badge">發佈時間:7小時前</span>
                <p style="">樓上說的對！！
                </p>


            </li>

    </ul>

        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>
{% endblock %}

basic.htmlhtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script language="javascript" type="text/javascript" src="{{ url_for('static',filename="js/basic.js") }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename="css/basic.css") }}">
    <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 id="myBody" style="min-width: 1500px;" background="{{ url_for('static',filename="img/timg1.jpg") }}">


<ul class="nav nav-pills">
    <li class="active"><a href="{{ url_for('index') }}"><h2>Home</h2></a></li>
    <li><a href="#"><h2>PHP</h2></a></li>
    <li><a href="#"><h2>JAVA</h2></a></li>
    <li><a href="#"><h2>C++</h2></a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <h2>更多</h2><span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#"><h2>python</h2></a></li>
            <li><a href="#"><h2>html</h2></a></li>
            <li><a href="#"><h2>jsp</h2></a></li>

        </ul>
    </li>
    <li><a href="#"><h2>......&nbsp</h2></a></li>
    <li>
        <input class="d1" type="text" placeholder="搜索從這裏開始...">
        <button class="b" type="submit">搜索</button>
    </li>

    <li><img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">&nbsp;
    </li>


    {% if username %}

        <li><a href="#"><h2>{{ username }}</h2></a></li>
        <li><a href="{{ url_for('logout') }}"><h2>註銷</h2></a></li>
    {% else %}
        <li><a href="{{ url_for('login') }}"><h2>登陸</h2></a></li>
        <li><a href="{{ url_for('zhuce') }}"><h2>註冊</h2></a></li>
    {% endif %}
    <li><a href="{{ url_for('question') }}"><h2>問答</h2></a></li>
</ul>

{##}
{#<img id="gui" onclick="mySwitch()" src="" width="1700px">#}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-1 column">
        </div>
        <div class="col-md-7 column">

<p>
<h3>歡迎您:{{ username }}</h3></p>

<div class="basic_box" style="padding-bottom: 50px;">
    <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/9.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/9.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>


                {#列表內容        #}
            </li>
        {% endfor %}
    </ul>
</div>


        </div>
        <div class="col-md-4 column">
        </div>
    </div>
</div>



{% block aa %}{% endblock %}

<div id="didao" align="center">

    <div class="img">
        <a href="http://www.baidu.com">
        <img src="http://scimg.jb51.net/allimg/140408/10-14040QG01GU.jpg"></a>
        <div class="desc">
            <a href="http://www.baidu.com">更多搜索</a>
        </div>
    </div>
    <div class="img"><a href="http://www.baidu.com"><img src="http://imgstore.cdn.sogou.com/app/a/100540002/800197.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/">教務系統</a>
        </div>
    </div>
    <div class="img"><a href="http://www.baidu.com"><img
            src="http://4493bz.1985t.com/uploads/allimg/150625/1-1506251F320.jpg"></a>
        <div class="desc">
            <a href="http://bbs.tianya.cn/">友情論壇</a>
        </div>
    </div>
    <div class="img"><a href="http://www.baidu.com">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510223061&di=bc9ea322068f5f0311fb2ab6fe9db29a&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.005.tv%2Fuploads%2Fallimg%2F160920%2F103J12649-15.jpg"></a>
        <div class="desc">
            <a href="{{ url_for('index') }}">回到頂部</a>
        </div>
    </div>

</div>


<footer>
    <div class="foot">
        <div><a href="#"> 聯繫咱們</a> · <a href="#"> 加入咱們</a> · <a href="#"> 品牌與徽標 </a> · <a href="#">幫助中心</a> · <a
                href="#">合做夥伴</a></div>
        <div>©2015-2017 廣州商學院信息技術與工程學院 / 粵ICP備278953737號-5 / 粵公網安備2015060050046號 / Smrz 粵公網安備201506050046號 / Wxb
            舉報電話：020-66666666
        </div>
    </div>
</footer>
</body>
</html>

運行結果：前端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。