从首页问答标题到问答详情页

Posted 2020-10-16 郑淑莹

1.主PY文件写视图函数，带id参数。

@app.route(‘/questiondetail/<question_id>‘)
def questiondetail(question_id):
    quest=Question.query.filter(Question.id==question_id).first()
    return render_template(‘questiondetail.html‘,ques=quest)

2.首页标题的标签做带参数的链接。

{% extends‘base.html‘ %}

{% block title %}
    首页
{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/index.css‘) }}">
{% endblock %}

{% block main %}
    <div class="index">
    <div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E5%B0%8F%E7%8C%AA%E4%BD%A9%E5%A5%87&rsv_pq=f77d08900001a419&rsv_t=45ebl8vOLWaojJB%2BJqWl4G2jgewDoaq6Eal6j0Zx2EIT96apylRhpP3Koqg&rqlang=cn&rsv_enter=1&rsv_sug3=6&rsv_sug1=6&rsv_sug7=100">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477292746&di=b4d222e641b5c06b07c55cd205bba706&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161220%2Fca4c1e06ab854a40bb2590408a7b2f19_th.jpg"></a>
            <div class="desc"><a href="http://www.baidu.com/">小猪佩奇</a></div>
        </div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%89%98%E9%A9%AC%E6%96%AF%E5%92%8C%E4%BB%96%E7%9A%84%E6%9C%8B%E5%8F%8B%E4%BB%AC&oq=%25E5%25B0%258F%25E7%258C%25AA%25E4%25BD%25A9%25E5%25A5%2587&rsv_pq=eb12f7da00019eba&rsv_t=de8cbtTwyWVcQv6xzo8AEbWJhamBkxPdSWJh9Imdf5qYr8rt2NZHXCfYWNg&rqlang=cn&rsv_enter=1&inputT=3189&rsv_sug3=14&rsv_sug1=14&rsv_sug7=100&rsv_sug2=1&prefixsug=tuomasi&rsp=2&rsv_sug4=3188">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477829747&di=fd07b5cc8dd393392af74d2b90404779&imgtype=0&src=http%3A%2F%2Ffdfs.xmcdn.com%2Fgroup23%2FM06%2F8A%2F7E%2FwKgJL1h52lGCOLCQAAEaqmTeglU035.jpg"></a>
            <div class="desc"><a href="http://www.baidu.com/">托马斯和他的朋友们</a></div>
        </div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0&oq=%25E6%2589%2598%25E9%25A9%25AC%25E6%2596%25AF%25E5%2592%258C%25E4%25BB%2596%25E7%259A%2584%25E6%259C%258B%25E5%258F%258B%25E4%25BB%25AC&rsv_pq=d23a15630001b4ed&rsv_t=7430JNuHLv7607LmZ%2B%2BWE2eYL%2Fp7GhOQe3j0f5S9RCnmHRWM5plbXIAinRg&rqlang=cn&rsv_enter=1&inputT=2790&rsv_sug3=20&rsv_sug1=19&rsv_sug7=100&rsv_sug2=1&prefixsug=maohe%2520&rsp=0&rsv_sug4=2790">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508477964743&di=46e94537aabf5867005957b87cd85799&imgtype=0&src=http%3A%2F%2Fcdn.aixifan.com%2Fdotnet%2Fartemis%2Fu%2Fcms%2Fwww%2F201603%2F2615504731cpun6r.jpg"></a>
            <div class="desc"><a href="http://www.baidu.com/">猫和老鼠</a></div>
        </div>
        <div class="img">
            <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%A4%A9%E7%BA%BF%E5%AE%9D%E5%AE%9D&oq=%25E7%258C%25AB%25E5%2592%258C%25E8%2580%2581%25E9%25BC%25A0&rsv_pq=8de48b3f0001c6b3&rsv_t=94c1qlZLktBv27KJJZA0Sxe9rIX64JhNE%2F7O030MAq3wDdaGuEiv99uR8Jg&rqlang=cn&rsv_enter=1&inputT=2790&rsv_sug3=27&rsv_sug1=26&rsv_sug7=100&bs=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478000480&di=5fe3f1bdcea73b098ec174ea6a7b5f8b&imgtype=0&src=http%3A%2F%2Fd2xosoyzehxi5w.cloudfront.net%2Fwp-content%2Fuploads%2F2014%2F12%2Fteletubbies-sun-baby-jess-smith-3.jpg"></a>
            <div class="desc"><a href="http://www.baidu.com/">天线宝宝</a></div>
        </div>
    </div>
    <br><hr>
    <p>{{ username }}context</p>
    <div id="list-container">
        <ul class="list-group" style="...">
            {% for foo in questions %}
                <li>
                    <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                    用户：<a href="#" target="_blank">{{ foo.author.username }}</a>
                    <br>
                    <a href="{{ url_for(‘questiondetail‘,question_id=foo.id) }}" target="_blank">{{ foo.title }}</a>
                    <span class="badge">{{ foo.create_time }}</span>
                    <p style="text-indent: 18px">{{ foo.detail }}</p>
                </li>
            {% endfor %}
        </ul>
    </div>
    </div>
{% endblock %}

 

3.在详情页将数据的显示在恰当的位置。 

{% extends‘base.html‘ %}

{% block title %}
    问答详情
{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/questiondetail.css‘) }}">
{% endblock %}

{% block main %}
    <div class="post">
    <div class="artical">
        <h1 style="text-align: center">{{ ques.title }}</h1>
        <br><small>用户：{{ ques.author.username }} 发布时间：<span class="badge">{{ ques.create_time }}</span></small>
        <hr>
        <p style="text-indent: 18px">{{ ques.detail }}</p>
    </div>
    <div class="sign-container">
        <label for="QuestionDetail">
            <textarea class="form-control" rows="8" id="QuestionDetail" name="detail"></textarea>
        </label>
        <br>
        <input type="submit" value="评论" style="float: right">
    </div>
    <br><hr>

    </div>
{% endblock %}

 

4.建立评论的对象关系映射：

class Comment(db.Model):
    __tablename__=‘comment‘

class Comment(db.Model):
    __tablename__=‘comment‘
    id=db.Column(db.Integer,primary_key=True,autoincrement=True)
    author_id=db.Column(db.Integer,db.ForeignKey(‘user.id‘))
    question_id=db.Column(db.Integer,db.ForeignKey(‘question.id‘))
    detail=db.Column(db.Text,nullable=False)
    creat_time=db.Column(db.DateTime,default=datetime.now)
    question=db.relationship(‘Question‘,backref=db.backref(‘comments‘,order_by=creat_time.desc))
    author=db.relationship(‘User‘,backref=db.backref(‘comments‘))

 

5.尝试实现发布评论。