第八章：Node.js 实战入门指南 - Express模板引擎和视图

站长

2023年07月24日 02:50 · 阅读数 17

在前后端分离的年代，这个章节，如果不想看，可以略过！直接看一下章，并不影响！当然最好还是看看

Express 框架提供了强大的模板引擎和视图功能，通过使用模板引擎，我们可以将动态数据和静态模板结合起来，生成最终的网页或视图，并发送给客户端。

1. 模板引擎的概念和作用

模板引擎是一种用于生成动态内容的工具，它将静态模板和动态数据结合起来，生成最终的网页或视图。在 Express 中，模板引擎的作用是将服务器端的数据和逻辑与客户端的展示逻辑分离。

使用模板引擎的好处包括：

分离关注点：模板引擎允许开发者将前端的展示逻辑与后端的数据处理逻辑分离，提高代码的可维护性和可测试性。
代码复用：通过使用模板引擎，可以定义和重用各种页面结构和组件，减少重复编写相似代码的工作量。
动态生成内容：模板引擎允许将动态数据传递给模板，并在模板中使用模板变量来动态生成页面内容，实现个性化和动态化的展示效果。

更好的处是不用！因为现在都是前后端分离，前端视图可以由前端框架来替换！

2. 常用的模板引擎

Express 支持多种常用的模板引擎，以下是几种常见的模板引擎及其特点：

EJS（Embedded JavaScript）：EJS 使用纯 JavaScript 语法作为模板语言，易于上手和学习，支持逻辑控制和模板继承等功能。
Pug（原 Jade）：Pug 是一种类似于缩进的模板语言，使用简洁的语法来定义 HTML 结构，减少了标签的书写，适合编写简洁和易读的模板。
Handlebars：Handlebars 提供了灵活的模板语法，支持条件判断、循环、局部块等功能，适合构建复杂的模板结构。

选择合适的模板引擎取决于个人偏好和项目需求，需要考虑模板语法的易用性、灵活性和扩展性等因素。

3. 模板引擎的配置和使用

使用 Express 中的模板引擎需要进行以下配置和使用步骤：

安装模板引擎的 npm 包：使用 npm 命令安装所选的模板引擎，例如 npm install ejs。
设置 Express 的模板引擎：在 Express 应用中使用 app.set('view engine', '模板引擎名称') 来设置所选的模板引擎。
定义视图路径：使用 app.set('views', '视图目录路径') 来设置存放模板文件的目录路径。
渲染模板和传递数据：在路由处理函数中使用 res.render('模板文件名', 数据对象) 方法来渲染模板并传递数据给模板引擎。模板文件名可以省略文件扩展名，因为 Express 默认使用已设置的模板引擎进行渲染。
模板中使用模板变量：在模板文件中使用模板引擎提供的语法来引用和展示传递的数据。可以使用双花括号 {{ 变量名 }} 的形式来插入变量的值。

4. 动态数据和模板变量的示例

以下是一个使用 EJS 模板引擎的示例代码：

// 安装依赖
// npm install express ejs

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

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

// 定义路由和处理函数
app.get('/', (req, res) => {
  const products = ['Apple', 'Banana', 'Orange'];

  res.render('index', {title:"hello juejin" products });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的示例中，我们使用了 EJS 模板引擎，设置了视图路径为 ./views 目录。在根路由 / 的处理函数中，我们定义了 username 和 products 两个变量，并通过 res.render 方法将这些变量传递给模板引擎进行渲染。在 index.ejs 模板文件中，我们使用 <%= 变量名 %> 的语法来展示变量的值。

5. 视图布局和部分视图

视图布局和部分视图是模板引擎提供的一些特性，用于组织和重用页面结构和组件。

视图布局：视图布局是一个包含通用页面结构的模板，如页眉、页脚、导航栏等。通过使用视图布局，可以在不同的页面中共享相同的布局结构。在 Express 中，可以使用模板引擎提供的布局功能来定义和应用视图布局。
部分视图：部分视图是一个独立的模板片段，用于表示页面中的特定组件或区域，如侧边栏、产品列表等。通过使用部分视图，可以在不同的页面中重用相同的组件。在 Express 中，可以使用模板引擎提供的部分视图功能来定义和使用部分视图。

具体的视图布局和部分视图的语法和用法取决于所选的模板引擎，可以参考相应模板引擎的文档进行学习和使用。

6. 静态资源的处理

在 Express 中，处理和提供静态资源（如样式表、JavaScript 文件等）可以使用内置的 express.static 中间件。该中间件可以指定一个目录作为静态资源的根目录，并自动处理客户端请求静态资源的逻辑。

以下是一个处理静态资源的示例代码：

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

// 指定静态资源目录
app.use(express.static('public'));

// 定义路由和处理函数
app.get('/', (req, res) => {
  res.render('index');
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的示例中，我们通过 app.use 方法使用了 express.static 中间件，并指定了 public 目录作为静态资源的根目录。这样，当客户端请求静态资源时，Express 将自动查找并返回该目录下的对应文件。

在上述示例中，我们通过 app.set 方法设置了视图引擎为 EJS，然后在路由处理函数中使用 res.render 方法渲染名为 index 的视图模板，并传递了一个名为 data 的数据对象。在视图模板中，我们可以使用 <%= %> 语法插入动态数据，例如 <h1><%= title %></h1>。

7. 常用的模板引擎，如 EJS、Handlebars 等

Express 支持多种常用的模板引擎，每种模板引擎都有其特点和适用场景。以下是几种常用的模板引擎的简要介绍：

EJS (Embedded JavaScript): EJS 是一种简单且灵活的模板引擎，允许在 HTML 中嵌入 JavaScript 代码。它使用 <% %> 和 <%= %> 语法进行控制流和数据插值。
Handlebars: Handlebars 是一种语义化的模板引擎，通过使用双大括号 {{ }} 来标记数据插值，使用 {{#if}} {{else}} {{/if}} 等语法进行控制流程操作。

这些模板引擎都有各自的优点和用法，选择合适的模板引擎取决于项目需求和个人偏好。

8.构建视图模板和布局

视图模板是定义页面结构和内容的文件，可以包含 HTML、CSS 和模板语法。视图模板通常包含占位符或模板变量，用于插入动态数据。

视图布局用于定义整个页面的结构和共享的组件，例如导航栏、页脚等。通过使用视图布局，可以将页面的结构和组件抽象为单独的文件，并在多个视图中重复使用。

以下是一个示例代码，展示如何创建视图模板和布局（以 EJS 为例）

<!-- views/layout.ejs -->

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <%- products %>
  </main>

  <footer>
    &copy; 2023 juejin
  </footer>
</body>
</html>

<!-- views/index.ejs -->

<%- include('layout', { title: 'Home' }) %>

<section>
  <h1>Welcome to Express!</h1>
  <p>This is the home page.</p>
</section>

在上述示例中，layout.ejs 是视图布局模板，定义了整个页面的结构，包括标题、导航栏、主内容区域和页脚。我们使用 <%- body %> 占位符表示插入视图模板的位置。

index.ejs 是视图模板，通过使用 <%- include('layout', { title: 'Home' }) %> 语法引入了视图布局，并传递了一个名为 title 的模板变量。

9.模板引擎的数据绑定和控制流程

模板引擎提供了数据绑定和控制流程的功能，以便根据动态数据生成页面内容。

数据绑定允许将动态数据插入到视图模板中。在 EJS 中，我们使用 <%= %> 语法来插入变量值，例如 <h1><%= title %></h1>。

控制流程用于根据条件或循环来控制页面的渲染。在 EJS 中，我们使用 <% %> 语法进行控制流操作，如条件判断和循环。例如：

<!-- views/index.ejs -->

<h1><%= title %></h1>

<% if (isAdmin) { %>
  <p>Welcome, admin user!</p>
<% } else { %>
  <p>Welcome, guest user!</p>
<% } %>

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

在上述示例中，根据 isAdmin 的值进行条件判断，以及通过循环遍历 users 数组生成列表项。

通过数据绑定和控制流程，我们可以根据动态数据和业务逻辑来灵活地生成页面内容。

10. 以下是模版引擎的基用法

模板引擎是 Node.js 中常用的工具：如EJS、Handlebars 和 Pug。

EJS 模板引擎

语法特点

EJS（Embedded JavaScript）是一种简洁而灵活的模板引擎，它使用 JavaScript 作为模板语言。以下是 EJS 的主要语法特点：

使用 <% %> 标签来执行 JavaScript 代码。
使用 <%= %> 标签来输出变量或表达式的值。
支持条件语句、循环语句和函数调用。

使用示例

以下是一个使用 EJS 的示例代码：

<!-- index.ejs -->
<!DOCTYPE html>
<html>
<head>
  <title>My Blog</title>
</head>
<body>
  <h1>Welcome to My Blog</h1>
  <% posts.forEach(function(post) { %>
    <div class="blog-post">
      <h2><%= post.title %></h2>
      <p><%= post.content %></p>
      <p>Published on <%= post.date %></p>
    </div>
  <% }) %>
</body>
</html>

Handlebars 模板引擎

语法特点

Handlebars 是一种简单而强大的模板引擎，它具有易读性和可维护性。以下是 Handlebars 的主要语法特点：

使用双大括号 {{ }} 标签来输出变量或表达式的值。
使用 {{#if}} {{/if}} 来实现条件语句。
使用 {{#each}} {{/each}} 来遍历数组或对象。

使用示例

以下是一个使用 Handlebars 的示例代码：

<!-- index.handlebars -->
<!DOCTYPE html>
<html>
<head>
  <title>My Blog</title>
</head>
<body>
  <h1>Welcome to My Blog</h1>
  {{#each posts}}
    <div class="blog-post">
      <h2>{{title}}</h2>
      <p>{{content}}</p>
      <p>Published on {{date}}</p>
    </div>
  {{/each}}
</body>
</html>

Pug 模板引擎

语法特点

Pug（前身为 Jade）是一种简洁而优雅的模板引擎，它使用缩进和标签语法来表达模板结构。以下是 Pug 的主要语法特点：

使用缩进来表示元素之间的层次关系。
使用单独的一行来表示元素的属性或文本内容。
使用 #{} 来输出变量的值。
支持条件语句和循环语句。

使用示例

以下是一个使用 Pug 的示例代码：

// index.pug
doctype html
html
  head
    title My Blog
  body
    h1 Welcome to My Blog
    each post in posts
      .blog-post
        h2 #{post.title}
        p #{post.content}
        p Published on #{post.date}

总结

无论是 EJS 的 JavaScript 语法、Handlebars 的易读性，还是 Pug 的简洁性，都能为您的项目提供强大的模板渲染能力。

Express 模板引擎和视图通过模板引擎、配置模板引擎和使用模板变量，可以实现动态数据的展示和个性化的页面生成。视图布局和部分视图能够帮助我们组织和重用页面结构和组件。处理静态资源可以通过使用 express.static 中间件来提供静态文件的访问能力。

敬请期待第九章：Node.js 实战入门指南 - Express 表单处理和数据验证

目录章节传送门