1. 程式人生 > 其它 >node.js路由基礎

node.js路由基礎

/*
 * @Description: 路由基礎
 * @Version: 1.0
 * @Autor: Nanke_南柯
 * @Date: 2021-11-03 18:29:16
 * @LastEditors: Nanke_南柯
 * @LastEditTime: 2021-11-03 18:52:48
 */

const fs = require("fs")
require("http").createServer((req,res)=>{
    const urlStr = req.url
    console.log(urlStr);
    switch(urlStr){
        
case '/': res.end('hello') break; case '/home': fs.readFile('./home.html',(err,content)=>{ res.end(content) }) break; case '/test.js': fs.readFile('./test.js',(err,content)=>{ res.end(content) })
break; case '/imgs.jpg': fs.readFile('./imgs.jpg',(err,content)=>{ res.end(content) }) break; default: res.end("page is 404") } }).listen(5090,()=>{ console.log('localhost:5090 Listen...'); })

目錄結構 檔案內容

hotnode index.js 訪問localhost:5090成功響應

可以發現沒有響應頭 就node沒配置自動解析,而且程式碼冗餘

所以我們需要一個外掛 npm i mime -S 去動態識別和設定響應頭然後二次封裝

/*
 * @Description: 路由基礎-簡單封裝-mime模組響應或設定Node.js的Content-Type頭
 * @Version: 1.0
 * @Autor: Nanke_南柯
 * @Date: 2021-11-03 18:54:32
 * @LastEditors: Nanke_南柯
 * @LastEditTime: 2021-11-03 19:56:56
 */
//npm i mime -S mime模組響應或設定Node.js的Content-Type頭

// MIME,即:Multipurpose Internet Mail Extensions,多用途網際網路郵件擴充套件型別。其主要用途是設定某種副檔名的檔案的響應程式型別,我們可以認為是當指定副檔名檔案被訪問時,瀏覽器會自動使用指定應用程式來開啟。在HTTP中,是通過名為Content-Type的HTTP頭來設定或響應對應的檔案型別的。例如:當伺服器要向客戶端傳送的內容圖類為.jpg圖片,就需要將Content-Type頭設定為image/jpeg,而客戶端同樣會根據Content-Type對伺服器內容進行解析。
// MIME和Content-Type是檔案型別設定和解板的標準。當伺服器要對某種副檔名檔案傳送到客戶端時,會根據副檔名設定Content-Type頭。而客戶端(可以認為是瀏覽器),對伺服器內容進行解析時也需要Content-Type所代表的MIME找到內容的解析程式。MIME型別非常多,當我們在服務端設定傳送內容格式時或當我們對服務端內容進行解析時,對幾百種MIME型別進行處理工作量會非常巨大。
// 推薦一個NPM包:mime。mime模組使用Apache專案的mime.types檔案,該檔案包含了超過600個Content-Type型別資料,並且支援新增自定義的MIME型別。
const fs = require("fs")
const mime = require("mime")
require("http").createServer((req,res)=>{
    const urlStr = req.url
    const type = mime.getType(urlStr.split('.')[1])
    console.log(type);
    res.writeHead(200,{
        'content-type':type
    })
    const file = fs.readFileSync(`.${urlStr}`)
    res.end(file)
}).listen(5093,()=>{
    console.log('localhost:5093 Listen...');
})

可以看到 全部自動獲取動態加上去了