我是一個新手,正在嘗試使用 JS。我試圖構建一個小型 Node.js 應用程式,并在 index.html 中嵌入了一個 JS 腳本,但是當我運行 nodemon 時,它為腳本回傳 404 并且找不到它。帶有嵌入腳本的相同 html 頁面適用于包裹。我究竟做錯了什么?
我的 app.js :
const express = require('express')
app = express()
app.get('/', (req, res, next)=>{
res.sendFile('D:/Node.js Folder/My first project/views/index.html')
})
app.get('/add-user', (req, res, next)=>{
res.sendFile('D:/Node.js Folder/My first project/views/add-user.html')
})
app.get('/show-user', (req, res, next)=>{
res.sendFile('D:/Node.js Folder/My first project/views/show-users.html')
})
app.listen(3000)
HTML 檔案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class = "text-gray-400">
<div>
<div class = "text-3xl">
<nav>
<h1>
Hello! Welcome to the first page!
</h1>
<h1 class = "chat-notification-title">
Hello! Welcome to the first page!
</h1>
<form>
<label for="cname">Company Name</label><br>
<input type="text" id="cname" name="cname"><br>
<label for="ccode">Company Code</label><br>
<input type="text" id="ccode" name="ccode">
</form>
<button class ='btn-submit' type = "submit">Add Record</button>
</nav>
</div>
</div><script src="../controller/controller-1.js"></script>
</body>
</html>
嵌入式腳本:
'use strict'
console.log(document)
const button = document.querySelector('.btn-submit')
console.log(button)
button.addEventListener('click', function () {
console.log('BUTTON PRESSED')
alert("Pressed")
})
uj5u.com熱心網友回復:
Nodemon 應該在服務器端使用,通常運行 express 或類似的服務器。
parcel serve是您應該在客戶端(沒有服務器)使用的,以直接提供 html 檔案。
如果你想在服務器上使用它,那么你應該這樣做:
客戶端 json "dev" shouldparcel watch index.html和 server "dev" should nodemon server.js。這兩個腳本都應該在根 package.json 檔案中同時運行,允許它們同時運行
"dev": "concurrently npm:server:dev npm:client:dev",
"server:dev": "cd server && npm run dev",
"client:dev": "cd client && npm run dev",
在服務器檔案中,您應該執行以下操作:
import express from "express"; //import express
const app = express(); // use express
app.use(express.static("../client/dist/")); // allows express to server static files
app.use((req, res, next) => {
if (req.method === "GET" && !req.path.startsWith("/api")) {
return res.sendFile(path.resolve("../client/dist/index.html"));
} else {
next();
}
}); // checks if url is trying to reach an api, if not it returns the file you are looking for
const server = app.listen(process.env.PORT || 3000, () => {
console.log("Server started on http://localhost:" server.address().port);
}); // starts server and logs the localhost url
然后,您應該從服務器端訪問您的站點,每次更改服務器時,nodemon 都會為您重新啟動服務器,每次更改客戶端時,parcel 都會這樣做
uj5u.com熱心網友回復:
我通過將它添加到我的 app.js 來解決它:
app.get('/controller/controller-1.js', (req, res, next)=>{
res.sendFile('D:/Node.js Folder/My first project/controller/controller-1.js')
})
來自該執行緒的幫助:如何在 node.js 的客戶端包含 javascript?
有一個更好的方法嗎?
uj5u.com熱心網友回復:
您需要做的一件事是停止使用絕對路徑
例如。'D:/Node.js 檔案夾/我的第一個專案/views/index.html'
應該是 ./views/index.html
假設 app.js 檔案與 views 檔案夾位于同一檔案夾中。
您可能部署此代碼的服務器不會與您的 PC 具有相同的路徑。
您可能還想創建一個靜態檔案夾并將您的 html、腳本(控制器)檔案夾移動到其中并將以下行添加到 app.js
app.use('/', express.static('static'))
// or
app.use('/', express.static('./static'))
這樣,您就不必像現在那樣提供單個檔案。
如果您將嵌入檔案的 src 設定為 ./controller/controller-1.js
它會正常作業
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/484042.html
標籤:javascript 节点.js 节点监视器
