这篇文章主要为大家展示了“js如何处理静态资源文件请求”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js如何处理静态资源文件请求”这篇文章吧。html文件<
这篇文章主要为大家展示了“js如何处理静态资源文件请求”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“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")
}
}
// 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如何处理静态资源文件请求”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！
--结束END--
本文标题: js如何处理静态资源文件请求
本文链接: https://www.lsjlt.com/news/77379.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0