javascript
EJS + Express基本使用
EJS + Express基本使用
序：
在使用Node.js的Web框架Express時，經常會用到ejs作為模板引擎，使用Express+ejs主要是為了實現服務端渲染，利于SEO優化。所以，本篇博客僅僅是為了學習Express而寫的，在真實的項目開發中不推薦使用這種方式。
EJS 是一套模板語言，用普通的 JS 代碼生成 HTML 頁面，即嵌入式JS模板引擎。
一、準備工作
1、安裝ejs和express
npm install ejs npm i express或
npm install ejs express nodemon -D2、在views文件夾中新建一個ejs后綴的文件，在該文件里寫正常的HTML代碼
3、在app.js中設置默認模板引擎
app.set(“view engine”,“ejs”)二、ejs語法（基于express搭建的后端環境）
1、方法
1.1、 template
編譯字符串得到模板函數。
let template = ejs.compile(str, options); template(data); // => 輸出渲染后的 HTML 字符串- str：需要解析的字符串模板
- data：數據
- option：配置選項
例子：
/* 書寫ejs */ let html = ejs.compile('<%=123 %>')(); /* 將寫好的ejs進行渲染 */ res.send(html);1.2、 render
直接渲染字符串并生成HTML
ejs.render(str, data, options); // => 輸出渲染后的 HTML 字符串- str：需要解析的字符串模板
- data：數據
- option：配置選項
例子：
/* 書寫ejs */ let people = ['geddy', 'neil', 'alex'],html = ejs.render('<%= people.join(", "); %>', {people: people}); /* 將寫好的ejs進行渲染 */ res.send(html);1.3、 renderFile
解析文件生成HTML
ejs.renderFile(filename, data, options, function(err, str){// str => 輸出渲染后的 HTML 字符串 });- str：需要解析的字符串模板
- data：數據
- option：配置選項
例子：
let people = ['geddy', 'neil', 'alex'],html = ejs.renderFile('./test.ejs', (err, str) => {res.send(str);});1.4 、參數
上面3個方法中的options可以選擇的參數如下：
- cache 緩存編譯后的函數，需要指定 filename。
- filename 被 cache 參數用做鍵值，同時也用于 include 語句。
- context 函數執行時的上下文環境。
- compileDebug 當值為 false 時不編譯調試語句。
- client 返回獨立的編譯后的函數。
- delimiter 放在角括號中的字符，用于標記標簽的開與閉。
- debug 將生成的函數體輸出。
- _with 是否使用 with() {} 結構。如果值為 false，所有局部數據將存儲在 locals 對象上。
- localsName 如果不使用 with ，localsName 將作為存儲局部變量的對象的名稱。默認名稱是 locals。
- rmWhitespace 刪除所有可安全刪除的空白字符，包括開始與結尾處的空格。對于所有標簽來說，它提供了一個更安全版本的 -%> 標簽（在一行的中間并不會剔除標簽后面的換行符)。
- escape 為 <%= 結構設置對應的轉義（escape）函數。它被用于輸出結果以及在生成的客戶端函數中通過 .toString() 輸出。(默認轉義 XML)。
- outputFunctionName 設置為代表函數名的字符串（例如 'echo' 或 'print'）時，將輸出腳本標簽之間應該輸出的內容。
- async 當值為 true 時，EJS 將使用異步函數進行渲染。（依賴于 JS 運行環境對 async/await 是否支持）
2、標簽含義
- <% ‘腳本’ 標簽，用于流程控制，無輸出。
- <%_ 刪除其前面的空格符
- <%= 輸出數據到模板（輸出是轉義 HTML 標簽）
- <%- 輸出非轉義的數據到模板
- <%# 注釋標簽，不執行、不輸出內容
- <%% 輸出字符串 ‘<%’
- %> 一般結束標簽
- -%> 刪除緊隨其后的換行符
- _%> 將結束標簽后面的空格符刪除
3、引入其它文件
通過 include 指令將相對于模板路徑中的模板片段包含進來。(需要提供 ‘filename‘ 參數。)
因為該項需要使用到fs所以只有在Node環境中才能生效，也就是說需要搭建一個Node后端服務器。
let people = ['geddy', 'neil', 'alex'],html = ejs.render(`<%- include('test.ejs') %>`, {filename: 'test.ejs'});4、自定義分隔符
可針對單個模板或全局使用自定義分隔符：
let ejs = require('ejs'),users = ['geddy', 'neil', 'alex'];// 單個模板文件 ejs.render('<?= users.join(" | "); ?>', {users: users},{delimiter: '?'}); // => 'geddy | neil | alex'// 全局 ejs.delimiter = '$'; ejs.render('<$= users.join(" | "); $>', {users: users}); // => 'geddy | neil | alex'5、 緩存
EJS 附帶了一個基本的進程內緩存，用于緩在渲染模板過程中所生成的臨時 JavaScript 函數。 通過 Node 的 lru-cache 庫可以很容易地加入 LRU 緩存：
let ejs = require('ejs'),LRU = require('lru-cache'); ejs.cache = LRU(100); // 具有 100 條內容限制的 LRU 緩存如果要清除 EJS 緩存，調用 ejs.clearCache 即可。如果你正在使用的是 LRU 緩存并且需要設置不同的限額，則只需要將 ejs.cache 重置為 一個新的 LRU 實例即可。
6、自定義文件加載器
默認的文件加載器是 fs.readFileSync，如果你想要的自定義它, 設置ejs.fileLoader 即可。
let ejs = require('ejs'); let myFileLoader = function (filePath) {return 'myFileLoader: ' + fs.readFileSync(filePath); };ejs.fileLoader = myFileLoad;使用此功能，您可以在讀取模板之前對其進行預處理。
7、布局（Layouts）
EJS 并未對塊（blocks）提供專門的支持，但是可以通過 包含頁眉和頁腳來實現布局，如下所示：
<%- include('header'); -%> <h1>Title </h1> <p>My page </p> <%- include('footer'); -%>三、簡單搭建一個復用模塊
建一個views文件，下面有
- header.ejs
- footer.ejs
- index.ejs
- login.ejs
header.ejs
<h1>這是頭部</h1>footer.ejs
<h1>這是尾部</h1>index.ejs
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><%- include("header")%><p><%= name %></p><!-- 商品列表頁面 --><ul><% for (let i = (page-1)*4;i < page*4;i++) {%><li><%= arr[i] %></li> <%} %></ul><p>當前頁碼為：<%= page %></p><% if(page == 1){ %>當前是首頁<% }else if(page == 2){ %>當前是尾頁<% }else{ %>當前頁碼有問題<% } %><%- include("footer")%> </body> </html>login.ejs
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><%- include("header") %> 歡迎來到登錄頁<%- include("footer") %> </body> </html>建一個入口函數app.js
const express = require('express') const app = express() const port = 3000//設置默認使用的模板引擎 app.set("view engine","ejs");app.get("/list",(req,res)=>{//分頁效果let {page} = req.query;let arr = ["華為Mate40Pro","華為Mate40RS","華為P40","華為P40 pro","華為 nova9","華為 暢享20e","華為 nova9 pro","華為 nova7",]res.render("index",{name:"lisi",arr,page}); }) app.get("/login",(req,res)=>{res.render("login"); }) app.get('/', (req, res) => res.send('Hello World!')) app.listen(port, () => console.log(`Example app listening on port ${port}!`))運行app.js，在瀏覽器中輸入相應的路由，即可。
四、總結：
在Nodejs搭建的后端中可能會用到EJS，但是前端項目一般不會使用EJS。
EJS最方便的地方就是在于將項目給別人使用的時候，人家不用過多的去了解你的代碼，直接修改配置文件就可以達到自己想要的效果。比如說Hexo中的配置都集中在_config.yml這個文件中，你根本不需要去一行一行的瀏覽源代碼，就可以實現修改，達到你想要的效果。
參考：EJS官網
總結
以上是生活随笔為你收集整理的EJS + Express基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue入门之04-生命周期 数据共享
- 下一篇： Springboot+美妆网站的设计与实