快捷導(dǎo)航

詳解Nodejs之靜態(tài)資源處理

更新時間：2017年06月05日 11:12:24 作者：純臻

這篇文章主要介紹了詳解Nodejs之靜態(tài)資源處理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

剛開始用Nodejs寫簡單的web服務(wù)器的時候，總是感覺少了點什么。

原來，我一直是在頁面上輸出什么Hello World！啊， It Works.之類的了。還確實沒有處理關(guān)于CSS， JS這些引用的靜態(tài)相關(guān)的資源。

一開始覺得處理這些東西應(yīng)該會非常的easy，結(jié)果發(fā)現(xiàn)不僅僅是這么回事。途中也遇到了一些人們經(jīng)常可能會犯的想當(dāng)然的錯誤。于是我就決定好好的記錄一下關(guān)于Nodejs中對于靜態(tài)資源的處理。

著眼于問題

重現(xiàn)問題

先來展示一下目錄結(jié)構(gòu)吧。

E:\CODE\NODEJS\LEARN\WEB\EXPRESS-STATIC
│ server.js
│
├─html
│   index.html
│
└─public
  ├─css
  │   index.css
  │
  ├─imgs
  │   1.gif
  │
  └─js
      index.js

這樣一個web項目的骨架就算是搭建好了。下面簡單的使用nodejs的http模塊實現(xiàn)一個web服務(wù)器。目標(biāo)就是顯示index.html

index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>My Index Page</title>
    <link rel="stylesheet" href="/public/css/index.css" rel="external nofollow" >
  </head>
  <body>
    <h1>It Works.</h1>
    <hr>
    <img src="/public/imgs/1.gif" />
  </body>
</html>

index.css

* {
  padding: 0px;
  margin: 0px;
}

h1 {
  color: yellowgreen;
}

body {
  background-color: #2C001E;
}

server.js

var http = require('http');
var fs = require('fs');


function handle_request(req, res) {

  // 客戶端對服務(wù)器的請求，說白了就是對相關(guān)文件內(nèi)容的請求。
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(get_file_content(__dirname + '\\' + 'html' + '\\' + 'index.html'));
}

function get_file_content(filepath) {
  return fs.readFileSync(filepath);
}

var server = http.createServer(handle_request);
server.listen(8080);

代碼中用到了一個名為__dirname的變量，其值就是當(dāng)前運(yùn)行文件的絕對路徑。通過它，我們可以組裝出我們想要獲取的文件的全路徑。

運(yùn)行代碼，開啟服務(wù)器。

node server.js

發(fā)現(xiàn)問題

然后我們打開瀏覽器，會發(fā)現(xiàn)這樣的景象。

沒有任何效果的頁面

不僅是CSS樣式?jīng)]顯示出來，就連圖片也同樣沒有正確顯示。

然后我們打開瀏覽器控制臺，會發(fā)現(xiàn)客戶端向服務(wù)器發(fā)送了3次請求，分別是:

客戶端請求內(nèi)容

localhost: HTML代碼頁
index.css：樣式文件
1.gif：圖片文件

之所以我們沒能看到具體的效果，就是因為服務(wù)器沒有正確返回相關(guān)的內(nèi)容啊。這樣一想，一下子就恍然大悟了。所以這顆Silver Bullet就是

針對每一個不同的資源請求，正確的返回相關(guān)的內(nèi)容。

解決問題

我的思路：

剖析request請求地址。分割出文件名，后綴名。
根據(jù)后綴補(bǔ)全相關(guān)文件在文件系統(tǒng)中的全路徑。
根據(jù)全路徑讀取內(nèi)容，返回給客戶端。

server.js

然后簡單的修改了一下server.js，當(dāng)然這里也只是簡單的做下示意，生產(chǎn)代碼可千萬不要這么寫。

var http = require('http');
var fs = require('fs');


function handle_request(req, res) {

  // 不管是什么請求，對文件的請求的話，應(yīng)該是針對后綴名進(jìn)行內(nèi)容讀取發(fā)放。
  var suffix = req.url.substr(req.url.length - 4, req.url.length);
  var realpath = __dirname + '\\' + 'public' + '\\';
  var filename = req.url.substr(req.url.length - 9);
  if (suffix === '.css') {
    res.writeHead(200, { 'Content-Type': 'text/css' });
    res.end(get_file_content(realpath + '\\css\\' + filename));
  } else if (suffix === '.gif') {
    res.writeHead(200, {'Content-Type': 'image/gif'});
    res.end(get_file_content(realpath+'\\imgs\\1.gif'));
  } else {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(get_file_content(__dirname + '\\' + 'html' + '\\' + 'index.html'));
  }
}

function get_file_content(filepath) {
  return fs.readFileSync(filepath);
}

var server = http.createServer(handle_request);
server.listen(8080);

然后重啟服務(wù)器。

node server.js

再次訪問瀏覽器

http://localhost:8080

如下：

靜態(tài)資源正確訪問

因為沒有錄屏，所以沒體現(xiàn)出GIF圖的效果，不過關(guān)于靜態(tài)資源已經(jīng)足夠顯示了。

express

還有一個比較好用的web框架，express，其對于靜態(tài)資源的支持更加方便。屬于一個更加高層的封裝。

核心

通過express對象的app.use(express.static(folder_path))方法就可以了。方法的參數(shù)指定為相關(guān)的靜態(tài)資源文件夾路徑即可。

server-express.js

/**
 * 使用express來實現(xiàn)對于靜態(tài)資源的控制。
 */
let express = require('express');
let fs = require('fs');
let path = require('path');


var app = express();

app.use(express.static(path.join(__dirname, './public')));

app.all('/', function(req, res){
  console.log("=======================================");
  console.log("請求路徑："+req.url);
  var filename = req.url.split('/')[req.url.split('/').length-1];
  var suffix = req.url.split('.')[req.url.split('.').length-1];
  console.log("文件名：", filename);
  if(req.url==='/'){
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(get_file_content(path.join(__dirname, 'html', 'index.html')));
  }else if(suffix==='css'){
    res.writeHead(200, {'Content-Type': 'text/css'});
    res.end(get_file_content(path.join(__dirname, 'public', 'css', filename)));
  }else if(suffix in ['gif', 'jpeg', 'jpg', 'png']) {
    res.writeHead(200, {'Content-Type': 'image/'+suffix});
    res.end(get_file_content(path.join(__dirname, 'public', 'images', filename)));
  }
});


function get_file_content(filepath){
  return fs.readFileSync(filepath);
}

app.listen(8080);

index.html

因為剛才使用了靜態(tài)資源控制，也就是說我們可以簡化HTML頁面中對于靜態(tài)資源的路徑拼寫。比如：

原來在HTML頁面中要這么寫：

<img src='/public/images/1.gif' />

現(xiàn)在只需要這么寫了：

<img src='/images/1.gif' />

看起來就是少了個 /public，但是實際上通過這一點就可以表明express 其實幫我們省去了很多枯燥的工作內(nèi)容。

然后打開瀏覽器就可以看到具體的靜態(tài)資源內(nèi)容了。

express控制靜態(tài)資源

那么對于不同的圖片類型的支持程度如何呢？

下面修改一下HTML頁面：

<html>
  <head>
    <meta charset="UTF-8">
    <title>My Index Page</title>
    <link rel="stylesheet" href="/css/index.css" rel="external nofollow" >
  </head>
  <body>
    <h1>It Works.</h1>
    <hr>
    <img src="/images/1.gif" /><br>
    <img src="/images/2.jpg" alt=""><br>
    <img src="/images/3.png" alt=""><br>
  </body>
</html>

打開瀏覽器查看對于gif, png, jpg的支持如何？

針對不同類型圖片的支持