Node.js 应用程序无法识别 src 文件路径
我目前正在尝试构建一个简单的测验应用程序，在这种情况下，我试图在 html 模板中获取 JS 文件。出于某种原因，每次我运行我的节点应用程序时，html 文件都无法引用该文件，即使路径是正确的。我尝试移动文件并完成了许多不同的文件路径。[[[]()]()]()
如上所述，我尝试将文件移动到不同的文件夹，进入根文件夹并尝试命名不同的路径。这个应用程序是使用 express 和 mongodb 来记录的。已知 JS 可以工作，因为我将它嵌入到 html 中以检查它是否工作。
Index.js文件：
const express = require("express");
const app = express();
const path = require("path");
const hbs = require("hbs"); //for hbs files
const collection = require("./mongodb");
const tempelatePath = path.join(__dirname, "./templates");
app.use(express.json()); //To get hbs files
app.set("view engine", "hbs"); //Our view engine will be hbs
app.set("views", tempelatePath); //For the looks
app.use(express.urlencoded({ extended: false })); //to get the code to run
app.use(express.static(path.join(__dirname, 'public'))); // Serve static files
app.get("/", (req, res) => {
res.render("login");
});
app.get("/signup", (req, res) => {
res.render("signup");
});
app.get("/quiz", (req, res) => {
res.render("quiz");
});
app.get("/quizTwo", (req, res) => {
res.render("quizTwo");
});
app.get("/quizThree", (req, res) => {
res.render("quizThree");
});
app.post("/signup", async (req, res) => {
const data = {
name: req.body.name,
password: req.body.password,
};
try {
await collection.create(data);
res.render("home");
} catch (error) {
console.error("Error inserting data:", error);
res.status(500).send("Error inserting data");
}
});
app.post("/login", async (req, res) => {
try {
const check = await collection.findOne({ name: req.body.name }); //checking if user exists
if (check.password === req.body.password) {
res.render("home");
} else {
res.send("Password is incorrect");
}
} catch {
res.send("No Account found");
}
});
app.listen(3000, () => {
console.log("Connection made");
});
MongoDb 文件
const mongoose = require("mongoose")
const connectionOptions = {
useNewUrlParser: true,
useUnifiedTopology: true,
}
mongoose.connect("mongodb://127.0.0.1:27017/ChooseAdventure", connectionOptions) //Setting up Mongo connection
const db = mongoose.connection
db.on("error", console.error.bind(console, "Error connecting to MongoDB:"))
db.once("open", () => {
console.log("Connected to MongoDB!")
})
const LogInSchema = new mongoose.Schema({
name: {
type: String,
required: true,
},
password: {
type: String,
required: true,
},
})
const collection = mongoose.model("CollectionOne", LogInSchema)
module.exports = collection
测验.hbs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Haunted Adventure Quiz</title>
</head>
<body>
<div id="quiz-container">
<!-- Quiz questions and choices will be inserted here -->
</div>
<button onclick="displayQuiz()">Start Quiz</button>
<script src="../quiz.js"></script>
</body>
</html>
根据您在问题评论中提供的附加信息，您目前在 src 目录中有 quiz.js，它不能为您的前端提供静态内容。您必须从静态目录提供 JS 文件。
此外，您在上面的示例代码中有这行代码 -
app.use(express.static(path.join(__dirname, 'public'))); // Serve static files
这行代码告诉我们您打算从公共目录提供静态文件。基于那行代码，您应该将 quiz.jz 移动到 public 目录。
到那时，你应该能够像这样包含 quiz.js -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Haunted Adventure Quiz</title>
</head>
<body>
<div id="quiz-container">
<!-- Quiz questions and choices will be inserted here -->
</div>
<button onclick="displayQuiz()">Start Quiz</button>
<script src="/public/quiz.js"></script>
</body>
</html>