Express中使用ejs新建项目以及ejs中实现传参、局部视图include、循环列表数据的使用
場景
什么是模板引擎
??? 模板引擎( Template Engine)是一個從頁面模板根據(jù)一定的規(guī)則生成HTML的工具。它的發(fā)韌可以追溯到1996年P(guān)HP 2.0的誕生。PHP原本是Personal Home Page Tools(個人主頁工具)的簡稱，用于取代Perl和CGI的組合，其功能是讓代碼嵌人在HTML中執(zhí)行，以產(chǎn)生動態(tài)的頁面，因此PHP堪稱是最早的模板引擎的雛形。隨后的ASP, JSP都沿用了這個模式，即建立一個HTML頁面模板，插人可執(zhí)行的代碼，運行時動態(tài)生成HTML。
??? 基于JavaScript的模板引擎有許多種實現(xiàn)，我們推薦使用ejs(Embedded JavaScript)，因為它十分簡單，而且與Express集成良好。由于它是標(biāo)準(zhǔn)JavaScript實現(xiàn)的，因此它不僅可以運行在服務(wù)器端，還可以運行在瀏覽器中。我們這一章的示例是在服務(wù)器端運行ejs,這樣減少了對瀏覽器的依賴，而且更符合傳統(tǒng)架構(gòu)的習(xí)慣。
ejs官網(wǎng)：
https://ejs.bootcss.com/#docs
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。
實現(xiàn)
新建項目
在前端項目IDE中，這里是Webstorm，新建空項目，然后在此目錄下打開終端。
express -e microBlog后面跟的是項目名，會使用ejs引擎去生成項目。
?
然后會生成項目目錄，進入到項目中
cd microBlog安裝項目依賴
npm install或者
cnpm install?
啟動項目的命令不再是node app.js，而是
npm start?
然后打開瀏覽器輸入：
localhost:3000
項目就啟動成功了。
使用模板引擎
首先在app.js中設(shè)置要使用的模板引擎和模板引擎的位置
app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs');在使用ejs作為模板引擎后在app.js中已經(jīng)添加了這些代碼。
在app.js中已經(jīng)引入了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: '公眾號:霸道的程序猿' });就能調(diào)用名字為index.ejs的模板引擎，并且向其傳遞參數(shù)，參數(shù)名為title,參數(shù)值為'公眾號:霸道的程序猿'
來到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 %>調(diào)用傳遞的參數(shù)。
重啟項目并重新訪問
?
片段視圖
Express的視圖系統(tǒng)還支持片段視圖，就是一個頁面的片段，通常是重復(fù)的內(nèi)容，用于迭代顯示。
在app.js中添加一個路由
app.get('/list',function (req,res) {res.render('list',{title:'List',items:[['公','眾','號'],['霸','道','的','程','序','猿'],['編','程','教','程','與','資','源'],['免','費','推','送']]}); });此路由向名字為list.ejs的模板引擎?zhèn)鬟f一個對象，對象有兩個屬性，其中第二個屬性是一個二維數(shù)組。
然后在list.ejs中獲取對象的第二個屬性的值。
在views下新建list.ejs
<ul><% items.forEach(function(item){ %><%- include('./listitem', {item: item}); %><% }); %> </ul>這里使用的是ejs的循環(huán)的語法，其中items就是上面?zhèn)鬟f過來的參數(shù)。
<%-代表輸出非轉(zhuǎn)義的數(shù)據(jù)到模板，其它標(biāo)簽含義還有
?
這里為了演示還使用了include用來包含另一個ejs。
通過 include 指令將相對于模板路徑中的模板片段包含進來。(需要提供 'filename' 參數(shù)。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 兩個模板文件，你可以通過 <%- include('user/show'); %> 代碼包含后者。
你可能需要能夠輸出原始內(nèi)容的標(biāo)簽 (<%-) 用于 include 指令，避免對輸出的 HTML 代碼做轉(zhuǎn)義處理。
這里引入了在同級目錄下的listitem.ejs模板引擎文件，并且向其傳遞參數(shù)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
總結(jié)
以上是生活随笔為你收集整理的Express中使用ejs新建项目以及ejs中实现传参、局部视图include、循环列表数据的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Express新建工程以及新建路由规则、
- 下一篇： Nodejs中搭建一个静态Web服务器,