Node.js项目登录验证失败时如何在前端p标签展示错误提示

你现在的误区是后端Node.js代码无法直接操作前端页面的DOM元素，前后端是分离的请求响应模式，你需要通过服务端渲染传参的方式实现需求，步骤如下：

步骤1：修改后端路由逻辑 #

登录校验失败时，重新渲染登录页面，同时把错误提示作为参数传给模板引擎：

app.post('/account', (req, res) => { 
  const username = req.body.username;
  const password = req.body.password;
  con.query("USE discbin")
  con.query('SELECT * FROM accounts WHERE username = ?', [username], function (err, result, fields) {
    if (err) throw err;
      if (result.length > 0 && result[0].password === password) {
        console.log(result[0].username + " logged in!")
        res.render('account');
      }
      else {
        console.log("a user tried to login using the username: " + username)
        // 渲染登录页，传入错误提示参数，注意替换成你自己的登录页模板名
        res.render('login', { errorMsg: 'wrong username or password' })
      }
    });
  });

步骤2：修改前端登录页模板 #

在你现有的p标签位置，用模板引擎的语法判断是否有错误参数传入，有就渲染提示内容。以常用的EJS模板引擎为例，修改你的p标签代码：

<p id = "check"><%= errorMsg || '' %></p>

如果用的是其他模板引擎，对应语法调整即可，核心逻辑都是把后端传入的errorMsg参数填充到p标签内。

额外注意 #

你现在直接明文比对数据库存储的密码存在严重安全风险，建议后续使用bcrypt等加密库对密码做哈希存储和校验，不要明文存密码。

内容的提问来源于stack exchange，提问作者skep_sickomode