使用Express在EJS模板引擎上获取错误“title not defined”

I was learning NodeJS and I am using EJS as templating engine. But whenever I click on register button my Registration page I am getting an error that title is not defined. Here is my code.

我正在学习NodeJS,我正在使用EJS作为模板引擎。但每当我点击注册按钮我的注册页面时,我收到一个错误,标题没有定义。这是我的代码。

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>

I am not getting why this is happening. I have tried this solution but it's not working. Any help would be appreciated.

我不明白为什么会发生这种情况。我试过这个解决方案,但它没有用。任何帮助,将不胜感激。

1 个解决方案

#1

I could not understand exactly where your router will redirect when the request hits the /.

当请求到达/时,我无法准确理解路由器将重定向的位置。

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

Usually for / it redirects to index template. Using EJS, you could redirect to a template, for example.

通常用于/它重定向到索引模板。例如,使用EJS,您可以重定向到模板。

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

What seems to be happening is that when your request hits the /, it redirects to a template that has head.ejs included, which needs the title parameter sent to it.

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

In your route to GET, you send this correctly:

在您的GET路线中,您可以正确发送:

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

But, when your request hit the POST method, after all the logic, you don't redirect to a template, you're redirecting it to /, with no parameters. If your / route access a template using your head.ejs, that's why you're getting this error.

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

In your case, even if your redirecting to index.ejs or to messageUserAdded.ejs (for example), I would then call it with render method to be rendering an EJS template (instead of res.location('/'); and res.redirect('/');), as the following:

在你的情况下,即使你重定向到index.ejs或者messageUserAdded.ejs(例如),我也会用render方法调用它来渲染一个EJS模板(而不是res.location('/');和res .redirect('/');),如下所示:

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

And just to add a possibility, you could create a template for successful messages, then you can pass a message to it, customized to each page you have something done right. As an example, a template like this:

只是为了增加一种可能性,您可以为成功的消息创建一个模板,然后您可以向其传递消息,为您正确完成某些操作的每个页面进行自定义。例如,这样的模板:

successfulMessage.ejs

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

And then use it in your POST:

然后在POST中使用它:

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

Hope it helps you to solve it.

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

#1