JavaScript tutorial: How to handle static resource file requests-JS Tutorial-php.cn

JavaScript tutorial: How to handle static resource file requests

巴扎黑

Release： 2017-08-07 15:41:42

Original

1529 people have browsed it

This article mainly introduces the processing of js static resource file requests in detail. It has certain reference value. Interested friends can refer to it.

The example in this article shares js static resources with everyone. The processing of file requests is for your reference. The specific content is as follows

html file

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="index.css" type=&#39;text/css&#39; charset=&#39;utf-8&#39;>
</head>
<body>
 <p class=&#39;box&#39; id=&#39;box&#39;></p>
 <script charset=&#39;utf-8&#39; src=&#39;index.js&#39;></script>
</body>
</html>

Copy after login

css file

*{
 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;
}

Copy after login

JS file

var box = document.getElementById(&#39;box&#39;);
box.onclick = function(){
 this.style.background = "red"
}

Copy after login

server file

var http = require(&#39;http&#39;),
 fs = require(&#39;fs&#39;),
 url = require(&#39;url&#39;);
//创建一个服务
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,{&#39;content-type&#39;:suffixMIME+&#39;;charset=utf-8&#39;})
   //服务端向客户端返回的内容也是字符串
   res.end(conFile)
  }catch(e){
   res.writeHead(404,{&#39;content-type&#39;:&#39;text/plain;charset=utf-8&#39;});
   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");
})

Copy after login

The above is the detailed content of JavaScript tutorial: How to handle static resource file requests. For more information, please follow other related articles on the PHP Chinese website!