无法让 express-handlebars 呈现 HTML 页面

Can't get express-handlebars render an HTML page

我正在关注如何呈现 HTML 页面的 NodeJS tutorial,但我似乎无法让它工作。我安装了所有要求并使用 --save 选项,因此它位于我的 node_modules 文件夹中。在我执行 npm start 并访问我的 localhost 之后,这是我收到的错误消息:

Error: No default engine was specified and no extension was provided.
        at new View (C:\Users\Billy\NodeJSProjects\HelloWorld\node_modules\express\lib\view.js:62:11)
        at EventEmitter.render (C:\Users\Billy\NodeJSProjects\HelloWorld\node_modules\express\lib\application.js:570:12)
        at ServerResponse.render (C:\Users\Billy\NodeJSProjects\HelloWorld\node_modules\express\lib\response.js:966:7)
        at app.get (C:\Users\Billy\NodeJSProjects\HelloWorld\app\index.js:25:12)
        at Layer.handle [as handle_request] (C:\Users\Billy\NodeJSProjects\HelloWorld\node_modules\express\lib\router\layer.js:95:5)
        at next (C:\Users\Billy\NodeJSProjects\HelloWorld\node_modules\express\lib\router\route.js:137:13)
        at Route.dispatch (C:\Users\Billy\NodeJSProjects\HelloWorld\node_modules\express\lib\router\route.js:112:3)
        at Layer.handle [as handle_request] (C:\Users\Billy\NodeJSProjects\HelloWorld\node_modules\express\lib\router\layer.js:95:5)
        at C:\Users\Billy\NodeJSProjects\HelloWorld\node_modules\express\lib\router\index.js:281:22
        at Function.process_params (C:\Users\Billy\NodeJSProjects\HelloWorld\node_modules\express\lib\router\index.js:335:12)

./index.js

require('./app/index')

const path = require('path')
const express = require('express')
const exphbs = require('express-handlebars')


const app = express()

app.engine('.hbs', exphbs({
  defaultLayout: 'main',
  extname: '.hbs',
  layoutsDir: path.join(__dirname, 'views/layouts')
}))
app.set('view engine', '.hbs')
app.set('views', path.join(__dirname, 'views'))

./app/index.js

const express = require('express')
const app = express()

app.use((request, response, next) => {
  console.log(request.headers)
  next()
})

app.get('/', (request, response) => {
  response.render('home', {
    name: 'John'
  })
})

app.get('/', (request, response) => {
  throw new Error('oops')
})

app.use((err, request, response, next) => {
  // log the error, for now just console.log
  console.log(err)
  response.status(500).send('Something broke!')
})

app.listen(3000)

(自动生成)package.json

{
  "name": "name-first-nodejs-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "mocha test",
    "your-custom-script": "echo npm"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "async": "^2.3.0",
    "express": "^4.15.2",
    "express-handlebars": "^3.0.0",
    "handlebars": "^4.0.6",
    "lodash": "^4.17.4",
    "promise-async": "^0.2.0"
  },
  "devDependencies": {
    "mocha": "^3.3.0"
  }
}

./views/layouts/main.hbs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Express handlebars</title>
  </head>
  <body>
    {{{body}}}
  </body>
</html>

./views/home.hbs

<h2>Hello {{name}}</h2>

您正在制作两个单独的 app 对象并在其中一个上配置车把并在另一个上配置您的路线。因此,带有您的路线的路线未针对车把进行配置。您只需要在两个模块之间共享一个 app 对象。您可以将其从一个导出并将该模块导入另一个,或者在加载模块以访问单个共享 app 后使用模块构造函数或方法将 app 对象传递给另一个] 来自另一个模块的对象。

例如:

./index.js

const path = require('path');
const express = require('express');
const exphbs = require('express-handlebars');

const app = express();

app.engine('.hbs', exphbs({
  defaultLayout: 'main',
  extname: '.hbs',
  layoutsDir: path.join(__dirname, 'views/layouts')
}));
app.set('view engine', '.hbs');
app.set('views', path.join(__dirname, 'views'));

// now that handlebars is configured,
// configure all our routes on this app object
require('./app/index')(app);

./app/index.js

module.exports = function(app) {

    app.use((request, response, next) => {
      console.log(request.headers);
      next();
    });

    app.get('/', (request, response) => {
      response.render('home', {
        name: 'John'
      });
    });

    app.use((err, request, response, next) => {
      // log the error, for now just console.log
      console.log(err)
      response.status(500).send('Something broke!')
    });

    app.listen(3000);

};