微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript-Expressjs / Node.js-res.redirect()无法加载页面

我有一个页面,该页面的路线GET / team正在加载球队列表,而DEL / team则正在从/ team /:key中删除球队.因此,您导航到团队的资料页面并从那里删除它们,删除后,它应将您重定向到/ team页面.我已将日志放入控制台,并且它已成功删除了该团队,并且奇怪地说,它正在加载/ team,但浏览器不会加载它.我将代码放在下面,有什么想法吗?

路线:

  app.get('/team'/*, lim("Must be logged in to see teams")*/, getAllTeams, function(req, res){
    util.log('Serving request for url [GET] ' + req.route.path);
    // Pass it the list of all Teams
    res.render('team', {'teamsList' : req.teamsList} );
  });

  app.get('/team/:key', function(req, res) {
    util.log('Serving request for url [GET] ' + req.route.path);
    Team.findByKey(req.params.key, function(err, teamData){
      if(!err && teamData){
        teamData = teamData;
        res.render('teamDetails', { 'teamData' : teamData } );
      } else {
        util.log('Error in fetching Team by key : ' + req.params.key);
        res.json({
          'retStatus' : 'failure',
          'msg' : 'Error in fetching Team by key ' + req.params.key
        });
      }
    });
  });

  /**
    * DEL /team/:key
    * Delete Team by key
    */
  app.del('/team/:key', getAllTeams, function(req, res) {
    util.log('Serving request for url [DEL] ' + req.route.path);    
    Team.remove({key : req.params.key}, function(err){
      var message = '';
      var retStatus = '';
      if (!err) {
        util.log('Successfully deleting Team with key: ' + req.params.key);
        message = 'Successfully deleting Team with key: ' + req.params.key;
        retStatus = 'Success';
        res.redirect('/team');
      } else {
        util.log('Error deleting Team with key: ' + req.params.key + 'Error: ' + util.inspect(err));
        res.json({
          'retStatus' : 'failure',
          'msg' : 'Error in fetching Team with key ' + req.params.key
        });
      }
    });
  });

JavaScript HTML模板:

        button#teamDelete.btn.btn-danger.btn-mini(type="submit", value="Delete Team") Delete
        script(type='text/javascript')
            $('#teamDelete').live('click',function(){ 
                var teamId = #{teamData.key};
                $.post('/team/' + teamId, { _method : 'delete' }, function(response) {
                    console.log(response);
                    if(response.retStatus === 'Success') {
                        if('/team' && '/team' !== "") {
                            window.location = '/team';
                        }
                    }
                });
            });

控制台日志:

10 Mar 11:52:01 - Serving request for url [GET] /team
10 Mar 11:52:02 - Serving request for url [GET] /team/:key
10 Mar 11:52:03 - Serving request for url [DEL] /team/:key
10 Mar 11:52:03 - Successfully deleting Team with key: 1362855941128
10 Mar 11:52:03 - Serving request for url [GET] /team

getAllTeams:

var getAllTeams = function(req, res, next){
  Team.getAll(function(err, teamsList){
    if(!err && teamsList){
      req.teamsList = teamsList;
      return next();
    }
  });
};

Team.getAll(团队架构)

Team.statics.getAll = function(cb){
    var query = this.find({});
    query.sort({key : -1});
    return query.exec(cb);
  };

解决方法:

您的请求是POST($.post),而您的路由是app.del,因此它永远不会到达app.del路由内的res.redirect.

为什么不使用app.post?

更新:

假设$.post在这里发送HTTP DEL请求,这是怎么回事:服务器发送302响应但没有数据,但是浏览器从不按照服务器的指示向GET路由发送另一个请求(或者jQuery是否也处理重定向?不确定). res.redirect()是实际的HTTP响应,不是一些内部服务器端指令来将请求重新路由到另一条路由,就像您在ASP.NET中所做的一样(实际上这是错误的)…路由旨在接收请求,回复并忘记它.您需要将路由与处理它们的实际函数分开,然后您将能够调用函数而不是发送重定向.

代码建议

在app.del(‘/ team /:key’…

...
    retStatus = 'Success';
    // res.redirect('/team');
    res.send({
      retStatus : retStatus,
      redirectTo: '/team',
      msg : 'Just go there please' // this should help
    });
...

客户端在$.post(‘/ team /’…

...
    $.post('/team/' + teamId, { _method : 'delete' }, function(response) {
        console.log(response);
        if(response.retStatus === 'Success') {
            // not sure what did you mean by ('/team' && '/team' !== "")
            // if('/team' && '/team' !== "") {
            if (response.redirectTo && response.msg == 'Just go there please') {
                window.location = response.redirectTo;
            }
        }
    });
...

但不确定是否能正常工作,因为我不知道您的getAllTeams会做什么以及为什么将teamList存储在req中.如果要存储在会话中,则除了假设正确配置了中间件外,还需要使用req.session.如果您只需要在请求中存储它,并且getAllTeams准备此团队列表,则最好将其存储在res.locals中(例如res.locals.teamList).
并确保接下来调用getAllTeams.因此,基本上,您的getAllTeams应该如下所示:

function getAllTeams (req, res, next) {
    res.locals.teamList = [/* whatever */];
    next();
}

然后,您可以在路由处理程序中使用res.locals.teamList而不是req.teamList.

res.render('team', {teamsList : res.locals.teamsList} );

而且“团队”模板也可能有问题…

表达建议:)

同样,使用Express的方式使扩展/管理应用程序变得非常困难.我不记得确切的位置了,但是他们在文档中的某个地方写道,应该将Express用作应用程序框架的基础,而不是像大多数PHP框架一样用作完整的框架.它不仅为您提供了强大的功能和灵活性,而且还需要提前仔细考虑您的应用程序体系结构.

express的最强大功能是,您可以让许多特定于路由的处理程序/中间件处理任何路由,这些处理程序/中间件通过next()相互传递控制权.我有一个静态表,该表定义每个路由上使用了哪些处理程序,从而可以在一页上查看包含30条左右路由的整个应用程序.该表用于在应用程序启动时动态组装路由.它带来了很大的灵活性,可管理性(我可以在路由之间移动/复制粘贴处理程序-每个处理程序表示为一个单词)和代码重用.我还将客户端中路由定义的相同哈希用于客户端路由.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐