Cant Last CSS-Datei

Ich versuche, die Login-Vorlagen zu verwenden (Nahm aus: 50 Free HTML5 And CSS3 Login Forms For Your Website 201 Cant Last CSS-Datei

Meine Auswahl einrichten das ist wie:

-css 
| 
-- style.css 
- js 
| 
-- index.js 
| 
index.html

Der Kopf der Datei index.html aussieht:

<head> 
    <meta charset="UTF-8"> 
    <title>Sign-Up/Login Form</title> 
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 


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


</head>

und der Körper enthält, das umfasst scrips:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

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

Mein node.js aussieht:

// Import Required Module 
var express = require('express') 
var app = express() 
var bodyParser = require('body-parser') 


// css 
var path = require('path') 
app.use(express.static(path.join(__dirname, 'public'))); 

// Create instances 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({  
    extended: true 
})); 

// Get 
app.get('/', function (req, res) { 
    console.log('Get: /'); 
    res.sendFile('LoginTemplate/index.html', {root: __dirname }) 
}) 

/* 
app.get('css/style.css', function (req, res) { 
    console.log('Get: css/style.css'); 
    res.sendFile('css/style.css', {root: __dirname }) 
}) 
*/ 


// Listner 
app.listen(3001, function() { 
    console.log('Example app listening on port 3001!') 
})

Wenn die HTML-Datei zu laden erhalte ich die Fehlermeldung:

GET http://127.0.0.1:3001/css/style.css

Ich habe an für Lösung zu suchen versucht: Can not get CSS file

Und erstellt den öffentlichen Ordner und kopieren Sie den CSS-Ordner innerhalb, aber es funktioniert immer noch nicht.

Wie kann ich die css & js Dateien laden?

Quelle

2017-02-21 Anonymous

Wir müssen ein Verzeichnis public auf dem Stamm erstellen und Ihr Verzeichnis css darin einfügen –

// Import Required Module 
var express = require('express') 
var app = express() 
var bodyParser = require('body-parser') 

// Create instances 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({  
    extended: true 
})); 

// Get 
app.get('/', function (req, res) { 
    console.log('Get: /'); 
    res.sendFile('LoginTemplate/index.html', {root: __dirname }) 
}) 


app.get('/css/style.css', function (req, res) { 
    console.log('Get: css/style.css'); 
    res.sendFile('LoginTemplate/css/style.css', {root: __dirname }) 
}) 

app.get('/js/index.js', function (req, res) { 
    console.log('Get: js/index.js'); 
    res.sendFile('LoginTemplate/js/index.js', {root: __dirname }) 
}) 


// Listner 
app.listen(3001, function() { 
    console.log('Example app listening on port 3001!') 
})

Quelle

2017-02-21 20:13:52 user3668129

Alles sieht gut in Ihrem Code und Ordner-Setup. Von der URL, die Sie posten (http://127.0.0.1:3001/css/style.css), vermute ich, dass der Fehler in Ihrer Serverinstanz liegt. Überprüfen Sie die Definitionsdateien und stellen Sie sicher, dass der Server die Berechtigung hat, css/style.css zu lesen.

Ich habe auf dieses Problem stoßen, wenn die Datei und der Ordner nicht die richtigen Berechtigungen haben. Eine kurze Überprüfung dafür führt etwas ähnlich wie sudo chmod -R 0777 [path_to_your_project] (Linux und Mac-Systeme verwenden diesen Befehl). Dieser Befehl ermöglicht allen Benutzern und Gästen den vollen Zugriff auf das Lesen, Schreiben und Ausführen von Dateien und bietet eine schnelle Möglichkeit zur Überprüfung, ob das Problem Benutzerrechte sind.

Ich habe auch in dasselbe Problem geraten, wenn mein Webserver nicht richtig konfiguriert ist. In diesen Fällen hatte ich versehentlich dem Webserver erlaubt, alle Dateien im Stammordner (zB:/var/www) zu teilen, aber keine Unterordner, also (unter Verwendung des Beispiels) würde der Ordner/var/www/images sein vom Webserver analysiert und als geschützter Bereich angesehen. In diesem Fall hat der Webserver Zugriff, verweigert jedoch die Bereitstellung der Dateien basierend auf den Konfigurationsregeln.

Ich hoffe, eine dieser beiden Fixes hilft Ihnen, den richtigen Weg zu einer Lösung zu finden.

Viel Glück!

Quelle

2017-02-21 18:12:33

Cant Last CSS-Datei

Antwort

Verwandte Themen