一、服務(wù)端渲染相關(guān)的概念

什么是渲染？
例如對(duì)于我們前端開發(fā)者來(lái)說(shuō)最常見的一種場(chǎng)景就是：請(qǐng)求后端接口數(shù)據(jù)，然后將數(shù)據(jù)通過(guò)模板綁定語(yǔ)法綁定到頁(yè)面中，最終呈現(xiàn)給用戶。

數(shù)據(jù)：

模板：

渲染（數(shù)據(jù)+模板）結(jié)果：

把（數(shù)據(jù)+模板）拼接到一起的這事兒就是我們這里所指的渲染。

二、傳統(tǒng)的Web應(yīng)用

最早期，Web頁(yè)面渲染都是在服務(wù)端完成的，即服務(wù)端運(yùn)行過(guò)程中將所需的數(shù)據(jù)結(jié)合頁(yè)面模板渲染為HTML，響應(yīng)給客戶端瀏覽器。所以瀏覽器呈現(xiàn)出來(lái)的是直接包含內(nèi)容的頁(yè)面。

工作流程：

這種方式的代表性技術(shù)有：ASP、PHP、JSP等，再到后來(lái)的一些相對(duì)高級(jí)一點(diǎn)的服務(wù)端框架配合一些模板引擎。
無(wú)論如何這種方式對(duì)于沒(méi)有玩兒過(guò)后端開發(fā)的來(lái)說(shuō)可能會(huì)比較陌生，所以下面通過(guò)我們前端比較熟悉的Node.js來(lái)了解一下這種方式。

這也就是最早的網(wǎng)頁(yè)渲染方式，也就是動(dòng)態(tài)網(wǎng)站的核心工作步驟。在這樣的一個(gè)工作過(guò)程中，因?yàn)轫?yè)面中的內(nèi)容不是固定的，它有一些動(dòng)態(tài)的內(nèi)容。

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. 為了便于開發(fā)和維護(hù)，把文件內(nèi)容放到單獨(dú)文件// fs.readFile('./views/index.html', (err, data) => {// if(err) {// return res.status(404).send('404 Not Found')// }// res.end(data)// })// 4. 動(dòng)態(tài)頁(yè)面渲染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')}// 獲取數(shù)據(jù)// 獲取頁(yè)面模板// 數(shù)據(jù) + 模板 = 完整頁(yè)面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/`) })

在今天看來(lái)，這種渲染模式是不合理或者說(shuō)不先進(jìn)的。因?yàn)樵诋?dāng)下這種網(wǎng)頁(yè)越來(lái)越復(fù)雜的情況下，這種模式存在很多明顯的不足：

• 應(yīng)用的前后端部分完全耦合在一起，在前后端協(xié)同開發(fā)方面會(huì)有非常大的阻力；
• 前端沒(méi)有足夠的發(fā)揮空間，無(wú)法充分利用現(xiàn)在前端生態(tài)下的一些更優(yōu)秀的方案；
• 由于內(nèi)容都是在服務(wù)端動(dòng)態(tài)生成的，所以服務(wù)端的壓力較大；
• 相比目前流行的SPA應(yīng)用來(lái)說(shuō)，用戶體驗(yàn)一般；

但是不得不說(shuō)，在網(wǎng)頁(yè)應(yīng)用并不復(fù)雜的情況下，這種方式也是可取的。

三、art-template 模板引擎

npm install art-template --save

const express = require('express') const fs = require('fs') const path = require('path') const app = express() const template = require('art-template')// 當(dāng)渲染以 .art結(jié)尾的資源文件的時(shí)候 使用express-art-template app.engine('art', require('express-art-template')) // art-template 模板引擎的配置 app.set('view options', {debug: process.env.NODE_ENV !== 'production' }) // 配置模板文件的存儲(chǔ)目錄 app.set('views', path.join(__dirname, 'views')) // 可以省略的模板文件后綴名 app.set('view engine', 'art')app.get('/', (req, res) => {// 1. 普通文本// res.send('Hello World')// 2. HTML 格式文本// res.send('<h2>Hello World</h2>')// 3. 為了便于開發(fā)和維護(hù)，把文件內(nèi)容放到單獨(dú)文件// fs.readFile('./views/index.html', (err, data) => {// if(err) {// return res.status(404).send('404 Not Found')// }// res.end(data)// })// 4. 動(dòng)態(tài)頁(yè)面渲染// 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')// }// // 獲取數(shù)據(jù)// // 獲取頁(yè)面模板// // 數(shù)據(jù) + 模板 = 完整頁(yè)面// let str = ''// todos.forEach(todo => {// str += `<li>${todo.title}</li>`// })// const ret = data.replace('(*^▽^*)', str)// res.end(ret)// })// 5. 使用模板引擎// 1.讀取模板內(nèi)容// fs.readFile('./views/index.html', 'utf8', (err, templateStr) => {// if(err) {// return res.status(404).send('404 Not Found')// }// // 2.獲取數(shù)據(jù)const todos = [{id: 1,title: '吃飯1'},{id: 2,title: '吃飯2'},{id: 3,title: '吃飯3'},{id: 4,title: '吃飯4'}]// // 3.渲染這件事是在服務(wù)端完成的// const ret = template.render(templateStr, { // 模板中使用的數(shù)據(jù)// foo: 'bar',// todos// })// res.end(ret)// })// 1.讀取模板文件// 2.渲染// 3.發(fā)送響應(yīng)res.render('index.art', {foo: 'bar',todos: todos})}) app.listen(3000, () => {console.log(`Server running at http://localhost:3000/`) })

四、在Express 中托管靜態(tài)資源

4.1 配置選項(xiàng)

4.2 托管多個(gè)資源目錄

注意：
建議加上前綴，防止出現(xiàn)比如
/node_modules里面有css/main.css
/public里面也有css/main.css，
如果這時(shí)沒(méi)有加前綴的話，默認(rèn)訪問(wèn)的是前面的那個(gè)（也就是上面代碼中第一行的）目錄里面的css/main.css

4.3 頁(yè)面中的資源路徑問(wèn)題

關(guān)于頁(yè)面中的靜態(tài)資料路徑，建議使用 絕對(duì)路徑 / ， / 代表的就是當(dāng)前網(wǎng)站的根目錄。
如果使用相對(duì)路徑的話，./相對(duì)的并不是文件中的路徑，而是請(qǐng)求的url,這樣容易出現(xiàn)靜態(tài)資源訪問(wèn)不到的問(wèn)題

總結(jié)

以上是生活随笔為你收集整理的Express与传统Web应用（服务端渲染、art-template模板引擎、配置静态资源托管）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。