nodejs express ejs 模板引擎

最新推荐文章于 2023-01-05 14:45:28 发布

qq_40414209

最新推荐文章于 2023-01-05 14:45:28 发布

阅读量267

点赞数

分类专栏： nodejs

原文链接：https://segmentfault.com/a/1190000010820999

版权

nodejs 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

官网

简单的视图渲染示例

下面我们通过一个简单示例回顾下 EJS 渲染过程：

var express = require("express");
var path = require("path");
var app = express();

app.set("view engine", "ejs");

app.set("views", path.resolve(__dirname, "views"));

app.get("/", function(req, res) {
    res.render("index");
});

app.listen(3000);

复杂的视图渲染
下面我们看一个更为复杂的示例，其中会同时用到两个视图引擎 Pug 和 EJS：

var express = require("express");
var path = require("path");
var ejs = require("ejs");
var app = express();
app.locals.appName = "Song Lyrics";
app.set("view engine", "jade");
app.set("views", path.resolve(__dirname, "views"));
app.engine("html", ejs.renderFile);
app.use(function(req, res, next) {
    res.locals.userAgent = req.headers["user-agent"];
    next();
});
app.get("/about", function(req, res) {
    res.render("about", {
        currentUser: "india-arie123"
    });
});
app.get("/contact", function(req, res) {
    res.render("contact.ejs");
});
app.use(function(req, res) {
    res.status(404);
    res.render("404.html", {
        urlAttempted: req.url
    });
});
app.listen(3000);

紧接着，我们将会设置是否启用视图缓存。其实视图缓存并不是缓存视图实际上它缓存的视图路径。例如，它会将 views/my_views.ejs 路径缓存起来并绑定到 EJS 引擎上。

Express 通过两种方式来决定是否对视图文件进行缓存：

文档记录方式：通过调用 app.enabled(“view cache”) 开启。在开发模式下默认是被禁用的，但是你可以在正式生产环境中开启。当然，你可以通过 app.disable(“view cache”) 手动关闭。

非文档记录方式：根据第一步上下文中的 cache 对象是否为 true 来决定是否缓存该文件。这样你就可以对每一个文件进行自定义设置了。

Express 给客户端默认响应的内容是 HTML。虽然大多数时候这没什么问题，但是有时可能需要返回的是纯文本、XML、JSON 等格式。此时，你可以通过修改参数 res.type 进行自定义设置：

app.get(“/”, function(req, res) { 
  res.type(“text”); 
  res.render(“myview”, { 
   currentUser: “Gilligan” 
  }); 
}

EJS 语法

除了用做 HTML 模版之外，它还能应用于字符串和纯文本中。请看 EJS 是如何对下面文本模版进行渲染的
/* 注意这里有个bug 当变量没有定义时不能直接用if 语句，要加上locals 例:locals */ 参考

Hi <%= name %>!
You were born in <%= birthyear %>, so that means you're <%= (new Date()).getFullYear() - birthyear %> years old.
<% if (career) { -%>
  <%=: career | capitalize %> is a cool career!
<% } else { -%>
  Haven't started a career yet? That's cool.
<% } -%>
Oh, let's read your bio: <%- bio %> See you later!

将下面的 JSON 数据传入上面摸板中：

{
    name: "Tony Hawk",
    birthyear: 1968,
    career: "skateboarding",
    bio: "<b>Tony Hawk</b> is the coolest skateboarder around."
}

在已有 EJS 文件中嵌入其他 EJS 模版
EJS 引擎允许你在当前模版中使用另一个 EJS 模版。这样我们就能对整个进行组件拆分复用。例如，将 HTML 的头部和尾部拆分为 header 和 footer 模块，然后在其他模版中进行组合复用。

示例如下：首先我们创建 header.ejs 并拷贝代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/the.css">
    <title><%= appTitle %>/title>
</head>
<body>
    <header>
        <h1><%= appTitle %></h1>
    </header>

紧接着创建 footer 组件 footer.ejs 并拷贝代码：

<footer>
    All content copyright <%= new Date().getFullYear() %> <%= appName %>.
</footer>
</body>
</html>

最后，我们通过 include 语法进行组件嵌入操作：

<% include header %>
    <h1>Welcome to my page!</h1>
    <p>This is a pretty cool page, I must say.</p>
<% include footer %>

假设，你现在需要实现一个展示用户信息的组建，那么你可以创建 userwidget.ejs 文件并拷贝

<div class="user-widget">
    <img src="<%= user.profilePicture %>">
    <div class="user-name"><%= user.name %></div>
    <div class="user-bio"><%= user.bio %></div>
</div>

那么，在渲染当前用户时可以这样使用该模版：

<% user = currentUser %>
<% include userwidget %>

或者在渲染用户列表时：

<% userList.forEach(function(user) { %>
  <% include userwidget %>
<% } %>

添加你自己的过滤器
Express 内置的 22 个过滤器，其中包括对数组和字符串的常用操作。通常情况下，它们能过满足你的需求，但是有时你不得不添加自己的过滤器。

假设，现在你已经引入了 EJS 模块并将其保存到名为 ejs 变量中。那么你可以为按照下面的方式为 ejs.filters 拓展一个用于数组求和的过滤器。

ejs.filters.sum = function(arr) {
  var result = 0;
  for (var i = 0; i < arr.length; i++) {
    result += arr[i];
  }
  return result;
};

然后，你就可以在代码中使用该过滤器了：

<%=: myarray | sum %>