Node.js 静态web服务

最新推荐文章于 2023-03-14 17:02:28 发布

阅读量2.6k

点赞数 1

分类专栏： Node.js 文章标签： node.js web服务

本文链接：https://blog.csdn.net/cckevincyh/article/details/78637576

版权

Node.js 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

我们想要通过Node.js去访问静态的页面，比如我们在浏览器输入http://localhost:8001/index.html，然后就返回index.html的信息。那么如何用Node.js实现加载静态的页面呢？

现在我们有一个static文件夹，里面包含了静态的页面资源：
这里写图片描述

首先我们要用Nodejs 创建一个 WEB 服务器

//引入http模块
var http = require('http');

//fs模块

var fs = require('fs');
http.createServer(function(req,res){



    //http://localhost:8001/news.html    /news.html
    //http://localhost:8001/index.html    /index.html

    //css/dmb.bottom.css

    var pathname = req.url;
    if(pathname == '/'){
        pathname = '/index.html'; /*默认加载的首页*/
    }

    if(pathname != '/favicon.ico'){  /*过滤请求favicon.ico*/
        console.log(pathname);
        //文件操作获取 static下面的index.html
    }

}).listen(8001);

我们通过req.url可以获取到我们所要的资源，如：/index.html,获取到pathname之后我们需要用文件操作模块，获取static资源下的index.html文件。接下来我们来完善我们的代码。

//引入http模块
var http = require('http');

//fs模块

var fs = require('fs');
http.createServer(function(req,res){

    //http://localhost:8001/news.html    /news.html
    //http://localhost:8001/index.html    /index.html

    //css/dmb.bottom.css

    var pathname = req.url;
    if(pathname == '/'){
        pathname = '/index.html'; /*默认加载的首页*/
    }

    if(pathname != '/favicon.ico'){  /*过滤请求favicon.ico*/
        console.log(pathname);
        //文件操作获取 static下面的index.html

        fs.readFile('static' + pathname,function(err,data){

            if(err){  /*没有这个文件*/
                console.log('404');
                res.end(); /*结束响应*/
            }else{ /*返回这个文件*/
                res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"});
                res.write(data);
                res.end(); /*结束响应*/
            }

        })

    }

}).listen(8001);

我们通过fs.readFile来获取static下面的pathname(如：/index.html ,最终路径： static/index.html ),如果报错，我们输出404，否则，我们把读取的信息响应给浏览器。
现在我们试一试来访问以下http://localhost:8001/index.html：
这里写图片描述

后台输出了pathname：
这里写图片描述
我们可以看到浏览器发起了很多次请求，去请求其他的相关资源，比如js，css等等。

这里写图片描述
但为什么我们在index.html看到的界面却没有完全显示，css起不到作用。
原因是：我们请求的mime type 是text/html；res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"});
所以css和js都只是以text/html的形式返回，而我们需要的是：”text/css”或者是”application/x-javascript”，所以我们继续改进我们的代码。我们现在需要根据请求资源后缀来给定对应的mime type，比如public.css 我们指定为text/css，template.js我们指定为application/x-javascript

我们来写一个方法，根据后缀获得指定的mime type。

exports.getMime=function(extname){  

    switch (extname){

        case '.html':

            return 'text/html';
        case '.css':

            return 'text/css';

        case '.js':

            return 'text/javascript';

        default:
            return 'text/html';
    }

}

接下来我们来改进我们之前的代码：


//引入http模块
var http = require('http');

//fs模块

var fs = require('fs');

//path模块
var path = require('path');  /*nodejs自带的模块*/


var mimeModel = require('./model/getmime.js');

//console.log(mime.getMime('.css'));   //获取文件类型

http.createServer(function(req,res){



    //http://localhost:8001/news.html    /news.html
    //http://localhost:8001/index.html    /index.html

    //css/dmb.bottom.css

    var pathname = req.url;
    if(pathname == '/'){
        pathname = '/index.html'; /*默认加载的首页*/
    }

    //获取文件的后缀名
    var extname = path.extname(pathname);

    if(pathname != '/favicon.ico'){  /*过滤请求favicon.ico*/
        //console.log(pathname);
        //文件操作获取 static下面的index.html

        fs.readFile('static/' + pathname,function(err,data){

            if(err){  /*没有这个文件*/

                console.log('404');

                fs.readFile('static/404.html',function(error,data404){
                    if(error){
                        console.log(error);
                        res.end(); /*结束响应*/
                    }
                    res.writeHead(404,{"Content-Type":"text/html;charset='utf-8'"});
                    res.write(data404);
                    res.end(); /*结束响应*/
                })

            }else{ /*返回这个文件*/

                var mime = mimeModel.getMime(extname);  /*获取文件类型*/
                res.writeHead(200,{"Content-Type":"" + mime + ";charset='utf-8'"});
                res.write(data);
                res.end(); /*结束响应*/
            }


        })


    }

}).listen(8001);

我们通过require('path') 引入path模块，通过path模块中的path.extname(pathname) 获得后缀名，最后通过下面这个方法

var mime = mimeModel.getMime(extname);  /*获取文件类型*/

来获取对应的mime type，最后设置响应头：
res.writeHead(200,{"Content-Type":"" + mime + ";charset='utf-8'"});
我们还对我们的找不到文件或者错误的情况进行了处理，如果error了，我们进行如下设置：

res.writeHead(404,{"Content-Type":"text/html;charset='utf-8'"});
res.write(data404);
res.end(); /*结束响应*/

设置响应状态码为404，并返回一个404页面。

我们继续访问：http://localhost:8001/index.html
这里写图片描述
可以看到css文件起到作用了。
如果我们输入一个不存在的资源路径：http://localhost:8001/111111.html
我们可以看到：

我们可以看到响应回来的.css后缀的文件，Content-Type:text/css;charset='utf-8'
这里写图片描述

但我们的代码还是有点问题，我们可以看到：
这里写图片描述

这里写图片描述

http://localhost:8001/json/all.json?41437223455954575显示不出内容
因为我们用req.url 获取到的是/json/all.json?41437223455954575，而我们实际要的是/json/all.json
这里写图片描述

我们继续改进我们的代码：


//引入http模块
var http = require('http');

//fs模块

var fs = require('fs');

//path模块
var path = require('path');  /*nodejs自带的模块*/

//url模块

var url = require('url');


var mimeModel = require('./model/getmime.js');

//console.log(mime.getMime('.css'));   //获取文件类型

http.createServer(function(req,res){



    //http://localhost:8001/news.html    /news.html
    //http://localhost:8001/index.html    /index.html

    //css/dmb.bottom.css

    var pathname = url.parse(req.url).pathname;

    console.log(pathname);

    if(pathname == '/'){
        pathname = '/index.html'; /*默认加载的首页*/
    }

    //获取文件的后缀名
    var extname = path.extname(pathname);

    if(pathname != '/favicon.ico'){  /*过滤请求favicon.ico*/
        //console.log(pathname);
        //文件操作获取 static下面的index.html

        fs.readFile('static/' + pathname,function(err,data){

            if(err){  /*没有这个文件*/

                console.log('404');

                fs.readFile('static/404.html',function(error,data404){
                    if(error){
                        console.log(error);
                    }
                    res.writeHead(404,{"Content-Type":"text/html;charset='utf-8'"});
                    res.write(data404);
                    res.end(); /*结束响应*/
                })

            }else{ /*返回这个文件*/

                var mime = mimeModel.getMime(extname);  /*获取文件类型*/
                res.writeHead(200,{"Content-Type":"" + mime + ";charset='utf-8'"});
                res.write(data);
                res.end(); /*结束响应*/
            }


        })


    }

}).listen(8001);

我们通过：url.parse(req.url).pathname 就可以获取到真正我们需要的资源路径了。这次我们再次访问index.html页面
这里写图片描述

这里写图片描述
现在我们发现我们已经可以成功的访问到刚刚的文件了，并且显示出了文件中的图片的信息了。

但是我们发现我们还有一些问题，图片jpg返回的content-type居然是text/html
这里写图片描述

所以我们要继续改进我们的代码，这次我们读取mime.json，来获取对应的mime type。


{ ".323":"text/h323" ,
  ".3gp":"video/3gpp" ,
  ".aab":"application/x-authoware-bin" ,
  ".aam":"application/x-authoware-map" ,
  ".aas":"application/x-authoware-seg" ,
  ".acx":"application/internet-property-stream" ,
  ".ai":"application/postscript" ,
  ".aif":"audio/x-aiff" ,
  ".aifc":"audio/x-aiff" ,
  ".aiff":"audio/x-aiff" ,
  ".als":"audio/X-Alpha5" ,
  ".amc":"application/x-mpeg" ,
  ".ani":"application/octet-stream" ,
  ".apk":"application/vnd.android.package-archive" ,
  ".asc":"text/plain" ,
  ".asd":"application/astound" ,
  ".asf":"video/x-ms-asf" ,
  ".asn":"application/astound" ,
  ".asp":"application/x-asap" ,
  ".asr":"video/x-ms-asf" ,
  ".asx":"video/x-ms-asf" ,
  ".au":"audio/basic" ,
  ".avb":"application/octet-stream" ,
  ".avi":"video/x-msvideo" ,
  ".awb":"audio/amr-wb" ,
  ".axs":"application/olescript" ,
  ".bas":"text/plain" ,
  ".bcpio":"application/x-bcpio" ,
  ".bin ":"application/octet-stream" ,
  ".bld":"application/bld" ,
  ".bld2":"application/bld2" ,
  ".bmp":"image/bmp" ,
  ".bpk":"application/octet-stream" ,
  ".bz2":"application/x-bzip2" ,
  ".c":"text/plain" ,
  ".cal":"image/x-cals" ,
  ".cat":"application/vnd.ms-pkiseccat" ,
  ".ccn":"application/x-cnc" ,
  ".cco":"application/x-cocoa" ,
  ".cdf":"application/x-cdf" ,
  ".cer":"application/x-x509-ca-cert" ,
  ".cgi":"magnus-internal/cgi" ,
  ".chat":"application/x-chat" ,
  ".class":"application/octet-stream" ,
  ".clp":"application/x-msclip" ,
  ".cmx":"image/x-cmx" ,
  ".co":"application/x-cult3d-object" ,
  ".cod":"image/cis-cod" ,
  ".conf":"text/plain" ,
  ".cpio":"application/x-cpio" ,
  ".cpp":"text/plain" ,
  ".cpt":"application/mac-compactpro" ,
  ".crd":"application/x-mscardfile" ,
  ".crl":"application/pkix-crl" ,
  ".crt":"application/x-x509-ca-cert" ,
  ".csh":"application/x-csh" ,
  ".csm":"chemical/x-csml" ,
  ".csml":"chemical/x-csml" ,
  ".css":"text/css" ,
  ".cur":"application/octet-stream" ,
  ".dcm":"x-lml/x-evm" ,
  ".dcr":"application/x-director" ,
  ".dcx":"image/x-dcx" ,
  ".der":"application/x-x509-ca-cert" ,
  ".dhtml":"text/html" ,
  ".dir":"application/x-director" ,
  ".dll":"application/x-msdownload" ,
  ".dmg":"application/octet-stream" ,
  ".dms":"application/octet-stream" ,
  ".doc":"application/msword" ,
  ".docx":"application/vnd.openxmlformats-officedocument.wordprocessingml.document" ,
  ".dot":"application/msword" ,
  ".dvi":"application/x-dvi" ,
  ".dwf":"drawing/x-dwf" ,
  ".dwg":"application/x-autocad" ,
  ".dxf":"application/x-autocad" ,
  ".dxr":"application/x-director" ,
  ".ebk":"application/x-expandedbook" ,
  ".emb":"chemical/x-embl-dl-nucleotide" ,
  ".embl":"chemical/x-embl-dl-nucleotide" ,
  ".eps":"application/postscript" ,
  ".epub":"application/epub+zip" ,
  ".eri":"image/x-eri" ,
  ".es":"audio/echospeech" ,
  ".esl":"audio/echospeech" ,
  ".etc":"application/x-earthtime" ,
  ".etx":"text/x-setext" ,
  ".evm":"x-lml/x-evm" ,
  ".evy":"application/envoy" ,
  ".exe":"application/octet-stream" ,
  ".fh4":"image/x-freehand" ,
  ".fh5":"image/x-freehand" ,
  ".fhc":"image/x-freehand" ,
  ".fif":"application/fractals" ,
  ".flr":"x-world/x-vrml" ,
  ".flv":"flv-application/octet-stream" ,
  ".fm":"application/x-maker" ,
  ".fpx":"image/x-fpx" ,
  ".fvi":"video/isivideo" ,
  ".gau":"chemical/x-gaussian-input" ,
  ".gca":"application/x-gca-compressed" ,
  ".gdb":"x-lml/x-gdb" ,
  ".gif":"image/gif" ,
  ".gps":"application/x-gps" ,
  ".gtar":"application/x-gtar" ,
  ".gz":"application/x-gzip" ,
  ".h":"text/plain" ,
  ".hdf":"application/x-hdf" ,
  ".hdm":"text/x-hdml" ,
  ".hdml":"text/x-hdml" ,
  ".hlp":"application/winhlp" ,
  ".hqx":"application/mac-binhex40" ,
  ".hta":"application/hta" ,
  ".htc":"text/x-component" ,
  ".htm":"text/html" ,
  ".html":"text/html" ,
  ".hts":"text/html" ,
  ".htt":"text/webviewhtml" ,
  ".ice":"x-conference/x-cooltalk" ,
  ".ico":"image/x-icon" ,
  ".ief":"image/ief" ,
  ".ifm":"image/gif" ,
  ".ifs":"image/ifs" ,
  ".iii":"application/x-iphone" ,
  ".imy":"audio/melody" ,
  ".ins":"application/x-internet-signup" ,
  ".ips":"application/x-ipscript" ,
  ".ipx":"application/x-ipix" ,
  ".isp":"application/x-internet-signup" ,
  ".it":"audio/x-mod" ,
  ".itz":"audio/x-mod" ,
  ".ivr":"i-world/i-vrml" ,
  ".j2k":"image/j2k" ,
  ".jad":"text/vnd.sun.j2me.app-descriptor" ,
  ".jam":"application/x-jam" ,
  ".jar":"application/java-archive" ,
  ".java":"text/plain" ,
  ".jfif":"image/pipeg" ,
  ".jnlp":"application/x-java-jnlp-file" ,
  ".jpe":"image/jpeg" ,
  ".jpeg":"image/jpeg" ,
  ".jpg":"image/jpeg" ,
  ".jpz":"image/jpeg" ,
  ".js":"application/x-javascript" ,
  ".jwc":"application/jwc" ,
  ".kjx":"application/x-kjx" ,
  ".lak":"x-lml/x-lak" ,
  ".latex":"application/x-latex" ,
  ".lcc":"application/fastman" ,
  ".lcl":"application/x-digitalloca" ,
  ".lcr":"application/x-digitalloca" ,
  ".lgh":"application/lgh" ,
  ".lha":"application/octet-stream" ,
  ".lml":"x-lml/x-lml" ,
  ".lmlpack":"x-lml/x-lmlpack" ,
  ".log":"text/plain" ,
  ".lsf":"video/x-la-asf" ,
  ".lsx":"video/x-la-asf" ,
  ".lzh":"application/octet-stream" ,
  ".m13":"application/x-msmediaview" ,
  ".m14":"application/x-msmediaview" ,
  ".m15":"audio/x-mod" ,
  ".m3u":"audio/x-mpegurl" ,
  ".m3url":"audio/x-mpegurl" ,
  ".m4a":"audio/mp4a-latm" ,
  ".m4b":"audio/mp4a-latm" ,
  ".m4p":"audio/mp4a-latm" ,
  ".m4u":"video/vnd.mpegurl" ,
  ".m4v":"video/x-m4v" ,
  ".ma1":"audio/ma1" ,
  ".ma2":"audio/ma2" ,
  ".ma3":"audio/ma3" ,
  ".ma5":"audio/ma5" ,
  ".man":"application/x-troff-man" ,
  ".map":"magnus-internal/imagemap" ,
  ".mbd":"application/mbedlet" ,
  ".mct":"application/x-mascot" ,
  ".mdb":"application/x-msaccess" ,
  ".mdz":"audio/x-mod" ,
  ".me":"application/x-troff-me" ,
  ".mel":"text/x-vmel" ,
  ".mht":"message/rfc822" ,
  ".mhtml":"message/rfc822" ,
  ".mi":"application/x-mif" ,
  ".mid":"audio/mid" ,
  ".midi":"audio/midi" ,
  ".mif":"application/x-mif" ,
  ".mil":"image/x-cals" ,
  ".mio":"audio/x-mio" ,
  ".mmf":"application/x-skt-lbs" ,
  ".mng":"video/x-mng" ,
  ".mny":"application/x-msmoney" ,
  ".moc":"application/x-mocha" ,
  ".mocha":"application/x-mocha" ,
  ".mod":"audio/x-mod" ,
  ".mof":"application/x-yumekara" ,
  ".mol":"chemical/x-mdl-molfile" ,
  ".mop":"chemical/x-mopac-input" ,
  ".mov":"video/quicktime" ,
  ".movie":"video/x-sgi-movie" ,
  ".mp2":"video/mpeg" ,
  ".mp3":"audio/mpeg" ,
  ".mp4":"video/mp4" ,
  ".mpa":"video/mpeg" ,
  ".mpc":"application/vnd.mpohun.certificate" ,
  ".mpe":"video/mpeg" ,
  ".mpeg":"video/mpeg" ,
  ".mpg":"video/mpeg" ,
  ".mpg4":"video/mp4" ,
  ".mpga":"audio/mpeg" ,
  ".mpn":"application/vnd.mophun.application" ,
  ".mpp":"application/vnd.ms-project" ,
  ".mps":"application/x-mapserver" ,
  ".mpv2":"video/mpeg" ,
  ".mrl":"text/x-mrml" ,
  ".mrm":"application/x-mrm" ,
  ".ms":"application/x-troff-ms" ,
  ".msg":"application/vnd.ms-outlook" ,
  ".mts":"application/metastream" ,
  ".mtx":"application/metastream" ,
  ".mtz":"application/metastream" ,
  ".mvb":"application/x-msmediaview" ,
  ".mzv":"application/metastream" ,
  ".nar":"application/zip" ,
  ".nbmp":"image/nbmp" ,
  ".nc":"application/x-netcdf" ,
  ".ndb":"x-lml/x-ndb" ,
  ".ndwn":"application/ndwn" ,
  ".nif":"application/x-nif" ,
  ".nmz":"application/x-scream" ,
  ".nokia-op-logo":"image/vnd.nok-oplogo-color" ,
  ".npx":"application/x-netfpx" ,
  ".nsnd":"audio/nsnd" ,
  ".nva":"application/x-neva1" ,
  ".nws":"message/rfc822" ,
  ".oda":"application/oda" ,
  ".ogg":"audio/ogg" ,
  ".oom":"application/x-AtlasMate-Plugin" ,
  ".p10":"application/pkcs10" ,
  ".p12":"application/x-pkcs12" ,
  ".p7b":"application/x-pkcs7-certificates" ,
  ".p7c":"application/x-pkcs7-mime" ,
  ".p7m":"application/x-pkcs7-mime" ,
  ".p7r":"application/x-pkcs7-certreqresp" ,
  ".p7s":"application/x-pkcs7-signature" ,
  ".pac":"audio/x-pac" ,
  ".pae":"audio/x-epac" ,
  ".pan":"application/x-pan" ,
  ".pbm":"image/x-portable-bitmap" ,
  ".pcx":"image/x-pcx" ,
  ".pda":"image/x-pda" ,
  ".pdb":"chemical/x-pdb" ,
  ".pdf":"application/pdf" ,
  ".pfr":"application/font-tdpfr" ,
  ".pfx":"application/x-pkcs12" ,
  ".pgm":"image/x-portable-graymap" ,
  ".pict":"image/x-pict" ,
  ".pko":"application/ynd.ms-pkipko" ,
  ".pm":"application/x-perl" ,
  ".pma":"application/x-perfmon" ,
  ".pmc":"application/x-perfmon" ,
  ".pmd":"application/x-pmd" ,
  ".pml":"application/x-perfmon" ,
  ".pmr":"application/x-perfmon" ,
  ".pmw":"application/x-perfmon" ,
  ".png":"image/png" ,
  ".pnm":"image/x-portable-anymap" ,
  ".pnz":"image/png" ,
  ".pot,":"application/vnd.ms-powerpoint" ,
  ".ppm":"image/x-portable-pixmap" ,
  ".pps":"application/vnd.ms-powerpoint" ,
  ".ppt":"application/vnd.ms-powerpoint" ,
  ".pptx":"application/vnd.openxmlformats-officedocument.presentationml.presentation" ,
  ".pqf":"application/x-cprplayer" ,
  ".pqi":"application/cprplayer" ,
  ".prc":"application/x-prc" ,
  ".prf":"application/pics-rules" ,
  ".prop":"text/plain" ,
  ".proxy":"application/x-ns-proxy-autoconfig" ,
  ".ps":"application/postscript" ,
  ".ptlk":"application/listenup" ,
  ".pub":"application/x-mspublisher" ,
  ".pvx":"video/x-pv-pvx" ,
  ".qcp":"audio/vnd.qcelp" ,
  ".qt":"video/quicktime" ,
  ".qti":"image/x-quicktime" ,
  ".qtif":"image/x-quicktime" ,
  ".r3t":"text/vnd.rn-realtext3d" ,
  ".ra":"audio/x-pn-realaudio" ,
  ".ram":"audio/x-pn-realaudio" ,
  ".rar":"application/octet-stream" ,
  ".ras":"image/x-cmu-raster" ,
  ".rc":"text/plain" ,
  ".rdf":"application/rdf+xml" ,
  ".rf":"image/vnd.rn-realflash" ,
  ".rgb":"image/x-rgb" ,
  ".rlf":"application/x-richlink" ,
  ".rm":"audio/x-pn-realaudio" ,
  ".rmf":"audio/x-rmf" ,
  ".rmi":"audio/mid" ,
  ".rmm":"audio/x-pn-realaudio" ,
  ".rmvb":"audio/x-pn-realaudio" ,
  ".rnx":"application/vnd.rn-realplayer" ,
  ".roff":"application/x-troff" ,
  ".rp":"image/vnd.rn-realpix" ,
  ".rpm":"audio/x-pn-realaudio-plugin" ,
  ".rt":"text/vnd.rn-realtext" ,
  ".rte":"x-lml/x-gps" ,
  ".rtf":"application/rtf" ,
  ".rtg":"application/metastream" ,
  ".rtx":"text/richtext" ,
  ".rv":"video/vnd.rn-realvideo" ,
  ".rwc":"application/x-rogerwilco" ,
  ".s3m":"audio/x-mod" ,
  ".s3z":"audio/x-mod" ,
  ".sca":"application/x-supercard" ,
  ".scd":"application/x-msschedule" ,
  ".sct":"text/scriptlet" ,
  ".sdf":"application/e-score" ,
  ".sea":"application/x-stuffit" ,
  ".setpay":"application/set-payment-initiation" ,
  ".setreg":"application/set-registration-initiation" ,
  ".sgm":"text/x-sgml" ,
  ".sgml":"text/x-sgml" ,
  ".sh":"application/x-sh" ,
  ".shar":"application/x-shar" ,
  ".shtml":"magnus-internal/parsed-html" ,
  ".shw":"application/presentations" ,
  ".si6":"image/si6" ,
  ".si7":"image/vnd.stiwap.sis" ,
  ".si9":"image/vnd.lgtwap.sis" ,
  ".sis":"application/vnd.symbian.install" ,
  ".sit":"application/x-stuffit" ,
  ".skd":"application/x-Koan" ,
  ".skm":"application/x-Koan" ,
  ".skp":"application/x-Koan" ,
  ".skt":"application/x-Koan" ,
  ".slc":"application/x-salsa" ,
  ".smd":"audio/x-smd" ,
  ".smi":"application/smil" ,
  ".smil":"application/smil" ,
  ".smp":"application/studiom" ,
  ".smz":"audio/x-smd" ,
  ".snd":"audio/basic" ,
  ".spc":"application/x-pkcs7-certificates" ,
  ".spl":"application/futuresplash" ,
  ".spr":"application/x-sprite" ,
  ".sprite":"application/x-sprite" ,
  ".sdp":"application/sdp" ,
  ".spt":"application/x-spt" ,
  ".src":"application/x-wais-source" ,
  ".sst":"application/vnd.ms-pkicertstore" ,
  ".stk":"application/hyperstudio" ,
  ".stl":"application/vnd.ms-pkistl" ,
  ".stm":"text/html" ,
  ".svg":"image/svg+xml" ,
  ".sv4cpio":"application/x-sv4cpio" ,
  ".sv4crc":"application/x-sv4crc" ,
  ".svf":"image/vnd" ,
  ".svg":"image/svg+xml" ,
  ".svh":"image/svh" ,
  ".svr":"x-world/x-svr" ,
  ".swf":"application/x-shockwave-flash" ,
  ".swfl":"application/x-shockwave-flash" ,
  ".t":"application/x-troff" ,
  ".tad":"application/octet-stream" ,
  ".talk":"text/x-speech" ,
  ".tar":"application/x-tar" ,
  ".taz":"application/x-tar" ,
  ".tbp":"application/x-timbuktu" ,
  ".tbt":"application/x-timbuktu" ,
  ".tcl":"application/x-tcl" ,
  ".tex":"application/x-tex" ,
  ".texi":"application/x-texinfo" ,
  ".texinfo":"application/x-texinfo" ,
  ".tgz":"application/x-compressed" ,
  ".thm":"application/vnd.eri.thm" ,
  ".tif":"image/tiff" ,
  ".tiff":"image/tiff" ,
  ".tki":"application/x-tkined" ,
  ".tkined":"application/x-tkined" ,
  ".toc":"application/toc" ,
  ".toy":"image/toy" ,
  ".tr":"application/x-troff" ,
  ".trk":"x-lml/x-gps" ,
  ".trm":"application/x-msterminal" ,
  ".tsi":"audio/tsplayer" ,
  ".tsp":"application/dsptype" ,
  ".tsv":"text/tab-separated-values" ,
  ".ttf":"application/octet-stream" ,
  ".ttz":"application/t-time" ,
  ".txt":"text/plain" ,
  ".uls":"text/iuls" ,
  ".ult":"audio/x-mod" ,
  ".ustar":"application/x-ustar" ,
  ".uu":"application/x-uuencode" ,
  ".uue":"application/x-uuencode" ,
  ".vcd":"application/x-cdlink" ,
  ".vcf":"text/x-vcard" ,
  ".vdo":"video/vdo" ,
  ".vib":"audio/vib" ,
  ".viv":"video/vivo" ,
  ".vivo":"video/vivo" ,
  ".vmd":"application/vocaltec-media-desc" ,
  ".vmf":"application/vocaltec-media-file" ,
  ".vmi":"application/x-dreamcast-vms-info" ,
  ".vms":"application/x-dreamcast-vms" ,
  ".vox":"audio/voxware" ,
  ".vqe":"audio/x-twinvq-plugin" ,
  ".vqf":"audio/x-twinvq" ,
  ".vql":"audio/x-twinvq" ,
  ".vre":"x-world/x-vream" ,
  ".vrml":"x-world/x-vrml" ,
  ".vrt":"x-world/x-vrt" ,
  ".vrw":"x-world/x-vream" ,
  ".vts":"workbook/formulaone" ,
  ".wav":"audio/x-wav" ,
  ".wax":"audio/x-ms-wax" ,
  ".wbmp":"image/vnd.wap.wbmp" ,
  ".wcm":"application/vnd.ms-works" ,
  ".wdb":"application/vnd.ms-works" ,
  ".web":"application/vnd.xara" ,
  ".wi":"image/wavelet" ,
  ".wis":"application/x-InstallShield" ,
  ".wks":"application/vnd.ms-works" ,
  ".wm":"video/x-ms-wm" ,
  ".wma":"audio/x-ms-wma" ,
  ".wmd":"application/x-ms-wmd" ,
  ".wmf":"application/x-msmetafile" ,
  ".wml":"text/vnd.wap.wml" ,
  ".wmlc":"application/vnd.wap.wmlc" ,
  ".wmls":"text/vnd.wap.wmlscript" ,
  ".wmlsc":"application/vnd.wap.wmlscriptc" ,
  ".wmlscript":"text/vnd.wap.wmlscript" ,
  ".wmv":"audio/x-ms-wmv" ,
  ".wmx":"video/x-ms-wmx" ,
  ".wmz":"application/x-ms-wmz" ,
  ".wpng":"image/x-up-wpng" ,
  ".wps":"application/vnd.ms-works" ,
  ".wpt":"x-lml/x-gps" ,
  ".wri":"application/x-mswrite" ,
  ".wrl":"x-world/x-vrml" ,
  ".wrz":"x-world/x-vrml" ,
  ".ws":"text/vnd.wap.wmlscript" ,
  ".wsc":"application/vnd.wap.wmlscriptc" ,
  ".wv":"video/wavelet" ,
  ".wvx":"video/x-ms-wvx" ,
  ".wxl":"application/x-wxl" ,
  ".x-gzip":"application/x-gzip" ,
  ".xaf":"x-world/x-vrml" ,
  ".xar":"application/vnd.xara" ,
  ".xbm":"image/x-xbitmap" ,
  ".xdm":"application/x-xdma" ,
  ".xdma":"application/x-xdma" ,
  ".xdw":"application/vnd.fujixerox.docuworks" ,
  ".xht":"application/xhtml+xml" ,
  ".xhtm":"application/xhtml+xml" ,
  ".xhtml":"application/xhtml+xml" ,
  ".xla":"application/vnd.ms-excel" ,
  ".xlc":"application/vnd.ms-excel" ,
  ".xll":"application/x-excel" ,
  ".xlm":"application/vnd.ms-excel" ,
  ".xls":"application/vnd.ms-excel" ,
  ".xlsx":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ,
  ".xlt":"application/vnd.ms-excel" ,
  ".xlw":"application/vnd.ms-excel" ,
  ".xm":"audio/x-mod" ,
  ".xml":"text/plain",
  ".xml":"application/xml",
  ".xmz":"audio/x-mod" ,
  ".xof":"x-world/x-vrml" ,
  ".xpi":"application/x-xpinstall" ,
  ".xpm":"image/x-xpixmap" ,
  ".xsit":"text/xml" ,
  ".xsl":"text/xml" ,
  ".xul":"text/xul" ,
  ".xwd":"image/x-xwindowdump" ,
  ".xyz":"chemical/x-pdb" ,
  ".yz1":"application/x-yz1" ,
  ".z":"application/x-compress" ,
  ".zac":"application/x-zaurus-zac" ,
  ".zip":"application/zip" ,
  ".json":"application/json"
}

我们来写一个方法来读取我们的mime.json
我先说下面这次操作可能是我们第一时间会想到的，但这种方法错误的，我们来看：

exports.getMime=function(fs,extname){  /*获取后缀名的方法*/

  //.html

    fs.readFile('./mime.json',function(err,data){

        if(err){
            console.log('mime.json文件不存在');
            return false;
        }
        //console.log(data.toString());

        var Mimes=JSON.parse(data.toString());

        console.log(Mimes[extname]);

        return Mimes[extname] || 'text/html';

    });

}

我们通过文件模块操作mime.json文件，将读出来的数据通过JSON.parse转化为json对象，之后我们通过我们传进来的后缀，返回响应的mime type
比如，我们的后缀是.css,我们就通过：”.css”:”text/css” ，最后return对应的text/css。

上面看起来没什么问题，我们来看看我们写的代码会有什么结果：


//引入http模块
var http=require('http');

//fs模块

var fs=require('fs');

//path模块
var path=require('path');  /*nodejs自带的模块*/

//url模块

var url=require('url');


var mimeModel=require('./model/getmimefromfile.js');


//获取文件类型

console.log("mime type : " + mimeModel.getMime(fs, '.css'));

我们可以看到后台输出：
这里写图片描述
先打印出了undefined，后面才获取到text/css，这个原因就是因为Node.js的异步的原因。
在fs.readFile还没执行完，还没return最后的结果的时候，主程序已经结束了,所以这个时候获取的值自然是undefined。
所以上面这种写法是错误的。

我们可以改写成用同步的方式去读取文件：

exports.getMime=function(fs,extname){  /*获取后缀名的方法*/


    //把读取数据改成同步
    var data=fs.readFileSync('./mime.json');
    //data.toString() 转换成json字符串
    var Mimes=JSON.parse(data.toString());  /*把json字符串转换成json对象*/
    return Mimes[extname] || 'text/html';


}

这里写图片描述

如果我们想要继续使用异步操作该怎么办？
我们可以通过Nodejs 回调来处理异步
下面我来举个例子说明如何用回调来处理异步：

//错误的写法：  
function getData (){ 
    // 模拟请求数据     
    var result=''; 
    setTimeout(function(){         
         result='这是请求到的数据'  
    },200);     
    return result; 
 }  
console.log( getData ()); /* 异步导致请求不到数据 */

// 正确的处理异步 ： 
function getData (callback){
     // 模拟请求数据     
     var result='';     
     setTimeout (function(){         
         result='这是请求到的数据'; 
         callback(result);     
     },200); 
} 
getData (function( data ){ 
    console.log(data); 
});

接下来我们来改造我们的代码：

exports.getMime=function(fs,extname,callback){  /*获取后缀名的方法*/

    fs.readFile('./mime.json',function(err,data){

        if(err){
            console.log('mime.json文件不存在');
            return false;
        }
        //console.log(data.toString());

        var Mimes=JSON.parse(data.toString());

        var result= Mimes[extname] || 'text/html';

        callback(result)

    });


}


//引入http模块
var http=require('http');

//fs模块

var fs = require('fs');

//path模块
var path = require('path');  /*nodejs自带的模块*/

//url模块

var url = require('url');

//引入扩展名的方法是在文件里面获取到的。

var mimeModel = require('./model/getmimefromfile.js');

//console.log(mimeModel.getMime('.css'));   //获取文件类型

http.createServer(function(req,res){



    //http://localhost:8001/news.html    /news.html
    //http://localhost:8001/index.html    /index.html

    //css/dmb.bottom.css

    //xxx.json?214214124

    var pathname = url.parse(req.url).pathname;

    console.log(pathname);

    if(pathname == '/'){
        pathname = '/index.html'; /*默认加载的首页*/
    }

    //获取文件的后缀名
    var extname = path.extname(pathname);

    if(pathname != '/favicon.ico'){  /*过滤请求favicon.ico*/
        //console.log(pathname);
        //文件操作获取 static下面的index.html

        fs.readFile('static/' + pathname,function(err,data){

            if(err){  /*没有这个文件*/

                console.log('404');

                fs.readFile('static/404.html',function(error,data404){
                    if(error){
                        console.log(error);
                    }
                    res.writeHead(404,{"Content-Type":"text/html;charset='utf-8'"});
                    res.write(data404);
                    res.end(); /*结束响应*/
                })

            }else{ /*返回这个文件*/

                var mime = mimeModel.getMime(fs,extname,function(mime){
                    res.writeHead(200,{"Content-Type":"" + mime + ";charset='utf-8'"});
                    res.write(data);
                    res.end(); /*结束响应*/
                });
            }
        })

    }

}).listen(8001);

我们继续访问我们的index.html：
这里写图片描述

这里写图片描述

现在我们一个静态web服务就创建好了，能够成功的加载各种静态资源了。

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Node.js 静态web服务

我们想要通过Node.js去访问静态的页面，比如我们在浏览器输入http://localhost:8001/index.html，然后就返回index.html的信息。那么如何用Node.js实现加载静态的页面呢？现在我们有一个static文件夹，里面包含了静态的页面资源：首先我们要用Nodejs 创建一个 WEB 服务器//引入http模块var http = require('http')
复制链接

扫一扫