Thiết kế website giá rẻ

Question

I am getting a Post 404 Not found error when I am entering the details in either my login page or sign up page
Working with MERN stack for the first time and new to all the terms
The goal of the code is to first go to the login page and if the login already exists then should redirect to the admin homepage whose path i have defined as ‘/admin’ in the router. If it doesnt exist then an alert pops up (for now an alert later want to change it to redirecting it to the signup page) to inform that an account needs to be created. In the signup page if the login details exist then alert pops up saying it already exists, else and alert pops up saying it has been saved
The problem is that if i enter any data (existing or new) it is showing me the 404 not found error please let me know how to resolve this. I have included my codes down below.

AdminLogin.js

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
function AdminLogin(){
    const history=useNavigate();
    const handleFocus = () => {
        document.getElementById("message").style.display = "block";
      };
    const handleBlur = () => {
        document.getElementById("message").style.display = "none";
    };
    const [password, setPassword] = useState(''); // eslint-disable-line
    const [isPassValid, setIsPassValid] = useState(false);
    const [email, setEmail] = useState(''); // eslint-disable-line
    const [isEmailValid, setIsEmailValid] = useState(false);
    //const lock=document.getElementById('lock');
    const emailVal=(e)=>{
        const newEmail=e.target.value;
        setEmail(newEmail);
        const emailRegex=/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/; // eslint-disable-line
        const valid=emailRegex.test(newEmail);
        setIsEmailValid(valid);
    }
    const passVal=(e)=>{
        const newPassword = e.target.value;
        setPassword(newPassword);
    
        const lowerCaseRegex = /[a-z]/;
        const upperCaseRegex = /[A-Z]/;
        const numberRegex = /[0-9]/;
        const minLength = 8;

        const isLowerCaseValid = lowerCaseRegex.test(newPassword);
        const isUpperCaseValid = upperCaseRegex.test(newPassword);
        const isNumberValid = numberRegex.test(newPassword);
        const isLengthValid = newPassword.length >= minLength;

        setIsPassValid(isLowerCaseValid && isUpperCaseValid && isNumberValid && isLengthValid);
        document.getElementById("letter").style.color = isLowerCaseValid ? "green" : "red";
        document.getElementById("capital").style.color = isUpperCaseValid ? "green" : "red";
        document.getElementById("number").style.color = isNumberValid ? "green" : "red";
        document.getElementById("length").style.color = isLengthValid ? "green" : "red";
    }
    const submit=async (e)=>{
        if (isPassValid && isEmailValid){
            e.preventDefault();
            try{
                await axios.post('http://localhost:3000/adminLogin',{
                    email,password
                })
                .then(res=>{
                    // eslint-disable-next-line
                    if (res.data=='exist'){
                        history('/admin',{state:{id:email}})
                    }
                    // eslint-disable-next-line
                    else if (res.data=='notExist'){
                        alert('Need to create an account!');
                    }
                })
                .catch(e=>{
                    alert('WRONG DETAILS');
                    console.log(e);
                })

            }catch(e) {console.log(e)};
            }
      }

    return(
    <div className="bg-dark ">
    <div className="flex-container">
    <h1 className="text-center jersey-10-regular text-white m-0" style={{fontSize: 'xxx-large'}}>ADMIN LOGIN PAGE</h1>
        <div className="p-5" >
            <div className="m-5 text-center">
                    <svg id="lock" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="white" className="bi bi-unlock" viewBox="0 0 16 16">
                        
                        <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2M5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1"/>
                    </svg>
            </div>
            <form>
                <div className="form-floating text-black">
                    <input onChange={emailVal} type="email" className="form-control" id="email" placeholder="Email Address" size="50" />
                    <label htmlFor="email" className="form-label" style={{fontSize: 'large'}}>Email Address</label>
                </div>
                <div className="form-floating text-black">
                    <input onFocus={handleFocus} onBlur={handleBlur} onChange={passVal} type="password" className="form-control" id="pass" placeholder="Password" /> 
                    <label htmlFor="pass" className="form-label" style={{fontSize: 'large'}}>Password</label>
                </div>
                <div id="message">
                    <h6>Password must contain the following:</h6>
                    <p id="letter" >A <b>lowercase</b> letter</p>
                    <p id="capital" >A <b>capital (uppercase)</b> letter</p>
                    <p id="number" >A <b>number</b></p>
                    <p id="length" >Minimum <b>8 characters</b></p>
                </div>
                    <div className="text-center m-3">
                        <button onClick={submit} type="button" id="loginButton" className="btn btn-outline-primary w-100">Sign-In</button>
                    </div>
                </form>
                <br/>
                <p>OR</p>
                <br/>
                <Link to="/adminSignUp">SignUp</Link>
            </div>
    </div>
</div>
    );
}
export default AdminLogin;

AdminSignUp.js

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
function AdminLogin(){
    const history=useNavigate();
    const handleFocus = () => {
        document.getElementById("message").style.display = "block";
      };
    const handleBlur = () => {
        document.getElementById("message").style.display = "none";
    };
    const [password, setPassword] = useState(''); // eslint-disable-line
    const [isPassValid, setIsPassValid] = useState(false);
    const [email, setEmail] = useState(''); // eslint-disable-line
    const [isEmailValid, setIsEmailValid] = useState(false);
    //const lock=document.getElementById('lock');
    const emailVal=(e)=>{
        const newEmail=e.target.value;
        setEmail(newEmail);
        const emailRegex=/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/; // eslint-disable-line
        const valid=emailRegex.test(newEmail);
        setIsEmailValid(valid);
    }
    const passVal=(e)=>{
        const newPassword = e.target.value;
        setPassword(newPassword);
    
        const lowerCaseRegex = /[a-z]/;
        const upperCaseRegex = /[A-Z]/;
        const numberRegex = /[0-9]/;
        const minLength = 8;

        const isLowerCaseValid = lowerCaseRegex.test(newPassword);
        const isUpperCaseValid = upperCaseRegex.test(newPassword);
        const isNumberValid = numberRegex.test(newPassword);
        const isLengthValid = newPassword.length >= minLength;

        setIsPassValid(isLowerCaseValid && isUpperCaseValid && isNumberValid && isLengthValid);
        document.getElementById("letter").style.color = isLowerCaseValid ? "green" : "red";
        document.getElementById("capital").style.color = isUpperCaseValid ? "green" : "red";
        document.getElementById("number").style.color = isNumberValid ? "green" : "red";
        document.getElementById("length").style.color = isLengthValid ? "green" : "red";
    }
    const submit=async (e)=>{
        if (isPassValid && isEmailValid){
            e.preventDefault();
            try{
                await axios.post('http://localhost:3000/adminSignUp',{
                    email,password
                })
                .then(res=>{
                    if (res.data==='exist'){
                        alert('User Already exists')
                        
                    }
                    else if (res.data==='notExist'){
                        alert('account created')
                    }
                })
                .catch(e=>{
                    alert('WRONG DETAILS');
                    console.log(e);
                })

            }catch(e) {console.log(e)};
            }
      }

    return(
    <div className="bg-dark ">
    <div className="flex-container">
    <h1 className="text-center jersey-10-regular text-white m-0" style={{fontSize: 'xxx-large'}}>ADMIN SIGNUP PAGE</h1>
        <div className="p-5" >
            <div className="m-5 text-center">
                    <svg id="lock" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="white" className="bi bi-unlock" viewBox="0 0 16 16">
                        
                        <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2M5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1"/>
                    </svg>
            </div>
            <form action='POST'>
                <div className="form-floating text-black">
                    <input onChange={emailVal} type="email" className="form-control" id="email" placeholder="Email Address" size="50" />
                    <label htmlFor="email" className="form-label" style={{fontSize: 'large'}}>Email Address</label>
                </div>
                <div className="form-floating text-black">
                    <input onFocus={handleFocus} onBlur={handleBlur} onChange={passVal} type="password" className="form-control" id="pass" placeholder="Password" /> 
                    <label htmlFor="pass" className="form-label" style={{fontSize: 'large'}}>Password</label>
                </div>
                <div id="message">
                    <h6>Password must contain the following:</h6>
                    <p id="letter" >A <b>lowercase</b> letter</p>
                    <p id="capital" >A <b>capital (uppercase)</b> letter</p>
                    <p id="number" >A <b>number</b></p>
                    <p id="length" >Minimum <b>8 characters</b></p>
                </div>
                    <div className="text-center m-3">
                        <button onClick={submit} type="button" id="loginButton" className="btn btn-outline-primary w-100">Sign-In</button>
                    </div>
                </form>
                <br/>
                <p>OR</p>
                <br/>
                <Link to="/adminLogin">Login Page</Link>
            </div>
    </div>
</div>
    );
}
export default AdminLogin;

app.js

const express=require('express');
const collection=require('./mongo');
const cors=require('cors');
const app=express();
app.use(express.json());
app.use(express.urlencoded({extended:true}));
app.use(cors());

//Login
app.get('/adminLogin', cors(),(req,res)=>{

});

app.post('/adminLogin',async(req,res)=>{
    const[email,password]=req.body;
    try{
        const check=await collection.findOne({email:email});
        if (check){
            res.json("exist");
        }
        else {
            res.json('notExist')
        }
    }catch(e){
        res.json('notExist')
    }
})


//Signup
app.post('/adminSignUp',async(req,res)=>{
    const[email,password]=req.body;
    const data={
        email: email,
        password: password
    }
    try{
        const check=await collection.findOne({email:email});
        if (check){
            res.json("exist");
        }
        else {
            res.json('notExist')
            await collection.insertMany([data]);//if new user
        }
    }catch(e){
        res.json('notExist')
    }
});
app.listen(3000,()=>{console.log('port connected')});

mongo.js

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/AdminLogin')
.then(()=>{console.log('dbconnected')})
.catch(()=> {console.log('failed')})

const newSchema=new mongoose.Schema({
    email:{
        type: String,
        required: true
    },
    password:{
        type: String,
        required: true
    }
})

const collection=mongoose.model("collection",newSchema);
module.exports=collection;

App.js for routers

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import AdminLogin from './components/AdminLogin';
import VoterLogin from './components/VoterLogin';
import Voter from './components/Voter';
import Admin from './components/Admin';
import Dash from './components/Dash';
import Candidate from './components/Candidate';
import AdminSignUp from './components/AdminSignUp';
function App() {
  return (
    <Router>
    <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="adminLogin" element={<AdminLogin/>} />
      <Route path="voterLogin" element={<VoterLogin/>} />
      <Route path="voter" element={<Voter/>} />
      <Route path="admin" element={<Admin/>} />
      <Route path="dash" element={<Dash/>} />
      <Route path="candidate" element={<Candidate/>} />
      <Route path="adminSignUp" element={<AdminSignUp/>} />
  </Routes>
  </Router>
  );
}

export default App;

File Structure

Thiết kế website giá rẻ

Danh mục

Post 404 Not Found