例程下载：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的更多相关文章

  1. 用http-server 创建node.js 静态服务器

    今天做一本书上的例子,结果代码不能正常运行,查询了一下,是语法过时了,书其实是新买的,出版不久. 过时代码如下 var connect=require('connect'); connect.crea ...

  2. node部署静态页面；node上线静态页面

    node部署静态页面上线 静态页面上线可以采用 nginx, tomcat或者node ,我们这里介绍下node部署静态页面 这里采用最简单的上线方式,我们就不用node + express + ej ...

  3. hexo —— 简单、快速、强大的Node.js静态博客框架

    hexo是一款基于Node.js的静态博客框架.目前在GitHub上已有1375 star 和 219 fork. 特性 风一般的速度 Hexo基于Node.js,支持多进程,几百篇文章也可以秒生成. ...

  4. Node.js显示页面

    首先我们先要下载并安装Nodejs,然后进入Node.js中安装supervisor, npm -g install supervisor -g表示全局模式 (无论windows哪一个用户登陆都可以使 ...

  5. 01慕课网《进击Node.js基础（一）》Node.js安装，创建例子

    版本:偶数位为稳定版本,基数为非稳定版本 - 0.6.x - 0.7.x    - 0.8.x -0.9.x    -0.10.x  -0.11.x 概念:Node.js采用谷歌浏览器的V8引擎,用C ...

  6. Node.js静态文件服务器实战[转]

    p.s. 在下面这篇文章的指导下,做了一个静态文件服务器,见:https://github.com/walkerwzy/node_static_server ==== 这是一篇阐述得比较详细的文章,从 ...

  7. Node.js静态文件服务器

    首先还是先感谢github,感谢github上提供此段源码的作者.跟昨晚看的静态文件服务器来比今天的静态文件服务器稍微复杂些,可以学到很多新的东西.仔细会发现这次的代码多了一个fs.stat函数和Re ...

  8. node.js渲染页面

    1 在软件中找到nodejs并安装(强调,安装时选默认位置) 2 复制yuedu文件夹到本地 3 在yuedu文件夹中按shift 点击右键 4 输入命令 npm install 5 安装成功后,输入 ...

  9. 使用jquery的js的页面实现例子

    var validate;var nodeId="";var modifyappId=""; addExportTaskURL = ctx + "/x ...

随机推荐

  1. Windows获取FSMO角色

    获取 FSMO 角色若要使用 Ntdsutil 实用工具获取 FSMO 角色,请按照下列步骤操作:1.登录到基于 Windows 2000 Server 或 Windows Server 2003 的 ...

  2. mac 安装 mysql 配置

    前言:下面主要介绍2种安装方法以及后续的配置,希望对大家有帮助.(推荐通过安装包的形式安装) 1. 使用安装包安装 mysql 双击打开安装文件         双击pkg文件安装         一 ...

  3. 斗地主（NOIP2015）

    原题传送门 神奇的题目.. 一开始我准备打暴力直接搜答案. 然后发现.. 无限TLE.. 因为O((logN)^14*T)BOOM.. 然后Zxyer告诉可以只DFS顺子...其他的可以一步搞出来.. ...

  4. mysql创建用户后无法登陆

    创建用户后登陆失败的原因是存在匿名用户: root@controller:~# mysql -h localhost -uaa -ppassword ERROR 1045 (28000): Acces ...

  5. vue-cli 3.0脚手架与vux的配合使用

    在最近的项目中,引用了vux,在可拓展性以及复用性,都算是比较优秀的框架了.但是美中不足的是对于vux在对于vue-cli3.0的跟进还没有同步 需要自己做下修改,同比 有赞的vant 以及 ivie ...

  6. gitlab 搭建与迁移

    #下载gitlabhttps://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el6/gitlab-ce-10.1.3-ce.0.el6.x86_64.rpm ...

  7. hdu 5157(树状数组+Manacher)

    Harry and magic string Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  8. js实现当前日期显示

    写在前面: 在做项目中,经常会用到显示当前日期这个功能,在此,记录下来,方便日后查阅. 由于功能较简单,这里就直接将代码搬上来吧 <%-- Created by IntelliJ IDEA. U ...

  9. 六. 异常处理5.多重catch语句的使用

    某些情况,由单个代码段可能引起多个异常.处理这种情况,你可以定义两个或更多的catch子句,每个子句捕获一种类型的异常.当异常被引发时,每一个catch子句被依次检查,第一个匹配异常类型的子句执行.当 ...

  10. GIF工具 | 分享几个Gif相关工具

    文章目录 LICEcap GiFResizer LICEcap LICEcap 是一款屏幕录制工具,支持导出GIF动画图片格式,轻量级.使用简单,录制过程中可以随意改变录屏范围. 下载地址: 官方地址 ...