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


    例程下载: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.');
    });
  • 相关阅读:
    (转)AspNetPager分页控件的使用方法 (1)
    对GridView控件的操作:GridView控件的HyperLinkField超链接数据行
    JS实现在Repeater控件中创建可隐藏区域的代码
    Asp.net弹出窗口大全
    AspNetPager分页控件使用方法 (2)
    解决mapXtreme地图更新闪屏
    绝对路径与相对路径的区别【2】release和debug这两种情况下对本地文件操作不一致的问题
    今天开始添加点文章
    第一篇博客~~
    使用 PIVOT 和 UNPIVOT实现行转列,列转行
  • 原文地址:https://www.cnblogs.com/heyang78/p/7517969.html
Copyright © 2020-2023  润新知