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

huangapple go评论93阅读模式
英文:

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:-
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

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,而我们有一个静态资源目录如下 &lt;Project Root&gt;/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.

&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/style.css&quot;&gt;

Long answer:

&lt;link/&gt; 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 &lt;Project Root&gt;/public/css/style.css.

If the link tag is &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;, the HTTP request URL for style.css will be http://localhost:3000/list/css/style.css.

If the link tag is &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/style.css&quot;&gt;, 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.

huangapple
  • 本文由 发表于 2023年7月23日 16:47:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76747351.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定