zoukankan      html  css  js  c++  java
  • 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.');
    });
  • 相关阅读:
    Maven入门:使用Nexus搭建Maven私服及上传下载jar包
    idea 破解转(肉测好用,测试2018.4.16)
    使用spring-boot-admin对spring-boot服务进行监控(转自牛逼的人物)
    eureka集群高可用配置,亲测成功配置(转)
    Apollo-open-capacity-platform 微服务能力开发平台 (转)
    导入数据到数据库表,报错[Err] [Row1] [Imp] 1153
    .mmap文件如何打开
    web端自动化——webdriver驱动
    web端自动化——Remote应用
    svn服务器端—管理员分配权限
  • 原文地址:https://www.cnblogs.com/heyang78/p/7517969.html
Copyright © 2011-2022 走看看