溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“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")
}
/*
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如何處理靜態資源文件請求”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
