處理 React 和 Express 之間的路由請求

Question

我正在使用 React 和 Express 創建一個具有登錄和注冊功能的應用程序。 我正在使用 Formik 處理表單數據以及發布它：

> const initialValues={{username:"", email:"", password:""}}
onSubmit ={ async (values, { setSubmitting }) => {
  const value = values.username+'/'+values.email+'/'+values.password;
  const res = await fetch(`http://localhost:5000/newuser/${value}`, {
      method: 'GET',
      mode: 'cors',
      headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*'
      }}).then(response => response.json());
      console.log(res);
      values = initialValues;
    setSubmitting(false);

}

然后將其發送到 express 應用程序，並通過以下路由：

> app.get('/newuser/:username/:email/:password', (req, res) => {
const username = req.params.username;
const email = req.params.email;
const password = req.params.password;
let sql = `Insert into users (username, useremail, userpass) values ('${username}', '${email}', '${password}')`;
query = db.query(sql, (err, results) => {
    if(err){throw err;}
    res.send("New user added you can login now");
});

});

我能夠將這些用戶保存到數據庫中，但是我對這段代碼有以下兩個問題，我能夠從各種不同的視頻、教程、問題和文檔中拼湊出來：

1. 關於這一行：

app.get('/newuser/:username/:email/:password', (req, res)

這是我可以將表單數據導入 express 的唯一方法，如果我不包含分號並使用 req.params 調用這些值，我會收到“404 未找到錯誤”，因為 3 個值是空的。 如果我嘗試通過 req.body 訪問它們，它們仍然顯示為空。 我試圖對它們進行 JSON.stringify，並且我在 express 應用程序中使用了 body-parser。 我的問題是如何使用 req.body 訪問這 3 個值（用戶名、電子郵件、密碼）？ 如果我想從我的瀏覽器訪問這條路線，還有一種特定的方式我應該格式化它們，例如http://localhost:5000/users?username&email&password

2. 如何將響應發送回反應應用程序以告訴它例如用戶存在且密碼正確？ 我已經做了 mysql 查詢來檢查這個並在 express 中更新一個變量我只需要然后發送響應，也許該變量的值將告訴 react 轉到索引頁面。 然而 res.send(variable) 似乎並沒有發送變量來做出反應，並且登錄表單在提交后保持停滯。

Answer 1

要訪問正文，請使用method:"POST"而不是 GET。

let response = await fetch(`http://localhost:5000/newUser`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values),
    })

if (response.errors) {
   console.error(response.errors)
}

let responseJson = await response.json()

if (responseJson['message']) {
   console.log(responseJson['message'])
}

服務器端使用這樣的東西：

import cors from 'cors'

...

let app = express() 
    .use(cors())
    .post('/newUser', (req, res) => {
        let {username, email, password} = req.body
        ...
        // If all ok
        res.status(200).send({message: "User created"})

        // If there's an issue
        res.status(500).send({message: "oups"})
       })
    ...