關(guān)于訪問node?express中的static靜態(tài)文件方法

更新時間：2022年09月06日 09:56:11 作者：Tangctt

這篇文章主要介紹了關(guān)于訪問node?express中的static靜態(tài)文件方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

訪問node express中的static靜態(tài)文件

應(yīng)用場合

在項目中需要使用到node express框架進行中間件開發(fā)、
使用express托管靜態(tài)文件或開放其它靜態(tài)文件

解決方法

通過express內(nèi)置的express.static方法可以方便地托管靜態(tài)文件，例如圖片、CSS、JavaScript文件等

將靜態(tài)資源文件所在目錄作為參數(shù)傳遞給express.static中間件就可以提供靜態(tài)資源文件的訪問

示例

1. express框架下運行以下代碼

#注意格式
app.use('/public',express.static('public'));//將文件設(shè)置成靜態(tài)
#若需要開發(fā)其它靜態(tài)文件，則不需要'/public'路徑
app.use(express.static('Simulation_Result'))

2. 在項目中訪問靜態(tài)文件地址即可

? ? ?let _PicUrl = [
? ? ? ? "http://127.0.0.1:5678/S-1.png",
? ? ? ? "http://127.0.0.1:5678/S-2.png"
? ? ?]

注意：靜態(tài)文件的路徑為express中間件設(shè)置，端口號必須為后端端口號。若訪問了錯誤的路徑或者端口號，則頁面為空白

Express訪問靜態(tài)資源(express.static)

在開發(fā)全棧的時候，html頁面需要顯示一些圖片，視頻之類的資源。這些資源被稱為“靜態(tài)資源”，即對每一個用戶來講都是相同的資源。寫這篇博文通過對比前后端調(diào)用靜態(tài)資源的方式來記錄express框架下靜態(tài)資源的訪問方法。

前端調(diào)用靜態(tài)資源

初入前端的同志應(yīng)該知道，前端里調(diào)用靜態(tài)資源只是用來測試程序的“緩兵之計”，因為網(wǎng)頁的資源一定是來自后端服務(wù)器的。在還沒有對接服務(wù)器的情況下，以播放視頻為例，前端是如何實現(xiàn)的呢。

既然只有前端那視頻只能是在本地的資源。視頻和html文件應(yīng)在同一目錄中：

在video,html文件中輸入以下代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
	<p>video:</p>
	<video id="video1" controls width="300px" autoplay>
		<source src="1.mp4" type="video/mp4">
	</video>
</body>
</html>

由html代碼可知，視頻的路徑是由video標簽內(nèi)部的src="1.mp4"決定的，因為html文件和視頻文件在同一目錄下，因此地址直接寫文件名稱即可。

Express訪問靜態(tài)資源

當前端要顯示后端的靜態(tài)資源時，就變得比較講究了。首先，node.js中需要將靜態(tài)文件放在一個靜態(tài)目錄中。

靜態(tài)目錄的做法：

1.在工程中新建一個文件夾，命名為public。

2.將靜態(tài)資源全部放在public文件夾中，本次將1.mp4放入：

3.在app.js中設(shè)置靜態(tài)路徑，首先導(dǎo)入path模塊：

const path = require('path');

4.設(shè)置靜態(tài)路徑。__dirname是當前文件所在絕對目錄的意思。

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

JS代碼實現(xiàn)：

JS中的代碼比較休閑，只需要傳送html頁面和設(shè)置靜態(tài)路徑就好了。

var express = require('express');
var app = express();
const path = require('path');
app.use('/static',express.static(path.join(__dirname,'public')));
app.get('/', function (req, res) {
   res.sendFile( __dirname + "/" + "video.html" );
});// 顯示html頁面
var server = app.listen(8080, function () {
   var host = server.address().address;
   var port = server.address().port;
  //  服務(wù)器IP地址為127.0.0.1 端口為8888
   console.log( "server is running"+host+port);
 });

HTML5代碼實現(xiàn)：

html5代碼需要稍微修改一下路徑。將原先的1.mp4修改為static/1.mp4。項目的根目錄是project，而視頻在project里的子目錄中，因此需要加文件目錄符+虛擬路徑“static”。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
	<p>video:</p>
	<video id="video1" controls width="300px" autoplay>
		<source src="static/1.mp4" type="video/mp4">
	</video>
</body>
</html>

代碼跑起來，完工：