Node.js --- 模板引擎EJS-EW帮帮网

1. 前言

模板引擎是一种工具或库，用于在开发中生成动态内容的 HTML 页面。它通过将预定义的模板与数据结合，生成最终的输出（如 HTML 页面、字符串等）。模板引擎广泛应用于前端和后端开发，尤其是在构建动态网站时。

2. EJS模板引擎

EJS (Embedded JavaScript Templates) 是一种模板引擎，可以帮助我们在 HTML 页面中嵌入 JavaScript 代码，用于动态渲染内容。EJS 语法简洁且与 HTML 高度相似，是 Express.js 等服务器端框架的常用选择。

在项目中安装EJS

npm install ejs

模板引擎是分离用户界面和业务数据的一种技术

在Express中配置EJS为模板引擎

const express = require("express");
const app = express();

// 设置模板引擎为 EJS
app.set("view engine", "ejs");

// 设置模板文件目录（默认是 ./views）
app.set("views", "./views"); //模板引擎文件都存储在该文件夹中

// 配置静态文件目录
app.use(express.static("public"));

app.listen(3000, () => console.log("Server running at http://localhost:3000"));

3. express中使用ejs

模板引擎是一种工具，用于将数据与 HTML 模板结合，从而动态生成网页内容。模板引擎的主要功能是通过嵌入动态数据（如从数据库中获取的数据）生成静态的 HTML 页面。

npm install ejs

设置模板引擎

使用 app.set('view engine', 'ejs') 告诉 Express 使用 EJS 作为模板引擎。

app.set('view engine','ejs')

在node.js中也不仅仅只有ejs模板引擎，例如pug，twing等模板引擎

设置视图文件路径

Express默认会从views文件夹查找视图模板文件

app.set('views',path.resolve(...))

也可以指定一个自定义的文件夹路径来存放视图文件，而不是使用默认的 views 文件夹。

渲染路由

创建路由设置render响应，render()传入参数模板的文件路径，会在views文件夹中查找，以及对应数据，数据以键值对的形式传递

app.get('/home',(req,res)=>{
    let title = 'hahahahahaha'
    //res.render('模板的文件路径','数据')
    res.render('home',{title})
})

{ username: "Alice" }

示例：渲染模板

const express = require('express');
const path = require('path');
const app = express();

// 设置视图文件夹路径和模板引擎
app.set('views', path.resolve(__dirname, 'views'));
app.set('view engine', 'ejs');

// 渲染视图，并传递数据
app.get('/', (req, res) => {
  const data = { title: 'Hello EJS', message: 'Welcome to EJS!' };
  res.render('index', data);  // 将 data 对象传递给 'index.ejs'
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

4. EJS模板语法

EJS 提供了许多功能来动态地生成 HTML 内容。以下是常用的 EJS 语法。

(1) 插值

EJS 允许在 HTML 中插入 JavaScript 变量。通过 <%= %> 标签可以把变量插入到页面中。

可以理解为在<%= %>标签中书写JS语句

const data = { title: 'Hello EJS', message: 'Welcome to EJS!' };

<h1><%= title %></h1>  <!-- 输出 title 的值 -->
<p><%= message %></p>  <!-- 输出 message 的值 -->

最终渲染的结果是：

<h1>Hello EJS</h1>
<p>Welcome to EJS!</p>

基于独立的HTML数据渲染：

<h1>Welcome, <%= username %>!</h1>

app.get("/", (req, res) => {
    res.render("index", { username: "Alice" });
});

通过键值对的形式传递变量

示例：

const ejs = require("ejs");

console.log("EJS 模块加载成功");

let china = '国家';
console.log("变量定义成功");

let result = ejs.render('我爱你 <%= country %>', { country: china });
console.log("模板渲染成功");

console.log(result);

ejs.render对字符串模板进行渲染

模板 '我爱你 <%= country%>' 中的 <%= country %> 是 EJS 的插值语法，用于插入数据

{ country: china } 是传入的数据对象，键 country 的值为 '中国'

模板引擎会用传入对象中的 china 值替换模板中的 <%= country %>

(2) 输出未经转义的 HTML

如果想要在页面中输出，不经过转义的HTML，（例如，插入一些 HTML 标签

<h2>Welcome</h2>

可以使用 <%- %> 语法

<%- htmlContent %>  <!-- 输出 htmlContent 中的内容，不进行转义 -->

(3) 插入语法

<%%>中可插入js语法而不影响原有标签形式

如果users数组如下:

const users = [{ name: 'Alice' }, { name: 'Bob' }];

<ul>
  <% users.forEach(function(user) { %>
    <li><%= user.name %></li>
  <% }) %>
</ul>

<%%>中插入js语法，意为遍历fruits数组，针对遍历后的每一个数据，插入至标签<li>中

5. Express-generator 快速构建Express项目

Express-generator是一个方便的工具，用于快速生成基于 Express 框架的项目骨架结构。它通过命令行生成一个初始项目，包含基本的目录结构、模板文件和配置文件，开发者可以在此基础上快速开始开发。

npm install -g express-generator

生成项目

使用express命令生成一个项目，并指定使用EJS作为模板引擎：

express my-app --view=ejs

my-app 是项目名称，你可以更改为你喜欢的名字。
--view=ejs 表示选择 EJS 作为模板引擎

安装依赖

cd my-app
npm install

所生成的结构目录如下所示：

my-app/
├── app.js               // 应用入口文件
├── bin/
│   └── www              // 启动脚本
├── public/              // 静态文件目录 (CSS, JS, 图片等)
│   ├── images/
│   ├── javascripts/
│   └── stylesheets/
├── routes/              // 路由文件
│   ├── index.js         // 默认路由
│   └── users.js         // 用户相关路由
├── views/               // EJS 模板文件目录
│   ├── error.ejs        // 错误页面模板
│   └── index.ejs        // 首页模板
├── package.json         // 项目依赖和配置信息
└── README.md            // 项目说明文件

运行项目

启动开发服务器：

npm start

Node.js --- 模板引擎EJS