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"); })