46 - 个人博客项目-17 - 留言板

1. templates / user / board.html 编辑留言板模板

        (1). 继承公共模板

{% extends 'base.html' %}
 
{% block title %}
    文章详情
{% endblock %}

        (2). 编写模板样式

{% block styles %}
    {{ super() }}
    <style>
        #container {
            width: 1200px;
            margin: 0 auto;
        }
 
        #detail {
            background-color: rgba(232, 243, 242, 0.6);
            border-radius: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px 50px;
        }
 
        #detail h2 {
            text-align: center;
        }
 
        #detail h2 + div {
            height: 30px;
            line-height: 30px;
        }
 
 
        .item {
            overflow: auto;
            border-bottom: 1px solid lightgray;
            margin-bottom: 20px;
            padding: 10px;
        }
 
        #item_left {
            float: left;
            width: 10%;
            text-align: center;
 
 
        }
 
        #item_left img {
            width: 50px;
            height: 50px;
            border-radius: 25px;
        }
 
        #item_right {
            float: right;
            width: 90%;
        }
    </style>
{% endblock %}

        (3). 编写模板内容

{% block newcontent %}
    <div id="container">
        <div id="detail">
            <div id="comment">
                <p>用户留言</p>
                <div>
                    <form action="{{ url_for('user.show_board') }}" method="post">
                        <input type="hidden" name="aid" value="">
                        <p>
                            <textarea name="board" class="form-control" rows="5" cols="60">写下你的评论吧~</textarea>
                        </p>
                        <p><input type="submit" value="发表留言" class="btn btn-info"></p>
                    </form>
                </div>
            </div>
            <p>
 
            </p>
 
            <div id="comment_item">
                {% if boards %}
                    {% for board in boards.items %}
                        <div class="item">
                            <div id="item_left">
                                <img src="
 
 
 
                                        {% if board.user.icon %}{{ url_for('static',filename=board.user.icon) }}{% else %}{{ url_for('static',filename='images/touxiang.jpg') }}{% endif %}">
                            </div>
 
                            <div id="item_right">
                                <p>
                                    <span>{% if not board.user_id %} 匿名用户{% else %}
                                        {{ board.user.username }}{% endif %}</span>
                                    <span>{{ board.mdatetime }}</span>
                                </p>
                                <p>
                                    {{ board.content }}
                                </p>
                            </div>
 
 
                        </div>
                    {% endfor %}
                {% else %}
                    还没有任何留言,赶快发表吧
                {% endif %}
 
 
 
                <div id="paginate">
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous{% if not boards.has_prev %} disabled {% endif %}"><a
                                    href="{{ url_for('user.show_board') }}?page={{ boards.prev_num }}"><span
                                    aria-hidden="true">&larr;</span> 上一页</a></li>
 
                            <li class="next {% if not boards.has_next %} disabled {% endif %}"><a
                                    href="{{ url_for('user.show_board') }}?page={{ boards.next_num }}">下一页 <span
                                    aria-hidden="true">&rarr;</span></a></li>
                        </ul>
                    </nav>
                </div>
 
 
            </div>
        </div>
    </div>
{% endblock %}

        (4).  编写js,点击后清空文本域

{% block scripts %}
    {{ super() }}
    <script>
        $(function () {
            //文本域
            $('textarea[name="board"]').focus(function () {
                $(this).val("")
            })
 
        })
    </script>
{% endblock %}

2. apps / user / view.py 编写留言板函数

留言板
@user_bp.route("/board", methods=["GET", "POST"])
def show_board():
    # 获取登录用户信息
    uid = session.get("uid", None)
    user = None
    if uid:
        user = User.query.get(uid)
    # 查询所有的留言内容
    page = int(request.args.get('page', 1))
    boards = MessageBoard.query.order_by(-MessageBoard.mdatetime).paginate(page=page, per_page=5)
    # 判断请求方式
    if request.method == "POST":
        content = request.form.get("board")
        # 添加留言内容
        msg_board = MessageBoard()
        msg_board.content = content
        if uid:
            msg_board.user_id = uid
        db.session.add(msg_board)
        db.session.commit()
        return redirect(url_for("user.show_board"))
    return render_template("user/board.html", user=user, boards=boards)

3. base.html 中配置留言板路径

<li><a href="{{ url_for('user.show_board' ) }}">留言板</a></li>