20-ejs入門 · Nodejs

# ejs入門新建項目someapp文件夾命令行npm init -y自動生成pakcage npm install ejs # EJS 使用注意：使用之前需安裝包 npm install ejs。 ## 常用標簽 * <%= 輸出數據到模板（輸出是轉義 HTML 標簽） * <%- 輸出非轉義的數據到模板 * <% 用于流程控制，無輸出 * %> 一般結束標簽 ## 用法--新建app.js ``` constejs=require('ejs'); let arr=?['張三',?'李四',?'王五']; //ejs.render(str,?data,?options); console.log(ejs.render('',{usre?:arr})); //?=>?輸出繪制后的?HTML?字符串 ``` ~~~ const ejs = require('ejs'); ? ejs.render(str, data, options); // => 輸出繪制后的 HTML 字符串 ? ejs.renderFile(filename, data, options, function(err, str){ ? ?// str => 輸出繪制后的 HTML 字符串 }); ~~~ * cache 緩存編譯后的函數，需要提供 filename * filename 被 cache 參數用做鍵值，同時也用于 include 語句 * context 函數執行時的上下文環境 * compileDebug 當為 false 時不編譯調試語句 * client 返回獨立的編譯后的函數 * delimiter 放在角括號中的字符，用于標記標簽的開與閉 * debug 將生成的函數體輸出 * \_with 是否使用 with() {} 結構。如果為 false，所有局部數據將存儲在 locals 對象上。 * localsName 如果不使用 with ，localsName 將作為存儲局部變量的對象的名稱。默認名稱是 locals * rmWhitespace 刪除所有可安全刪除的空白字符，包括開始與結尾處的空格。對于所有標簽來說，它提供了一個更安全版本的 -%> (在一行的中間并不會剔除標簽后面的換行符) * escape 為 <%= 結構設置對應的轉義（escape）函數。它被用于輸出結果以及在生成的客戶端函數中通過 .toString() 輸出。(默認轉義 XML) ## 輸出 ~~~ // 模板文件 out.ejs <h2><%= user.name %></h2> <h2><%- user.name %></h2> ~~~ ~~~ const ejs = require('ejs'); ejs.renderFile(__dirname + '/out.ejs', {user : {name : '<span>lony</span>'}}, (err, str) => { ? ?// str => 輸出繪制后的 HTML 字符串 ? ?console.log(str); }); ~~~ ## 條件 ~~~ // 模板文件 if.ejs <% if (user) { %> <h2><%= user.name %></h2> <% } %> ~~~ ~~~ const ejs = require('ejs'); ejs.renderFile(__dirname + '/if.ejs', {user : {name : 'lony'}}, (err, str) => { ? ?console.log(str); }); ~~~ ## 循環 ~~~ // 模板文件 loop.ejs <% users.forEach((user) => { %> <%= user.id %> <%= user.name %> <% }) %> ~~~ ~~~ const ejs = require('ejs'); ejs.renderFile(__dirname + '/loop.ejs', {users : [{id : 1, name: 'xx'}, {id : 2, name: 'yy'}]}, (err, str) => { ? ?console.log(str); }); ~~~ # 使用模板技術響應 HTML ``` // books.ejs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>書籍</title> </head> <body> <ul> <% books.forEach((book) => { %> <li><%= book %></li> <% }) %> </ul> </body> </html> ``` ``` const http = require('http'); const ejs = require('ejs'); // 使用模板技術響應 HTML 格式的數據 http.createServer((req, res) => { ? ?res.writeHead(200, {'Content-Type' : 'text/html'}); ? ?let data = {books: ['西游記', '三國演義', '水滸傳', '紅樓夢']}; ? ?ejs.renderFile(__dirname + '/books.ejs', data, (err, str) => { ? ? ? ?console.log(str); ? ? ? ?res.end(str); ? }); }).listen(8888); ```