文件不会在服务器上呈现 .get() 请求

Question

我正在尝试简单的 Express 路由，但遇到了问题。当我输入“/1”时，我希望服务器将文件 'layout2.hbs' 渲染到服务器中 - 但控制台 returns a 304

我的错误信息：

GET / 304 30.902 ms - -
GET /style.css 304 3.370 ms - -
GET /print2.css 304 0.553 ms - -
GET /1 304 9.213 ms - -

我的 index.js 文件包含路由：

var express = require('express');
var router = express.Router();
var db = require('monk')('localhost:27017/');
var userData = db.get('user-data');
var app = require('express')();

router.get('/', function(req,res,next){
    res.render('layout');
});

router.get('/1', function(req,res,next){
    res.render('layout2');
});

router.use(express.static("public"));

module.exports = router;

我的 app.js 显示车把确实已设置：

var express = require('express');
var app = require('express')();
var path = require('path');
var port = require('port');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var hbs = require('express-handlebars');
const queryString = require('query-string');

var routes = require('./routes/index');

var app = express();

// view engine setup
app.engine('hbs', hbs({extname: 'hbs', defaultLayout: 'layout', layoutsDir: __dirname + '/views'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

我的文件目录：

Bloodborne Backend (project folder)
      │
      |
      |   
    public------print2.css
      |         style.css     
      |           
      | 
      |   
    routes-------index.js
      |
      |
      |
    views-------layout.hbs
      |         layout2.hbs
      |
      |
    app.js
  package.json

抱歉，如果目录树看起来不好 - 这是我可以输入的最佳方式。

我希望当我在本地主机中输入“/1”时，文件 'layout2.hbs' 将会呈现。但是，我得到的是 304，暗示服务器没有更改。卡了好久一直想不出解决办法！

Answer 1

不完全确定为什么您的代码无法正常工作，但是有一些地方需要更正。

Express 应用在 app.js 文件中生成两次，一次就足够了。

静态文件夹只需要在主app.js文件中注册一次。

我提取了相关代码片段并围绕您的目录结构创建了一个简单的工作示例。

projectFolder
  node_modules
    ...
  public
    image.jpg
    style.css
    ...
  routes
    routes.js
    ...
  views
    layout.hbs
    one.hbs
    two.hbs
    ...
  package.json
  app.js

app.js:

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const hbs = require('express-handlebars');

const router = require('./routes/routes.js' );

const app = express();

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

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use( express.static(path.join(__dirname, 'public')) );

app.use('/', router );

app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: err
  });
});

app.listen( 4444 );

routes.js:

const express = require('express');
const router = express.Router();

router.get('/', function(req,res,next){
  res.render('one' );
});

router.get('/1', function(req,res,next){
  res.render('two');
});

module.exports = router;

layout.hbs:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Default Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    {{{body}}}
    <img src="image.jpg" width="200px">
</body>
</html>

one.hbs

<p> Fragment added from one.hbs </p>

two.hbs

<p> Fragment added from two.hbs </p>

编码愉快！！

Answer 2

@Hitesh Lala 解决了问题！我所做的是将 app.js 文件中的 defaultLayout 更改为名为 index.hbs 的 hbs 文件。从那里我的 index.js 文件将正确路由正确的 hbs 文件——在我的例子中是 layout.hbs 和 layout2.hbs。

文件不会在服务器上呈现 .get() 请求

File will not render .get() request on the server

javascript

routing

node.js

express

handlebars.js