Flask开发待办清单添加任务时报POST 404错误求排查及解决方案

问题根因定位 #

• 新增任务表单提交路径与后端路由不匹配：add.html中提交任务的表单action配置为/todolist，但后端没有定义对应的POST类型路由，直接触发404错误。
• todo视图缺少路由装饰器：application.py中仅定义了todo函数，没有添加@app.route("/todo")装饰器，/todo路径无法正常访问。
• clear函数逻辑顺序错误：先执行return跳转再写清空session的逻辑，跳转后代码不会执行，清空功能完全失效。
• 模板语法使用错误：todo.html中将Jinja2服务端渲染的for循环写在了<script>标签内，无法正常渲染待办列表，同时{%end for%}多了空格，存在语法错误；所有复选框使用同一个id，存在HTML规范问题。

修复方案 #

1. 修复application.py代码 #

# 新增todo路由装饰器
@app.route("/todo")
def todo():
    if "todos" not in session:
        session["todos"] = []
    return render_template('todo.html', todos=session["todos"])
        
@app.route('/clear')
def clear():
    # 先清空session再跳转
    session["todos"] = []
    return redirect("/todo")
        
@app.route('/add', methods=["GET", "POST"])
def add():
    if request.method == "GET":
       return render_template("add.html")
    else:
        todo = request.form.get("task")
        session["todos"].append(todo)
        return redirect("/todo")

2. 修复add.html表单路径 #

将提交任务的表单action改为后端已定义的/add路由：

<form class="aligncenter" action="/add" method="POST"> 
    <input id="task" name="task" type="text" placeholder="New Task :)">   
    <input id="submit" type="submit" disabled>
</form>

3. 修复todo.html模板语法 #

将Jinja2循环移出<script>标签，修正endfor语法，用loop.index生成唯一的复选框id：

<ul class="listcenter">
{% for todo in todos %}
    <li> {{ todo }} <input type="checkbox" id="checkbox{{ loop.index }}"> </li> 
{% endfor %}
</ul>

内容的提问来源于stack exchange，提问作者ccarvalho