如何解决在基于 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"));
。
它们之间有什么区别?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。