Express中使用ejs新建專案以及ejs中實現傳參、區域性檢視include、迴圈列表資料的使用
場景
什麼是模板引擎
模板引擎( Template Engine)是一個從頁面模板根據一定的規則生成HTML的工具。它的發韌可以追溯到1996年PHP 2.0的誕生。PHP原本是Personal Home Page Tools(個人主頁工具)的簡稱，用於取代Perl和CGI的組合，其功能是讓程式碼嵌人在HTML中執行，以產生動態的頁面，因此PHP堪稱是最早的模板引擎的雛形。隨後的ASP, JSP都沿用了這個模式，即建立一個HTML頁面模板，插人可執行的程式碼，執行時動態生成HTML。
基於JavaScript的模板引擎有許多種實現，我們推薦使用ejs(Embedded JavaScript)，因為它十分簡單，而且與Express整合良好。由於它是標準JavaScript實現的，因此它不僅可以執行在伺服器端，還可以執行在瀏覽器中。我們這一章的示例是在伺服器端執行ejs,這樣減少了對瀏覽器的依賴，而且更符合傳統架構的習慣。
ejs官網：
注：
部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
新建專案
在前端專案IDE中，這裡是Webstorm，新建空專案，然後在此目錄下開啟終端。
express -e microBlog
後面跟的是專案名，會使用ejs引擎去生成專案。
然後會生成專案目錄，進入到專案中
cd microBlog
安裝專案依賴
npm install
或者
cnpm install
啟動專案的命令不再是node app.js，而是
npm start
然後開啟瀏覽器輸入：
localhost:3000
專案就啟動成功了。
使用模板引擎
首先在app.js中設定要使用的模板引擎和模板引擎的位置
app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs');
在使用ejs作為模板引擎後在app.js中已經添加了這些程式碼。
在app.js中已經引入了index模組
var indexRouter = require('./routes/index'); app.use('/', indexRouter);
來到routes下index.js
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: '公眾號:霸道的程式猿' }); }); module.exports = router;
通過
res.render('index', { title: '公眾號:霸道的程式猿' });
就能呼叫名字為index.ejs的模板引擎，並且向其傳遞引數，引數名為title,引數值為'公眾號:霸道的程式猿'
來到views下index.ejs中
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
就可以通過
<%= title %>
呼叫傳遞的引數。
重啟專案並重新訪問
片段檢視
Express的檢視系統還支援片段檢視，就是一個頁面的片段，通常是重複的內容，用於迭代顯示。
在app.js中新增一個路由
app.get('/list',function (req,res) { res.render('list',{ title:'List', items:[['公','眾','號'],['霸','道','的','程','序','猿'],['編','程','教','程','與','資','源'],['免','費','推','送']] }); });
此路由向名字為list.ejs的模板引擎傳遞一個物件，物件有兩個屬性，其中第二個屬性是一個二維陣列。
然後在list.ejs中獲取物件的第二個屬性的值。
在views下新建list.ejs
<ul>
<% items.forEach(function(item){ %>
<%- include('./listitem', {item: item}); %>
<% }); %>
</ul>
這裡使用的是ejs的迴圈的語法，其中items就是上面傳遞過來的引數。
<%-代表輸出非轉義的資料到模板，其它標籤含義還有
這裡為了演示還使用了include用來包含另一個ejs。
通過 include 指令將相對於模板路徑中的模板片段包含進來。(需要提供 'filename' 引數。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 兩個模板檔案，你可以通過 <%- include('user/show'); %> 程式碼包含後者。
你可能需要能夠輸出原始內容的標籤 (<%-) 用於 include 指令，避免對輸出的 HTML 程式碼做轉義處理。
這裡引入了在同級目錄下的listitem.ejs模板引擎檔案，並且向其傳遞引數item
在views下新建檔案listitem.ejs
<%for(var i=0;i<item.length;i++) { %> <li><%=item[i] %></li> <%}%>
然後啟動專案，訪問
localhost:3000/list
示例程式碼下載
https://download.csdn.net/download/BADAO_LIUMANG_QIZHI/12980008