html - bootstrap.min.css.map 出现在奇怪的地方

问题描述

我正在使用 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未链接到 bootstrap.css.map 但显示在控制台中，但是我使用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”覆盖，如下图所示：
这是更改排序前按钮的外观
 这是更改排序后按钮的外观种类

以下是路由和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">&laquo;</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">&lt;</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">&gt;</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">&raquo;</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 -->

标签： htmlcssnode.jsexpressbootstrap-4

html - bootstrap.min.css.map 出现在奇怪的地方

问题描述

解决方案

推荐阅读