我们想要通过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.cssvar 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.cssvar pathname = req.url;if(pathname == '/'){pathname = '/index.html'; /*默认加载的首页*/}if(pathname != '/favicon.ico'){  /*过滤请求favicon.ico*/console.log(pathname);//文件操作获取 static下面的index.htmlfs.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.cssvar pathname = req.url;if(pathname == '/'){pathname = '/index.html'; /*默认加载的首页*/}//获取文件的后缀名var extname = path.extname(pathname);if(pathname != '/favicon.ico'){  /*过滤请求favicon.ico*///console.log(pathname);//文件操作获取 static下面的index.htmlfs.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.cssvar 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.htmlfs.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){  /*获取后缀名的方法*///.htmlfs.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?214214124var 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.htmlfs.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服务就创建好了,能够成功的加载各种静态资源了。

Node.js 静态web服务相关推荐

  1. 为一个 iOS 应用编写一个简单的 Node.js/MongoDB Web 服务

    原文链接:https://github.com/nixzhu/dev-blog/blob/master/2014-04-21-write-a-simple-nodejs-mongodb-web-ser ...

  2. node.js 静态属性_如何使用静态站点和Node.js开发和部署第一个全栈式Web应用程序

    node.js 静态属性 This tutorial will show you how to convert a static website that uses HTML, CSS and Jav ...

  3. nodejs静态web服务

    项目准备 Web 服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等 Web 客户端提供文档,也可以放置网站文件,让全世界浏览:可以放置数据文件,让全世界下载.目前最主流的 ...

  4. 关于node.js的web框架的应用及并发性能测试

    "Node.js 是服务器端的 JavaScript 运行环境,它具有无阻塞(non-blocking)和事件驱动(event-driven)等的特色,Node.js 采用 V8 引擎,同样 ...

  5. Pomelo:网易开源基于 Node.js 的游戏服务端框架

    Pomelo 是基于 Node.js 的高性能.分布式游戏服务器框架.它包括基础的开发框架和相关的扩展组件(库和工具包),可以帮助你省去游戏开发枯燥中的重复劳动和底层逻辑的开发.Pomelo 不但适用 ...

  6. 十大 Node.js 的 Web 框架,快速提升工作效率

    Node.js 系统含有多种不同的结构,如 MVC.全栈.REST API 和生成器等.这些结构不仅提升了 Web 应用的开发效率,也优化了开发过程.在这里,我们收集整理了十个高效的 Node.js ...

  7. Node.js的Web后端开发调研

    1. nodejs写后端优缺点(讲解nodejs与js区别) 1.1 Node.js是什么 Node.js 是一个开源与跨平台的 JavaScript 运行时环境 在浏览器外运行 V8 JavaScr ...

  8. Node.js + Consul 实现服务注册、健康检查、配置中心

    Node.js + Consul 实现服务注册.健康检查.配置中心 在这篇文章中: 初始化 Consul 客户端 服务注册与健康检查 配置Consul管理控制台 服务配置中心实现 在Nodejs中进行 ...

  9. 浅析Nginx中各种锁实现丨Nginx中手写一个线程池丨Nginx中反向代理,正向代理,负载均衡,静态web服务丨C++后端开发

    学会nginx中锁的使用,让你对锁豁然开朗 1. 反向代理,正向代理,负载均衡,静态web服务 2. nginx 中 accept 锁实现 自旋锁 信号量 3. nginx 中 线程池 实现以及详解虚 ...

  10. node.js基于web的游戏网站毕业设计源码031726

    游戏网站的设计 摘 要 基于网络游戏的蓬勃发展,游戏网站发挥着吸引玩家和提高玩家之间的互动性的重要作用,因而,建设了一个以游戏为中心的游戏官网. 该游戏提供了一个大型的玩家交流互动平台,包括用户管理. ...

最新文章

  1. clusterProfiler对差异表达基因进行富集分析
  2. 机器学习为NASA贡献了什么?
  3. SSH框架中配置log4j的方法
  4. html方框中能放置图片么,html中的img标签你不知道的那些细节!
  5. 这是一名既能打比赛,又会发论文JD AI实验室的算法工程师,CSDN博客专家
  6. 自媒体时代的贤内助——AI 视频云
  7. java scipt 对象 函数_java script 基本函数
  8. [洪流学堂]Hololens开发高级篇3:语音(Voice)
  9. 查询php copy函数源码,PHP copy函数使用案例代码解析
  10. 二十大数据可视化工具(二)
  11. html实现多窗口同时显示,如何使webstorm同时显示多个窗口?
  12. 在secureCRT上设置常用的快捷输出按钮栏
  13. 查看表的记录最多的sqll
  14. Zabbix自定义报警提示声音
  15. SCORM的对手——LOM
  16. Java实现 LeetCode 275 H指数 II
  17. bzoj1669 Hungry Cows
  18. 四、Arcgis实现深度学习河流训练样本数据的制作(使用软件批量获取样本图片)——对已经获取到的完整面状样本数据进行处理
  19. JAVA通过Graphics2D生成表格图片
  20. 面向唇语识别的数据采集系统

热门文章

  1. STM32的IAP在线升级
  2. 什么是云迁移?云迁移的四种模式分别是?
  3. C++ 笔试面试题 ~[有答案]
  4. 怎么设置计算机 图标显示桌面快捷方式,如何设置显示桌面快捷键 设置显示桌面快捷键方法【图文】...
  5. 浅学C#(3)——C#的优点和缺点
  6. ‘keytool‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
  7. 除了框架,前端面试还问什么
  8. 源支付5.18源码/三网免挂/带云端/附源码搭建教程
  9. 堆排序(排升序为啥建大堆,排降序为啥建小堆)
  10. 双重差分法之平行趋势检验