Laden von HTML-Stylesheets in node.js

Ich bin ein Anfänger in node.js, ich lerne es bei w3schools.Laden von HTML-Stylesheets in node.js

Vor kurzem, als ich lernte File System, kam ich über fs.readFile Methode. Als erstes Argument habe ich einen Link zu einer zuvor erstellten HTML-Datei bereitgestellt. Nun, an diese Datei ist ein CSS-Stylesheet angehängt, dessen href ich (offensichtlich) bearbeitet habe. Das war der Beginn meines Problems.

Nach viel lesen auf mehreren Websites und Bearbeitung meines Codes Tonnen von Zeiten, das ist die endgültige Version meines Codes.

Meine js, HTML und CSS sind wie folgt -

var http = require('http'), 
 
    fs = require('fs'), 
 
    path = require('path'), 
 
    express = require('express'), 
 
    app = express(); 
 

 
app.use(express.static(path.join(__dirname, '/public'))); 
 

 
http.createServer(function (req, res) { 
 
    fs.readFile('.CSS Transitions - timing function.html', function (err, data) { 
 
     res.writeHead(200, {'Content-Type' : 'text/html'}); 
 
     res.end(data); 
 
    }); 
 
}).listen(8080); 
 

 
console.log('Server running at =>\n       localhost:8080\nCtrl + C to quit');

a 
 
{ 
 
\t transition : color 1s, font-size .5s; 
 
\t transition-timing-function : ease; 
 
\t color : black; 
 
\t font-size : 30px; 
 
} 
 

 
a:hover 
 
{ 
 
\t color : red; 
 
\t font-size : 40px; 
 
}

<!DOCTYPE html> 
 

 

 
<html> 
 
\t <head> 
 
\t \t <title>Transition</title> 
 
\t \t <link rel='stylesheet' type='text/css' href='css/CSS Transitions - timing function.css'> 
 
\t </head> 
 
\t <body> 
 
\t \t <h2>Links</h2> 
 
\t \t <ul> 
 
\t \t \t <li><a href='http://www.htmldog.com'>HTML-Dog</a></li> 
 
\t \t \t <li><a href='http://www.imdb.com'>IMDb</a></li> 
 
\t \t \t <li><a href='http://www.youtube.com'>YouTube</a></li> 
 
\t \t </ul> 
 
\t </body> 
 
</html>

Die Struktur meiner Verzeichnis

js file 
html file 
/public 
    /css 
     css file

PROBLEM >> Egal ist, was ich tun , meine CSS-Datei wird nicht geladen. Dies ist der häufige Fehler -

Ressource als Stylesheet interpretiert, aber mit MIME-Typ text/html übertragen: "http://localhost:8080/css/CSS%20Transitions%20-%20timing%20function.css".

Ich weiß nicht mehr, was ich tun soll. Ich bin seit 2 Tagen dabei, bitte HILFE !!

Quelle

2017-07-01 Samsite

Warum verwenden Sie Express- und HTTP-Module gleichzeitig? Bereits Express-Modul von http-Modul verpackt. So können Sie Express-Modul anstelle von http verwenden. Hier, Beispiel für das Express-Modul.

// proper way in server.js 

var fs = require('fs'); 
var fs = require('express'); 
var fs = require('path'); 

var app = express(); 

app.use('/app', function(req, res){ 
    res.sendFile(path.resolve(__dirname, './html/app.html')); // put your app.html's relative path 
}) 

app.use('/app.js', function(req, res){ 
    res.sendFile(path.resolve(__dirname, './js/app.js')); // put your app.js's relative path 
}) 

app.use('/app.css', function(req, res){ 
    res.sendFile(path.resolve(__dirname, './css/app.css')); // put your app.css's relative path 
}) 

app.listen(9090, function(err){ 
    if(err) console.log(err); 
    console.log('listening at http://localhost:9090/app'); 
}) 

// app.html 

<html> 
    <head> 
      <script src='/app.js'/> 
      <link href='/app.css'/> 
    </head> 
    <body> 
      // your elements 
    </body> 
</html>

Quelle

2017-07-01 18:46:56 Vasi

Vielen Dank, Mann. Es funktioniert perfekt. Ich frage mich, ob _fs.readFile() _ method verwendet werden kann, um statische Dateien zu liefern. – Samsite

Natürlich ist dein Gedanke richtig.Aber Sie erstellen Server mit HTTP-Modul, Ihr Antwortobjekt hat keine sendFile-Methode. Sie müssen also "var file = fs.readFile()" verwenden und dann die Datei mit res "res.send (file)" senden. Aber Sie haben Express-Modul, das Wrapped-HTTP-Modul und eine Vielzahl von Methoden in Ihrem Anfrage- und Antwortobjekt ausgesetzt. In dieser Zeit hat das Antwortobjekt die sendFile-Methode. Sie können also res.sendFile() anstelle von fs.readFile() verwenden. – Vasi

Sie sollten wahrscheinlich keine Leerzeichen in Ihrem Dateinamen haben, aber das ist neben dem Punkt. Was es scheint, wie Sie wollen, ist serve a static file.

Da Sie bereits dieses

app.use(express.static(path.join(__dirname, '/public')));

tun dann nur diese Linie in Ordnung ist. Entfernen Sie die gesamte http.createServer-Methode und es sollte gut funktionieren.

href='/css/CSS Transitions - timing function.css'

Keine Notwendigkeit, mit fs überhaupt herumzualbern.

EDIT

Ich denke, die bevorzugte Methode, um dies mit ausdrücklichem zu tun ist, was ich oben geschrieben hätte, aber vielleicht den Header-Typen von text/html, um Text zu ändern/CSS würde auch funktionieren?

Quelle

2017-07-01 18:44:57

Hey Mann, tut mir leid, ich habe es vorher nicht bemerkt, aber Ihre Lösung war eine Verknüpfung mit allen statischen Dateien auf einmal zu arbeiten. Vielen Dank. Prost. – Samsite

@samsite können Sie die akzeptierte Antwort noch ändern. –

@Lorenz Meyer Ich habe versucht, beide als richtige Antworten zu markieren, aber dabei habe ich festgestellt, dass es nicht so funktioniert. Wie auch immer, Khauri McClain hat meinen Dank. – Samsite

Laden von HTML-Stylesheets in node.js

Antwort

Verwandte Themen