CSS ve JS ile temel web sayfasını sunmak için node.js'yi kullanma

(geleneksel) sunucu tarafı komut dosyası (PHP) arka planından geliyorum ve yayının neyle ilgili olduğunu görmek için Düğüm ile deneme yapmaya çalışıyorum.CSS ve JS ile temel web sayfasını sunmak için node.js'yi kullanma

Amaç:, bazı stil sayfalarını ve komut dosyalarını içeren basit bir web belgesi sunar.

Benim node.js komut dosyası:

var http = require('http'); 
var fs = require('fs'); 

fs.readFile('index.html', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    http.createServer(function(request, response) { 
     response.writeHeader(200, {"Content-Type": "text/html"}); 
     response.write(html); 
     response.end(); 
    }).listen(1337, '127.0.0.1'); 
});

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset='utf-8'> 
     <title>Node.js test</title> 
     <link rel="stylesheet" media="screen" type="text/css" href="css/plugin.css" /> 
     <link rel="stylesheet" media="screen" type="text/css" href="css/xGrid.css" /> 
     <link rel="stylesheet" media="screen" type="text/css" href="css/jquery-ui/jquery-ui-1.10.1.custom.min.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
     <script src="js/slate.js"></script> 
     <script src="js/slate.portlet.js"></script> 
     <script src="js/slate.message.js"></script> 
     <script src="js/plugin.js"></script> 
    </head> 
    <body> 
     <h1 class="styled-h1">Test</h1> 
    </body> 
</html>

sorun Karşılıklı:

iki senaryo içerir Google'dan gelen CDN, belgeye düzgün şekilde yüklenir. Bununla birlikte, yerel dosya sistemimden çağrılan her stil sayfası veya komut dosyası, text/html olarak yorumlanır ve bu nedenle istenen etkide bulunmaz. Ben bu neden oluyor anlamak istiyorum

enter image description here

: İşte Google Chrome konsolundan bir görüntü var.

Not: İşleri kolaylaştırmak için Express gibi bir çerçeveyi kullanabileceğimi biliyorum ancak ilk önce temel ilkeleri almak istiyorum.

kaynak

2013-07-04 karancan

gibi bazı şeyi yapabilir Bunu yapalım cachemere adlı bir modül yazdım. Ayrıca tüm kaynaklarınızı otomatik olarak önbelleğe alır. Link: https://github.com/topcloud/cachemere – Jon

Basit: Eğer text/html için Content-Type başlığını kuruyorsun, her zaman kendinizi aşağıdaki linke tıklayın için

onaylamak için. Ayrıca, her zaman, index.html dosyanızı sunar. Bakın:

fs.readFile('index.html', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    http.createServer(function(request, response) { 
     response.writeHeader(200, {"Content-Type": "text/html"}); // <-- HERE! 
     response.write(html); // <-- HERE! 
     response.end(); 
    }).listen(1337, '127.0.0.1'); 
});

Sen URL'yi ayrıştırmak gerektiğini, size gereken istediğiniz dosyayı içindekileri okuyup varsa yanıta bunları ne yazmak bakmak aksi bir 404 hatası vermektedir. Ayrıca, doğru üstbilgileri ayarlamanız gerekir.

Hala bunu kendi başınıza yapmak istiyor musunuz?
En azından, temel bir statik dosya sunucusu olan send gibi bir şeyi deneyin.

kaynak

2013-07-04 22:13:09 gustavohenke

Sunucunuz tüm isteklere benzersiz bir yanıt vererek yanıt veriyor ... Tarayıcı CSS ve Komut Dosyaları için istekte bulunduğunda, sunucunuz bildiği tek şeyi yapıyor!

kaynak

2013-07-04 22:07:00 guy777

Sadece bakılmaksızın hangi yolu ya parametreler gönderilir tek bir şey ve bir şey yapan bir web sunucusu oluştururken: Bu MIME türü text/html ile HTML dosyasını index.html vermektedir.

CSS dosyaları için yapılan istekler göreli yol istekleridir, ör. Web tarayıcısı, css/plugin.css yüklenecek yönergeyi gördüğünde, web sunucunuzu yeni bir yolla çağırır; ancak web sunucunuz yolu yoksayar ve text/html MIME türünde index.html'u tekrar döndürür. Web tarayıcınız yanlış MIME türü ile ilgili hatalar atıyor, ancak size ne anlama gelmediğini tekrar index.html yüklediniz. http://127.0.0.1:1337/css/plugin.css

kaynak

2013-07-04 22:07:11

Neden bu reddedildi? Ya bu yanlıştır ve downvoter açıklığa kavuşturmalı, yoksa bu doğru ve muhtemelen yükseltilmeli. – mickey

Burada sadece yararlı bir yorum vardı. Açıklama için teşekkür ederim! – Kafeaulait

Aksine/contentType metne html işaret yerine, bu kullanarak yolu modülü

var filePath = req.url; 
if (filePath == '/') 
    filePath = '/index.html'; 

filePath = __dirname+filePath; 
var extname = path.extname(filePath); 
var contentType = 'text/html'; 

switch (extname) { 
    case '.js': 
     contentType = 'text/javascript'; 
     break; 
    case '.css': 
     contentType = 'text/css'; 
     break; 
} 


fs.exists(filePath, function(exists) { 

    if (exists) { 
     fs.readFile(filePath, function(error, content) { 
      if (error) { 
       res.writeHead(500); 
       res.end(); 
      } 
      else {     
       res.writeHead(200, { 'Content-Type': contentType }); 
       res.end(content, 'utf-8');     
      } 
     }); 
    }

kaynak

2014-06-17 09:48:51

CSS ve JS ile temel web sayfasını sunmak için node.js'yi kullanma

cevap

İlgili konular