Flask待办清单添加任务报404错误 求代码排查及站点上线方法

1. 404报错直接原因 #

add.html中提交任务的表单配置错误：
你当前<form class="aligncenter" action="todo" method="post">的action属性写的是相对路径todo，会自动拼接当前访问路径，而后端没有接收POST请求的/todo类路由，你处理新增任务的逻辑是写在/add路由的POST分支里的。
修复方式：把该表单的action改成绝对路径/add，或者留空（默认提交到当前页面路由/add）：

<form class="aligncenter" action="/add" method="post">

2. 其他关联错误修复 #

• 待办列表跳转404问题 #

add.html中「BACK TO TO DO LIST」的表单action也写的是todo，但你待办列表的路由是/todolist，修复为：

<form action="/todolist">

• 清空任务功能失效 #

application.py中clear路由的逻辑顺序写反了，redirect语句执行后后续代码不会运行，永远无法清空session，修复为：

@app.route('/clear')
def clear():
    session["todos"] = []
    return redirect("/todolist")

• 待办列表渲染失效 #

todo.html里把Jinja2的循环代码放在了<script>标签里，浏览器会将其识别为JS代码不会渲染成页面元素，删掉包裹的<script>和</script>标签即可：

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

• 缺少必须导入的模块 #

application.py开头没有导入Flask核心依赖，补充导入即可：

from flask import Flask, render_template, request, redirect, session
from flask_session import Session
from cs50 import SQL

公网访问链接生成方式 #

CS50 IDE是本地开发环境，默认仅支持IDE内访问，要生成可正常访问的公网链接：

1. 本地测试功能正常后，将代码部署到Flask托管平台，部署完成后平台会自动生成长期有效的公网访问链接
2. 仅做临时测试的话，可以在CS50 IDE终端使用内网穿透工具，将本地运行的端口映射到公网，即可生成临时访问链接

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