我试图通过npm安装包在本地提供 Bootstrap 。然而，节点提供的是html文件，而不是CSS和JS文件。这让我很困惑。
我指定这两个文件夹都用.static表示，以确保它们可以公开访问：
app.use(express.static(path.join(__dirname,"public")));
app.use(express.static(path.join(__dirname, "node_modules")));下面是我的目录树结构：
.
├── Assets
│ ├── 11-express-homework-demo-01.png
│ └── 11-express-homework-demo-02.png
├── Develop
│ ├── db
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── notes.ejs
│ ├── index.html
│ ├── server.js
│ └── views
├── README.md
└── result.txt其中
server.js是我运行express的地方，node_modules是 Bootstrap 所在的地方（可以假设默认的npm安装）
在notes.ejs和index.html中，我都包含以下资源：
<link type="text/css" rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" >
<script type="script" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>index.html只是一个静态的登陆页面，notes.ejs是应用程序的主用户交互界面。
如下所示：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Note Taker</title>
<link type="text/css" rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" >
</head>
<body>
<nav class="navbar bg-info">
<a class="navbar-brand text-light p-3" href="/">Note Taker
</a>
</nav>
<div class="container">
<div style="margin-top: 80px;" class="text-center p-5 mb-4 bg-light">
<h1 class="display-4">Note Taker <span role="img" aria-label="Memo">📝</span></h1>
<h4 class="mt-4">Take notes with Express</h4>
<a class="btn btn-primary btn-lg mt-4" href="/notes" role="button">Get Started</a>
</div>
</div>
<script type="script" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>注：ejs如下：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta http-equiv="X-UA-Compatible" content="ie=edge" >
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Note Taker</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous"
>
<link type="text/css" rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" >
</head>
<body>
<nav class="navbar bg-info">
<a class="navbar-brand text-light p-3" href="/">Note Taker </a>
<div class="icons">
<i class="fas fa-save text-light save-note"></i>
<i class="fas fa-plus text-light new-note"></i>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-4 list-container">
<div class="card">
<ul class="list-group list-group-flush">
<%- titles %>
<!-- https://stackoverflow.com/a/33701518/9095603 -->
</ul>
</div>
</div>
<div class="col-8">
<input
class="note-title form-control form-control-lg"
placeholder="Note Title"
maxlength="28"
type="text"
>
<textarea class="note-textarea" class="form-control" placeholder="Note Text" style="min-width: 100%"></textarea>
</div>
</div>
</div>
<script type="script" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>附录-如果您需要查看我的server.js：
// This application uses the Express.js framework to create a REST API that allows clients to perform CRUD (create, read, update, delete) operations on notes stored in a JSON file. The API has three endpoints:
// - `GET /notes` retrieves a list of all notes stored in the `notes.json` file.
// - `POST /notes` adds a new note to the list of notes stored in the `notes.json` file. The new note data is passed in the request body as JSON.
// - `DELETE /notes/:id` deletes a note from the list of notes stored in the `notes.json` file. The ID of the note to delete is passed in the URL as a path parameter.
const express = require("express");
const path = require("path");
const fs = require("fs");
// const bootstrap = require('bootstrap')
// import 'bootstrap/dist/css/bootstrap.css';
const app = express();
const PORT = 3001;
// EJS (alternatively use Pug for dynamic HTML)
// https://www.youtube.com/watch?v=yXEesONd_54
// register view engine
app.set("view engine", "ejs");
// inform ejs which is your views folder because you don't use the default folder name views, but rather 'public'
app.set("views", path.join(__dirname,"public"));
app.use(express.static(path.join(__dirname,"public")));
app.use(express.static(path.join(__dirname, "node_modules")));
var titles = "";
app.get("/notes", (req, res) => {
fs.readFile("db/db.json", "utf-8", (err, data) => {
if (err) {
res.status(500).send({ error: "Could not read file" });
} else {
data = JSON.parse(data);
// res.send(JSON.parse(data));
if (data) {
console.log(typeof data);
console.log(data);
for (let i = 0; i < data.length; i++) {
titles += `<li class="list-group-item">${data[i].title}</li>`;
}
console.log(titles);
}
}
});
// res.sendFile(path.join(__dirname,'public/notes.html'))
res.render("notes", { titles });
// render: https://youtu.be/yXEesONd_54?t=597
});
app.use((req, res) => {
res.sendFile(path.join(__dirname, "public/index.html"));
});
// app.get('/', (req, res) => {
// res.render('index', { title: 'some title'})
// })
app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));我试过上面的方法，但是没有用。它代替了链接的bootstrap CSS文件和bootstrap JS文件，而是服务于我的html文件。我不明白发生了什么。
1条答案
按热度按时间qnzebej01#
正是因为你明确指出
那么您的link和script标记不应该在资源路径的前面包含/node_modules/。
也就是说，您当前拥有：
请尝试：
这应该能解决你的问题，至于为什么你用原来的方法加载html文件而不是css和js文件，其他人可以对此发表评论，因为我不确定。