Express EJS渲染技术详解

小那同学

已于 2024-01-21 17:04:27 修改

阅读量1.3k

点赞数 19

CC 4.0 BY-SA版权

分类专栏： express 文章标签： express

于 2024-01-18 19:24:04 首次发布

本文链接：https://blog.youkuaiyun.com/bjjgff/article/details/135681966

express 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Express框架中使用EJS模板引擎进行HTML页面渲染，包括安装配置、基本用法、布局模板、模板语法和继承机制。还提到了结合MySQL的注册登录功能及图书管理系统示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1分钟学会使用Express+MySQL实现注册功能

1分钟学会使用Express实现登录功能

10分钟学习如何使用 Express+Mysql开发图书管理系统

在Express中，我们可以使用EJS（Embedded JavaScript）模板引擎来渲染动态HTML页面。本文将详细介绍Express EJS渲染技术的使用方法和技巧。

1. EJS简介

EJS是一种简单的模板语法，它允许我们在HTML文件中嵌入JavaScript代码，从而实现前后端的数据交互。EJS具有以下特点：

简洁易懂：EJS的语法类似于JavaScript，因此对于熟悉JavaScript的开发者来说，学习成本非常低。
高效性能：EJS在处理大量数据时表现出色，因为它是基于字符串的模板引擎，而不是基于真正的编程语言。
丰富的功能：EJS支持条件判断、循环、自定义函数等高级功能，可以满足各种复杂的渲染需求。

2. 安装与配置

在使用Express EJS之前，我们需要先安装相关依赖。在项目根目录下运行以下命令：

npm install express ejs --save

接下来，我们需要创建一个项目，项目中创建一个views文件夹和入口文件app.js，在app.js中引入Express和EJS模块，并设置模板文件夹：

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

// 设置模板文件夹
app.set('views', path.join(__dirname, 'views'));
// 设置模板引擎为EJS
app.set('view engine', 'ejs');

3. 渲染视图

3.1 基本用法

在app.js中，我们去编写一个接口'/', 我们使用res.render()方法来渲染视图。

app.get('/', (req, res) => {
    res.render('index', { title: '你好, 同学!', heading: '欢迎来观看我的文章', items: ['Java', 'python', 'JavaScript'] });
});

然后我们再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><%= heading %></h1>
    <p>我想学习以下技术:</p>
    <ul>
        <% items.forEach(item => { %>
            <li><%= item %></li>
        <% }); %>
    </ul>
</body>
</html>

在这个文件中，我们使用了EJS的<%= %>标签来输出变量。当这个文件被渲染时，这些变量将被替换为实际的值。

3.2 布局模板

在实际应用中，我们通常会使用布局模板来统一管理页面的公共部分。布局模板通常包含页面的头部、导航栏和底部等元素。

我们在views目录下创建 layout.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>
    <header>头部</header>
    <nav>导航栏</nav>
    <main>
        主体
    </main>
    <footer>底部</footer>
</body>
</html>

然后，在index.ejs中，我们可以使用<%- include() %>标签来包含布局模板：

<!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><%= heading %></h1>
    <p>我想学习以下技术:</p>
    <ul>
        <% items.forEach(item => { %>
            <li><%= item %></li>
        <% }); %>
    </ul>
    <%- include('layout') %>
</body>
</html>

4. EJS模板语法

EJS提供了一套简单的模板语法，用于在HTML文件中嵌入JavaScript代码。以下是一些常用的EJS模板语法：

<%= variable %>：输出变量的值。

<%= title %>将输出title变量的值。

<%- expression %>：输出表达式的结果。

<%- include('layout') %>

将输出include('layout')表达式的结果。

<% if (condition) { %>...<% } %>，条件语句。

<% if (user) { %>Welcome, <%= user.name %>!<% } %>

将输出用户的名字，如果用户存在的话。

<% function() { ... } %>：自定义函数。

<% function displayItem(item) { return item.name; } %>

定义了一个名为displayItem的函数，该函数接受一个参数item并返回其name属性。

5. EJS模板继承

EJS支持模板继承，即在一个子模板中包含另一个父模板的内容。这有助于减少重复代码，提高代码的可维护性。要实现模板继承，可以在子模板中使用<%- extends 'parent' %>标签来指定父模板的名称。然后，在子模板中可以使用<%- block 'content' %>标签来定义一个块，该块将在父模板中被替换为实际的内容。

例如，我们有一个名为header.ejs的父模板和一个名为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>
    <header>Header</header>

我们在index.ejs页面当中引入一下代码。

<%- extends 'header' %>
<%- block 'content' %>
    <h1><%= heading %></h1>
    <p><%= message %></p>
<%- endblock %>

在index.ejs中，我们使用<%- block 'content' %>标签来定义一个名为content的块，该块将在header.ejs中被替换为实际的内容。这样，我们就实现了模板继承，避免了重复编写相同的HTML代码。

其他文章推荐

1分钟学会使用Express+MySQL实现注册功能

1分钟学会使用Express实现登录功能

10分钟学习如何使用 Express+Mysql开发图书管理系统