Express -- 模板引擎 · 前端知識 -- 學習整理

>[success] # Express -- 模板引擎 ~~~ 1.和大多數后臺語言一樣，可以指定網頁渲染的模板引擎。 2.這里使用的是art - template ~~~ >[danger] ##### 下載 -- art-template ~~~ npm install --save art-template npm install --save express-art-template ~~~ >[danger] ##### 使用 -- art-template * set 方法 ~~~ 1.set方法用于指定變量的值. 2.下面代碼使用set方法，為系統變量“views”和“view engine”指定值。 ~~~ ~~~ 1.設置模板文件所在目錄，第一參數views 是固定值是為了告訴要對express 做模板引擎操作,第二個值是渲染的視圖層地址: app.set('views',path.join(__dirname,'views')); 2.設置要使用的模板引擎,第一個參數view engine 是固定的，第二個參數指定模板文件的后綴名為html app.set('view engine','html'); 3.要運行后綴是html 的模板引擎 app.engine('html', require('express-art-template')); ~~~ >[danger] ##### 如何渲染 ~~~ 1.在響應的res 參數有個方法叫render，第一個參數是渲染在views文件下的，指定文件的名稱，第二個是要渲染的數據，數據是個對象 let data = { title : '水果', list : ['apple','orange','banana'] } res.render('list',data); ~~~ >[danger] ##### 簡單的例子說明 ~~~ 1.npm init -y // 初始化 package.json 2.npm install express --save // 安裝express 3.npm install --save art-template npm install --save express-art-template // 安裝模板依賴，和對應模板 ~~~ ~~~ const express = require('express'); const path =require('path'); const app = express(); // 設置模板路徑 app.set('views', path.join(__dirname,'views')); // 設置模板引擎 app.set('view engine','html'); // 使express兼容art-template模板引擎 app.engine('html', require('express-art-template')); app.get('/', (req, res)=>{ let data = { title : '水果', list : ['apple','orange','banana'] } // 參數一：模板名稱；參數二：渲染模板的數據 res.render('list',data); }); app.listen(3000,()=>{ console.log('running...'); }); ~~~ * 備注 ~~~ 1.這里面的list 是在views 文件下的一個list.html ，里面的內容是如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>{{title}}</div> <div> <ul> {{each list}} <li>{{$value}}</li> {{/each}} </ul> </div> </body> </html> ~~~