1. 程式人生 > >前端學習 node 快速入門 系列 —— 服務端渲染

前端學習 node 快速入門 系列 —— 服務端渲染

>其他章節請看: > >[前端學習 node 快速入門 系列][1] ## 服務端渲染 在[簡易版 Apache][簡易版 Apache]一文中,我們用 node 做了一個簡單的伺服器,能提供靜態資源訪問的能力。 對於真正的網站,頁面中的資料應該來自伺服器(伺服器查詢資料庫),我們來模擬一下。請看示例: ```javascript - demo - node_modules // 安裝 art-template 後自動生成 - public - lib - art-template // 將 node_modules/art-template 拷貝過來即可 - view - client-render.html // 頁面內容採用客戶端渲染 - server-render.html // 頁面內容採用服務端渲染 - index.js // 入口檔案 - package.json // 只依賴於 art-template ``` *注*:如果不明白 node_modules、package.json,可以看我的另外一篇文章([npm][npm]) client-render.html: ```javascript

客戶端渲染

``` server-render.html: ```javascript

服務端渲染

{{title}}

    {{each list as value i}}
  • 索引 {{i + 1}} :{{value}}
  • {{/each}}
``` index.js: ```javascript const http = require('http') const fs = require('fs') const template = require('art-template') const server = http.createServer() const requestListener = (req, res) => { let url = req.url // 客戶端渲染 if(url.endsWith('client-render.html')){ fs.readFile('./public/view/' + url, (err, data) => { if (err) throw err; res.end(data) }); return } // 服務端渲染 if(url.endsWith('server-render.html')){ fs.readFile('./public/view/' + url, (err, data) => { if (err) throw err; // 服務端使用模板引擎 const ret = template.render(data.toString(), { title: '標籤', list: ['文藝', '部落格', '攝影'] }); res.end(ret) }); return } fs.readFile('.' + url, (err, data) => { if (err) { res.writeHead(404, {'Content-type':'text/html;charset=utf8'}) res.end('沒有找到對應的資源') } res.end(data) }) } server.on('request', requestListener) server.listen('3000', () => { console.log('伺服器已啟動') }) ``` 啟動伺服器: ```javascript $ node index ``` 訪問: ```javascript 1. 瀏覽器輸入 http://localhost:3000/server-render.html 頁面顯示:<是有樣式的> 服務端渲染 標籤 索引 1 :文藝 索引 2 :部落格 索引 3 :攝影 2. 瀏覽器輸入 http://localhost:3000/client-render.html 頁面顯示:<與 server-render.html 相同> ``` 雖然兩個頁面看起來相同,但一個是客戶端渲染,一個是**服務端渲染**。 *Tip*:模板引擎是為了使使用者介面和業務資料分離而產生的,它可以生成特定格式的文件。模板引擎最初出現在服務端。 這裡使用的模板引擎是 art-template。**模板引擎**應用在客戶端就是客戶端渲染;模板引擎應用在服務端就是服務端渲染。更直觀的區分,如果原始碼(瀏覽器快捷鍵:ctrl+u)中可以找到前端頁面的文字,則說明是服務端渲染,否則是客戶端渲染。 *注*:網站通常既有客戶端渲染,也有服務端渲染。例如噹噹網、京東這類電商網站,商品通常使用服務端渲染,因為商品需要被搜尋引擎看見;而評論、試讀則會使用客戶端渲染。 >其他章節請看: > >[前端學習 node 快速入門 系列][1] [1]: https://www.cnblogs.com/pengjiali/p/14494587.html '前端學習 node 快速入門 系列' [簡易版 Apache]: https://www.cnblogs.com/pengjiali/p/14534438.html '簡易版 Apache' [npm]: https://www.cnblogs.com/pengjiali/p/14509928.htm