Finden Sie eine CSS-Datei Knoten js

Question

Hallo, ich bin neu bei Nodejs und ich habe gerade erfolgreich eine Nodejs App online bereitstellen. Nun würde ich gerne wissen, wie CSS, JS oder Bilddateien verlinkt werden, denn wenn ich versuche, es wie früher zu machen, bekomme ich den Fehler GET (not found).

Der Ordner Architektur ist:

--public 
    --assets 
    --css 
     index.css 
    --js 
--views 
    --index.ejs 
--node modules 
app.js 
package.json 

Unter der Annahme, dass ich den Link index.css in index.ejs codieren will, was ich bitte in meiner app.js Datei schreiben muß.

app.js Code:

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

app.set('view engine', 'ejs'); 

app.use(express.static(__dirname + '/public')); 

app.get('/', function(req,res){ 
    res.render('index'); 
}); 


app.listen(8080,'IP_ADRESS'); 

index.ejs Code:

<link rel="stylesheet" type="text/css" href="/css/index.css"> 

Answer 1

Zuerst gibt es eine sogenannte statische Datei. Im Grunde genommen handelt es sich um eine Datei, die ohne jegliche Modifikation über das Internet gesendet wird. Bild- und CSS-Dateien sind normalerweise statische Dateien.

Es sieht so aus, als hätten Sie Ihre statischen Dateien in einen Ordner namens public gelegt.

Express verfügt über eine integrierte Funktion zum Senden statischer Dateien mit der Bezeichnung express.static. Sie können es wie folgt verwenden:

// Require the modules we need. 
var express = require('express'); 
var path = require('path'); 

// Create an Express app. 
var app = express(); 

// Get the path to the `public` folder. 
// __dirname is the folder that `app.js` is in. 
var publicPath = path.resolve(__dirname, 'public'); 

// Serve this path with the Express static file middleware. 
app.use(express.static(publicPath)); 

// ... 

Sie sollten jetzt statische Dateien anzeigen können. Wenn Ihre Website normalerweise unter http://localhost:3000 erreichbar ist, können Sie index.css unter http://localhost:3000/css/index.css sehen.

Wenn Sie viel zu viel über express.static wissen wollen, können Sie a blog post I wrote überprüfen, die in Express statische Dateien in die Tiefe geht.

Answer 2

Das Basis-Set aus statischen Dateien in Express dient:

var express = require("express"); 
var app = express(); 
... 
app.use(express.static(__dirname + '/public')); 
... 
app.listen(3000); 

Jetzt in Ihrem. ejs, um die CSS-Stile oder js-Skripte zu laden:

<link rel="stylesheet" href="/css/index.css"/>