例程下载:https://files.cnblogs.com/files/xiandedanteng/nodejsStaticHtmlSample.rar
页面效果:
Html页面代码(注意用文本编辑器如Editplus3保存文件时要指定编码为UTF-8,否则容易出现乱码):
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>Node.js静态页面展示</title> <link rel='stylesheet' href='/css/style.css'/> <!-- <script src="/js/jquery-1.7.2.min.js" type="text/javascript"/> 这样写整个页面出不来--> <script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="/js/test.js" type="text/javascript"></script> </head> <body onload="run()"> <div class="main"> <div class="content"> <div> <img src="/img/jkx.png"/> </div> </div> </div> <div class="side"> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> <li>菜单四</li> </ul> </div> </body> </html> <script type="text/javascript"> <!-- function run(){ //changeLiText(); } /***************************************************** * 窗口载入时调用的启动函数 *****************************************************/ $(document).ready(function() { $(".side ul li").html("1"); }); //--> </script>
server.js代码:
var http=require('http'); var fs=require('fs'); var path=require('path'); var mime=require('mime'); var cache={}; function send404(response){ response.writeHead(404,{'Content-Type':'text/plain'}); response.write('Error 404:resource you requested not found.'); response.end(); } function sendFile(response,filePath,fileContents){ response.writeHead(200,{'Content-Type':mime.lookup(path.basename(filePath))}); response.end(fileContents); } function serveStatic(response,cache,absPath){ if(cache[absPath]){ sendFile(response,absPath,cache[absPath]); }else{ fs.exists(absPath,function(exists){ if(exists){ fs.readFile(absPath,function(err,data){ if(err){ send404(response); }else{ cache[absPath]=data; sendFile(response,absPath,data) } } ); }else{ send404(response); } } ); } } var server=http.createServer(function(request,response){ var filePath=false; if(request.url=="/"){ filePath='public/index.html'; }else{ filePath='public'+request.url; } var absPath='./'+filePath; serveStatic(response,cache,absPath); } ); server.listen(3000,function(){ console.log('Server is listenning on port 3000.'); });