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

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

數(shù)據(jù)：

模板：

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

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

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

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

工作流程：

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

這也就是最早的網(wǎng)頁渲染方式，也就是動態(tài)網(wǎng)站的核心工作步驟。在這樣的一個工作過程中，因為頁面中的內(nèi)容不是固定的，它有一些動態(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ā)和維護，把文件內(nèi)容放到單獨文件// fs.readFile('./views/index.html', (err, data) => {// if(err) {// return res.status(404).send('404 Not Found')// }// res.end(data)// })// 4. 動態(tài)頁面渲染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ù)// 獲取頁面模板// 數(shù)據(jù) + 模板 = 完整頁面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/`) })

在今天看來，這種渲染模式是不合理或者說不先進的。因為在當下這種網(wǎng)頁越來越復雜的情況下，這種模式存在很多明顯的不足：

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

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

三、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')// 當渲染以 .art結(jié)尾的資源文件的時候 使用express-art-template app.engine('art', require('express-art-template')) // art-template 模板引擎的配置 app.set('view options', {debug: process.env.NODE_ENV !== 'production' }) // 配置模板文件的存儲目錄 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ā)和維護，把文件內(nèi)容放到單獨文件// fs.readFile('./views/index.html', (err, data) => {// if(err) {// return res.status(404).send('404 Not Found')// }// res.end(data)// })// 4. 動態(tài)頁面渲染// 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ù)// // 獲取頁面模板// // 數(shù)據(jù) + 模板 = 完整頁面// 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.渲染這件事是在服務端完成的// const ret = template.render(templateStr, { // 模板中使用的數(shù)據(jù)// foo: 'bar',// todos// })// res.end(ret)// })// 1.讀取模板文件// 2.渲染// 3.發(fā)送響應res.render('index.art', {foo: 'bar',todos: todos})}) app.listen(3000, () => {console.log(`Server running at http://localhost:3000/`) })

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

4.1 配置選項

4.2 托管多個資源目錄

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

4.3 頁面中的資源路徑問題

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

總結(jié)

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

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