例程下载：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. placeholer改变默认灰色

    input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ color:#7b642c; } input:-moz-pl ...

  2. checkbox选中 解决兼容问题

    jquery 1.9 checkbox 是否选中 if($("#chk_selectedall").prop('checked')) checkbox 选中 $("#ch ...

  3. 华为上机测试题（数字字符串转二进制-java）

    PS:此题满分,可参考 /*  * 题目:数字字符串转二进制 * 描述: 输入一串整数,将每个整数转换为二进制数,如果倒数第三个Bit是“0”,则输出“0”,如果是“1”,则输出“1”. 题目类别: ...

  4. 流畅的python第九章笔记 python风格的python

    9.1对象表示形式 __repr__和__str__这两个方法都是用于显示的,__str__是面向用户的,而__repr__面向程序员. 我们打印下面的A是默认输出这个对象的类型,我们对B进行了修改_ ...

  5. 【原创】SSIS-WMI 数据读取器任务：监控物理磁盘空间

    1.背景 随着时间的推移,我们的DW会越来越大,也就意味着磁盘空间会越来越小,那如果哪一天留意不当,就会造成磁盘空间的不足而导致ETL失败,最终影响我们的系统的数据正确性和使用,更严重的有可能导致物理 ...

  6. MVC5下的switchbutton

    最近想提高代码生成的时候,是否选择显示样式好看些,所以想到了SwitchButton. 但是碰到个问题是,添加页面的这个初始值,需要写成true或者false 包括修改页面做个判断的话,渲染的做法也是 ...

  7. (1)C#工具箱-公共控件1

    公共控件 InitializeComponent() 先说下InitializeComponent()这个方法,它在form1.cs里调用这个方法对控件进行初始化,控件的方法要在这个方法之后,否则会因 ...

  8. HDU 6240 Server（2017 CCPC哈尔滨站 K题，01分数规划 + 树状数组优化DP）

    题目链接  2017 CCPC Harbin Problem K 题意  给定若干物品,每个物品可以覆盖一个区间.现在要覆盖区间$[1, t]$. 求选出来的物品的$\frac{∑a_{i}}{∑b_ ...

  9. postgres基础知识

    postgres是连接到具体的库:   ./psql -U postgres  不指定库,默认就是用户名的同名库   ./psql -d chat -U postgres  指定chat库   pos ...

  10. HTML表格基础详解

    在现在 div 大行其道的时代,table 这个标签似乎很少被人提及,到处都是 div+css 布局的书以及博客文章,但其实 table 以及连带的其他表格标签依然在网页中占很重要的地位,特别是后台展 ...