您好,登錄后才能下訂單哦!
這篇文章主要介紹了使用node.js模仿Apache小部分功能的案例,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
首先,這個例子用到了服務端渲染的技術。服務端渲染,說白了就是在服務端使用模板引擎,這里我先簡單的介紹一下服務端渲染與客戶端渲染之間的區別。
服務端渲染與客戶端渲染之間的區別:
客戶端渲染不利于搜索引擎優化
服務端渲染可以被爬蟲抓取到,而客戶端異步渲染很難被爬蟲抓取到(例如:AJAX)
大部分的網站既不是純異步(客戶端),也不是純服務端渲染出來的,而是兩者結合的
例如:京東的商品列表采用的就是服務端渲染,目的是為了SEO搜索引擎優化,說白了就是為了能夠被搜索到,且能被爬蟲抓取(搜索引擎本身也是一種爬蟲)。
而京東的商品評論列表為了用戶體驗,而且也不需要SEO優化,所以才用的是客戶端渲染
簡單的判斷內容為服務端渲染還是客戶端渲染
最簡單的方法就是:
點擊訪問一個頁面(我們這里以京東為例)
隨便訪問一個商品頁,然后復制商品標題
然后鼠標右擊點擊查看網頁源代碼
在源代碼頁按 Ctrl + f ,接著把復制的內容粘貼進去
能搜到就是 服務端渲染,否則的話,就是客戶端渲染。
利用 art-template 模板引擎
安裝: 在想要安裝的目錄下打開命令行工具 輸入 npm install 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 文件夾(文件名可以自己隨意):
寫HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Index of / {{title}}</title> </head> <body> <h2>Index of / {{title}}</h2> <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} 訪問....`); });
感謝你能夠認真閱讀完這篇文章,希望小編分享的“使用node.js模仿Apache小部分功能的案例”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。