externe Javascript und CSS sind nicht in HTML beeinflusst, wenn der HTML-Aufruf von Node.js

Ich habe eine einfache Node JS Programm erstellt. Ich habe index.html im selben Ordner, der app.js befindet und externe css und js Dateien innerhalb public/stylesheets/style.css und /public/javascripts/script.js Verzeichnisse. Wenn ich den index.html direkt vom Browser öffne, wird die Datei css erfolgreich mit der html Datei verknüpft. Aber wenn ich node app.js ausführen und zu http://localhost:3000 navigieren, wird die index.html angezeigt, aber jeder Stil hat nicht dazu beigetragen. Wie kann ich es lösen?externe Javascript und CSS sind nicht in HTML beeinflusst, wenn der HTML-Aufruf von Node.js

app.js Datei ist diese

var express = require('express'); 
var app = express(); 
var server = require('http').createServer(app); 
var io = require('socket.io').listen(server); 

server.listen(3000); 

app.get('/', function(req, res){ 
    res.sendfile(__dirname + '/index.html'); 
});

index.html Datei dieses

<html> 
<head> 
    <title>Sanitizor</title> 

    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
    <script src="public/javascripts/script.js"></script> 

    <link rel="stylesheet" type="text/css" href="public/stylesheets/style.css"> 

</head> 
<body> 
<h3>hello</h3> 
    <div id="chat"></div> 
    <form id="sent-message"> 
     <input size="35" id="message"></input> 
     <input type="submit"></input> 
    </form> 
</body> 
</html>

Quelle

2016-04-17 CoderS

Wenn Sie schreiben, in die Adressleiste, den vollständigen Pfad Server 'http: // localhost: 3000/public/stylesheets/style.css' sollten Sie Holen Sie sich Ihr CSS, wenn nicht, der Pfad ist falsch. – LGSon

Sie müssen die statische Bereitstellung Ihrer Ressourcendateien aktivieren. – Cristy

Mögliches Duplikat von [Express-js kann meine statischen Dateien nicht abrufen, warum?] (Http://stackoverflow.com/questions/5924072/express-js-cant-get-my-static-files-why) – Cristy

Sie müssen statisch Portion aktivieren:

app.use(express.static(path.join(__dirname, 'public'))); //this line enables the static serving in the public directory

Ihr public Verzeichnis folgendes könnte:

public 
|_css 
|_js 
|_images 
    |_logo.png

Dann wollen, wenn Sie ein Bild bekommen:

http://localhost:3000/images/logo.png

Und wenn Sie es in Ihrer HTML-Seite angezeigt werden sollen:

<img id="logo" src="/images/logo.png"/>

In Ihrem Fall ersetzen Sie die folgende Zeile

<script src="public/javascripts/script.js"></script>

von

<script src="/javascripts/script.js"></script>

Das gleiche gilt für die CSS

Quelle

2016-04-17 12:03:51 krakig

Vielen Dank. Es funktioniert. Rettete mich aus einer Menge Chaos! – CoderS

Wie Cristy bereits in ihrem Kommentar erwähnt, müssen Sie statische Portion Ihre Ressource-Dateien ermöglichen. Um dies zu tun, verwenden Sie express.static. Express hat gute documentation und führt über Routing oder Middleware usw., also schau es dir an.

Betrachten Sie eine Dateistruktur wie:

/app 
    /public/index.html 
     /stylesheets/style.css   
     /javascripts/script.js

Ihre App-Ordner enthält, wird die app.js und der Rest wie discribed bestellt.

Ihre app.js:

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

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

var io = require('socket.io').listen(server); 

server.listen(3000); 

app.get('/', function(req, res){ 
    res.sendfile(__dirname + '/public/index.html'); 
});

Die meiste Zeit die Reihenfolge wichtig ist, so dass Sie vorsichtig sein müssen. Um Express zu konfigurieren, können Sie app.configure(function() {...}); verwenden und Sie alle app.use(...) Befehle dort setzen.

Ihre index.html sollte nun wie folgt aussehen:

<html> 
<head> 
    <title>Sanitizor</title> 

    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
    <script src="/javascripts/script.js"></script> 

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

</head> 
<body> 
<h3>hello</h3> 
    <div id="chat"></div> 
    <form id="sent-message"> 
     <input size="35" id="message"></input> 
     <input type="submit"></input> 
    </form> 
</body> 
</html>

Quelle

2016-04-17 12:10:00 Urknecht

externe Javascript und CSS sind nicht in HTML beeinflusst, wenn der HTML-Aufruf von Node.js

Antwort

Verwandte Themen