Nodejs靜態資源服務器

1、http模塊

http模塊

是node的內置模塊，提供http服務

建立一個服務器程序

一個端口只能用於給一個程序監聽；8080被當前的server使用了，其餘程序就不能用

let http = require('http');
    let { readFileSync } = require('fs');
    // 1. 建立服務
    let server = http.createServer(function (req, res) {
    // 建立服務器
    console.log('有人訪問了'); // 只要訪問一次就會打印一次
    // req 對象： request 這裏面保存了客戶端全部請求的信息
    // res 對象：response 用裏面有用戶響應客戶端請求的方法和屬性
    console.log(req.headers.cookie);
    res.end('./index.html'); // 響應客戶端請求，並在數據傳遞結束後斷開；
    });
    // 設置端口監聽
    server.listen(8080, function () {
    // 服務建立成功而且監聽成功會執行這個回調
    console.log('server is running on port 8080')
    });

複製代碼

2、url模塊

url模塊也是nodejs內置的模塊，用來解析請求的url；

let http = require('http');
    let url = require('url');

    let server = http.createServer((req, res) => {
    // req 包含了所有的請求信息
    // res 包含了所有的響應信息
    console.log(req.url);

    let urlObj = url.parse(req.url); // url  模塊上有一個parse方法，能夠把url解析成一個對象
    console.log(urlObj);
    // pathname 路徑
    // query 問號傳參
    // search 查詢字符串 比query前面多一個問號
   });

    server.listen(8000, function () {
       console.log('port 8000 is on service');
    });
複製代碼

3、根據請求路徑返回不一樣內容

根據請求的路徑不一樣，返回不一樣的html
思路：解析請求的url根據不一樣的路徑做出不一樣的響應；

let http = require('http');
    let url = require('url');
    let fs = require('fs');

    let server = http.createServer((req, res) => {
    let urlObj = url.parse(req.url, true); // parse方法第二個參數傳true是把url中問號傳參解析成對象；
    let {pathname, query} = urlObj;
    console.log(pathname);

    // url中的path表示了請求的路徑，咱們只須要從對應的目錄下面把請求的路徑對應的資源讀取出來，而後響應給客戶端便可；

    // 若是客戶端請求的是html，咱們返回給客戶端，客戶端收到html後開始解析html，在解析的時候遇到link、img、script這些標籤會再次發送http請求給服務端，服務端的監聽函數就會再次被觸發，只要有一個請求，createServer時傳遞的函數就要觸發一次，而服務端則要繼續響應這些請求；

   fs.readFile(`${__dirname + pathname}`,  function (err, data) {
    if (err) {
      res.end('NOT FOUND')
    } else {
      res.end(data);
    }
  })
});
server.listen(8000, () => console.log('port 8000 is on service'));
複製代碼

4、響應與Content-type

1.服務器在響應客戶端的請求時須要設置響應內容的內容類型，即在響應頭中設置Content-type。客戶端收到服務端的響應後會根據這個內容類型來解析。瀏覽器有一些默認的文件如html、js、css能夠不用設置也能夠解析；
2.內容類型Content-type: 是一個響應頭
3.設置頭信息 res.setHeader(頭信息, 值)
res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
res.setHeader('set-cookie', 'x=y;'); res.setHeader(頭信息, 值) 設置頭信息

let http = require('http');
let fs = require('fs');
let url = require('url');

let server = http.createServer((req, res) => {
let urlObj = url.parse(req.url, true);

// 服務器在客戶端響應客戶端的請求時須要設置內容的內容類型，即content-type，以便於客戶端收到響應後知道按照何種規則解析這些內容。瀏覽器有一些文件，如html、js、css能夠不用設置內容類型也能夠解析；
// 內容類型：Content-type 是一個響應頭：
// 設置響應頭：res.setHeader(頭信息, 值)
// res.setHeader('Content-type', 'text/plain;charset=utf8');

  let {pathname} = urlObj;
  let contentTypes = {
    html: 'text/html',
    css: 'text/css',
    js: 'text/javascript',
    png: 'image/png'
  };
  let typeReg = /\.(\w+)/g;
  let type = typeReg.exec(pathname)[1];
  console.log(type && contentTypes[type]);
  if (type && contentTypes[type]) {
    res.setHeader('Content-type', contentTypes[type]);
  } else {
    res.setHeader('Content-type', 'text/plain');
  }
  fs.readFile(`${__dirname + pathname}`, function (err, data) {
    if (err) {
      res.end('NOT FOUND')
    } else {
      res.end(data)
    }
  })
});

server.listen(8000, () => console.log('port 8000 is on'))

複製代碼

5、MIME

多用途互聯網郵件擴展；每種文件都有本身的MIME類型，這個MIME類型就是服務端響應的時候要設置的Content-Type。

mime依賴包

• 咱們一個一個的記錄每種文件的content-type很不現實，因此能夠藉助第三方的mime包；

• mime依賴包中包含了絕大多數文件的mime類型，是一個第三方的擴展；

• 安裝mime

npm install mime --save
複製代碼

使用mime設置內容類型

let mime = require('mime');
let http = require('http');
let url = require('url');
let fs = require('fs');


let server = http.createServer((req, res) => {
  // 1.1 解析url
  let urlObj = url.parse(req.url, true);
  let { pathname } = urlObj;

  // 使用mime設置內容類型：mime.getType(pathname)
  // getType方法會返回pathname對應的內容類型


  let filePath = '';
  if (pathname === '/') {
    filePath = __dirname + '/index.html';
    res.setHeader('Content-Type', 'text/html'); // mime.getType() 不能處理 / ；因此須要單獨設置
  } else {
    filePath = __dirname + pathname;
    res.setHeader('Content-Type', mime.getType(pathname));
  }

  fs.readFile(filePath, function (err, data) {
    if (err) {
      res.end('NOT FOUND')
    } else {
      res.setHeader('set-cookie', 'name=mabin;path=/;'); // 在服務端操做cookie；就是設置set-cookie的響應頭
      res.end(data);
    }
  })
});

// 2. 監聽一個端口號
server.listen(8000, () => console.log('port 8000 is on'));

複製代碼

6、設置響應狀態碼404

設置狀態碼

在res對象上有一個statusCode屬性，這個屬性表示http請求的狀態碼；經過修改這個屬性設置http的狀態碼；

訪問的路徑不存在時返回404

判斷路徑存在不存在
fs.stat(路徑, callback) 方法

let http = require('http');
let fs = require('fs');
let url = require('url');
let mime = require('mime');

let server = http.createServer((req, res) => {
  let {pathname} = url.parse(req.url, true);

  console.log(pathname);

  // 判斷咱們訪問的路徑存在不存在；
  fs.stat(__dirname + pathname, (err, stats) => {
    // fs.stat() 判斷路徑是否存在，若是不存在err將會是一個對象，若是路徑存在err是null
    if (err) {
      res.statusCode = '404';
      res.end(`${pathname} is not found`);
    } else {
      // 若是代碼執行到這裏，說明路徑有效；

      let filePath = '';
      if (pathname === '/') {
        // 當訪問路徑是 / 時要返回index.html
        filePath = __dirname + '/index.html';
      } else {
        filePath = __dirname + pathname;
      }

      fs.readFile(filePath, function (err, data) {
        res.end(data)
      })
    }
  })
});
server.listen(8000, () => console.log('port 8000 is on'));


複製代碼