【发布时间】：2020-12-21 22:17:39
【问题描述】：
我正在使用 Node、Express、Mongoose 和 Bootstrap 开发电子商务网站，但我遇到了关于“bootstrap.min.css.map”的意外行为。
我已经看到它出现在控制台中并出现以下错误：'Cast to ObjectId failed for value "bootstrap.min.css.map" at path "_id" for model "Product"'。
我也看到它显示为按钮的文本。当我在标题中删除指向 bootstrap.min.css 的链接时，预期的行为会返回，但随后我会丢失页面上的引导样式。
我已经搜索并看到了关于从我的代码中删除以下内容的帖子：/*# sourceMappingURL=bootstrap.css.map */ via not linked to bootstrap.css.map but shows in console，但我使用 cdn 来包含 boostrap.min.css 文件，所以我不要认为我可以这样做。
它也出现在开发控制台中： DevTools failed to load SourceMap: Could not load content for http://localhost:3000/products/sort/bootstrap.min.css.map: HTTP error: status code 404, net: :ERR_HTTP_RESPONSE_CODE_FAILURE
我将代码缩减为可以重现的最小方式。以下代码将在左侧显示页面导航按钮，在右侧显示用于排序的下拉菜单。
更改排序后，左侧的按钮将被“bootstrap.min.css.map”覆盖，如下图所示：
This is how the button looks before I change the sort
This is how the button looks after I change the sort
以下是路由和ejs，路由前加'products'
const express = require('express');
const router = express.Router();
const userUtil = require('../utilities/user');
const Product = require("../models/product");
let foundProducts;
let page;
let pages;
router.get("/sort", (req, res) => {
//res.send('page = ' + page);
if (foundProducts.length > 0) {
console.log('we are in the sort');
sort.sortBy(foundProducts, req.query.sortBy);
return res.render("products/products", {
products: foundProducts,
query: "",
order: req.query.sortBy,
successMsg: "",
noMessage: true,
currentPage: page,
pages: pages
});
}
res.redirect("/products");
});
router.get("/:page", async(req, res) => {
try {
page = req.params.page || 1;
const limit = 10;
const products = await Product.find({})
.limit(limit * 1)
.skip(page - 1)
.exec();
const count = await Product.estimatedDocumentCount();
pages = Math.ceil(count / limit);
foundProducts = products;
userUtil.setAdmin(req);
const successMsg = req.flash('successfulMsg')[0];
res.render("products/products", {
products: products,
successMsg: successMsg,
noMessage: (successMsg) ? false : true,
order: "",
query: "",
currentPage: page,
pages: pages
});
} catch (error) {
console.log("The error is " + error);
}
});
router.get("/", async(req, res) => {
res.redirect("/products/1");
});
module.exports = router;<!-- header -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/main.css">
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
</head>
<body>
<!-- header end-->
<div class="container">
<div class="row text-center align-items-start mb-2" style="display:flex; flex-wrap: wrap;">
<div class="col-sm-4 mt-4 mb-0">
<nav aria-label="Page navigation">
<ul class="pagination">
<% if (currentPage> 2 && pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/1" aria-label="First">
<span aria-hidden="true">«</span>
<span class="sr-only">First</span>
</a>
</li>
<% } %>
<% if (currentPage> 1 && pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) - 1 %>" aria-label="Previous">
<span aria-hidden="true"><</span>
<span class="sr-only">Previous</span>
</a>
</li>
<% } %>
<% if (pages > 1) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) %>">
<%= currentPage %>
</a>
</li>
<% } %>
<% if (pages> 1 && pages > currentPage) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(currentPage) + 1 %>" aria-label="Next">
<span aria-hidden="true">></span>
<span class="sr-only">Next</span>
</a>
</li>
<% } %>
<% if (pages> 1 && pages - 1 > currentPage) { %>
<li class="page-item">
<a class="page-link" href="/products/<%= parseInt(pages) %>" aria-label="Last">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<% } %>
</ul>
</nav>
</div>
<div class="col-sm-6 mt-4 mb-0">
<form action="/sort/" method="POST" class="float-right">
<div class="form-group " style="display:inline-flex;">
<label for="l-sort-by" class="mt-2 mr-2">Sort: </label>
<select class="custom-select selectpicker" name="sortBy" id="inputGroupSelect02" onchange="this.form.submit();" value="price_desc">
<option value="price_asc">Lowest Price</option>
<option value="price_desc">Highest Price</option>
<option value="name_asc">Name Ascending</option>
<option value="name_desc">Name Descending</option>
</select>
<input type="hidden" name="searched" value="<%=query%>">
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$("#inputGroupSelect02 option[value='<%=order%>']").attr("selected", "selected");
</script>
<!-- footer -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="/javascripts/main.js"></script>
</body>
</html>
<!-- footer end -->【问题讨论】：
-
您是否尝试过将引导脚本从页脚移动到头部？
-
@LHM 是的，不幸的是，这并没有什么不同。
-
当我单击“运行代码 sn-p”时，您的代码似乎不再运行？ （昨天，我能够看到您的控制台输出......）。你能让它在codepen中运行吗？ (codepen.io/pen)
-
@LHM 看起来问题可能与我所针对的特定引导程序版本有关，因为当我将版本更改为以前的版本时，一切都开始按预期工作
-
我很高兴你知道了。您可以在下面使用您正在处理的特定版本以及您如何解决它来回答您自己的问题。
标签： html css node.js express bootstrap-4