如何在使用Express發送的HTML文件中使用CSS和JS文件？

var express = require('express'); 
var app = express(); 

app.get('/', function(req, res) { 
    res.sendFile('main.html', { root : __dirname}) 
}); 

app.listen(9000, function(){ 
console.log('Listening on port 9000'); 
});

這個當前的代碼塊工作正常。 Express是必需的，並分配給變量應用程序。如何在使用Express發送的HTML文件中使用CSS和JS文件？

然後使用res.sendFile作爲app.get方法的一部分發送HTML文件（來自同一目錄）。

在HTML文件中，我在同一個目錄中引用了一個css文件，但沒有發生任何事情。

<link rel='stylesheet' type='text/css' href='mainstyle.css'>

我怎樣才能發送CSS文件到瀏覽器使用？ res.sendFile不起作用。

謝謝。

來源

2016-10-19 Max

您需要定義一個靜態文件目錄。創建一個名爲公共文件夾，然後加入這一行：

app.use(express.static('public'));

當你包括CSS文件中雖然不包含在文件路徑公開。所有的靜態文件都可以放入該文件夾中。或者更好的是，創建樣式，圖片，字體等子文件夾

你可以閱讀更多關於它在這裏：https://expressjs.com/en/starter/static-files.html

我想你遇到的問題是，你想創建一個Web應用程序使用Express從頭開始，無需任何周邊功能。導航到URL時，您的應用會發送一個文件。它不會偵聽文件的特定請求並對其作出響應，它不會處理丟失的文件，服務器錯誤等。

您可以從頭開始做所有事情，但實際上Express已經創建了一個應用程序生成器，該應用程序生成器創建了一個骨架應用程序爲您提供Web服務器，公共文件夾，路由等。它被稱爲Express Generator，您可以在這裏找到它：https://expressjs.com/en/starter/generator.html

這是一個MVC應用程序的出色開端。您可以獲取其他節點模塊的package.json文件，稱爲Jade的模板引擎（儘管我更喜歡Hogan）以獲取動態內容，一旦創建了應用程序，您可以通過在控制檯窗口中鍵入「npm start」來啓動它。

來源

2016-10-19 15:34:09 Taintedmedialtd

我假設我將我的CSS文件放在公共文件夾中？ – Max

你確定，對不起，應該說清楚。 – Taintedmedialtd

我覺得這應該工作，但事實並非如此。 – Max

試試這個

var express = require('express'); 
var app = express(); 

app.get('/', function(req, res) { 
    if(req.url == "/" || req.url == "/main.html"){ 
res.sendFile('/main.html', { root : __dirname}) 
}else if(req.url == "/mainstyle.css"){ 
res.sendFile('mainstyle.css', { root : __dirname}) 
} 
}); 

app.listen(9000, function(){ 
console.log('Listening on port 9000'); 
});

來源

2016-10-19 15:39:17

我不想說這也沒有做我的任何好處。謝謝你。 – Max

我很抱歉，應該以斜槓（/）'/ main.html'開始，而不是'main.html'我更新它。 –

我現在知道發生了什麼事錯的。

從我開始的實例中，我嘗試了不同的代碼。瀏覽器不是基於我的服務器提供的錯誤代碼創建緩存，所以無論我更改了什麼，瀏覽器都會重新加載緩存，在這種情況下，代碼是錯誤的。

對於每個在輸入正確代碼時可能遇到類似問題的人，清除緩存歷史記錄或使用隱身/私人瀏覽器進行開發。

來源

2016-10-21 16:25:56 Max

如何在使用Express發送的HTML文件中使用CSS和JS文件？

回答

相關問題