Node 學習 -- 搭建簡單的伺服器

小諾哥發表於2017-04-04
伺服器

Node搭建一個簡單的靜態伺服器,具備一些基本功能.

功能:

  • 能顯示以.html/.htm結尾的Web頁面
  • 能直接開啟以.js/.css/.json/.text結尾的檔案內容,以及圖片
  • 查詢檔案/目錄，如果不是檔案是目錄下,就列出該目錄下所有檔案及資料夾，並可以進一步訪問
  • 規定url進行重定向

Node重定向寫法可以參考stackoverflow.com/questions/4…

我在檔案裡面設定了/static為靜態資源的檔案目錄,因此http://localhost:8080/其實就是預設開啟的就是D:\xxx\static

// server.js  這裡其實應該對程式碼進行拆分下,稍微整潔點


const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');
var mime = require('./mime'); // 載入我們的mime.js
var config = require('./config');

const port = 8080;

const server =  http.createServer(function(req,res){

  var pathName = url.parse(req.url).pathname;  // 獲取檔名"/xxx"

      // 對中文進行解碼,防止亂碼
      pathName = decodeURI(pathName);

      // 重定向: 考慮定義標準的url,以'/'結尾.
      if(path.extname(pathName) === ''){  // 沒有副檔名
        if(pathName.charAt(pathName.length-1) !== '/'){
          pathName += '/';
          var redirect = encodeURI('http://' + req.headers.host + pathName); // 記得encodeURI,不然中文目錄報錯
          console.log(redirect);
          res.writeHead(301,{
            location: redirect
          });

        }
      }

      // 獲取資源的絕對路徑
      var realFilePath = path.resolve(__dirname+'/static'+ pathName);
      console.log(realFilePath);
      // 獲取對應檔案的文件型別
      var ext = path.extname(pathName); // 獲取字尾名,如'.html'
      ext = ext?ext.slice(1): 'notKnow';  // 取掉.符號
      if (ext.match(config.Expires.fileMatch)) {
          var expires = new Date();
          expires.setTime(expires.getTime() + config.Expires.maxAge * 1000);
          // 設定響應頭
          res.setHeader("Expires", expires.toUTCString());
          res.setHeader("Cache-Control", "max-age=" + config.Expires.maxAge);
      }
      // 定義未知文件的型別MIME
      var contentType = mime[ext] || "text/plain"; // 字尾名存在就進行對映,不存在就是'text/plain'

      // 判斷檔案是否存在
      fs.stat(realFilePath,function(err,stats){
        // err
        if(err){
          // 也可以定製自己的404頁面
          res.writeHead(404,{'content-type': 'text/html'});
          res.end('<h3>404 Not Found</h3>');
        }
        // 存在
        if(stats.isFile()){
          console.log('is file');
          res.writeHead(200,{'content-type': contentType});
          // 開始讀取檔案
          var stream = fs.createReadStream(realFilePath);
          // 讀取時候錯誤處理
          stream.on('error',function(){
            res.writeHead(500,{'content-type': contentType});
          });
          // 返回檔案內容
          stream.pipe(res);
        }
        // 路徑是目錄的情況,列出當前目錄下檔案
        if(stats.isDirectory() ){

          var html = '<head><meta charset="utf-8"></head>';
          // 讀寫該目錄下的內容 files是檔案陣列
          fs.readdir(realFilePath,function(err,files){
            if(err){
              console.log('目錄檔案讀取失敗');
            }else{
                console.log('is directory' + files); // test

              for(var i = 0;i < files.length;i++){
                //測當前目錄下是否有index.html檔案
                // if (files[i] === "index.html") {
                //   res.writeHead(200, { "content-type": "text/html" });
                //   res.end();
                //   break;
                // }
                html += "<div><a  href='"+files[i]+"'>"+files[i]+"</a></div>";
              }
            }
            res.writeHead(200,{'content-type': 'text/html'});
            res.end(html);
          });

        }
      });

}).listen(port,function(){
  console.log('Server running at port:' + port)
});複製程式碼
// config.js

exports.Expires = {
    fileMatch: /^(gif|png|jpg|js|css)$/ig, // 這只是個demo
    maxAge: 60 * 60 * 24 * 365
};複製程式碼
//mime.js  其實早就有這種模組的.

module.exports = {
    "css": "text/css",
    "gif": "image/gif",
    "html": "text/html",
    "ico": "image/x-icon",
    "jpeg": "image/jpeg",
    "jpg": "image/jpeg",
    "js": "text/javascript",
    "json": "application/json",
    "pdf": "application/pdf",
    "png": "image/png",
    "svg": "image/svg+xml",
    "swf": "application/x-shockwave-flash",
    "tiff": "image/tiff",
    "txt": "text/plain",
    "wav": "audio/x-wav",
    "wma": "audio/x-ms-wma",
    "wmv": "video/x-ms-wmv",
    "xml": "text/xml"
};複製程式碼

參考資料:www.infoq.com/cn/news/201…

我測試過是基本ok的.偶爾冒出以下錯誤.不知道是為什麼.重新整理一下又沒有.懂得朋友請告知.
 if(stats.isFile()){
                ^
TypeError: Cannot read property 'isFile' of undefined複製程式碼

相關文章