在基于 URL 参数的动态路由中呈现为 EJS 时如何访问样式表

问题描述

我最近开始通过创建一个简单的待办事项列表来学习 Express.js 和 mongoose，但现在我被一个基本的东西困住了。

当我尝试根据 URL 参数在动态路由中呈现 EJS 文件时，我无法为 EJS 应用存储在 stylesheet.css 文件夹中的 public，并出现以下错误消息显示在浏览器控制台中。错误信息：

Refused to apply style from 'http://localhost:3000/mylist/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type,and strict MIME checking is enabled.

当然，URL 请求是 http://localhost:3000/mylist/css/styles.css。

另一方面，在 home 路由中呈现的相同 EJS 文件能够访问 stylesheet.css。请求 URL 为 http://localhost:3000/css/styles.css。

所以我想无论我尝试呈现什么，请求 URL 在我的文件结构中都必须是 http://localhost:3000/css/styles.css。但是，当我在基于 URL 参数的动态路由中呈现为 EJS 时，我不知道如何从 mylist 中删除 http://localhost:3000/mylist/css/styles.css。

我的代码有什么问题？你是怎么解决的？

文件结构：

app.js

const express = require("express");
const mongoose = require("mongoose");
const app = express();

app.set('view engine','ejs');
app.use(express.static("/public"));

mongoose.connect("mongodb://localhost:27017/todolistDB",{useNewUrlParser: true,useUnifiedTopology: true});

const itemsSchema = mongoose.Schema({ name: String });
const customListsSchema = mongoose.Schema({ name: String,items: [itemsSchema] });

const Item = mongoose.model("Item",itemsSchema);
const CustomList = mongoose.model("CustomList",customListsSchema);

app.get("/",(req,res) =>  {
  Item.find((err,foundItems) => {
    if (!err) {
      res.render("list",{ listTitle: "Today",newListItems: foundItems });
    }
  });
});

app.get("/mylist/:customListName",res) => {
  const customListName = req.params.customListName;
  CustomList.findOne({ name: customListName },(err,foundCustomList) => {
    if (!err) {
      if (foundCustomList) {
        res.render("list",{
          listTitle: foundCustomList.name,newListItems: foundCustomList.items
        });
      } else {
        const customList = new CustomList({ name: customListNamem });
        customList.save((err) => {
          if (!err) {
            res.redirect("/mylist/" + customListName);
          }
        });
      }
    }
  });
});

list.ejs：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <Meta charset="utf-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="Box" id="heading">
    <h1> <%= listTitle %> </h1>
  </div>
  <div class="Box">

    <form action="/delete" method="post">
      <% newListItems.forEach((newListItem) => { %>
        <div class="item">
          <input type="checkBox" name="checkBox" value="<%= newListItem._id %>" onchange="this.form.submit()">
          <p><%= newListItem.name %></p>
        </div>
      <% }); %>
    </form>

    <form class="item" action="/" method="post">
      <input type="text" name="newItem" placeholder="New Item" autocomplete="off">
      <button type="submit" name="listName" value="<%= listTitle %>">+</button>
    </form>

  </div>
</body>
</html>

我也尝试将 app.use(express.static("/public")); 替换为 app.use(express.static(__dirname + "/public"));，但也没有用。

解决方法

我想出了如何自己修复错误。

这是由于 EJS 中样式表的路径是相对路径造成的。好像必须是绝对路径。

所以我只是添加了一个正斜杠 / 并将 <link rel="stylesheet" href="css/styles.css"> 变成了 <link rel="stylesheet" href="/css/styles.css"> 中的 list.ejs。

现在它适用于 app.use(express.static(__dirname + "/public")); 中的 app.js，但它仍然不适用于 app.use(express.static("/public"));。

它们之间有什么区别？

express express express route-parameters url-parameters