Node.js完整的響應html頁面(包括css,js文件)

主要思想就是任何一個靜態文件也應該作響應,一個獲取靜態文件都應當請求來處理,這是主要思想。javascript

同時要注意兩點。第一,對於不一樣的文件類型,好比html,css,js,請求頭裏面的文件類型須要根據不一樣的文件類型註明,css

第二,文件的路徑須要表達準確,fs.readFile方法的第一個參數path是已起服務的文件爲根目錄,這裏就是以server.js文件的所在目錄爲根目錄html

 

文件目錄vue

文件夾publicjava

      Index.htmlnode

      Css文件夾瀏覽器

           Reset.css服務器

           Index.cssapp

      Js文件夾post

          vue.min.js

          Index.js

Server.js

 

Server.js和文件夾publi同級

 

來看server.js代碼

var http = require('http');

var fs = require('fs');

var url = require('url');

 

 // 建立服務器

http.createServer( function (request, response) { 

   // 解析請求,包括文件名

   var pathname = url.parse(request.url).pathname;

   var postfix = pathname.match(/(\.[^.]+|)$/)[0];//取得後綴名

   // 輸出請求的文件名

   console.log("Request for " + pathname + " received.");

 

   // 從文件系統中讀取請求的文件內容

   fs.readFile(pathname.substr(1), function (err, data) {

      if (err) {

         console.log(err);

        // HTTP 狀態碼: 404 : NOT FOUND

         // Content Type: text/plain

         response.writeHead(404, {'Content-Type': 'text/html; charset=utf-8'});

      }else{            

         // HTTP 狀態碼: 200 : OK

         // Content Type: text/plain

         console.log(postfix);

         if(postfix==='html'){

             response.writeHead(200, {'Content-Type': 'text/html'});   

         }else if(postfix==='css'){

            response.writeHead(200, {'Content-Type': 'text/css'});

         }

         else if(postfix==='js'){

            response.writeHead(200, {'Content-Type': 'application/javascript'});

         }else{

         }

         // 響應文件內容

         response.write(data.toString());       

      }

      //  發送響應數據

      response.end();

   });

}).listen(8080);

 

// 控制檯會輸出如下信息

console.log('Server running at http://127.0.0.1:8080/');

 

最後在命令行輸入node server.js 把服務器起起來

而後在瀏覽器打開http://127.0.0.1:8080/public/index.html

相關文章
相關標籤/搜索