Javascript 面对代码中的错误作为前端与后端的集成

这是您的更新，您需要的所有功能，以及还添加了路由的创建-待办事项.

需要解决的错误:-

1-"正文不能仅定义为JSON；您必须指定将JavaScript转换为字符串，这是通过使用‘JSON.stringify’来完成的."

2-"正如您的‘Content-Type’中所提到的，这是不正确的，您应该将其定义为‘Content-Type’:‘Application/json’."

3-在我们的前端应用错误时使用Try/Catch.

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';

export default function LoginPage() {
    const[username , setUsernamne] = useState("");
    const[password , setPassword] = useState("");
    const navigate = useNavigate();
  return (
        <div>
         .
         .

        </div>
        <div style={{
            paddingTop:"18px",
            paddingLeft:"10px",
        }}>
            <button
                onClick={async ()=>{
                    try{
                        const response = await fetch("http://localhost:3005/signin",{
                            method: "POST",
                            body: JSON.stringify({
                                username: username,
                                password: password
                            }),
                            headers:{
                                "Content-type": "application/json",       
                            }
                        })
                        console.log(response);
                        if(!response.ok){
                            const errData = await response.json();
                            alert(errData.msg); // {backend error message }
                        }else{
                            navigate('/create-todo')
                        }
                    }catch(e){
                        alert("something error occured");
                    }
                }}
            >Login</button>
        </div>
    </div>
  )
}