新人请教：怎么获得客户端的js、css文件？
初学nodejs，希望直接输入localhost：8080就能获得html和客户端的js、css。 服务器端部分代码： function handler (req, res) { res.writeHead(200);
fs.readFile(__dirname + ‘/index.html’, function (err, data) { if (err) { res.writeHead(500); return res.end(‘Error loading index.html’); } res.writeHead(200); res.end(data); }); } index.html部分代码： <script src=“clientjs/Lib.js”></script>
可是输入localhost：8080只能得到index.html，得不到Lib.js，请问大家怎么写才可以从服务器端获取客户端需要的所有文件，谢谢！
24 回复
谢谢你的回复，如果把客户端的js代码直接写入index.html还行，但是要把客户端js和index.html分开就不知道怎么写了，我现在急需一个这样的demo，还希望你能知道一下，多谢！
@mingshuan 你先别急着写，耐心看完这个入门教程先，磨刀不误砍柴工嘛。其中关于“路由”的部分有讲到怎样处理不同的URL请求。 真正做东西肯定要用框架，但是基本原理还是要了解一下的。
@mingshuan 你需要一个简单的 Web 服务器，去 NodeJs 的第三方模块里面找找就行了，你目前需要的是恶补一下基本的互联网知识。
NodeJs 只是一个运行平台，离开了第三方模块，什么用处也没有。
要想传递不同的资源（html、js、css、image、voice、video等），如果使用原生写法，就要加入不同的content-type，以css（Content-Type:‘text/css’）为例子：
res.writeHeader(200,{'Content-Type':'text/css'});
内嵌资源和下载资源也通过这个发生变化。另外发一份ContentType的不完整的列表。需要注意的是，里面会有重复的，原因是他提供了内嵌和下载2中区别，例如’.jpg’:‘image/jpeg’和’.jpg’:‘application/x-jpg’,前者是资源内嵌，后者是资源下载。
/**
* ContentType常量
*/
DEFAULT_CONTENT_TYPE = 'application/octet-stream';
//上传类型
UPLOAD_CONTENT_TYPE = 'multipart/form-data';
CONTENT_TYPE = {
'':'application/octet-stream',
'.':'application/octet-stream',
'.*':'application/octet-stream',
'.001':'application/x-001',
'.301':'application/x-301',
'.323':'text/h323',
'.906':'application/x-906',
'.907':'drawing/907',
'.a11':'application/x-a11',
'.acp':'audio/x-mei-aac',
'.ai':'application/postscript',
'.aif':'audio/aiff',
'.aifc':'audio/aiff',
'.aiff':'audio/aiff',
'.anv':'application/x-anv',
'.asa':'text/asa',
'.asf':'video/x-ms-asf',
'.asp':'text/asp',
'.asx':'video/x-ms-asf',
'.au':'audio/basic',
'.avi':'video/avi',
'.awf':'application/vnd.adobe.workflow',
'.biz':'text/xml',
'.bmp':'application/x-bmp',
'.bot':'application/x-bot',
'.c4t':'application/x-c4t',
'.c90':'application/x-c90',
'.cal':'application/x-cals',
'.cat':'application/s-pki.seccat',
'.cdf':'application/x-netcdf',
'.cdr':'application/x-cdr',
'.cel':'application/x-cel',
'.cer':'application/x-x509-ca-cert',
'.cg4':'application/x-g4',
'.cgm':'application/x-cgm',
'.cit':'application/x-cit',
'.class':'java/*',
'.cml':'text/xml',
'.cmp':'application/x-cmp',
'.cmx':'application/x-cmx',
'.cot':'application/x-cot',
'.crl':'application/pkix-crl',
'.crt':'application/x-x509-ca-cert',
'.csi':'application/x-csi',
'.css':'text/css',
'.cut':'application/x-cut',
'.dbf':'application/x-dbf',
'.dbm':'application/x-dbm',
'.dbx':'application/x-dbx',
'.dcd':'text/xml',
'.dcx':'application/x-dcx',
'.der':'application/x-x509-ca-cert',
'.dgn':'application/x-dgn',
'.dib':'application/x-dib',
'.dll':'application/x-msdownload',
'.doc':'application/msword',
'.dot':'application/msword',
'.drw':'application/x-drw',
'.dtd':'text/xml',
'.dwf':'Model/vnd.dwf',
'.dwf':'application/x-dwf',
'.dwg':'application/x-dwg',
'.dxb':'application/x-dxb',
'.dxf':'application/x-dxf',
'.edn':'application/vnd.adobe.edn',
'.emf':'application/x-emf',
'.eml':'message/rfc822',
'.ent':'text/xml',
'.epi':'application/x-epi',
'.eps':'application/x-ps',
'.eps':'application/postscript',
'.etd':'application/x-ebx',
'.exe':'application/x-msdownload',
'.fax':'image/fax',
'.fdf':'application/vnd.fdf',
'.fif':'application/fractals',
'.fo':'text/xml',
'.frm':'application/x-frm',
'.g4':'application/x-g4',
'.gbr':'application/x-gbr',
'.gcd':'application/x-gcd',
'.gif':'image/gif',
'.gl2':'application/x-gl2',
'.gp4':'application/x-gp4',
'.hgl':'application/x-hgl',
'.hmr':'application/x-hmr',
'.hpg':'application/x-hpgl',
'.hpl':'application/x-hpl',
'.hqx':'application/mac-binhex40',
'.hrf':'application/x-hrf',
'.hta':'application/hta',
'.htc':'text/x-component',
'.htm':'text/html',
'.html':'text/html',
'.htt':'text/webviewhtml',
'.htx':'text/html',
'.icb':'application/x-icb',
'.ico':'image/x-icon',
'.ico':'application/x-ico',
'.iff':'application/x-iff',
'.ig4':'application/x-g4',
'.igs':'application/x-igs',
'.iii':'application/x-iphone',
'.img':'application/x-img',
'.ins':'application/x-internet-signup',
'.isp':'application/x-internet-signup',
'.IVF':'video/x-ivf',
'.java':'java/*',
'.jfif':'image/jpeg','.jpe':'image/jpeg',
'.jpe':'application/x-jpe',
'.jpeg':'image/jpeg',
'.jpg':'image/jpeg',
// '.jpg':'application/x-jpg',
// '.js':'application/x-javascript',//老浏览器不支持
'.js':'text/javascript',//老属性//是用老的还是新的，等待测试
'.json':'text/javascript',//我自己加的
'.jsp':'text/html',
'.la1':'audio/x-liquid-file',
'.lar':'application/x-laplayer-reg',
'.latex':'application/x-latex',
'.lavs':'audio/x-liquid-secure',
'.lbm':'application/x-lbm',
'.lmsff':'audio/x-la-lms',
'.ls':'application/x-javascript',
'.ltr':'application/x-ltr',
'.m1v':'video/x-mpeg',
'.m2v':'video/x-mpeg',
'.m3u':'audio/mpegurl',
'.m4e':'video/mpeg4',
'.mac':'application/x-mac',
'.man':'application/x-troff-man',
'.math':'text/xml',
'.mdb':'application/msaccess',
'.mdb':'application/x-mdb',
'.mfp':'application/x-shockwave-flash',
'.mht':'message/rfc822',
'.mhtml':'message/rfc822',
'.mi':'application/x-mi',
'.mid':'audio/mid',
'.midi':'audio/mid',
'.mil':'application/x-mil',
'.mml':'text/xml',
'.mnd':'audio/x-musicnet-download',
'.mns':'audio/x-musicnet-stream',
'.mocha':'application/x-javascript',
'.movie':'video/x-sgi-movie',
'.mp1':'audio/mp1',
'.mp2':'audio/mp2',
'.mp2v':'video/mpeg',
'.mp3':'audio/mp3',
'.mp4':'video/mp4',
'.mpa':'video/x-mpg',
'.mpd':'application/-project',
'.mpe':'video/x-mpeg',
'.mpeg':'video/mpg',
'.mpg':'video/mpg',
'.mpga':'audio/rn-mpeg',
'.mpp':'application/-project',
'.mps':'video/x-mpeg',
'.mpt':'application/-project',
'.mpv':'video/mpg',
'.mpv2':'video/mpeg',
'.mpw':'application/s-project',
'.mpx':'application/-project',
'.mtx':'text/xml',
'.mxp':'application/x-mmxp',
'.net':'image/pnetvue',
'.nrf':'application/x-nrf',
'.nws':'message/rfc822',
'.odc':'text/x-ms-odc',
'.out':'application/x-out',
'.p10':'application/pkcs10',
'.p12':'application/x-pkcs12',
'.p7b':'application/x-pkcs7-certificates',
'.p7c':'application/pkcs7-mime',
'.p7m':'application/pkcs7-mime',
'.p7r':'application/x-pkcs7-certreqresp',
'.p7s':'application/pkcs7-signature',
'.pc5':'application/x-pc5',
'.pci':'application/x-pci',
'.pcl':'application/x-pcl',
'.pcx':'application/x-pcx',
'.pdf':'application/pdf',
'.pdf':'application/pdf',
'.pdx':'application/vnd.adobe.pdx',
'.pfx':'application/x-pkcs12',
'.pgl':'application/x-pgl',
'.pic':'application/x-pic',
'.pko':'application-pki.pko',
'.pl':'application/x-perl',
'.plg':'text/html',
'.pls':'audio/scpls',
'.plt':'application/x-plt',
'.png':'image/png',
// '.png':'application/x-png',
'.pot':'applications-powerpoint',
'.ppa':'application/vs-powerpoint',
'.ppm':'application/x-ppm',
'.pps':'application-powerpoint',
'.ppt':'applications-powerpoint',
'.ppt':'application/x-ppt',
// '.pr':'application/x-pr',
'.prf':'application/pics-rules',
'.prn':'application/x-prn',
'.prt':'application/x-prt',
'.ps':'application/x-ps',
'.ps':'application/postscript',
'.ptn':'application/x-ptn',
'.pwz':'application/powerpoint',
'.r3t':'text/vnd.rn-realtext3d',
'.ra':'audio/vnd.rn-realaudio',
'.ram':'audio/x-pn-realaudio',
'.ras':'application/x-ras',
'.rat':'application/rat-file',
'.rdf':'text/xml',
'.rec':'application/vnd.rn-recording',
'.red':'application/x-red',
'.rgb':'application/x-rgb',
'.rjs':'application/vnd.rn-realsystem-rjs',
'.rjt':'application/vnd.rn-realsystem-rjt',
'.rlc':'application/x-rlc',
'.rle':'application/x-rle',
'.rm':'application/vnd.rn-realmedia',
'.rmf':'application/vnd.adobe.rmf',
'.rmi':'audio/mid',
'.rmj':'application/vnd.rn-realsystem-rmj',
'.rmm':'audio/x-pn-realaudio',
'.rmp':'application/vnd.rn-rn_music_package',
'.rms':'application/vnd.rn-realmedia-secure',
'.rmvb':'application/vnd.rn-realmedia-vbr',
'.rmx':'application/vnd.rn-realsystem-rmx',
'.rnx':'application/vnd.rn-realplayer',
'.rp':'image/vnd.rn-realpix',
'.rpm':'audio/x-pn-realaudio-plugin',
'.rsml':'application/vnd.rn-rsml',
'.rt':'text/vnd.rn-realtext',
'.rtf':'application/msword',
'.rtf':'application/x-rtf',
'.rv':'video/vnd.rn-realvideo',
'.sam':'application/x-sam',
'.sat':'application/x-sat',
'.sdp':'application/sdp',
'.sdw':'application/x-sdw',
'.sit':'application/x-stuffit',
'.slb':'application/x-slb',
'.sld':'application/x-sld',
'.slk':'drawing/x-slk',
'.smi':'application/smil',
'.smil':'application/smil',
'.smk':'application/x-smk',
'.snd':'audio/basic',
'.sol':'text/plain',
'.sor':'text/plain',
'.spc':'application/x-pkcs7-certificates',
'.spl':'application/futuresplash',
'.spp':'text/xml',
'.ssm':'application/streamingmedia',
'.sst':'application-pki.certstore',
'.stl':'application/-pki.stl',
'.stm':'text/html',
'.sty':'application/x-sty',
'.svg':'text/xml',
'.swf':'application/x-shockwave-flash',
'.tdf':'application/x-tdf',
'.tg4':'application/x-tg4',
'.tga':'application/x-tga',
'.tif':'image/tiff',
'.tif':'application/x-tif',
'.tiff':'image/tiff',
'.tld':'text/xml',
'.top':'drawing/x-top',
'.torrent':'application/x-bittorrent',
'.tsd':'text/xml',
'.txt':'text/plain',
'.uin':'application/x-icq',
'.uls':'text/iuls',
'.vcf':'text/x-vcard',
'.vda':'application/x-vda',
'.vdx':'application/vnd.visio',
'.vml':'text/xml',
'.vpg':'application/x-vpeg005',
'.vsd':'application/vnd.visio',
'.vsd':'application/x-vsd',
'.vss':'application/vnd.visio',
'.vst':'application/vnd.visio',
'.vst':'application/x-vst',
'.vsw':'application/vnd.visio',
'.vsx':'application/vnd.visio',
'.vtx':'application/vnd.visio',
'.vxml':'text/xml',
'.wav':'audio/wav',
'.wax':'audio/x-ms-wax',
'.wb1':'application/x-wb1',
'.wb2':'application/x-wb2',
'.wb3':'application/x-wb3',
'.wbmp':'image/vnd.wap.wbmp',
'.wiz':'application/msword',
'.wk3':'application/x-wk3',
'.wk4':'application/x-wk4',
'.wkq':'application/x-wkq',
'.wks':'application/x-wks',
'.wm':'video/x-ms-wm',
'.wma':'audio/x-ms-wma',
'.wmd':'application/x-ms-wmd',
'.wmf':'application/x-wmf',
'.wml':'text/vnd.wap.wml',
'.wmv':'video/x-ms-wmv',
'.wmx':'video/x-ms-wmx',
'.wmz':'application/x-ms-wmz',
'.wp6':'application/x-wp6',
'.wpd':'application/x-wpd',
'.wpg':'application/x-wpg',
'.wpl':'application/-wpl',
'.wq1':'application/x-wq1',
'.wr1':'application/x-wr1',
'.wri':'application/x-wri',
'.wrk':'application/x-wrk',
'.ws':'application/x-ws',
'.ws2':'application/x-ws',
'.wsc':'text/scriptlet',
'.wsdl':'text/xml',
'.wvx':'video/x-ms-wvx',
'.xdp':'application/vnd.adobe.xdp',
'.xdr':'text/xml',
'.xfd':'application/vnd.adobe.xfd',
'.xfdf':'application/vnd.adobe.xfdf',
'.xhtml':'text/html',
'.xls':'application/-excel',
'.xls':'application/x-xls',
'.xlw':'application/x-xlw',
'.xml':'text/xml',
'.xpl':'audio/scpls',
'.xq':'text/xml',
'.xql':'text/xml',
'.xquery':'text/xml',
'.xsd':'text/xml',
'.xsl':'text/xml',
'.xslt':'text/xml',
'.xwd':'application/x-xwd',
'.x_b':'application/x-x_b',
'.x_t':'application/x-x_t'
}
@imzshh 呵呵，还是谢谢啊，昨天问题解决了，是因为server写的有问题。 另外还想请教一下，如果我想用第三方模块，怎么查看它的api、使用方法之类的啊？比如我想用nodejs操作mysql，只知道npm install mysql,但不知道对应第三方哪个模块，还请指导一下
@imzshh 这个我没遇到过，因为这个json我指定了默认类型的，我有个方法，通过传入文件完整名称能返回这个文件对应的ct类型，如果没有，会返回默认的类型。另外我例子中没有给出修改文件名的代码，所以默认情况下下载都是直接把文件（默认名，好像是没后缀）下载到电脑上。不知道你说的是具体什么情况。
我是初学者，教我的大哥要求我先不用框架做个服务器，我想问下，像楼主问的那个问题怎么解决？？就是一个网页有用到css、js，但是出来的界面都是没有css与js效果的。麻烦各位大大了
顶，遇到同样问题是懵逼的。 index.html要包含外部css、js <script type=“text/javascript” src="./a.js"></script>的写法不行。。。 不知道咋搞路由
//------------------------------------------------ // 利用nodejs搭建一个简单的Web服务器 //------------------------------------------------
//启动计时器，记录启动服务所花费的时间 console.time(‘start WebServer need time’);
//请求模块 var libHttp = require(‘http’); //HTTP协议模块 var libUrl = require(‘url’); //URL解析模块 var libFs = require(“fs”); //文件系统模块 var libPath = require(“path”); //路径解析模块
//依据路径获取返回内容类型字符串,用于http响应头 var funGetContentType = function (filePath) { var contentType = “”;
//使用路径解析模块获取文件扩展名
var ext = libPath.extname(filePath);
switch (ext) {
case ".html":
contentType = "text/html";
break;
case ".js":
contentType = "text/javascript";
break;
case ".css":
contentType = "text/css";
break;
case ".gif":
contentType = "image/gif";
break;
case ".jpg":
contentType = "image/jpeg";
break;
case ".png":
contentType = "image/png";
break;
case ".ico":
contentType = "image/icon";
break;
default:
contentType = "application/octet-stream";
}
//返回内容类型字符串
return contentType;
}
//Web服务器主函数,解析请求,返回Web内容 var funWebSvr = function (req, res) { //获取请求的url var reqUrl = req.url;
//向控制台输出请求的路径
console.log(reqUrl);
//使用url解析模块获取url中的路径名
var pathName = libUrl.parse(reqUrl).pathname;
if (libPath.extname(pathName) == "") {
//如果路径没有扩展名
pathName += "/"; //指定访问目录
}
if (pathName.charAt(pathName.length - 1) == "/") {
//如果访问目录
pathName += "index.html"; //指定为默认网页
}
//使用路径解析模块,组装实际文件路径
var filePath = libPath.join("./", pathName);
//判断文件是否存在
libFs.exists(filePath, function (exists) {
//文件存在
if (exists) {
//在响应头中写入内容类型
res.writeHead(200, { "Content-Type": funGetContentType(filePath) });
//创建只读流用于返回
var stream = libFs.createReadStream(filePath, { flags: "r", encoding: null });
//指定如果流读取错误,返回404错误
stream.on("error", function () {
res.writeHead(404);
res.end("<h1>404 Read Error</h1>");
});
//连接文件流和http返回流的管道,用于返回实际Web内容
stream.pipe(res);
}
else {
//文件不存在，返回404错误
res.writeHead(404, { "Content-Type": "text/html" });
res.end("<h1>404 Not Found</h1>");
}
});
}
//创建一个http服务器 var webSvr = libHttp.createServer(funWebSvr);
//指定服务器错误事件响应 webSvr.on(“error”, function (error) { //在控制台中输出错误信息 console.log(error); });
//开始侦听8124端口 webSvr.listen(8124, function () { //向控制台输出服务启动的信息 console.log(‘WebServer running at http://127.0.0.1:8124/’);
//关闭服务启动计时器
console.timeEnd('start WebServer need time');
});
