溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-07 10:54:11 來源：腳本之家 閱讀：147 作者：純臻 欄目：web開發(fā)

前言

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

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

一開始覺得處理這些東西應(yīng)該會(huì)非常的easy，結(jié)果發(fā)現(xiàn)不僅僅是這么回事。途中也遇到了一些人們經(jīng)?？赡軙?huì)犯的想當(dāng)然的錯(cuò)誤。于是我就決定好好的記錄一下關(guān)于Nodejs中對(duì)于靜態(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

這樣一個(gè)web項(xiàng)目的骨架就算是搭建好了。下面簡單的使用nodejs的http模塊實(shí)現(xiàn)一個(gè)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>
    <h2>It Works.</h2>
    <hr>
    <img src="/public/imgs/1.gif" />
  </body>
</html>

index.css

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

h2 {
  color: yellowgreen;
}

body {
  background-color: #2C001E;
}

server.js

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


function handle_request(req, res) {

  // 客戶端對(duì)服務(wù)器的請(qǐng)求，說白了就是對(duì)相關(guān)文件內(nèi)容的請(qǐng)求。
  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);

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

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

node server.js

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

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

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

沒有任何效果的頁面

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

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

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

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

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

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

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

解決問題

我的思路：

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

server.js

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

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


function handle_request(req, res) {

  // 不管是什么請(qǐng)求，對(duì)文件的請(qǐng)求的話，應(yīng)該是針對(duì)后綴名進(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

如下：

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

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

express

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

核心

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

server-express.js

/**
 * 使用express來實(shí)現(xiàn)對(duì)于靜態(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("請(qǐng)求路徑："+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

因?yàn)閯偛攀褂昧遂o態(tài)資源控制，也就是說我們可以簡化HTML頁面中對(duì)于靜態(tài)資源的路徑拼寫。比如：

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

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

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

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

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

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

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

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

下面修改一下HTML頁面：

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

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

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手