0

我正在做我的投资组合项目。我正在使用车把和 nodeJS。
我有一个名为项目的部分，我在其中列出了 4 个不同的项目来展示。我有一个 index.js，我的所有路由都在其中完成。项目 1,3,4 工作得很好。这些都将在我的索引页面上的项目部分中单击。

但是，我对如何路由我的项目 2 感到很迷茫。项目 1、3、4 都是把手（.hbs）。但我的项目 2 是一个 html 页面。如我的代码片段所示，该 html 与我的所有其他代码存储在同一 /public 文件夹下。但是，我仍然收到错误“无法在视图目录中查找视图“../public/views/fountainWebsite/html/home””。我不确定这需要怎么做？？

// === VARIABLES === //
var express = require('express');
var app = express();
var handlebars = require("express-handlebars");
var path = require("path");
var router = express.Router();  //creates a router object

 //===== view ENGINE SET UP =====//
app.set('view engine', 'handlebars');
app.engine(
    "hbs",
    handlebars({
      layoutsDir: path.join(__dirname, "/public/views/layouts"),
      partialsDir: path.join(__dirname, "/public/views/partials"), 
      extname: ".hbs", //expected file extension for handlebars files
      defaultLayout: "layout" //default layout for app, general template for all pages in app
    })
);
app.set("views", path.join(__dirname, "views"));
 
//thought this would maybe fix the error?? It didn't//
// app.set("fountainWebsite", path.join(__dirname, "fountainWebsite")); //

app.set("view engine", "hbs");
app.use("/public", express.static(path.join(__dirname, "public")));


//===== .GET PAGES =====//

app.get('/', (req, res, next) => { 
    res.render('../public/views/index', {title: 'Home Page', css:['../public/css/style.css'], js:['../public/js/navBar.js']});
});
app.use('/', router);

router.get('/project1', (req, res, next) => {
    res.render('../public/views/partials/project1', {title: 'Data Structures', css:['../public/css/projects.css'], js:['../public/js/navBar.js']});
});

//error here//
router.get('/project2', (req, res, next) => {
    res.render('../public/views/fountainWebsite/html/home');
});

router.get('/project3', (req, res, next) => {
    res.render('../public/views/partials/project3', {title: 'This Portfolio', css:['../public/css/projects.css'], js:['../public/js/navBar.js']});
});

router.get('/project4', (req, res, next) => {
    res.render('../public/views/partials/project4', {title: 'Dictionary', css:['../public/css/projects.css'], js:['../public/js/navBar.js']});
});
4

1 回答 1

0

了解我们的代码在做什么是很重要的。让我们从路由处理程序开始/project2：

router.get('/project2', (req, res, next) => {
    res.render('../public/views/fountainWebsite/html/home');
});

这告诉 Express 侦听带有路径的请求/project2并将文件呈现在../public/views/fountainWebsite/html/home.

Handlebars 需要一个扩展名（如.hbs），以便知道使用哪个视图引擎来呈现文件。由于我们从文件路径中省略了扩展名，Express 将假定扩展名是.hbs因为这是我们在调用时告诉它的app.set("view engine", "hbs");

我必须假设您的文件路径带有扩展名，../public/views/fountainWebsite/html/home.html因为您已将其放在名为“html”的文件夹中。如果是这种情况，Handlebars 将不会找到该文件，因为它正在查找../public/views/fountainWebsite/html/home.hbs并且会抛出错误。

.hbs简单的解决方案是使用扩展名重命名此文件。这至少允许 Express 定位文件并通过 Handlebars 视图引擎呈现它。

然而，这种方法的一个问题可能是这个视图被渲染在你的 layout.hbs 文件中，而你不希望这样。也许您希望这个 HTML 文件不被处理并作为静态资产。

在这种情况下，您可以删除/project2路由处理程序并让 Express 将此文件作为静态资产提供。由于您已经public/通过调用将您的文件夹注册为静态资产文件夹，app.use("/public", express.static(path.join(__dirname, "public")));并且您的文件路径显示该 HTML 文件已经在该public/文件夹中，您应该能够直接从浏览器的路径请求该 HTML /public/views/fountainWebsite/html/home.html。

于 2021-08-21T20:45:48.463 回答