什么是ejs
"E" 代表 "effective"铁孵，即【高效】。EJS 是一套簡單的模板語言，幫你利用普通的 JavaScript 代碼生成 HTML 頁面祥山。EJS 沒有如何組織內(nèi)容的教條；也沒有再造一套迭代和控制流語法掉伏；有的只是普通的 JavaScript 代碼而已缝呕。
特點(diǎn)
- 快速編譯與繪制輸出
- 簡潔的模板標(biāo)簽：<% %>
- 自定義分割符（例如：用 <? ?> 替換 <% %>）
- 引入模板片段
- 同時(shí)支持服務(wù)器端和瀏覽器 JS 環(huán)境
- JavaScript 中間結(jié)果靜態(tài)緩存
- 模板靜態(tài)緩存
- 兼容 Express 視圖系統(tǒng)
ejs的使用
1澳窑、使用npm安裝ejs
$ npm install ejs
- 新建index.ejs
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title>
</head>
<body>
<%= index %>
</body>
</html>
- 引入ejs模塊
const ejs = require('ejs');
- 渲染ejs
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/') {
res.writeHead(200, {
'Content-Type': 'text/html'
});
// 渲染文件 index.ejs
ejs.renderFile('./views/index.ejs', {
title: 'ejs-index', // 渲染的數(shù)據(jù)key: 對應(yīng)到了ejs中的title
index: '首頁'}, // 渲染的數(shù)據(jù)key: 對應(yīng)到了ejs中的index
(err, data) => {
if (err ) {
console.log(err);
} else {
console.log(data);
res.end(data);
}
})
}
}).listen(3002);
-
koa使用ejs
配置koa-viewsconst koaViews = require('koa-views'); // 配置渲染文件路徑 及文件后綴 app.use(koaViews('./views', { extension: 'ejs' }));// 響應(yīng)路由渲染文件
router.get('/', async ctx => { await ctx.render('index', { title: 'ejs-index', // 渲染的數(shù)據(jù)key: 對應(yīng)到了ejs中的title index: '首頁'}, // 渲染的數(shù)據(jù)key: 對應(yīng)到了ejs中的index }); }); 語法
<% :'腳本' 標(biāo)簽，用于流程控制供常，無輸出
%> :一般結(jié)束標(biāo)簽
<%= :輸出數(shù)據(jù)到模板（輸出是轉(zhuǎn)義 HTML 標(biāo)簽）
<%- :輸出非轉(zhuǎn)義的數(shù)據(jù)到模板
