http://www.phpstudy.net/c.php/18720.html

node不利用框架怎么实现对静态HTML、css、js的服务？

初学nodeJS，在使用nodejs构建静态文件服务器的时候，遇到下面问题。

用户请求index.html时，我使用fs.readFile读取index.html并将data返回，代码如下：

function serverStatic(req,res){

    var filePath;

    if(req.url==="/"){

        filePath =  "index.html";

    } else{

        filePath = "./" + url.parse(req.url).pathname;

    }

         fs.exists(filePath,function(err){

             if(err){

                  send404(res);

             }else{

                 fs.readFile(filePath,function(err,data){

                     if(err){

                         res.end("<h1>500</h1>服务器内部错误！");

                     }else{

                     res.writeHead(200,{'content-type':'text/html'});

                         res.end(data.toString());

                     }

                 });//fs.readfile

             }

         })//path.exists

}//serverStatic

那么问题来了，如果我的HTML页面引用了外部的css或者js，那么这些外部文件不会被加载···

这个问题怎么解决？

尝试：

index源码：

<!doctype html>

<html>

<head>

<meta charset='utf-8'>

<link href="css/index.css">

    </head>

    <body>

        <a href="flexbox.html">看看伸缩盒？</a>

    </body>

    </html>

css:

body{background-color:red;}

app.js:

var http=require('http');

var fs=require('fs');

var url=require('url');

var path=require('path');

var PORT=9090;

//添加MIME类型

var MIME_TYPE = {

    "css": "text/css",

    "gif": "image/gif",

    "html": "text/html",

    "ico": "image/x-icon",

    "jpeg": "image/jpeg",

    "jpg": "image/jpeg",

    "js": "text/javascript",

    "json": "application/json",

    "pdf": "application/pdf",

    "png": "image/png",

    "svg": "image/svg+xml",

    "swf": "application/x-shockwave-flash",

    "tiff": "image/tiff",

    "txt": "text/plain",

    "wav": "audio/x-wav",

    "wma": "audio/x-ms-wma",

    "wmv": "video/x-ms-wmv",

    "xml": "text/xml"

};

var server = http.createServer(serverStatic);

function serverStatic(req,res){

    var filePath;

    if(req.url==="/"){

        filePath =  "index.html";

    } else{

        filePath = "./" + url.parse(req.url).pathname;

    }

    fs.exists(filePath,function(err){

        if(!err){

            send404(res);

        }else{

            var ext = path.extname(filePath);

            ext = ext?ext.slice(1) : 'unknown';

            var contentType = MIME_TYPE[ext] || "text/plain";

            fs.readFile(filePath,function(err,data){

                if(err){

                    res.end("<h1>500</h1>服务器内部错误！");

                }else{

                    res.writeHead(200,{'content-type':contentType});

                    res.end(data.toString());

                }

            });//fs.readfile

        }

    })//path.exists

}

server.listen(PORT);

console.log("Server runing at port: " + PORT + ".");

function send404(res){

    res.end("<h1>404</h1><p>file not found</p>")

}

chrome查看网络：

我的文件结构

那么问题来了，你的为请求的每个资源写读取文件处理

前几天刚有人问这个问题的

http://.com/q/1010000004317668?_ea=567469

利用nodejs搭建静态文件服务器

下面是一个静态文件访问的模块

/**

 * 引入模块

 * @type {[type]}

 */

var fs   =require("fs");

var mime =require("mime");

var path =require("path");

/*******************************************************************************************/

/**

 * [Send 创建发送响应对象]

 */

function Send(){};

Send.prototype.cache={};//设置缓存变量，因为缓存变量比读取文件要快

/**

 * 错误404页面

 * @param  {[type]} res [description]

 * @return {[type]}     [description]

 */

Send.prototype.err404 = function(res){

    res.writeHead(404,{"Content-Type":"text/plain"});

    res.write("404 Not Fount !");

    res.end();

};

/**

 * 正确访问页面

 * @param  {[type]} res         [description]

 * @param  {[type]} fileName    [description]

 * @param  {[type]} fileContent [description]

 * @return {[type]}             [description]

 */

Send.prototype.sendFile = function(res,fileName,fileContent){

    res.writeHead(200,{"Content-Type":mime.lookup(path.basename(fileName))});

    res.end(fileContent);

};

/**

 * 发送静态页面方法

 * @param  {[type]} res     [description]

 * @param  {[type]} absPath [description]

 * @return {[type]}         [description]

 */

Send.prototype.serveStatic = function(res,absPath){

    var _this=this;

    if(this.cache[absPath]){

        this.sendFile(res,absPath,this.cache[absPath]);

    }else{

        fs.exists(absPath,function(exists){

            if(exists){

                fs.readFile(absPath,function(err,data){

                    if(err){

                        _this.err404(res);

                    }else{

                        _this.sendFile(res,absPath,data);

                    }

                })

            }else{

                _this.err404(res);

            }

        })

    }

};

Send.prototype.staticDirectory=function(req,url){

    var filePath=false;

    if(new RegExp("^/"+url+"/.*").test(req.url)){

         filePath=url+req.url;

    }

    var absPath="./"+filePath;

    return absPath;

}

/*******************************************************************************************/

module.exports=Send;

调用方法

/**

 * 引入HTTP组建，创建HTTP服务器的核心组件

 * @type {[type]}

 */

var http=require("http");

var sio=require("socket.io");

/**

 * 引入自定义组件，

 * @type {[type]}

 */

var staticService=require("./modules/staticService");

/*************************************************/

/**

 * 创建http服务

 * @param  {[type]} req    [description]

 * @param  {[type]} res){                 var filePath [description]

 * @return {[type]}        [description]

 */

var server = http.createServer(function(req,res){

    var send=new staticService();

    var absPath=send.staticDirectory(req,"public")

    send.serveStatic(res,absPath);

});

server.listen(8200,function(){

    console.log("Http server create success on : localhost:8200");

})

fs.exists(filePath,function(err)

如果文件存在，回掉函数的第1个参数为true

var http=require('http');

var fs=require('fs');

var url=require('url');

var path=require('path');

var PORT=9090;

//添加MIME类型

var MIME_TYPE = {

    "css": "text/css",

    "gif": "image/gif",

    "html": "text/html",

    "ico": "image/x-icon",

    "jpeg": "image/jpeg",

    "jpg": "image/jpeg",

    "js": "text/javascript",

    "json": "application/json",

    "pdf": "application/pdf",

    "png": "image/png",

    "svg": "image/svg+xml",

    "swf": "application/x-shockwave-flash",

    "tiff": "image/tiff",

    "txt": "text/plain",

    "wav": "audio/x-wav",

    "wma": "audio/x-ms-wma",

    "wmv": "video/x-ms-wmv",

    "xml": "text/xml"

};

var server = http.createServer(serverStatic);

function serverStatic(req,res){

    var filePath;

    if(req.url==="/"){

        filePath =  "CSSTest.html";

    } else{

        filePath = "./" + url.parse(req.url).pathname;

    }

    fs.exists(filePath,function(err){

        if(!err){

            send404(res);

        }else{

            var ext = path.extname(filePath);

            ext = ext?ext.slice(1) : 'unknown';

            var contentType = MIME_TYPE[ext] || "text/plain";

            fs.readFile(filePath,function(err,data){

                if(err){

                    res.end("<h1>500</h1>服务器内部错误！");

                }else{

                    res.writeHead(200,{'content-type':contentType});

                    res.end(data.toString());

                }

            });//fs.readfile

        }

    })//path.exists

}

server.listen(PORT);

console.log("Server runing at port: " + PORT + ".");

问题已解决，link css的时候，不能忘了 rel="stylesheet"

nodejs server启动写法的更多相关文章

  1. SQL Server启动的几种方法

    SQL Server 启动有以下几种方法: (1)在Control Panel——Administrative Tools——Services,找到SQL Server (XXX)进行启动. 其中XX ...

  2. Eclipse导入Maven项目,使用server 启动报错，class 找不到，

    问题发现: 1.导入maven 项目后,用server 启动,选择项中没有这个项目 解决: 说明server 没有把该项目当成web项目,需要设置 项目右键 properties  ---- proj ...

  3. dell r710 安装ubuntu 12.04 server 启动后进入initramfs解决办法

    dell r710 安装ubuntu 12.04 server 启动后进入initramfs解决办法 grub 启动菜单后加入 rootdelay=90, 如下:/boot/vmlinuz-2.6.3 ...

  4. 用issnode+IIS来托管NodeJs Server

    用issnode+IIS来托管NodeJs Server之一:安装篇 用issnode+IIS来托管NodeJs Server之二:移植 用issnode+IIS来托管NodeJs Server之三: ...

  5. 图解Android - Zygote, System Server 启动分析

    Init 是所有Linux程序的起点,而Zygote于Android,正如它的英文意思,是所有java程序的'孵化池'(玩过星际虫族的兄弟都晓得的).用ps 输出可以看到 >adb shell ...

  6. Android系统进程间通信（IPC）机制Binder中的Server启动过程源代码分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6629298 在前面一篇文章浅谈Android系 ...

  7. VisualSVN Server启动错误(0x8007042a)

    SVN Server启动错误(0x8007042a)   原因是SVN Server端口被占用 打开VisualSVN Server, 菜单->操作->Properties->Net ...

  8. Netty源码—一、server启动（1）

    Netty作为一个Java生态中的网络组件有着举足轻重的位置,各种开源中间件都使用Netty进行网络通信,比如Dubbo.RocketMQ.可以说Netty是对Java NIO的封装,比如ByteBu ...

  9. SQL SERVER启动步骤

    第一步 从注册表读取SQL SERVER启动信息 (1)Audit  Level:设置SQL SERVER是否记录用户登陆信息 Login Mode:设置SQL SERVER登陆类型是只接受windo ...

随机推荐

  1. python学习01python入门一

    在正式开启python代码的学习之旅之前,先来了解一下有关python语言的一些内容吧. python的命名,起源等等,大家自行百度了解,此处不再赘述. python是一种解释型语言,具有强调代码可读 ...

  2. Unity 极简UI框架

    写ui的时候一般追求控制逻辑和显示逻辑分离,经典的类似于MVC,其余大多都是这个模式的衍生,实际上书写的时候M是在整个游戏的底层,我更倾向于将它称之为D(Data)而不是M(Model),而C(Ctr ...

  3. linux 二级目录结构

    Linux系统里面目录的顶点都是根 /etc /etc/passwd : Linux用户登陆的文件 /etc/group : 存放Linux用户组的文件 /etc/shadow :存放用户密码的文件 ...

  4. Docker容器利用weave实现跨主机互联

    Docker容器利用weave实现跨主机互联 环境: 实现目的:实现主机A中容器1与主机B中容器1的网络互联 主机A步骤: ①下载复制weave二进制执行文件(需要internet)[root@192 ...

  5. 使用ScriptX控件进行Web横向打印

    一个需求需要采用横向打印,目前采用IE自身的打印功能(WebBrowser.ExecWB控件)很难进行横向设置,默认需要调用document.all.WebBrowser.ExecWB(8,1);打开 ...

  6. 2019 ICPC 银川网络赛 D. Take Your Seat （疯子坐飞机问题）

    Duha decided to have a trip to Singapore by plane. The airplane had nn seats numbered from 11 to nn, ...

  7. [NOI 2020 Online] 入门组T1 文具采购（洛谷 P6188）题解

    原题传送门 题目部分:(来自于考试题面,经整理) [题目描述] 小明的班上共有 n 元班费,同学们准备使用班费集体购买 3 种物品: 1.圆规,每个 7 元. 2.笔,每支 4 元. 3.笔记本,每本 ...

  8. 【NOI Online 2020】入门组 总结&&反思

    前言: 这次的NOI Online 2020 入门组我真的无力吐槽CCF的网站了,放段自己写的diss的文章,供一乐 如下:(考试后当天晚上有感而发) 今天是个好日子!!!(我都经历了什么...... ...

  9. GoF23:单例模式(singleton)

    目录 单例模式简介 常见五种单例模式的实现方式 饿汉式 懒汉式 DCL懒汉式 饿汉式改进(静态内部类式) 枚举单例 防止反射破坏单例模式 单例模式简介 核心作用:保证一个类只有一个实例,并且提供一个访 ...

  10. Maven安装本地jar包到本地仓库

    Maven 安装 JAR 包到本地仓库的命令是: mvn install:install-file -Dfile=jar包的位置 -DgroupId=上面的groupId -DartifactId=上 ...