在Node.js中使用EJS（Embedded JavaScript templating）模板引擎是一种高效且灵活的方式来动态生成HTML页面。EJS允许你在HTML模板中嵌入JavaScript代码，从而可以轻松地传递数据到模板并渲染出最终的HTML内容。这种方式特别适合于构建动态网站和Web应用。接下来，我将详细介绍如何在Node.js项目中引入并使用EJS模板引擎。
### 一、项目设置
首先，确保你已经安装了Node.js环境。然后，我们可以创建一个新的Node.js项目并安装EJS。
1. **创建项目目录**
在你的工作目录下，创建一个新的文件夹作为你的项目目录，比如命名为`my-ejs-project`。
2. **初始化npm**
进入项目目录，打开终端或命令行工具，运行以下命令来初始化npm项目：
```bash
npm init -y
```
这会创建一个`package.json`文件，其中包含了项目的元数据和依赖信息。
3. **安装EJS**
使用npm安装EJS模板引擎到你的项目中：
```bash
npm install ejs
```
### 二、配置Express与EJS
为了更方便地使用EJS，我们通常会将其与Express框架结合使用。Express是一个灵活的Node.js Web应用框架，提供了丰富的功能来构建Web和移动应用。
1. **安装Express**
如果你还没有安装Express，可以通过npm安装它：
```bash
npm install express
```
2. **设置Express应用**
在项目根目录下创建一个名为`app.js`的文件，并设置Express应用以及配置EJS模板引擎：
```javascript
const express = require('express');
const app = express();
const path = require('path');
// 设置EJS为视图引擎
app.set('views', path.join(__dirname, 'views')); // 指定视图（模板）文件夹
app.set('view engine', 'ejs'); // 设置视图引擎为EJS
// 静态文件中间件
app.use(express.static(path.join(__dirname, 'public')));
// 路由示例
app.get('/', (req, res) => {
res.render('index', { title: '首页', message: '欢迎来到EJS模板示例页面！' });
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`服务器运行在 http://localhost:${PORT}`);
});
```
在这个例子中，我们设置了视图文件夹为`views`，并将EJS设置为视图引擎。我们还使用了一个静态文件中间件来服务`public`目录下的文件。
### 三、创建EJS模板
在`views`文件夹中，你可以创建EJS模板文件。这些文件通常具有`.ejs`扩展名，并包含HTML标记和EJS标签。
1. **创建首页模板**
在`views`文件夹中，创建一个名为`index.ejs`的文件，并添加以下内容：
```html
<%= title %>
<%= title %>
<%= message %>
```
在这个模板中，我们使用了EJS的`<%= %>`标签来输出变量。`title`和`message`变量是从路由处理函数中传递给模板的。
### 四、使用EJS的高级特性
EJS不仅支持简单的变量输出，还提供了条件语句、循环等高级特性，让模板更加灵活和强大。
1. **条件语句**
在EJS模板中，你可以使用`<% if (...) { %> ... <% } %>`结构来添加条件语句。例如：
```html
<% if (user) { %>
用户名: <%= user.name %>
<% } else { %>
未登录
<% } %>
```
2. **循环**
使用`<% for(var i = 0; i < items.length; i++) { %> ... <% } %>`可以遍历数组或对象。例如，遍历一个用户列表：
```html
<% users.forEach(function(user) { %>
- <%= user.name %>
<% }); %>
```
注意，在这个例子中，我们使用了JavaScript的`forEach`方法来遍历数组，这是一种更现代且简洁的方式。
3. **包含其他模板**
EJS支持使用`<% include filename %>`标签来包含其他模板文件。这有助于将HTML代码分解为更小的、可重用的部分。
```html
<%- include('header') %>
页面内容...
<%- include('footer') %>
```
### 五、性能考虑
虽然EJS是一个功能强大的模板引擎，但在构建大型Web应用时，你也需要考虑其性能影响。以下是一些建议：
- **缓存渲染结果**：对于不经常改变的数据，考虑缓存渲染后的HTML，以减少模板渲染的开销。
- **优化模板**：避免在模板中执行复杂的JavaScript代码，特别是那些可以在服务器端预处理的数据。
- **选择合适的模板引擎**：如果你的项目对性能有极高要求，或者需要更高级的模板特性（如自动转义、更复杂的逻辑处理等），可能需要考虑其他模板引擎，如Pug、Handlebars等。
### 六、总结
在Node.js中使用EJS模板引擎是一种快速且有效的方式来动态生成HTML页面。通过将JavaScript代码嵌入到HTML模板中，你可以轻松地传递数据、控制页面布局，并构建出功能丰富的Web应用。通过结合Express框架，你可以进一步简化开发过程，并利用其提供的丰富功能来构建高性能的Web服务器。
希望这篇文章能帮助你更好地理解和使用EJS模板引擎。如果你正在寻找更多关于Node.js和Web开发的资源，不妨访问我的码小课网站，那里有许多实用的教程和案例等你来探索。在码小课，我们将持续分享更多关于Web开发的前沿技术和最佳实践，助力你的职业发展。