Nodejs模板引擎ejs的使用

Nodejs模板引擎ejs的使用
EJS（Embedded JavaScript）是一种简单的模板引擎，允许你在HTML文件中嵌入JavaScript代码。它非常适合在服务器端渲染动态内容。以下是如何在Node.js项目中使用EJS的基本步骤：

1. 安装EJS

首先，你需要安装EJS。可以通过npm来安装：

npm install ejs

2. 设置Express应用使用EJS作为视图引擎

如果你正在使用Express框架，你可以通过以下方式设置EJS作为默认视图引擎：

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

// 设置视图引擎为EJS
app.set('view engine', 'ejs');

// 设置视图文件夹的位置（可选）
app.set('views', './views');

app.get('/', (req, res) => {
    // 渲染一个名为index的视图，并传递数据
    res.render('index', { title: 'Home Page', message: 'Hello from EJS' });
});

app.listen(3000, () => console.log('Server is running on port 3000'));

在这个例子中，res.render()方法用于渲染一个视图。第一个参数是视图的名称（不包括.ejs扩展名），第二个参数是一个对象，包含传递给视图的数据。

3. 创建EJS视图文件

在views目录下创建一个名为index.ejs的文件。这个文件将包含HTML和EJS模板语法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
    <!-- 在这里可以添加更多的HTML和EJS代码 -->
</body>
</html>

4. 使用EJS模板语法

EJS支持多种模板语法，包括：

  • <%= ... %>：输出转义后的值。
  • <%- ... %>：输出未转义的值。
  • <% ... %>：执行JavaScript代码。
  • <%# ... %>：注释，不会被渲染到页面上。
  • <%- include('partial') %>：包含其他EJS文件。

5. 动态生成内容

你可以在EJS模板中使用循环和条件语句来动态生成内容：

<ul>
<% for(var i=0; i<items.length; i++) { %>
    <li><%= items[i] %></li>
<% } %>
</ul>

<% if(user.isLoggedIn) { %>
    <p>Welcome back, <%= user.name %>!</p>
<% } else { %>
    <p>Please log in.</p>
<% } %>

以上就是如何在Node.js项目中使用EJS的基本指南。希望这对你有所帮助！


3 回复

当然，没问题！ejs就像是给你的HTML披上了一层魔法斗篷，让你可以轻松地在网页中嵌入JavaScript代码。想象一下，你正在烘焙一个蛋糕（HTML文件），但你想在蛋糕的不同部分添加不同的馅料（动态内容）。这时，EJS模板引擎就像是一位魔术师，它允许你在蛋糕（HTML）中加入可变的部分，比如“今天是星期几”或者“用户的名字”。

使用步骤如下：

  1. 安装：首先，你需要在项目中安装EJS。打开命令行工具，运行npm install ejs。
  2. 设置视图引擎：在你的Express应用中设置EJS作为视图引擎，只需一行代码：app.set('view engine', 'ejs');
  3. 创建视图：在项目的views目录下创建一个.ejs文件。这里你可以自由地混合HTML和JavaScript。
  4. 渲染视图：在你的路由处理函数中，使用res.render('your-view-file', {data: 'your data here'});来渲染页面。

现在，当你访问这个路由时，EJS会将数据插入到HTML模板中，生成最终的HTML页面发送给浏览器。是不是很神奇？


EJS（Embedded JavaScript）是一种简单易用的模板引擎，广泛用于Node.js项目中。它允许你在HTML文件中嵌入JavaScript代码，使得动态内容生成变得更加容易。下面是如何在Node.js项目中安装和使用EJS的基本步骤。

1. 安装EJS

首先，你需要在你的Node.js项目中安装EJS。你可以通过npm（Node Package Manager）来安装：

npm install ejs

2. 设置视图引擎

在Express应用中设置EJS作为视图引擎非常简单。你可以在你的应用初始化文件（通常是app.js或index.js）中添加以下代码：

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

// 设置EJS为视图引擎
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index', { title: 'Hello World', message: 'Hello from EJS!' });
});

app.listen(3000, () => console.log('Server started on port 3000'));

在这个例子中，我们设置了EJS作为视图引擎，并创建了一个路由处理函数，该函数渲染一个名为index.ejs的模板，并传递了两个变量：title和message。

3. 创建EJS模板

接下来，在项目的views目录下创建一个名为index.ejs的文件。在这个文件中，你可以使用嵌入的JavaScript代码来动态生成HTML内容。例如：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p><%= message %></p>
</body>
</html>

在这个模板中，<%= ... %>语法用于输出JavaScript变量的内容。如果你需要执行一些逻辑操作，可以使用<% ... %>标签。

4. 运行应用

确保你的服务器文件（例如index.js或app.js）在正确的位置被运行。如果你按照上述步骤操作，你应该能够在浏览器中访问http://localhost:3000/并看到带有动态内容的页面。

这就是如何在Node.js项目中使用EJS的基本过程。通过这种方式，你可以轻松地生成动态网页，而无需直接处理复杂的字符串拼接。

EJS 是一个简洁的模板引擎，允许你在HTML文件中嵌入JavaScript。使用步骤如下：

  1. 安装：通过npm安装EJS，命令为npm install ejs。

  2. 设置视图引擎：在Express应用中设置EJS作为视图引擎，如app.set('view engine', 'ejs')。

  3. 创建视图：在视图目录（默认是views）创建一个.ejs文件，例如home.ejs。

  4. 渲染视图：在路由处理函数中使用res.render()方法，如res.render('home', {name: '张三'})，在EJS文件中可以使用<%= name %>来显示变量值。

  5. 在EJS文件中，你可以使用<% %>标签写JavaScript代码，<%= %>输出数据，<%- %>输出并进行HTML转义。

回到顶部