使用 Express 在 EJS 模板引擎上出现错误“标题未定义”答案

【问题标题】：Getting error "title not defined " on EJS template engine with Express使用 Express 在 EJS 模板引擎上出现错误“标题未定义”
【发布时间】：2017-02-10 08:25:40
【问题描述】：

我正在学习 NodeJS，我正在使用 EJS 作为模板引擎。但是每当我点击register 按钮我的注册页面时，我都会收到title is not defined 的错误。这是我的代码。

users.js

var express = require('express');
var router = express.Router();
var multer = require('multer');
var uploads = multer({dest: './uploads'});

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

router.get('/register', function(req, res, next) {
  res.render('register',{
    'title': 'Register'
  });
});

router.get('/login', function(req, res, next) {
  res.render('login',{
    'title': 'Login'
  });
});

router.post('/register', uploads.single('profileImage'), function(req, res, next){
    var name = req.body.name;
    var email = req.body.email;
    var username = req.body.username;
    var password = req.body.password;
    var password2 = req.body.password2;


    //Check for image field

    if(req.file){
        console.log('Uploading file.....');

        var profileImageOriginalName = req.files.profileimage.originalname;
        var profileImageName = req.files.profileimage.name;
        var profileImageMime = req.files.profileimage.mimetype;
        var profileImagePath = req.files.profileimage.path;
        var profileImageExt  = req.files.profileimage.extension;
        var profileImageSize = req.files.profileimage.size;
    }
    else{
        //set a default image
        var profileImageName = 'noimage.png';
    }

    //Form Validation
    req.checkBody('name','This field is required').notEmpty();
    req.checkBody('email','This field is required').notEmpty();
    req.checkBody('email','Invalid Email').isEmail();
    req.checkBody('username','This field is required').notEmpty();
    req.checkBody('password','This field is required').notEmpty();
    req.checkBody('password2','Passwords do not match').equals(req.body.password);

    //check for errors
    var errors = req.validationErrors();
    if(errors){
        res.render('register',{
            errors: errors,
            name: name,
            email: email,
            username: username,
            password: password,
            password2: password2
        });
    }
    else{
        var newUser = new User({
            name: name,
            email: email,
            username: username,
            password: password,
            profileimage: profileImageName
        });
        //Create user
        /*User.createUser(newUser, function(err, user){
            if(err) throw err;
            console.log(user);      
        });*/

        //success message
        req.flash('success', 'Your account registered successfully');
        res.location('/');
        res.redirect('/');
    }
});

module.exports = router;

head.ejs

<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
<link rel='stylesheet' href='/stylesheets/style.css' />

header.ejs

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li <% if (title == "Members") { %>class="active" <% } %> ><a href="/">Members</a></li>
        <li <% if (title == "Register") { %>class="active" <% } %> ><a href="/users/register">Register</a></li>
        <li <% if (title == "Login") { %>class="active" <% } %> ><a href="/users/login">Log In</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/users/logout">Log Out</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

register.ejs

<!DOCTYPE html>
<html>
  <head>
    <% include ./partials/head.ejs %>
  </head>
  <body>

    <div class="container">
        <% include ./partials/header.ejs %>
      <h1>Register</h1>
      <p>Please Register using the below form</p>
      <form method="post" action="/users/register" enctype="multipart/form-data">
        <div class="form-group">
          <label>Name</label>
          <input class="form-control" type="text" name="name" placeholder="Enter your name">
        </div>
        <div class="form-group">
          <label>Email</label>
          <input class="form-control" type="email" name="email" placeholder="Enter your email">
        </div>
        <div class="form-group">
          <label>Username</label>
          <input class="form-control" type="text" name="username" placeholder="Enter your username">
        </div>
        <div class="form-group">
          <label>Password</label>
          <input class="form-control" type="password" name="password" placeholder="Enter your Password">
        </div>
        <div class="form-group">
          <label>Confirm Password</label>
          <input class="form-control" type="password" name="password2" placeholder="Confirm your Password">
        </div>
        <div class="form-group">
          <label>Profile Image</label>
          <input class="form-control" type="file" name="profileImage">
        </div>
        <button class="btn btn-default" name="submit" type="submit" value="Register">Register</button>
      </form>
    </div>
  </body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="/javascript/bootstrap.js"></script>
</html>

我不明白为什么会这样。我试过this solution 但它不起作用。任何帮助，将不胜感激。

【问题讨论】：

标签： javascript node.js express template-engine ejs

【解决方案1】：

我发现您应该不使用“保留”HTML 标记名称来命名您的键。（名单here）

title 是一个“保留”HTML 标记名称，因此这将无法正常工作。

【讨论】：

【解决方案2】：

当请求到达/ 时，我无法准确理解您的路由器将重定向到哪里。

router.get('/', function(req, res, next) {
    res.send('respond with a resource');
});

通常对于/，它会重定向到index 模板。例如，使用 EJS，您可以重定向到模板。

router.get('/', function(req, res, next) {
    res.render('index', {param: value});
});

似乎正在发生的事情是，当您的请求到达/ 时，它会重定向到包含head.ejs 的模板，该模板需要向其发送title 参数。

在您到 GET 的路线中，您正确地发送了这个：

router.get('/register', function(req, res, next) {
    res.render('register',{
        'title': 'Register'
    });
});

但是，当您的请求到达 POST 方法时，在所有逻辑之后，您不会重定向到模板，而是将其重定向到 /，没有参数。如果您的 / 路由使用您的 head.ejs 访问模板，这就是您收到此错误的原因。

在您的情况下，即使您重定向到 index.ejs 或 messageUserAdded.ejs（例如），我也会使用 render 方法调用它来呈现 EJS 模板（而不是 res.location('/'); 和 @987654337 @)，如下：

res.render('index', {title: 'User Successfully Added'});

为了增加一种可能性，您可以为成功的消息创建一个模板，然后您可以将消息传递给它，根据您正确完成的每个页面进行定制。例如，这样的模板：

successfulMessage.ejs

<html>
    <head><title> <%=title%> </title></head>
<body>
    <h1>This works!</h1>
    <h2> <%=messageTitle%> </h2>
    <span> <%=messageDetails%> </span>
</body>
</html>

然后在你的 POST 中使用它：

// After all the logic
res.render('successfulMessage', { 
    title: 'Success', 
    messageTitle: 'Account Created', 
    messageDetails: 'John has been added to our database!'
})

希望它可以帮助您解决它。

【讨论】：

试过res.render而不是res.location，但还是同样的错误
你使用了 res.render('yourTemplate', {title: 'your title'}) 吗？您可以在问题中添加重定向到的模板吗？另外，您是否使用 res.send('respond with resource') 保留了到 / 的路由？
我把res.render('index', {title: 'Members'}。但仍然出现同样的错误。