首先，這個例子用到了服務端渲染的技術。服務端渲染，說白了就是在服務端使用模板引擎，這里我先簡單的介紹一下服務端渲染與客戶端渲染之間的區別。
服務端渲染與客戶端渲染之間的區別:
簡單的判斷內容為服務端渲染還是客戶端渲染
最簡單的方法就是：
點擊訪問一個頁面（我們這里以京東為例） 隨便訪問一個商品頁，然后復制商品標題 然后鼠標右擊點擊查看網頁源代碼 在源代碼頁按 Ctrl + f ，接著把復制的內容粘貼進去 能搜到就是 服務端渲染，否則的話，就是客戶端渲染。利用 art-template 模板引擎
Apache 部分功能實現
Node.js 相關API(本例中使用):
基于http
基于fs(文件系統)
基于path(路徑)
寫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="/" rel="external nofollow" > Parent Directory</a></li> {{each files}} <li><a href="/{{ $value }}" rel="external nofollow" >{{ $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} 訪問....`);});
新聞熱點
疑難解答
