2016-06-20 9 views
0

Aus irgendeinem Grund habe ich meine CSS-Datei an meine HTML-Datei angehängt. Und dann öffne ich die HTML-Datei mit Express im Knoten js. Die CSS-Datei wird jedoch nicht geöffnet, wenn ich den Webserver über den Knoten js austrage. Ich dachte, da die CSS-Datei in HTML enthalten ist, dass es laufen sollte ??CSS-Datei funktioniert nicht in NODE js

html

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
</head> 
    <body> 
    <h1>Reading in Value</h1> 
    <form action="/" method="post" > 
    <br/> 
    <label>Enter a UDP command in hex</label> 
    <br/><br/> 
    <input type="number" name="number" id="number"> 
    <br/><br/> 
    <input type="submit" value="Submit" name="submit"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </form> 
    </body> 
</html> 

Knoten js

//Sending UDP message to TFTP server 
//dgram modeule to create UDP socket 
var express= require('express') 
var fs= require('fs') 

var util = require('util') 
var dgram= require('dgram') 
var client= dgram.createSocket('udp4') 
var bodyParser = require('body-parser') 
var app = express() 
var app2= express() 
// parse application/x-www-form-urlencoded 
app.use(bodyParser.urlencoded({ extended: false })) 
// parse application/json 
app.use(bodyParser.json()) 

//Reading in the html gile 
app.get('/', function(req, res){ 
    var html = fs.readFileSync('index2.html'); 
    res.writeHead(200, {'Content-Type': 'text/html'}); 
    res.end(html); 
}); 
//Sends user command utp 
app.post('/', function(req, res){ 
//Define the host and port values 
var HOST= '192.168.0.172'; 
var PORT= 69; 
//buffer with hex commands 
var message = new Buffer(req.body.number, 'hex'); 
//Sends packets to TFTP 
client.send(message, 0, message.length, PORT, HOST, function (err, bytes) { 

     if (err) { 
      throw err; 
     } 
     res.send('UDP message sent to ' + HOST +':'+ PORT); 

    }); 
}); 

//CREATES ANOTHER PORT 
app2.get('/', function(req, res){ 
client.on('message', function (message) { 
    res.send('received a message: ' + message); 
    }); 
}); 


app.listen(3000, "192.168.0.136"); 
app2.listen(8000, "192.168.0.136"); 
console.log('Listening at 192.168.0.172:3000 and Recieve message will be on 192.168.0.172:8000') 

Antwort

4

<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> teilt den Browser an /style.css (mit GET), um den Server für die CSS zu fragen.

Sehen Sie sich Ihren Servercode an. Sie haben ihm gesagt, was mit GET / (app.get('/', function(req, res){ usw.) zu tun ist, und Sie haben ihm gesagt, was Sie für POST / tun können, aber Sie haben ihm nicht gesagt, was Sie für GET /style.css tun sollen.

Die Express manual deckt dies ab.

+1

TL: DR verwenden express.static, um statische Dateien wie css, js usw. zu speichern. – shash7

1

Überall dort, wo Sie Ihre Dateien aus sind dient, müssen Sie im Express-Config wie folgt festgelegt:

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

Dies würde funktionieren, wenn Sie statische Dateien sind in einem Ordner gespeichert werden public genannt . Weitere Informationen finden Sie unter diesem Link: http://expressjs.com/en/starter/static-files.html