什么是EJS模板引擎?
EJS(Embedded JavaScript)是⼀种流⾏的模板引擎,⽤于将动态数据嵌⼊到静态HTML中。 Express框架⽀持EJS,允许您轻松地创建动态Web应⽤程序,动态⽣成HTML⻚⾯,以及向⻚⾯ 中注⼊数据。 官⽹:https://ejs.bootcss.com/
安装EJS模板引擎
在使⽤EJS之前,您需要确保已经安装了EJS模块。您可以使⽤npm来安装它:
npm install ejs
配置Express使⽤EJS
配置Express以使⽤EJS作为默认的模板引擎。在您的Express应⽤程序中,添加以下代码:
const express = require('express');
const app = express();
// 设置EJS为模板引擎
app.set('view engine', 'ejs');
通过app.set('view engine', 'ejs'),您告诉Express使⽤EJS作为默认模板引擎。
创建EJS模板
创建⼀个EJS模板⽂件,通常保存在⼀个名为views的⽂件夹中。以下是⼀个简单的EJS模板示 例,例如views/index.ejs:
<!DOCTYPE html>
<html>
<head>
<title>Express EJS模板示例</title>
</head>
<body>
<h1>Hello, <%= name %>!</h1>
</body>
</html>
在EJS模板中,您可以使⽤来插⼊动态变量。在上述示例中,name变量将在渲染 时被替换为实际的值
渲染EJS模板
在Express路由处理程序中,使⽤res.render()来渲染EJS模板并传递数据:
app.get('/', (req, res) => {
res.render('index', { name: 'Express' });
});
在这个示例中,res.render('index', { name: 'Express' })将渲染views/index.ejs模板,并将数据 { name: 'Express' }传递给模板。模板中的将被替换为"Express"。
EJS模板语法
EJS⽀持许多模板语法,包括条件语句、循环语句和模板包含等。以下是⼀些常⽤的EJS模板语法 示例:
条件语句
<% if (user) { %>
<h2>Welcome, <%= user.name %>!</h2>
<% } else { %>
<h2>Welcome, Guest!</h2>
<% } %>
循环语句
<ul>
<% for (let i = 0; i < items.length; i++) { %>
<li><%= items[i] %></li>
<% } %>
</ul>
模板包含
<%- include('header') %>
<h1>Page Content</h1>
<%- include('footer') %>