Express无法显示带有CSS文件和JS的页面|软件开发问答库

这是我在app.js文件中的代码：

const express = require("express");
require("express-async-errors");
// const exphbs = require('express-handlebars');

const app = express();

app.use(
  express.urlencoded({
    extended: true,
  })
);

app.use("/public", express.static("public"));

require("./middlewares/view.mdw")(app);
require("./middlewares/locals.mdw")(app);

// home page
app.use("/", require("./routes/home.route"));

// article page
app.use("/article", require("./routes/articles.route"));

const POST = 3000;
app.listen(POST, function () {
  console.log(`Server is running on PORT: ${POST}`);
});

这是我在home.route.js文件中的代码

const express = require("express");

const categories = require("../models/categories.model");
const articles = require("../models/articles.model");
const tags = require("../models/tags.model");

const router = express.Router();

router.get("", async (req, res) => {
  res.locals.exceptArticles = new Set();

  const _4OutstandingArticles = await articles.load4OutstandingPosts();

  _4OutstandingArticles.forEach((record) =>
    res.locals.exceptArticles.add(record["id"])
  );

  const _10MostViewArticles = await articles.load10MostViewArticles(
    `(${[...res.locals.exceptArticles].join(",")})`
  );

  _10MostViewArticles.forEach((record) =>
    res.locals.exceptArticles.add(record["id"])
  );

  const _10LatestArticles = await articles.load10LatestArticles(
    `(${[...res.locals.exceptArticles].join(",")})`
  );

  _10LatestArticles.forEach((record) =>
    res.locals.exceptArticles.add(record["id"])
  );

  const [_10EachCategories, _20tags, _5Categories] = await Promise.all([
    articles.load10EachCategories(
      `(${[...res.locals.exceptArticles].join(",")})`
    ),
    tags.load20Tags(),
    categories.load5CategoriesDesc()
  ]);

  res.render("vwHome/home", {
    _4OutstandingArticles,
    _10MostViewArticles,
    _10LatestArticles,
    _10EachCategories,
    _20tags,
    _5Categories
  });
});

module.exports = router;

，当我访问url'localhost：3000'时，这就是我的网站呈现的内容

在我访问url'localhost：3000 / article / 1'之前，一切仍然很好

这是我在article.route.js文件中的代码

const express = require("express");

const categories = require("../models/categories.model");
const articles = require("../models/articles.model");
const tags = require("../models/tags.model");

const router = express.Router();

router.get("/:id", (req, res) => {
  res.render("vwArticles/detail");
});

module.exports = router;

在文件夹views / layouts / main.hbs内部，这是我的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <title>{{{_sections.title}}}</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="public/images/icons/favicon.png" />
  <link rel="stylesheet" type="text/css" href="public/vendor/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="public/fonts/iconic/css/material-design-iconic-font.min.css" />
  <link rel="stylesheet" type="text/css" href="public/vendor/animate/animate.css" />
  <link rel="stylesheet" type="text/css" href="public/vendor/css-hamburgers/hamburgers.min.css" />
  <link rel="stylesheet" type="text/css" href="public/vendor/animsition/css/animsition.min.css" />
  <link rel="stylesheet" type="text/css" href="public/css/util.min.css" />
  <link rel="stylesheet" type="text/css" href="public/css/main.css" />
  {{{_sections.css}}}
</head>

<body class="animsition">
  {{> nav}}
  {{{body}}}

  <script src="public/vendor/jquery/jquery-3.2.1.min.js"></script>
  <script src="public/vendor/animsition/js/animsition.min.js"></script>
  <script src="public/vendor/bootstrap/js/popper.js"></script>
  <script src="public/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="public/js/main.js"></script>
  {{{_sections.js}}}
</body>

</html>

我将导航栏用作车把的一部分，并且文件vwArticles / detail.hbs是一个空文件，因此url'localhost：3000 / article /：id'肯定会呈现导航栏。我不知道发生了什么，任何人都可以帮助我，谢谢