开始使用EJS模板引擎

在这篇文章中，我们将了解EJS模板引擎，它是Node.js生态系统中最常用的模板引擎之一。在Node.js和Express生态系统中，有一种语气的模板引擎，使我们有可能为Node.js和Express应用程序创建一个Web界面。

每当我们开发全栈式网络应用程序时，都需要创建一个网络界面，让用户与网站互动。

我们将学习如何使用EJS 模板标签和参数，创建一个重复使用页脚的网站，并在EJS 模板中实现条件语句。

前提条件

要跟上这篇文章，读者将需要。

对[Node.js]有基本了解。
在你的电脑上安装[Node.js]。

项目设置

Project structure

views 包含文件和包含部分文件。EJS partials EJS
app.js 文件包含Express配置和路由。
package.json 包含我们将在应用程序中使用的依赖项列表。
public 包含前端资产（HTML和CSS）。
www 包含服务器启动脚本。

让我们通过执行下面的命令为我们的项目创建一个目录。


$ mkdir demo
$ cd demo

执行下面的命令来初始化package.json ，并将express 和ejs 安装到我们的项目中。

$ npm init -y
$ npm install --save express ejs

EJS视图和参数

EJS partials使创建可重复使用的视图成为可能。在一个真实世界的应用程序中，可能有超过100个具有相同页脚的HTML文件。为了减少这样一个网站的开发时间，准绳变得很方便。

有了参数，我们可以创建一个单一的页脚部分文件，并在网站的所有页面上重复使用。部分文件提高了生产力，因为在维护的情况下，在一个点上改变代码会改变所有重复使用该部分文件的页面的出现。

在项目根目录下，创建一个名为views 的目录。
在上面创建的views 目录中，创建一个名为partials 的目录。
在partials 目录中创建一个名为footer.ejs 的文件，并添加下面的代码片断。我们将把页脚文件导入到我们的索引文件的页脚部分。

<footer class="footer">
    <p>© 2021 demo.</p>
</footer>

在partials 目录中创建一个名为navbar.ejs 的文件，并添加下面的代码片段。我们将把这个文件导入我们的索引文件的导航栏部分。

<div class="header clearfix">
    <nav>
        <ul class="nav nav-pills pull-right">
            <li role="presentation"><a href="/">Home</a></li>
        </ul>
        <h3 class="text-muted">Node.js Blog</h3>
    </nav>
</div>

在views 目录中，创建一个名为index.ejs 的文件，并添加下面的代码片段。这个文件将包含我们索引页的EJS 代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Node.js Blog</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        body {
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .jumbotron {

            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <%- include('partials/navbar') %>
    <div class="jumbotron">
        <h1>All about Node</h1>
        <p class="lead">Check out our articles below!</p>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="list-group">
                <!-- loop over blog posts and render them -->
                <% posts.forEach((post) => { %>
                    <a href="#" class="list-group-item">
                        <h4 class="list-group-item-heading"><%= post.title %></h4>
                        <p class="list-group-item-text"><%= post.author %></p>
                    </a>
                    <br>
                    <br>
                <% }) %>
            </div>
        </div>
    </div>
    <%- include('partials/footer') %>
</div>
</body>
</html>

<%- include('partials/navbar') %> 将导航条从我们在上面的目录中创建的文件中纳入我们的应用程序。partils navbar.ejs
<%- include('partials/footer') %> 从文件中把页脚纳入索引文件。footer.ejs

注意在我们的EJS文件中加入JavaScript逻辑是可能的。

   <% posts.forEach((post) => { %>
                    <a href="#" class="list-group-item">
                        <h4 class="list-group-item-heading"><%= post.title %></h4>
                        <p class="list-group-item-text"><%= post.author %></p>
                    </a>
                    <br>
                    <br>
                <% }) %>

上面的代码片段在posts 数组中循环，该数组将从IndexRoute 文件中传递。对于每个post ，一个标题和作者的名字显示在帖子的div中。

路由

在routes文件夹中，我们存储了包含逻辑的JavaScript文件，每当访问某条路线时都会执行。

在我们的例子中，当开发服务器运行时，只要你访问121.0.0.1:5000/ ，我们的IndexRoute.js 文件中的逻辑就会被执行，以响应请求。

在项目根目录下，创建一个名为IndexRouter.js 的文件，并将下面的代码片断添加到其中。

const express = require('express');
const router = express.Router();
const posts = [

    {
        id: 1,
        author: 'John',
        title: 'Templating with pug',
        body: 'Blog post 1'
    },

    {
        id: 2,
        author: 'Peter',
        title: 'React: Starting from the Bottom',
        body: 'Blog post 2'
    },

    {
        id: 3,
        author: 'Violet',
        title: 'Node.js Streams',
        body: 'Blog post 3'
    },

    {
        id: 4,
        author: 'Condy',
        title: 'Node.js Events',
        body: 'Blog post 4'
    }

]

/* GET home page. */
// Returns a list of posts to the view.
router.get('/', function (req, res, next) {
    res.render('index', {title: 'Express', posts: posts});
});

module.exports = router;

在上面的代码片段中，我们创建了一个数组posts ，每当用户访问路由/ ，我们就会显示。

module.exports = router; 导出该文件，以便我们可以在文件中导入它。app.js

App.js

所有的配置和主要的应用路由都在这个文件中。

const express = require('express');
const indexRouter = require('./routes/index');
const app = express();

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

app.listen(3000)
console.log('listening on port 3000')

const app = express(); 创建一个Express的实例，使我们的应用程序成为一个Express应用程序。
app.set('views', path.join(__dirname, 'views')); 将视图目录设置为。这是我们所有文件的存储位置。views EJS
app.set('view engine', 'ejs'); 将视图引擎设置为。EJS
app.listen(3000) 启动开发服务器。

通过执行下面的命令来启动服务器。

$ node app.js

当我们在浏览器中导航到localhost:3000/ ，一个包含所有帖子的页面就会显示出来，如下图所示。

Project structure

总结

现在你已经学会了如何使用EJS 模板标签和参数，创建一个网站，重用一个页脚，并在EJS 模板中实现条件语句。

如何使用EJS模板引擎

开始使用EJS模板引擎

前提条件

项目设置

EJS视图和参数

路由

App.js

总结