知了课堂-帖子加精

一、前端代码

帖子加精标识

主页

 index.html

在<div class="question-title"><a href="{{ url_for('qa.qa_detail',qa_id=question.id) }}">{{ question.title }}</a></div>后

{% for highlight in highlights %}
                            {% if question.id == highlight.qa_id %}
                            <div class="question-sign" >精华帖</div>
                            {% endif %}
                            {% endfor %}

index.css

.question-sign {
    font-size: 12px;
    color: snow;
    background-color: #bd2130;
    width: 36px;
}
.title{
    text-align: center;
}

详情页

 detail.html

<div class="row" style="margin-top: 20px;">
            <div class="col"></div>
            <div class="col-10" style="background-color: #fff;padding: 20px;">
                <h3 class="page-title">{{ question.title }}  </h3>
            <div class="question-info">
            {% if question.id == highlight.qa_id %}
                <div class = 'question-signs' >精华帖</div>
            {% endif %}
            </div>
            <p class="question-info">
                    <span>作者：{{ question.author.username }}</span>
                    <span>时间：{{ question.create_time }}</span>
                {% if g.user.id == question.author.id %}
                {% if highlight.qa_id == question.id %}
                    <form action="{{ url_for('qa.delete') }}" method="post">
                    <input type="hidden" name="question_id" value="{{ question.id }}">
                        <p class="question-info"><button class="button">删除精华帖</button></p>
                    </form>
                    {% else %}
                    <form action="{{ url_for('qa.save') }}" method="post">
                 <input type="hidden" name="question_id" value="{{ question.id }}">
                             <p class="question-info"><button  class="button">设置精华帖</button></p>
                    </form>
                {% endif %}
            {% endif %}

 detail.css

.question-signs {
    color: snow;
    background-color: #bd2130;
    width: 6%;
    margin: auto;
}
.button{
    background-color: #34ce57;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    padding: 3px 3px;
}

确定加精页面

在templates中新建highlight.html

{% extends 'base.html' %}

{% block title %}精华帖{% endblock %}

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

{% block body %}
<h1 class="title">精华帖</h1>
<div class="row" style="margin-top: 20px;">
            <div class="col"></div>
            <div class="col-10">
                <ul class="question-ul">
                    {% for question in questions %}
                        {% for highlight in highlights %}
                            {% if question.id == highlight.qa_id %}
                    <li>
                        <div class="side-question">
                            <img class="side-question-avatar" src="{{ url_for('static',filename='images/avatar.jpg') }}" alt="">
                        </div>
                        <div class="question-main">
                            <div class="question-title"><a href="{{ url_for('qa.qa_detail',qa_id=question.id) }}">{{ question.title }}</a></div>
                        {% for highlight in highlights %}
                            {% if question.id == highlight.qa_id %}
                            <div class="question-sign" >精华帖</div>
                            {% endif %}
                            {% endfor %}
                            <div class="question-content">{{ question.content }}</div>
                            <div class="question-detail">
                                <span class="question-author">{{ question.author.username }}</span>
                                <span class="question-time">{{ question.create_time }}</span>
                            </div>
                        </div>
                    </li>
                            {% endif %}
                            {% endfor %}
                    {% endfor %}
                </ul>
            </div>
            <div class="col"></div>
        </div>

{% endblock %}

加精页面进入

 base.html

<a class="navbar-brand" href="/highlight">知了问答</a>

二、后端

创建一个表

models.py

class HighlightModel(db.Model):
    __tablename__ = 'highlight'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    qa_id = db.Column(db.Integer, db.ForeignKey("question.id"))
    create_time = db.Column(db.DateTime, default=datetime.now)

    qa = db.relationship(QuestionModel, backref="highlight")

不要忘记更新数据库(终端）

python -m flask db migrate
python -m flask db upgrade

设置后端

精华帖页面

qa.py

@bp.route("/highlight")
def highlight():
    highlights = HighlightModel.query.all()
    questions = QuestionModel.query.all()
    return render_template('highlight.html', questions=questions, highlights=highlights)

添加函数

@bp.route("/save", methods=['GET', 'POST'])
def save():
    question_id = request.form.get("question_id")
    highlights = HighlightModel(qa_id = question_id)
    db.session.add(highlights)
    db.session.commit()
    return redirect(url_for('qa.highlight'))

删除函数

@bp.route("/delete", methods=['GET', 'POST'])
def delete():
    question_id = request.form.get("question_id")
    highlight = HighlightModel.query.filter_by(qa_id = question_id).first()
    db.session.delete(highlight)
    db.session.commit()
    return redirect(url_for('qa.highlight'))

其他更改

@bp.route('/')
def index_page():
    questions = QuestionModel.query.order_by(QuestionModel.create_time.desc()).all()
    highlights = HighlightModel.query.all()
    return render_template('index.html', questions=questions,highlights=highlights )

@bp.route("/search")
def search():
    #/search?q=flask
    #/search/<q>
    # post,request.form
    q = request.args.get('q')
    questions = QuestionModel.query.filter(QuestionModel.title.contains(q)).all()
    highlights = HighlightModel.query.all()
    return render_template('index.html', questions=questions, highlights=highlights)

@bp.route('/qa/detail/<qa_id>')
def qa_detail(qa_id):
    question = QuestionModel.query.get(qa_id)
    highlight = HighlightModel.query.filter_by(qa_id = qa_id).first()
    return render_template('detail.html', question=question,highlight=highlight)