使用 Flask 和 Jinja 堆叠块的问题

问题描述 投票：0回答：1

我被重定向困住了，这对我的模板的渲染造成了严重破坏。 事实上，当我从 POST 重定向到同一端点到 GET 时，我的 

content
块会堆积起来

路线

@app.route("/upload", methods=["POST", "GET"])
def upload():

    logging.create_logger(app=app).warn("upload route")
    if request.method == "POST":
        logging.create_logger(app=app).warn("Post method reach")
        # check if the post request has the file part
        if "file" not in request.files:
            logging.create_logger(app=app).warn("No file")
            flash("No file part", "error")
            return redirect(request.url)
        file = request.files["file"]
        # If the user does not select a file, the browser submits an
        # empty file without a filename.
        if file.filename == "":
            flash("No selected file", "error")
            logging.create_logger(app=app).warn("No selected file")
            return redirect(request.url)
        logging.create_logger(app=app).warn("{}".format(file.filename))
        if file and file.filename and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            flash("File uploaded: {}".format(filename), "success")
            file.save(os.path.join(app.config["UPLOAD_FOLDER"], filename))
            logging.create_logger(app=app).warn("Upload successful")
            return redirect(request.url)
        else:
            flash("File extension not allowed", "error")
            return redirect(request.url)
    return render_template("fragments/upload.html.j2")

模板（基础）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>{% block title %}{% endblock %} - xxx.io</title>
    <style>
        @import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css";
    </style>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
</head>

<body>
    <nav class="navbar navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="/static/logo.png" alt="" width="80" height="38">
                SIM
            </a>
            <span class="navbar-text">
                Last update: 04/12/2024
            </span>
        </div>
    </nav>

    {% block content %}

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>Letifus app</h2>
            </div>
        </div>
    </div>

    {% endblock %}
    
    {% with messages = get_flashed_messages(with_categories=true) %} {% if
    messages %} {% for category, message in messages %}
    <div class="alert-container alert-sticky-bottom">
        {% if category == "info"%}
        <div class="alert alert-primary" role="alert">{{ message }}</div>
        {% endif %} {% if category == "success" %}
        <div class="alert alert-success" role="alert">{{ message }}</div>
        {% endif %} {% if category == "error" %}
        <div class="alert alert-danger" role="alert">{{ message }}</div>
        {% endif %}
    </div>

    {% endfor %} {% endif %} {% endwith %}

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

    <script src="https://unpkg.com/[email protected]"></script>

    <script>
        htmx.on("#form", "htmx:xhr:progress", function (evt) {
            htmx
                .find("#progress")
                .setAttribute("value", (evt.detail.loaded / evt.detail.total) * 100);
        });
    </script>
    <script>
        $(".alert").delay(3000).slideUp(200);
    </script>
</body>

</html>

模板（扩展库上传）

{% extends "base.html.j2" %}

{% block title %}Upload{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <form hx-encoding="multipart/form-data" hx-post="/upload">
                <div class="mb-3">
                    <label for="formFile" class="form-label">Default file input example</label>
                    <input class="form-control" type="file" id="formFile" name="file">
                    <button>Upload</button>

                </div>


            </form>

        </div>
    </div>
</div>
{% endblock %}

渲染图

Render_stacked

python flask jinja2
1个回答
0
投票

好吧，经过几次测试和研究，我终于找到了答案XD

只需修改由htmx处理的

form
的目标即可。

使用 

hx-target

<form hx-encoding="multipart/form-data" hx-post="/upload" hx-target="body>
    <div class="mb-3">
        <label for="formFile" class="form-label">Default file input example</label>
        <input class="form-control" type="file" id="formFile" name="file">
        <button>Upload</button>
    </div>
</form>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.