用 node.js 模仿 Apache 的部分功能
阿新 • • 發佈：2020-12-14
首先，這個例子用到了服務端渲染的技術。服務端渲染，說白了就是在服務端使用模板引擎，這裡我先簡單的介紹一下服務端渲染與客戶端渲染之間的區別。
服務端渲染與客戶端渲染之間的區別:
- 客戶端渲染不利於搜尋引擎優化
- 服務端渲染可以被爬蟲抓取到，而客戶端非同步渲染很難被爬蟲抓取到（例如：AJAX）
- 大部分的網站既不是純非同步（客戶端），也不是純服務端渲染出來的，而是兩者結合的
- 例如：京東的商品列表採用的就是服務端渲染，目的是為了seo搜尋引擎優化，說白了就是為了能夠被搜尋到，且能被爬蟲抓取（搜尋引擎本身也是一種爬蟲）。
- 而京東的商品評論列表為了使用者體驗，而且也不需要seo優化，所以才用的是客戶端渲染
簡單的判斷內容為服務端渲染還是客戶端渲染
最簡單的方法就是：
- 點選訪問一個頁面（我們這裡以京東為例）
- 隨便訪問一個商品頁，然後複製商品標題
- 然後滑鼠右擊點選檢視網頁原始碼
- 在原始碼頁按 Ctrl + f ，接著把複製的內容貼上進去
- 能搜到就是 服務端渲染，否則的話，就是客戶端渲染。
利用 art-template 模板引擎
安裝： 在想要安裝的目錄下開啟命令列工具 輸入npminstall art-template, 然後它會自動生成 node_modules 目錄（前提，系統已經安裝了 Node.js環境）
在需要使用的檔案模組中載入 art-template:
const template = require('art-template'); 就可以使用了 , 官方文件地址：https://aui.github.io/art-template/zh-cn/docs/index.html
Apache 部分功能實現
Node.js相關API(本例中使用):
基於http
createServer() : 建立一個伺服器
on(): 提供服務：對資料的服務，發請求，接收請求，處理請求，傳送響應，等等
listen(): 繫結埠號，啟動伺服器
基於fs(檔案系統)
readFile(): 讀取檔案（引數一為 檔案路徑，引數二為回撥函式）
readdir(): 讀取目錄（引數一位目錄路徑，引數二為回撥函式）
基於path(路徑)
extname(): 獲取檔案字尾名
隨便在一個位置建立 www 資料夾（檔名可以自己隨意）
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
寫html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Index of / {{title}}</title>
</head>
<body>
<h1>Index of / {{title}}</h1>
<ul>
<li><a href="/"> Parent Directory</a></li>
{{each files}}
<li><a href="/{{ $value }}">{{ $value }}/</a></li>
{{/each}}
</ul>
</body>
</html>node.js:
const http = require('http');
const fs = require('fs');
const template = require('art-template');
const path = require('path');
const port = 5000;
const server = http.createServer();
server.on('request', (request, response) => {
let url = request.url;
let wwwDir = 'D:/www';
fs.readFile('./template.html', (error, data) => {
if (error) {
return response.end('404 Not Found');
}
// 1.如何得到 wwwDir 目錄列表中的檔名和目錄名
// fs.readdir
// 2.如何將得到的檔名和目錄名替換到 template.html 中
// 2.1 在 template.html 中需要替換的位置預留一個特殊的標記
// 2.2 根據 files 生成需要的 HTML 內容
// 模板引擎
if (url !== '/') {
wwwDir += url;
}
let fileEnd = path.extname(wwwDir);
/**
* 如果是檔案，則訪問該檔案
* 如果是資料夾，則訪問裡面的內容
*/
if (fileEnd !== '') {
fs.readFile(wwwDir, (error, data) => {
if (error) {
return response.end('404 Not Found');
}
// 獲取檔案字尾名(具體問題具體分析，這裡我只設定 .txt 檔案的 編碼型別)
if (fileEnd === '.txt') {
response.setHeader('Content-Type', 'text/plain; charset=utf-8');
}
if (fileEnd === '.jpg') {
response.setHeader('Content-Type', 'image/jpeg');
}
if (fileEnd === '.mp4') {
response.setHeader('Content-Type', 'video/mpeg4');
}
response.end(data);
});
} else {
console.log(wwwDir);
fs.readdir(wwwDir, (error, files) => {
if (error) {
return response.end('Can not find this dir');
}
console.log(files);
// files: [ 'a.txt', 'apple', 'images', 'index.html', 'static', 'videos' ]
let htmlStr = template.render(data.toString(), {
title: wwwDir,
files: files,
});
// 3.傳送響應資料
response.end(htmlStr);
});
}
});
});
server.listen(port, () => {
console.log(`伺服器已經開啟，您可以通過 http://127.0.0.1:${port} 訪問....`);
});