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

2. 在項(xiàng)目中訪問靜態(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è)置，端口號(hào)必須為后端端口號(hào)。若訪問了錯(cuò)誤的路徑或者端口號(hào)，則頁面為空白

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

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

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

初入前端的同志應(yīng)該知道，前端里調(diào)用靜態(tài)資源只是用來測(cè)試程序的“緩兵之計(jì)”，因?yàn)榫W(wǎng)頁的資源一定是來自后端服務(wù)器的。在還沒有對(duì)接服務(wù)器的情況下，以播放視頻為例，前端是如何實(shí)現(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標(biāo)簽內(nèi)部的src="1.mp4"決定的，因?yàn)閔tml文件和視頻文件在同一目錄下，因此地址直接寫文件名稱即可。

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

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

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

1.在工程中新建一個(gè)文件夾，命名為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是當(dāng)前文件所在絕對(duì)目錄的意思。

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

JS代碼實(shí)現(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代碼實(shí)現(xiàn)：

html5代碼需要稍微修改一下路徑。將原先的1.mp4修改為static/1.mp4。項(xiàng)目的根目錄是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>

代碼跑起來，完工：