本文实例为大家分享了js静态资源文件请求的处理,供大家参考,具体内容如下
html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="index.css" type='text/css' charset='utf-8'> </head> <body> <div class='box' id='box'></div> <script charset='utf-8' src='index.js'></script> </body> </html>
css文件
*{ margin:0; padding:0; } html,body{ font-size:14px; color:#000; } .box{ margin:50px auto; width:300px; height:300px; background:#e3bd83; border:10px solid #e0f2be; }
JS文件
var box = document.getElementById('box'); box.onclick = function(){ this.style.background = "red" }
server文件
var http = require('http'), fs = require('fs'), url = require('url'); //创建一个服务 var server1 = http.createServer(function(req,res){ //解析客户端请求地址中的文件的目录名称以及传递给当前服务器的数据内容 var urlObj = url.parse(req.url,true), pathname = urlObj["pathname"], query = urlObj["query"]; //简写 try catch捕获异常 防止请求资源文件不存在 我们不加try catch服务会终止。这样不好,所以我们添加try catch捕获异常 //处理静态资源文件的请求(HTML/CSS/JS...) ->前端路由 var reg = /\.(HTML|JS|CSS|JSON|TXT|ICO)/i; if(reg.test(pathname)){ //获取请求文件的后缀名 var suffix = reg.exec(pathname)[1].toUpperCase(); //根据请求文件的后缀名获取到当前文件的MIME类型 var suffixMIME = "text/plain";//TXT文本对应的 switch(suffix){ case "HTML": suffixMIME = "text/html"; break; case "CSS": suffixMIME = "text/css"; break; case "JS": suffixMIME = "text/javascript"; break; case "JSON": suffixMIME = "application/json"; break; case "ICO": suffixMIME = "application/octet-stream"; break; } try{ //按照指定的目录读取文件中的内容或者代码(读取出来的内容都是字符串格式的) var conFile = fs.readFileSync("."+pathname,"utf-8"); //重写响应头信息:告诉客户端的浏览器我返回的内容是什么样的MIME类型,指定返回的内容的格式是utf-8,避免出现乱码 res.writeHead(200,{'content-type':suffixMIME+';charset=utf-8'}) //服务端向客户端返回的内容也是字符串 res.end(conFile) }catch(e){ res.writeHead(404,{'content-type':'text/plain;charset=utf-8'}); res.end("request file is not found") } /* MIME类型: 每一种资源文件都有自己的标识类型,例如:HTML文件的MIME 类型是"text/html".css文件的MIME类型是"text/css" 浏览器会按照代码的MIME类型进行渲染 */ } // try{ // var con = fs.readFileSync("."+pathname,"utf-8"); // res.end(con); // }catch(e){ // res.end("request file is not find") // } // if(pathname==="/index.html"){ // var con = fs.readFileSync("./index.html","utf-8"); // res.end(con); // return; // } // if(pathname==="/index.css"){ // con = fs.readFileSync("./index.css","utf-8"); // res.end(con); // return; // } // if(pathname==="/index.js"){ // con = fs.readFileSync("./index.js","utf-8"); // res.end(con); // return; // } }) //为当前的这个服务配置端口 server1.listen(80,function(){ console.log("server is success,listening on 80"); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,静态文件
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“详解js静态资源文件请求的处理”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
20240727
20240727
- 丁当《日与夜,跟自己说晚安》[320K/MP3][98.51MB]
- 何炅.2005-漫游【中唱】【WAV+CUE】
- 何嘉莉.1998-MYDREAMS(EP)【飞图】【WAV+CUE】
- 群星.2019-天坑鷹猎电视剧原声带(EP)【智慧大狗】【FLAC分轨】
- 【雨果唱片】《春江花月夜》2020【WAV+CUE】
- 【正原唱片】女子十二乐坊《发烧国乐精粹-十二乐坊》WAV+CUE
- [黄翠珊]SusanWong-TheBestofSusanWong[WAV+CUE]
- 杜德伟.1995-BEST.LOVE(英)【滚石】【WAV+CUE】
- 杜德伟.1996-BEST.LOVE.2(英)【滚石】【WAV+CUE】
- 陈柏宇.2008-Change【SONY】【FLAC分轨】
- 丁当《日与夜,跟自己说晚安》[FLAC/分轨][285.42MB]
- 早安《Bubble Vision》[320KMP3][36.83MB]
- 叶振棠《叶振棠歌曲合集》[合集][MP3][145.9MB]
- [黄翠珊]SusanWong-ClosetoMe[SACD]dsf
- 中唱唱片群星《好歌珍藏-民歌精粹》2CD[WAV.]