/*
apache服務(wù)器（web容器）功能：由于html中所有的外部資源鏈接都會變成網(wǎng)絡(luò)請求，
那么就有可能一個網(wǎng)頁會有很多個請求，如果網(wǎng)絡(luò)請求的路徑與服務(wù)器真實的文件路徑一致，
則apache服務(wù)器會自動根據(jù)url讀取對應(yīng)的內(nèi)容響應(yīng)返回。
問題：
1.nodejs沒有類似于apach一樣的web容器，我們需要自行處理每一個網(wǎng)絡(luò)請求
2.當(dāng)網(wǎng)頁的請求過多時我們需要寫很多的if``else,代碼將會變得非常臃腫
解決方案：
1.將項目中的靜態(tài)文件（圖片，css樣式）放入一個文件夾（resource）
2.html中的路徑與該靜態(tài)文件的真實路徑一致，例如/resource/images/01.gif
3.使用if(req.url.indexOf('/resource') === 0)
判斷該網(wǎng)絡(luò)請求是否是請求靜態(tài)資源（路徑是否以/resource）開頭
4.使用fs模塊讀取對應(yīng)文件響應(yīng)返回。 讀取的文件路徑是__dirname+req.url，
因為此時req.url是真實的文件夾路徑，可以讀取到對應(yīng)的文件
5.這樣做的好處就是只需要一個判斷就可以處理網(wǎng)頁中所有的靜態(tài)資源請求 */
// 1.導(dǎo)入http模塊
var http = require('http');
// 2.導(dǎo)入文件模塊
var fs = require('fs');
// 3.導(dǎo)入路徑模塊
var path = require('path');
// 4.創(chuàng)建服務(wù)器
var server = http.createServer();
// 5.監(jiān)聽客戶端的請求
server.on('request',function (req,res) {
// 如果后面什么都沒傳去lc.html
if (req.url === '/') {
fs.readFile(path.join(__dirname,'lc.html'),function (err,data) {
if (err) {
throw err;
}
res.end(data)
})
// 如果請求動態(tài)資源路徑是/resource開頭
} else if (req.url.indexOf('/resource') === 0 ) {
fs.readFile(path.join(__dirname,req.url),function (err,data) {
if (err) {
throw err;
}
//
res.end(data)
})
}
})
// n.啟用服務(wù)器
server.listen(3000,function () { console.log('啟用成功'); })
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入css文件。 路徑錯誤 -->
<link rel="stylesheet" href="/resource/css/home.css">
<title>Document</title>
</head>
<body>
<h1>這是首頁</h1>
<img src="/resource/images/01.gif" alt="">
<img src="/resource/images/01.jpg" alt="">
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
