Question

我使用MEAN堆栈创建了一个非常基本的Reddit克隆，我完成了this walkthrough。该应用程序包含一些不同的视图，例如所有帖子的视图，单个帖子，登录表单和注册表单，所有这些视图都包含在一个文件中：views / index.ejs。

将所有观点放在一起就像这种常见做法一样，还是仅仅是为了简洁教程？为了组织起见，我希望能够至少将登录和注册表单与index.ejs中的其余视图分开，但是将它们放在视图中的login.ejs文件中会导致404。

views / index.ejs的登录部分

<script type="text/ng-template" id="/login.html">
  <div class="page-header">
    <h1>Flapper News</h1>
  </div>

  <div ng-show="error" class="alert alert-danger row">
    <span>{{ error.message }}</span>
  </div>

  <form ng-submit="logIn()"style="margin-top:30px;">
    <h3>Log In</h3>

    <div class="form-group">
      <input type="text" class="form-control" placeholder="Username" ng-model="user.username"></input>
    </div>
    <div class="form-group">
      <input type="password" class="form-control" placeholder="Password" ng-model="user.password"></input>
    </div>
    <button type="submit" class="btn btn-primary">Log In</button>
  </form>
</script>

routes / index.js的登录部分

router.post('/login', function(req, res, next){
  if(!req.body.username || !req.body.password){
    return res.status(400).json({message: 'Please fill out all fields'});
  }

  passport.authenticate('local', function(err, user, info){
    if(err){ return next(err); }

    if(user){
      return res.json({token: user.generateJWT()});
    } else {
      return res.status(401).json(info);
    }
  })(req, res, next);
});

控制器的登录部分

.state('login', {
      url: '/login',
      templateUrl: '/login.html',
      controller: 'AuthCtrl',
      onEnter: ['$state', 'auth', function($state, auth){
        if(auth.isLoggedIn()){
          $state.go('home');
        }
      }]
    })

我不明白这个视图中的视图如何组合在一起。是什么告诉应用程序在index.ejs中找到登录模板，如何重定向应用程序以查找其他文件？

Answer 1

他们这样做的方式有点奇怪，但这很可能是为了简洁起见。

它是404'的原因是因为路线的设置方式。有一条路由可以为index.ejs提供服务，其余的路由通过Angular在客户端处理。事实上，他们使用ejs的唯一原因是他们最有可能使用Express'res.render()方法发送它。（虽然，因为它只是我看到的HTML，而不是实际使用任何EJS，它们可能很容易使用Express'res.sendFile()方法，或4.8.0之前，res.send()结合使用Node的内置fs.readFile用于发送纯HTML文件。

如果你想拆分视图，你必须设置服务器端路由，但我猜他们已经死在单页应用程序上。更常见的是，在服务器端呈现的视图被拆分为单个文件，具有主“布局”，其中包含其他视图。

在Node.js应用程序中组织视图文件

1 个答案: