Flask与Jinja2：正确传递URL参数以避免404错误-html教程-PHP中文网

Flask与Jinja2：正确传递URL参数以避免404错误

碧海醫心

发布： 2025-09-28 10:21:07

原创

1395人浏览过

Flask与Jinja2：正确传递URL参数以避免404错误

本文旨在解决Flask应用中因Jinja2模板URL参数传递不当导致的"404 Not Found"错误。通过分析一个密码更新功能的典型场景，我们将深入探讨Jinja2变量渲染的正确语法，并提供修复方案，确保表单数据能够正确提交到指定路由，从而避免常见的路由匹配失败问题。

在开发web应用时，flask框架与jinja2模板引擎的结合为我们提供了强大的功能。然而，在处理动态url和表单提交时，一个常见的陷阱是jinja2变量渲染语法的误用，这可能导致“404 not found”错误。本教程将深入探讨这一问题，并提供清晰的解决方案。

理解“404 Not Found”错误的根源

当用户尝试通过表单提交数据，但服务器返回“404 Not Found”错误时，通常意味着客户端请求的URL与服务器上定义的任何路由都不匹配。在Flask应用中，这尤其可能发生在动态URL参数的传递上。

考虑以下HTML表单代码片段：

<form action="/update/{id}" method="POST">
    {{ form.password(class="form-control", value=userPass.password) }}
    {{ form.submit}}
</form>

登录后复制

以及对应的Flask路由：

@app.route('/update/<int:id>', methods=['GET', 'POST'])
@login_required
def update(id):
    # ... 省略部分代码 ...
    pass

登录后复制

问题在于HTML表单中的action="/update/{id}"。尽管Flask路由定义了<int:id>作为动态参数，但Jinja2模板引擎在渲染HTML时，并不会将{id}解析为一个变量。它会将其视为字面量字符串。因此，当浏览器提交表单时，它会向/update/{id}这个确切的URL发送请求，而不是将{id}替换为实际的用户ID。由于Flask应用中没有名为/update/{id}的路由，服务器自然会返回“404 Not Found”错误。

Jinja2变量渲染机制

Jinja2是一个功能强大的模板引擎，它使用特定的语法来识别和渲染模板中的变量、控制结构等。对于变量，Jinja2的规定是使用双大括号{{ variable_name }}。

例如，如果你想在模板中显示一个名为id的变量的值，你应该这样写：

<p>用户ID是：{{ id }}</p>

登录后复制

只有这样，Jinja2才会识别id为一个变量，并将其替换为后端传递过来的实际值。

修复方案：正确传递URL参数

要解决上述“404 Not Found”问题，只需将HTML表单中的action属性修改为正确的Jinja2变量渲染语法：

错误的写法：

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

查看详情

<form action="/update/{id}" method="POST">

登录后复制

正确的写法：

<form action="/update/{{id}}" method="POST">

登录后复制

通过将{id}更改为{{id}}，Jinja2模板引擎在渲染HTML时，会将{{id}}替换为update函数中传入的id变量的实际值。例如，如果id的值是123，那么渲染后的HTML将是：

<form action="/update/123" method="POST">

登录后复制

此时，浏览器将向/update/123发送POST请求，这与Flask路由@app.route('/update/<int:id>')完美匹配，从而避免了“404 Not Found”错误，并允许后端正确处理数据。

完整的代码示例（修正后）

修正后的HTML模板 (update.html)：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Update Page</title>
</head>
<body>
<h1>Update Password</h1>

<form action="/update/{{id}}" method="POST"> {# 注意这里将 {id} 改为 {{id}} #}
    {{ form.csrf_token }} {# 推荐添加CSRF保护 #}
    {{ form.password(class="form-control", value=userPass.password) }}
    {{ form.submit}}
</form>

</body>
</html>

登录后复制

Flask后端代码 (app.py)：

from flask import Flask, render_template, request, redirect, url_for, flash
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager, login_required, UserMixin # 假设已配置Flask-Login
from flask_wtf import FlaskForm
from wtforms import PasswordField, SubmitField
from wtforms.validators import DataRequired

# 假设的Flask应用和数据库配置
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key' # 生产环境请使用强密钥
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
db = SQLAlchemy(app)
login_manager = LoginManager(app)
login_manager.login_view = 'login'

# 假设的用户模型
class User(db.Model, UserMixin):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    password = db.Column(db.String(120), nullable=False)

    def get_id(self):
        return str(self.id)

@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))

# 假设的密码更新表单
class UpdatePasswordForm(FlaskForm):
    password = PasswordField('New Password', validators=[DataRequired()])
    submit = SubmitField('Update Password')

# 假设的登录路由
@app.route('/login')
def login():
    return "Login Page (Placeholder)" # 实际应渲染登录模板

@app.route('/update/<int:id>', methods=['GET', 'POST'])
@login_required
def update(id):
    form = UpdatePasswordForm()
    userPass = User.query.get_or_404(id) # 使用get_or_404处理用户不存在的情况

    if request.method == "POST":
        if form.validate_on_submit(): # 验证表单数据
            # 注意：在实际应用中，密码应进行哈希处理，例如使用 werkzeug.security.generate_password_hash
            userPass.password = form.password.data # 从表单获取数据
            try:
                db.session.commit()
                flash("User Updated Successfully!")
                return redirect(url_for('login')) # 成功后重定向到登录页
            except Exception as e: # 捕获更具体的异常，并回滚
                db.session.rollback()
                flash(f"Error! There was a problem changing your password: {e}")
                # 错误时，重新渲染页面并显示错误信息
                return render_template("update.html",
                                       form=form,
                                       userPass=userPass,
                                       id=id)
        else:
            # 表单验证失败，重新渲染页面并显示验证错误
            for field, errors in form.errors.items():
                for error in errors:
                    flash(f"Error in {field}: {error}")
            return render_template("update.html",
                                   form=form,
                                   userPass=userPass,
                                   id=id)
    else:
        # GET请求，初始化表单（密码字段通常不预填充旧密码）
        return render_template("update.html",
                               form=form,
                               userPass=userPass,
                               id=id)

if __name__ == '__main__':
    with app.app_context():
        db.create_all()
        # 示例用户（如果需要）
        # if not User.query.filter_by(username='testuser').first():
        #     new_user = User(username='testuser', password='oldpassword') # 实际应哈希
        #     db.session.add(new_user)
        #     db.session.commit()
    app.run(debug=True)

登录后复制

注意事项与最佳实践：

Jinja2变量语法： 始终记住使用{{ variable }}来渲染变量。对于控制结构（如if、for），则使用{% control_statement %}。
CSRF保护： 在表单中添加{{ form.csrf_token }}以启用Flask-WTF提供的跨站请求伪造（CSRF）保护，增强应用安全性。
密码哈希： 在实际应用中，绝不应将用户密码以明文形式存储在数据库中。务必使用werkzeug.security.generate_password_hash和check_password_hash等工具对密码进行哈希处理。
错误处理： 在try...except块中，捕获更具体的异常，并在发生数据库错误时执行db.session.rollback()，以撤销未提交的更改。
重定向逻辑： 确保redirect(url_for(...))语句能够被执行，它通常作为return语句的一部分。在原始代码中，redirect语句位于return render_template之后，导致其永远不会被执行。
表单验证： 充分利用Flask-WTF提供的表单验证功能，通过form.validate_on_submit()在后端对用户输入进行验证，提高数据的完整性和安全性。

总结

正确理解和运用Jinja2的变量渲染语法是构建健壮Flask应用的关键。通过将form action="/update/{id}"修正为form action="/update/{{id}}"，我们解决了因URL参数传递不当导致的“404 Not Found”错误。同时，本教程也强调了在处理用户数据和表单提交时，应遵循的安全最佳实践，如密码哈希、CSRF保护和完善的错误处理机制。掌握这些核心概念，将有助于您开发出更加稳定、安全的Web应用。

以上就是Flask与Jinja2：正确传递URL参数以避免404错误的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

HTML如何设置文本间距？letter-spacing和word-spacing的区别是什么？如何将HTML转Word？转换工具入门步骤 html中怎么设置文本自动换行 word-wrap方法 html中怎么设置文本换行 word-break属性详解 Vue.js前端生成带分页符的Word文档：挑战与解决方案？或如何在Vue.js前端生成包含分页符的Word文档？