英文:
The bootstrap link and css files are not being applied to a certain url. How do I fix it? Tell me if any other files are necessary to answer it
问题
以下是您要求的代码部分的中文翻译:
// *************请看这里***************
app.get("/list/:customListName", (req, res) => {
customListName = req.params.customListName;
List.findOne({ name: customListName })
.then((foundList) => {
if (foundList) {
res.render("list", { listTitle: foundList.name, newListItems: foundList.items })
} else {
List.create({
name: customListName,
items: defaultItems,
});
// *************请看这里***************
res.redirect("/list/"+customListName);
}
})
.catch((e) => { console.log('错误:' + e); })
});
以上是您代码中涉及URL路径的部分的中文翻译。如果您需要更多帮助或其他部分的翻译,请告诉我。
英文:
The bootstrap link and css files are not being applied to url "/list/:customListName" but when I change this to "/:customListName", somehow it works. What is the logic behind this and how do I apply styles to this url "/list/:customListName" ?
app.js:-
const express = require('express');
const bodyParser = require('body-parser');
const date = require(__dirname + '/date.js');
const mongoose = require('mongoose');
mongoose.connect("mongodb://127.0.0.1:27017/todoListDB").then(() => console.log('connected')).catch(e => console.log(e));
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + "/public"));
const itemSchema = mongoose.Schema({
name: {
type: String,
required: true,
}
});
const Item = new mongoose.model('Item', itemSchema);
defaultItems = [
{ name: "Welcome to your Todo List" },
{ name: "Hit '+' button to add a new item" },
{ name: "<--Hit this to check" },
];
const listSchema = mongoose.Schema({
name: {
type: String,
required: true,
},
items: [itemSchema]
});
List = mongoose.model('List', listSchema);
app.get("/", (req, res) => {
const day = date.getDate();
Item.find({}).then(foundItems => {
if (foundItems.length === 0) {
Item.insertMany(defaultItems).then(() => {
res.redirect("/");
}).catch((err) => {
console.log(err);
});
} else {
res.render("list", { listTitle: day, newListItems: foundItems });
}
})
});
app.post("/", (req, res) => {
if ((x = req.body.newItem) !== "") {
const itemName = req.body.newItem;
Item.create({
name: itemName
});
res.redirect("/");
} else {
res.redirect("/");
}
});
// *************See here***************
app.get("/list/:customListName", (req, res) => {
customListName = req.params.customListName;
List.findOne({ name: customListName })
.then((foundList) => {
if (foundList) {
res.render("list", { listTitle: foundList.name, newListItems: foundList.items })
} else {
List.create({
name: customListName,
items: defaultItems,
});
// *************See here***************
res.redirect("/list/"+customListName);
}
})
.catch((e) => { console.log('Error: ' + e); })
});
app.post("/delete", (req, res) => {
const itemId = req.body.checkbox;
Item.deleteOne({ _id: itemId }).then(() => {
res.redirect("/");
}).catch(e => console.log(e));
});
app.post("/work", (req, res) => {
res.redirect("/work");
});
app.get("/about", (req, res) => {
res.render("about", { listTitle: "About Me" });
});
app.listen(3000, () => {
console.log("Server running on http://127.0.0.1:3000");
});
This was the error I was getting in the dev console:-
list.ejs:-
<%- include('header') %>
<div class="box" id="heading">
<h1>
<%= listTitle %>
</h1>
</div>
<div class="box">
<% newListItems.forEach(item=> { %>
<form action="/delete" method="post">
<div class="item">
<input type="checkbox" name="checkbox" value="<%= item._id %>" onchange="this.form.submit()">
<p>
<%= item.name %>
</p>
</div>
</form>
<% }); %>
<form class="item" action="/" method="post">
<input type="text" name="newItem" placeholder="New Item" autocomplete="off">
<button type="submit" name="list" value="<%= listTitle %>">+</button>
</form>
</div>
<%- include('footer') %>
header.ejs:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Todo List</title>
</head>
<body>
答案1
得分: 1
短答案:应该是 /css/style.scss
而不是 css/style.scss
。
长答案:
<link/>
标签的 href
属性接受绝对 URL 或相对 URL。
带有斜杠 /
的相对 URL 与不带斜杠的行为不同。
前导斜杠表示链接是相对于网站的根目录的。
例如:
当前 URL 是 http://localhost:3000/list/apple
,而我们有一个静态资源目录如下 <Project Root>/public/css/style.css
。
如果链接标签是 <link rel="stylesheet" href="css/style.css">
,那么 style.css
的 HTTP 请求 URL 将是 http://localhost:3000/list/css/style.css
。
如果链接标签是 <link rel="stylesheet" href="/css/style.css">
,那么 style.css
的 HTTP 请求 URL 将是 http://localhost:3000/css/style.css
。
当请求到达服务器时,express
会相对于 public
目录查找 css/style.css
文件。
英文:
Short answer: it should be /css/style.scss
rather than css/style.scss
.
<link rel="stylesheet" href="/css/style.css">
Long answer:
<link/>
tag 's href
attribute accept an absolute URL or a relative URL.
The behavior of a relative URL with and without the leading slash /
is different.
The leading slash indicates that the link is relative to the root of the website.
E.g.
The current URL is http://localhost:3000/list/apple
and we have static assets directory like this <Project Root>/public/css/style.css
.
If the link tag is <link rel="stylesheet" href="css/style.css">
, the HTTP request URL for style.css
will be http://localhost:3000/list/css/style.css
.
If the link tag is <link rel="stylesheet" href="/css/style.css">
, the HTTP request URL for style.css
will be http://localhost:3000/css/style.css
.
When the request comes to the server, express
will look up the css/style.css
file relative to the public
directory.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论