使用 <Form> ，jQuery，Sequelize和SQL進行登錄和路由

Question

我的目標是當用戶單擊提交按鈕時，以html形式使用ID＃username-l和＃pwd-l的值，讓它們將這些值與SQL數據庫中的值進行比較，如果這些值與值完全相同在數據庫中，然后將用戶路由到指定的路由（目前，僅/ user可以進行測試）。 目前它路由到/？ 沒有任何未指定的錯誤。 控制台顯示查詢正在返回用戶名= null和密碼= null。 我在數據庫中有種子，稱為用戶名=測試密碼=測試進行測試。 任何幫助表示贊賞！

HTML：

<form id="login-form">
                      <div class="form-group">
                        <label for="username-l">Username:</label>
                        <input type="username" class="form-control" id="username-l" placeholder="Enter username">
                      </div>
                      <div class="form-group">
                        <label for="pwd-l">Password:</label>
                        <input type="password" class="form-control" id="pwd-l" placeholder="Enter password">
                      </div>
                      <button id="login-button" type="submit" class="btn btn-default">Login</button>
                  </form>

排序：

app.get("/api/users", function(req, res) {

    db.User.findAll({
      where:
      {
        username: req.body.username,
        password: req.body.password
      }
    }).then(function(dbUser) {
      // res.json(dbUser);
      if (req.body.username === dbUser.username && req.body.password === dbUser.password) {
      res.redirect("/users");
      } else {
        console.log("error");
      }
    });
  });

LOGIN.JS：

$("#login-button").on('click', function() {
    var username = $("#username-l").val().trim();
    var password = $("#pwd-l").val().trim();

    $.get("/api/users", function(data){
        console.log(data);
        if (username === data.username && username === data.password) {
            reRoute(); 
        } else {
            console.log("that does not exist");
        }
    });
});

function getUser(userData) {
    $.get("/api/users", userData).then(reRoute());
  }

function reRoute() {
    window.location.href = "/users";
}

Answer 1

首先，您正在執行GET請求，就我所知HTTP而言，該請求沒有正文。 其次，我不是jQuery的專家，也從未使用過它，但是谷歌的快速搜索顯示第二個參數作為查詢字符串傳遞，這就是GET應該起作用的方式。 如果您有任何要發送的數據，則通過查詢字符串而不是通過請求正文發送。

因此，您遇到的問題是服務器端代碼，您在其中從主體而不是從查詢字符串讀取username和password 。 因此，為了使其正常工作，您需要像這樣從查詢中提取用戶名和密碼（我猜您正在使用Express）：

app.get("/api/users", function(req, res) {
    const username = req.query.username;
    const password = req.query.password;
    // do the rest of the stuff with Sequelize and bussiness logic here
  });

在旁注中，您對路由器的完整回調有一些不好的事情，例如冗余檢查用戶名和密碼是否與從數據庫中檢索到的用戶名和密碼匹配。 您已經要求Sequelize從數據庫中檢索一行，其中用戶名和密碼是您從前端獲取的用戶名和密碼，因此，您無需檢查實例的用戶名和密碼是否與您擁有的用戶名和密碼匹配。 您需要檢查實例是否為null ，因為這意味着您的數據庫中沒有使用該用戶名和密碼的用戶。 因此，“固定”代碼應如下所示：

app.get("/api/users", function(req, res) {
  const username = req.query.username;
  const password = req.query.password;

  db.User.findAll({
    where: {
      username,
      password
    }
  }).then(function(dbUser) {
    // res.json(dbUser);
    if (dbUser != null) {
      res.redirect("/users");
    } else {
      // you'd maybe like to set response status to 404
      // also some user friendly error message could be good as response body
      console.log("Error: user not found");
    }
  });
});

我希望您對流程有所了解，並且您的錯誤在哪里。