Question

我遇到一些问题，在获得服务器响应后，在呈现pug文件后html视图没有改变。

代码如下

app.set('view engine', 'pug');
 app.set("views", require('path').join(__dirname, "views"));

app.post('/login', function(req, res, next) {
console.log(req.body);
checkExistanceOfuser(req.body.username, req.body.password, function(err, flag, data) {
    console.log(err);
    if (err) {
        res.send({
            err: 'SOME_DATABASE_ERROR'
        })
    } else {
        if (flag) {

            req.session.user = data;

            /*res.send({
                success: true,
                message: 'Login Success'
            })*/

            res.render('welcome', { name: data.name });
        } else {
            /*res.send({
                success: false,
                message: 'Invalid Credentials'
            });*/
            res.render('login', { error: 'Invalid Credentials' });
        }
    }
})

但我从浏览器检查网络部分.API响应（预览）很好。

Answer 1

您正在渲染views/login，但您已经指定视图文件夹为views。只需渲染login。

Answer 2

当你拨打/login路由时，这是一个后调用，可能你正在使用ajax post call这样做。现在，当您调用/login路由时，它会呈现pug文件但它实际上并没有影响浏览器DOM。所以你需要做的就是这个

创建一个像这样的新路线

  app.get('/login-success', function(req, res, next) {
        if (req.session && req.session.user) {
            res.render('welcome', { name: req.session.user.name });
        } else {
        res.redirect('/');
        }
  });

并像这样修改登录功能

   app.post('/login', function(req, res, next) {
      console.log(req.body);
      checkExistanceOfuser(req.body.username, req.body.password, function(err, flag, data) {
      console.log(err);
      if (err) {
         res.send({
            err: 'SOME_DATABASE_ERROR'
         })
      } else {
            if (flag) {

                req.session.user = data;

                res.send({
                    success: true,
                    message: 'Login Success'
                });
             } else {
                res.send({
                success: false,
                message: 'Invalid Credentials'
                });
             }
          }
      })
  });

在ajax调用中使用此

function login(){
  $.post("http://localhost:8000/login",
  {
    username:document.getElementById("name").value,
    password:document.getElementById("password").value,
  },
  function(data, status){
     if(data.success){
      window.location = "http://localhost:8000/login-success"
     }
  });
  }

从express快速渲染.pug文件后，视图不会更改

2 个答案: