Node.js Express 使用 EJS 模板引擎搭建博客示例

模板引擎概述

模板引擎是一种将页面模板与数据结合以生成 HTML 页面的工具。在 Express 框架中，路由控制功能对应于 MVC 架构中的控制器，而模板引擎则对应于视图层。

模板引擎的核心功能是将页面模板与显示数据结合，生成最终的 HTML 页面。它既可以在服务器端运行，也可以在客户端运行。大多数情况下，模板引擎在服务器端被解析为 HTML，随后传输给客户端，因此客户端通常无法区分页面是否由模板引擎生成。少数情况下，模板引擎也可在客户端运行，例如 XSLT，它接收 XML 作为输入并在浏览器中生成 HTML。然而，由于浏览器兼容性问题，XSLT 并未广泛流行。目前，主流做法仍是在服务器端运行模板引擎。

在 MVC 架构中，模板引擎位于服务器端。当控制器接收到用户请求后，会从模型获取数据，并调用模板引擎。模板引擎以数据和页面模板为输入，生成 HTML 页面，然后返回给控制器，由控制器将页面发送回客户端。

前端常用模板引擎对比

前端常用的模板引擎有哪些？

一、Jade

Jade 是一款高性能的 Node.js JavaScript 模板引擎，拥有强大的 API 和丰富的特性，主要面向 Node.js 服务端开发。

二、EJS

EJS 是本文教程所使用的模板引擎。它使用简单，且与 Express 框架集成良好。

三、Handlebars

Handlebars 是一个 JavaScript 语义模板库，通过分离视图和数据来快速构建 Web 模板。它采用“无逻辑模板”（Logic-less template）的设计理念，在加载时进行预编译，而非在客户端执行代码时才编译，从而保证模板加载和运行的速度。Handlebars 兼容 Mustache，允许在 Handlebars 中导入 Mustache 模板。

Express 中模板引擎的配置与使用

如何使用模板引擎？

在 app.js 文件中，通过以下两行代码设置模板文件的存储位置以及所使用的模板引擎：


// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs');

注意：通过命令 express -e blog 仅初始化了一个使用 EJS 模板引擎的工程，例如在 node_modules 下添加了 ejs 模块，在 views 文件夹下创建了 index.ejs。这并不意味着该工程只能使用 EJS 而不能使用其他模板引擎（如 Jade）。真正指定使用哪个模板引擎的是代码 app.set('view engine', 'ejs');。

在 routes/index.js 文件中，通过调用 res.render() 方法来渲染模板，并将生成的页面直接返回给客户端。该方法接受两个参数：第一个是模板的名称，即 views 目录下的模板文件名，扩展名 .ejs 可选；第二个参数是传递给模板的数据对象，用于模板渲染。

打开 views/index.ejs 文件，其内容如下：

index.ejs


<!DOCTYPE html> 
<html> 
 <head> 
  <title><%= title %></title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <h1><%= title %></h1> 
  <p>Welcome to <%= title %></p> 
 </body> 
</html>

当执行 res.render('index', { title: 'Express' }); 时，模板引擎会将 <%= title %> 替换为 Express，然后将替换后的页面显示给用户。

渲染后生成的页面代码如下：


<!DOCTYPE html> 
<html> 
 <head> 
  <title>Express</title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <h1>Express</h1> 
  <p>Welcome to Express</p> 
 </body> 
</html>

注意：通过 app.use(express.static(path.join(__dirname, 'public'))) 设置了静态文件目录为 public 文件夹，因此上述代码中的 href='/stylesheets/style.css' 实际上等同于 href='public/stylesheets/style.css'。

EJS 标签语法详解

EJS 的标签系统非常简单，仅包含以下三种标签：

<% code %>：用于执行 JavaScript 代码。
<%= code %>：用于显示经过 HTML 特殊字符替换的内容。
<%- code %>：用于显示原始 HTML 内容。

注意：

<%= code %> 与 <%- code %> 的区别在于：当变量 code 为普通字符串时，两者没有区别；但当 code 包含类似 <h1>hello</h1> 的字符串时，<%= code %> 会原样输出 <h1>hello</h1>，而 <%- code %> 则会渲染并显示为 H1 标题大小的 hello 字符串。

EJS 博客示例完整流程

一个简单的示例

通过命令新建一个 EJS 项目：express -e demo

模板引擎概述

在 index.js 文件中添加如下代码：


var express = require('express'); 
var router = express.Router(); 
 
 
var items=[{title:'文章1'},{title:'文章2'}]; 
 
/* GET home page. */ 
router.get('/', function(req, res, next) { 
 res.render('index',{title:'文章列表',items:items}); 
}); 
 
router.get('/form', function(req, res, next) { 
  res.render('form',{title:'文章列表',message:'fendo8888'}); 
}); 
 
router.post('/form', function(req, res, next) { 
 res.redirect('/'); 
}); 
 
 
module.exports = router;

在 views 目录下新建 form.ejs 文件，并添加如下代码：


<!DOCTYPE html> 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title><%= title %></title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <form method="post" action="/form"> 
    <label>new article</label><br> 
    <textarea name="text" cols="100" row="5"></textarea> 
    <input type="submit" value="pus"></input> 
  </form> 
  <div><%=message%></div> 
 </body> 
</html>

在 index.ejs 文件中添加如下代码：


<!DOCTYPE html> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>文章列表页</title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
  <h1><%= title %></h1> 
  <p><a href="/form" rel="external nofollow" >发表新文章</a></p> 
  <ul> 
    <%items.forEach(function(item){%> 
     <li><%=item.title%></li> 
     <%})%> 
  </ul> 
 </body> 
</html>

运行项目：npm start

模板引擎概述