时间戳

首页 > 解决方案 > 将任务添加到待办事项列表

javascript - 将任务添加到待办事项列表

问题描述

我已经有这个问题很长时间了，但还没有人能够解决它......当我尝试在我的网站上添加新任务时，我收到消息“POST /templates/todo”错误（404 ）：“未找到”，无法找到代码有什么问题。谁能帮我弄清楚（请给我一个解决方案）？我开始认为这可能是我的 for 循环的问题，但我不确定。它是在cs50 ide软件上完成的。非常感谢你。

应用程序.py 代码

def todo():
    if "todos" not in session:
        session["todos"] = []
    return render_template('todo.html', todos=session["todos"])
        
@app.route('/clear')
def clear():
    return redirect("/todolist")
    session["todos"] = []
        
@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")

添加.html代码


<html lang="en">
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/css/styles.css" rel="stylesheet">
        <title>
          Add a New Task :)
        </title>
    </head>
    <body>
        <h1 class = "aligncenter">
            <img class = "img1" src = "/static/images/logocarol.jpg" alt = "Logo" height = "200" width = "550"/>    
        </h1>
        <h1 class="centergeneral fontsize">
            Add any goals, dreams and aspirations you might have here:
        </h1>
        <form class="aligncenter" action="/todolist" method="POST"> 
            <input id="task" name="task" type="text" placeholder="New Task :)">   
            <input id="submit" type="submit" disabled>
        </form>
        <script>
            document.querySelector('#task').onkeyup = function(){
                if (document.querySelector('#task').value === ''){
                    document.querySelector('#submit').disabled = true;
                } else {
                     document.querySelector('#submit').disabled = false;
                }
            }
        </script>

        <form action="index">
            <button type="submit" id = "back" class="btn btn-info margin"> BACK TO HOMEPAGE </button> <br> <br>
        </form>
        <form action="/todo">
            <button type="submit" id = "back" class="btn btn-outline-info margin"> BACK TO TO DO LIST </button> <br> <br>
        </form>
    </body>

todo.html 代码

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/css/styles.css" rel="stylesheet">
        <title>
          To Do List! :)
        </title>
    </head>
    <body>
        <h1 class = "aligncenter">
            <img class = "img1" src = "/static/images/logocarol.jpg" alt = "Logo" height = "200" width = "550"/>    
        </h1>
        <h1 class="fonts centergeneral"> To Do List </h1>
        <h2 class="fs-4 centergeneral"> What I Want to Achieve: </h2> <br>
        <ul class="listcenter">
            <script>
            {%for todo in todos%}
                <li> {{ todo }} <input type="checkbox" id="checkbox1"> </li> 
            {%end for%}
            </script>
        </ul>
        
        <a class="btn btn-outline-info margin" href = "add"> Add a New Task</a>
        <a class="btn btn-outline-info" href = "clear"> Clear Tasks </a> <br>
        <div class="backbuttons">
        <form action = "index">
            <button type="submit" id = "back" class="btn btn-info"> BACK TO HOMEPAGE </button> <br> <br>
        </form>
        </div>

标签： javascriptpythonhtmlcss

解决方案

基本上404-Error-code描述了您的应用程序中不存在特定页面或资源/路由。在您的情况下也发生了同样的事情，因为据我所知，您应该为每个将在路由时执行的方法声明一个路由。

最后：

你错过了路线声明/todo

@app.route('/todo')

再试一次，通过添加这一行。我希望它对你有帮助:)

推荐阅读