node.js - 在 Node.js 应用程序中组织 View 文件

Question

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

将所有 View 放在一起是这种常见做法吗，还是只是为了教程中的简洁？为了便于组织，我希望能够至少将登录和注册表单与 index.ejs 中的其余 View 分开，但将它们放在 View 中的 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);
});

Controller 的登录部分

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

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

Answer 1

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

之所以出现 404'ing 是因为路由的设置方式。有一个路由来服务index.ejs，路由的其余部分通过Angular 在客户端处理。事实上，他们使用 ejs 的唯一原因是因为他们想使用 Express' res.render() 发送它。最有可能的方法。 (尽管如此，由于我所看到的只是 HTML，所以他们可能只是简单地使用 Express 的 res.sendFile() 方法，或者在 4.8.0 之前的版本中，将 res.send() 与 Node 的内置 fs.readFile 结合起来发送纯 HTML 文件。

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