/*
apache服務(wù)器（web容器）功能：由于html中所有的外部資源鏈接都會(huì)變成網(wǎng)絡(luò)請(qǐng)求顺饮，
那么就有可能一個(gè)網(wǎng)頁會(huì)有很多個(gè)請(qǐng)求催跪，如果網(wǎng)絡(luò)請(qǐng)求的路徑與服務(wù)器真實(shí)的文件路徑一致糟需，
則apache服務(wù)器會(huì)自動(dòng)根據(jù)url讀取對(duì)應(yīng)的內(nèi)容響應(yīng)返回浅乔。
問題：
1.nodejs沒有類似于apach一樣的web容器获列，我們需要自行處理每一個(gè)網(wǎng)絡(luò)請(qǐng)求
2.當(dāng)網(wǎng)頁的請(qǐng)求過多時(shí)我們需要寫很多的if``else,代碼將會(huì)變得非常臃腫
解決方案：
1.將項(xiàng)目中的靜態(tài)文件（圖片革娄，css樣式）放入一個(gè)文件夾（resource）
2.html中的路徑與該靜態(tài)文件的真實(shí)路徑一致擎宝，例如/resource/images/01.gif
3.使用if(req.url.indexOf('/resource') === 0)
判斷該網(wǎng)絡(luò)請(qǐng)求是否是請(qǐng)求靜態(tài)資源（路徑是否以/resource）開頭
4.使用fs模塊讀取對(duì)應(yīng)文件響應(yīng)返回水评。 讀取的文件路徑是__dirname+req.url，
因?yàn)榇藭r(shí)req.url是真實(shí)的文件夾路徑，可以讀取到對(duì)應(yīng)的文件
5.這樣做的好處就是只需要一個(gè)判斷就可以處理網(wǎng)頁中所有的靜態(tài)資源請(qǐng)求 */
// 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)聽客戶端的請(qǐng)求
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)
})
// 如果請(qǐng)求動(dòng)態(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文件兆蕉。 路徑錯(cuò)誤 -->
<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)容合作請(qǐng)聯(lián)系作者
