码迷,mamicode.com
首页 > Web开发 > 详细

Node.js静态页面展示例子2

时间:2017-09-13 23:19:50      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:com   tps   path   code   css   not   ready   images   error   

例程下载: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

标签:com   tps   path   code   css   not   ready   images   error   

原文地址:http://www.cnblogs.com/xiandedanteng/p/7517969.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!