新人请教:怎么获得客户端的js、css文件?
发布于 2年前 作者 mingshuan 1542 次浏览

初学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,请问大家怎么写才可以从服务器端获取客户端需要的所有文件,谢谢!

21 回复

你可以看看这个:Node入门,对nodejs web开发有了一点概念之后,可以看看expressjs之类的web开发框架。

谢谢你的回复,如果把客户端的js代码直接写入index.html还行,但是要把客户端js和index.html分开就不知道怎么写了,我现在急需一个这样的demo,还希望你能知道一下,多谢!

@mingshuan 你先别急着写,耐心看完这个入门教程先,磨刀不误砍柴工嘛。其中关于“路由”的部分有讲到怎样处理不同的URL请求。 真正做东西肯定要用框架,但是基本原理还是要了解一下的。

@mingshuan 你需要一个简单的 Web 服务器,去 NodeJs 的第三方模块里面找找就行了,你目前需要的是恶补一下基本的互联网知识。

NodeJs 只是一个运行平台,离开了第三方模块,什么用处也没有。

@mingshuan 你写的那个服务端代码实在是简陋得可以,而且完全没有必要。

谢谢大家的回复,那我先学习学习,不会的再请教大家,谢谢!

不是大家不回答你的问题。有疑问还是随时可以问:-)

要想传递不同的资源(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,但不知道对应第三方哪个模块,还请指导一下

谢谢啊,昨晚搞定了,呵呵

@mingshuan 要看这个模块的官方网站,或者就去github上搜索模块名称,好的模块基本都会有比较详细的readme文件。

content type大全啊……

果断收藏上面的content type大全

@imzshh @lenzhang 不好意思,这个不能算完整的,因为我当初在官网下了这个所谓的大全之后,我在使用的时候,发现了2个问题: 1.不全,例如‘.json’就没有,后来还有一些也没有的。 2.无说明,例如’.jpg’就有2种,而官方没有做说明哪一种属于内嵌资源,哪一种属于下载资源。后来我也试了一些,自己去除了一些重复的。

@a272121742 下载的时候如果输出了错误的content type会有什么问题?

@imzshh 这个我没遇到过,因为这个json我指定了默认类型的,我有个方法,通过传入文件完整名称能返回这个文件对应的ct类型,如果没有,会返回默认的类型。另外我例子中没有给出修改文件名的代码,所以默认情况下下载都是直接把文件(默认名,好像是没后缀)下载到电脑上。不知道你说的是具体什么情况。

@a272121742 下载的时候从来没有指定过content-type,所以听你说这个下载content-type的事情,就想会不会有什么问题。。。

@imzshh 如果不指定content-type,一般默认就是下载,下载的后的文件类型不确定而已

这个比我的还长。。。

我是初学者,教我的大哥要求我先不用框架做个服务器,我想问下,像楼主问的那个问题怎么解决??就是一个网页有用到css、js,但是出来的界面都是没有css与js效果的。麻烦各位大大了

回到顶部