例程下载: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.‘);});
Node.js静态页面展示例子2
原文地址:http://www.cnblogs.com/xiandedanteng/p/7517969.html