Express 使用模板引擎 EJS
Node.js 教程
收录了这篇文章

在 Express.js 中使用 EJS 作为模板引擎是一个很常见的做法。EJS(Embedded JavaScript Templates)是一种简单且强大的模板引擎,它允许你使用普通的 JavaScript 语法来生成 HTML。

下面是如何设置一个基本的 Express.js 应用并使用 EJS 的步骤:

步骤 1: 创建项目文件夹和初始化 Node.js 项目

首先,创建一个新的文件夹,并在该文件夹中初始化一个新的 Node.js 项目:

mkdir myapp
cd myapp
npm init -y

步骤 2: 安装必要的依赖包

接下来安装 Express 和 EJS:

npm install express ejs

步骤 3: 配置 Express.js 应用

创建一个 app.js 文件,并配置你的 Express 应用以使用 EJS:

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

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

// 设置视图文件的目录
app.set('views', './views');

// 用于解析请求体中的 URL 编码数据
app.use(express.urlencoded({ extended: true }));

// 静态文件中间件
app.use(express.static('public'));

// 路由
app.get('/', (req, res) => {
    // 渲染 index.ejs 文件
    res.render('index', { title: 'Welcome to My Site' });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

步骤 4: 创建 EJS 视图文件

在你的项目根目录下创建一个名为 views 的文件夹,并在其中添加一个 index.ejs 文件。例如:

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to My Site</h1>
    <p>This is an example of using EJS with Express.js.</p>
</body>
</html>

步骤 5: 运行应用

现在你可以运行你的应用了:

node app.js

打开浏览器并访问 http://localhost:3000,你应该能看到 EJS 渲染的内容。

以上就是如何在 Express.js 中使用 EJS 的基本介绍。你可以根据需要扩展这个示例,添加更多的路由、视图以及功能。

 

EJS 教程

嵌入变量

<%- title %> 和 <%= name %> 会被 JavaScript 变量的值替换。

注释

EJS 支持两种类型的注释:HTML 注释和 EJS 注释。

<!-- HTML 注释 -->
<%-- EJS 注释 --%>

条件语句

你可以在 EJS 中使用标准的 JavaScript 控制结构,如 if 语句。

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

循环

你可以使用 for 或 forEach 来循环遍历数组或对象。

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

布局和包含

EJS 支持布局和文件包含,这样可以让你重用通用的 HTML 结构。

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <nav>
        <% include('./partials/nav') %>
    </nav>
    <main>
        <%- body %>
    </main>
</body>
</html>

partials/nav.ejs 文件

<!-- partials/nav.ejs -->
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
</ul>
声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
浏览器的同源和跨域
WordPress 数据库表结构
HTML select 下拉列表
MySQL 数据库中货币单位如何存储
macOS 生成 icns 图标
HTML input 元素
JavaScript requestAnimationFrame 定时刷新
River 主题