如何使用 HTML 和 nodejs 显示用户名？答案

【问题标题】：How to show username using HTML and nodejs?如何使用 HTML 和 nodejs 显示用户名？
【发布时间】：2021-01-05 15:13:22
【问题描述】：

所以，我正在构建一个简单的登录页面，我想在您成功登录该页面后显示用户名。但我有点困惑如何在 HTML 中做到这一点。我在 ejs 和 angular 和 react 和护照上看到了很多材料。但我没有使用它。我只是使用简单的 HTML、CSS 和 NodeJS 来构建它。所以，如果有人可以帮助我解决这个问题，我将非常感激。

所以我登录后的 HTML 页面：

<!DOCTYPE html>
<head>

</head>
<body>
    Hi user. //want to show the username here
    <form name="logout" method="post" action='/logout'>
        <label class="logoutLblPos">
        <input name="submit2" type="submit" id="submit2" value="log out">
        </label>
    </form>
</body>

以及我在 server.js 文件中成功登录的代码：

app.post("/login", urlencodedParser, async (req, res) => {
  const { email, password } = req.body;
  db.query(
    "SELECT * FROM users WHERE email = ?",
    [email],
    async (error, result) => {
      if (error) {
        console.log(error);
      } else {
        try {
          if (result.length === 0 || !result) {
            res.json({ message: "Email has not been registered" });
          } else {
            bcrypt.compare(password, result[0].PASSWORD, (err, results) => {
              if (err) {
                console.log(err);
                return res.json({
                  message: "there has been some problem matching the password",
                });
              } else {
                if (results) {
                  //token creation
                  
                  const id = result[0].ID;
                  console.log(id)
                  const token = jwt.sign({ id }, process.env.JWT_SECRET, {
                    expiresIn: process.env.JWT_EXPIRES_IN,
                  });

                  console.log("the token is " + token);

                  const cookieOptions = {
                    expires: new Date(
                      Date.now() +
                        process.env.JWT_COOKIE_EXPIRES * 24 * 60 * 60 * 1000
                    ),
                    httpOnly: true,
                  };

                  res.cookie("myCookieJwt", token, cookieOptions)
                  res.status(200).redirect("/user");
                } else {
                  res.json({ message: "Please enter correct password" });
                }
              }
            });
          }
        } catch (error) {
          console.log(error);
          return;
        }
      }
    }
  );
});

【问题讨论】：

标签： javascript html mysql node.js

【解决方案1】：

您需要使用某种库来向端点发出POST 请求。 JQuery Ajax 救援，你也可以使用其他库，如 Axios 以及

$.ajax({
    type: 'POST',
    url: "/login",
    data: "FORM DATA",//<---- Form Data (username,password)
    dataType: "text or JSON", //<-- Whichever you are using
    success: function(resultData) { $('#username').text(resultData.username); } //<-- I'm assuming username is coming in
});

您需要从 node.js 端点返回 username 然后您可以动态设置 div 的文本或任何其他 HTML 标记。

此示例可能需要调整，因为它可能无法开箱即用，但它会让您走上正确的道路。

【讨论】：

我应该将它包含在我的 server.js 文件还是 html 文件中？以前从未使用过 ajax，所以只是问问。
通常您会创建一个单独的文件，因为此逻辑适用于前端 (HTML)，您可以使用该文件使用 <script> 标记将其导入您的 HTML 文件中