例程下载：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. sublime text常用快捷键及多行列模式批量操作教程

    列模式 苹果:OS X -鼠标左键+Option -或者鼠标中键 -增加选择:Command,减少选择:Command+Shift 2 Windows: -鼠标右键+Shift -或者鼠标中键 -增加 ...

  2. 关于tbody js取法兼容。

    本来jquery就是为了兼容才用的,动态添加表格的时候,ie必须要append 到tbody上,不然无法取上. 而chrome等则可以,最终还是选appendto tobody

  3. 结构型设计模式之组合模式(Composite)

    结构 意图 将对象组合成树形结构以表示“部分-整体”的层次结构.C o m p o s i t e 使得用户对单个对象和组合对象的使用具有一致性. 适用性 你想表示对象的部分-整体层次结构. 你希望用 ...

  4. ClientScript.RegisterClientScriptBlock 不执行

    ClientScript.RegisterClientScriptBlock 不执行 页面中 form标签必须加入 runat=server

  5. (九)ubuntu解决resolv.conf被重写问题

    解决resolv.conf被重写问题 来源:http://www.cnblogs.com/lanxuezaipiao/p/3613497.html 第二步中你虽然配置了DNS,但是每次重启虚拟机或重启 ...

  6. 第十四届华中科技大学程序设计竞赛 K Walking in the Forest【二分答案/最小化最大值】

    链接:https://www.nowcoder.com/acm/contest/106/K 来源:牛客网 题目描述 It's universally acknowledged that there'r ...

  7. kibana-metric

    1. Visualize 新建图形 2. 选择图形类型 3. 选择索引 4. 设置metric参数 4.1 count 4.2 unique count 5. 保存图形

  8. [BZOJ 1800] 飞行棋

    Link: BZOJ 1800 传送门 Solution: $O(n^4)$…… Code: #include <bits/stdc++.h> using namespace std; ] ...

  9. NOIP 2017 赛后反思 [补档]

    首先写一下比赛的情况: D1: T1: 之前做过类似的题目, 因而知道大致的结论, 迅速完成. T2: 貌似直接模拟就可以了, 涉及到字符串信息提取, 比较麻烦, 因而想放到最后做. T3: 非常简洁 ...

  10. asp.net mvc 生成二维码

    生成二维码,帮助类: using Gma.QrCodeNet.Encoding; using Gma.QrCodeNet.Encoding.Windows.Render; using System; ...