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.');
});
复制代码

 













本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7517969.html,如需转载请自行联系原作者

相关文章
|
存储 Serverless 数据库
Egg.js中复用静态页面逻辑、局部刷新架构、生成验证码
Egg.js中复用静态页面逻辑、局部刷新架构、生成验证码
311 0
Egg.js中复用静态页面逻辑、局部刷新架构、生成验证码
|
JavaScript 前端开发 API
使用highlight.js高亮静态页面的语言代码
  显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串。 不过能使静态的文本能高亮显示,倒更炫酷一点。其实很简单的,引入highlight.js包,可以使用cdn上的静态资源,引入css和js: 将要显示的代码包在标签 之间即可。
1843 0
|
JavaScript 前端开发 应用服务中间件
Nginx/Apache 对图片,css,js等优化,静态页面设置过期时间
图片,CSS,JS,html设置过期时间 不是本域名的重定向到本域名 Nginx 图片,css,js等优化,静态页面设置过期时间 server{ ... location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d;#图片缓存30天 } location ~ .*\.(js|css)?$ { expi
1853 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
69 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
62 4
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
54 4
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
66 4
|
1月前
|
JavaScript 前端开发
JS:一篇文章带你搞懂什么是异步
JS:一篇文章带你搞懂什么是异步
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
66 3