Express与传统Web应用（服务端渲染、art-template模板引擎、配置静态资源托管）
一、服務端渲染相關的概念
什么是渲染？
例如對于我們前端開發者來說最常見的一種場景就是：請求后端接口數據，然后將數據通過模板綁定語法綁定到頁面中，最終呈現給用戶。
數據：
模板：
渲染（數據+模板）結果：
把（數據+模板）拼接到一起的這事兒就是我們這里所指的渲染。
二、傳統的Web應用
最早期，Web頁面渲染都是在服務端完成的，即服務端運行過程中將所需的數據結合頁面模板渲染為HTML，響應給客戶端瀏覽器。所以瀏覽器呈現出來的是直接包含內容的頁面。
工作流程：
這種方式的代表性技術有：ASP、PHP、JSP等，再到后來的一些相對高級一點的服務端框架配合一些模板引擎。
無論如何這種方式對于沒有玩兒過后端開發的來說可能會比較陌生，所以下面通過我們前端比較熟悉的Node.js來了解一下這種方式。
這也就是最早的網頁渲染方式，也就是動態網站的核心工作步驟。在這樣的一個工作過程中，因為頁面中的內容不是固定的，它有一些動態的內容。
const express = require('express') const fs = require('fs') const app = express()app.get('/', (req, res) => {// 1. 普通文本// res.send('Hello World')// 2. HTML 格式文本// res.send('<h2>Hello World</h2>')// 3. 為了便于開發和維護，把文件內容放到單獨文件// fs.readFile('./views/index.html', (err, data) => {// if(err) {// return res.status(404).send('404 Not Found')// }// res.end(data)// })// 4. 動態頁面渲染const todos = [{id: 1,title: '吃飯1'},{id: 2,title: '吃飯2'},{id: 3,title: '吃飯3'},{id: 4,title: '吃飯4'}]fs.readFile('./views/index.html', 'utf8', (err, data) => {if(err) {return res.status(404).send('404 Not Found')}// 獲取數據// 獲取頁面模板// 數據 + 模板 = 完整頁面let str = ''todos.forEach(todo => {str += `<li>${todo.title}</li>`})const ret = data.replace('(*^▽^*)', str)res.end(ret)})// 5. 使用模板引擎 })app.listen(3000, () => {console.log(`Server running at http://localhost:3000/`) })
在今天看來，這種渲染模式是不合理或者說不先進的。因為在當下這種網頁越來越復雜的情況下，這種模式存在很多明顯的不足：
- 應用的前后端部分完全耦合在一起，在前后端協同開發方面會有非常大的阻力；
- 前端沒有足夠的發揮空間，無法充分利用現在前端生態下的一些更優秀的方案；
- 由于內容都是在服務端動態生成的，所以服務端的壓力較大；
- 相比目前流行的SPA應用來說，用戶體驗一般；
但是不得不說，在網頁應用并不復雜的情況下，這種方式也是可取的。
三、art-template 模板引擎
npm install art-template --save
四、在Express 中托管靜態資源
4.1 配置選項
4.2 托管多個資源目錄
注意：
建議加上前綴，防止出現比如
/node_modules里面有css/main.css
/public里面也有css/main.css，
如果這時沒有加前綴的話，默認訪問的是前面的那個（也就是上面代碼中第一行的）目錄里面的css/main.css
4.3 頁面中的資源路徑問題
關于頁面中的靜態資料路徑，建議使用 絕對路徑 / ， / 代表的就是當前網站的根目錄。
如果使用相對路徑的話，./相對的并不是文件中的路徑，而是請求的url,這樣容易出現靜態資源訪問不到的問題
總結
以上是生活随笔為你收集整理的Express与传统Web应用（服务端渲染、art-template模板引擎、配置静态资源托管）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matplotlib 散点图_matpl
- 下一篇： JS高级——错误处理