為什么在MERN堆疊中找不到我的POST路由？

我目前在使用 MERN 堆疊應用程式時遇到兩個問題：

i) 即使 POST 路由正在作業，Axios 也沒有將表單正文資料發送到服務器。每次提交后，都會創建一個新條目，但 MongoDB 僅顯示默認欄位值

ii) 我的 POST 路線最初有效但不再有效。現在似乎無法訪問 POST 路由。我收到 404 Not Found 錯誤

webapp有一個超級基本的功能，可以分別通過表格和表格來創建和列出學生及其資料。它為組件模板使用 material-ui 庫

我的代碼：

服務器-

import express from 'express'
import cors from 'cors'
import mongoose from 'mongoose'
import dotenv from 'dotenv'
dotenv.config()
const app = express()
//ALWAYS use CORS middleware before defining ROUTES!
app.use(cors());
//import routes
import studentRoutes from './routes/student_routes.js'
//middleware to use routes 
app.use('/students' , studentRoutes)

app.use(express.json())
const URI = process.env.DB_URI
const port = process.env.PORT || 5000

mongoose.connect(URI, {
    useNewUrlParser: true, useUnifiedTopology: true
}).then( () => app.listen(port, () => 
console.log(`Listening on Port ${port}`)))
.catch( (err) => console.log(err))

路線-

import express from 'express'
import { getStudents } from '../controllers/student_controller.js'
import { createStudent } from "../controllers/student_controller.js";

import Student from '../models/student_model.js'

const router = express.Router()


//list out all students
router.get('/', getStudents)
//adding new student
router.post('/', createStudent)

export default router

控制器-

  import StudentData from '../models/student_model.js'
    
    export const getStudents = async (req, res) => {
        try {
        const allStudents = await StudentData.find()
        res.status(200).json(allStudents)
            
    } catch (err) {
    res.status(404).json( {message: err.message} )
    }};
    
    export const createStudent = async (req, res) => {
            const student = req.body
        const newStudent = new StudentData(student);
        try {
            await newStudent.save()
            res.status(201).json(newStudent)
            console.log('Student Created!')
        } catch (err) {
            res.status(404).json( {message: err.message})
            
        }
        
    }

模型-

import mongoose from 'mongoose'

//model variable names must match the frontend useState's variables
const studentSchema = mongoose.Schema({
    regNo: Number,
    sutdentName: String,
    grade: String,
    section: {
        type: Number,
        default: 'A'
    },
    subjects: [String]

})

const StudentData = mongoose.model('StudentData', studentSchema)
export default StudentData

創建學生的表格-

import * as React from "react";
import {useState} from 'react'
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import axios from 'axios'

export default function CreateStudent() {
    //state hook to dynamically update displayed data
    const [student, setStudent] = useState({
        regNo: '',
        studentName: '',
        grade: '',
        section: ''
    })

    //using axios to transfer data from front to backend
    const createStudent = () => {
        axios.post('http://localhost:5000/students', student)
        console.log(`  ${student.studentName}`)
    }
    return (
        
      <>
        <h2>Create New Student</h2>
        <Box
          component="form"
          sx={{
            "& > :not(style)": { m: 1, width: "25ch" },
          }}
          noValidate
          autoComplete="off"
        >
                <TextField id="outlined-basic" label="Registration No." variant="outlined" value={student.regNo} onChange={(event) => {
                    setStudent({ ...student, regNo: event.target.value })
                }} />
                <TextField id="outlined-basic" label="Name" variant="outlined" value={student.studentName} onChange={(event) => {
                    setStudent({ ...student, studentName: event.target.value })
                }} />
                <TextField id="outlined-basic" label="Grade" variant="outlined" value={student.grade} onChange={(event) => {
                    setStudent({ ...student, grade: event.target.value })
                }}/>
                <TextField id="outlined-basic" label="Class Section" variant="outlined" value={student.section} onChange={(event) => {
                    setStudent({ ...student, section: event.target.value })
                }}/>

          <Button variant="contained" onClick = {createStudent}>Submit</Button>
        </Box>
      </>
    );
}

在此先感謝任何伸出援手的人！

uj5u.com熱心網友回復：

您的中間件順序錯誤：

//middleware to use routes 
app.use('/students' , studentRoutes)

app.use(express.json())

JSON 正文決議器安裝在路由器之后。當請求到達路由處理程式時，req.body仍然是undefined因為 body-parser 還沒有決議 JSON 請求正文。在路由器之前移動 JSON 正文決議器。

標籤：javascript 节点.js 反应 表达 默恩

上一篇：使用功能組件中的另一個狀態更新狀態

下一篇：ReactNative-JSON中位置0的意外標記U