开始使用EJS模板引擎

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

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

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

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

对[Node.js]有基本了解。

在你的电脑上安装[Node.js]。


      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">
        <ul class="nav nav-pills pull-right">
            <li role="presentation"><a href="/">Home</a></li>
        <h3 class="text-muted">Node.js Blog</h3>
在views 目录中，创建一个名为index.ejs 的文件，并添加下面的代码片段。这个文件将包含我们索引页的EJS 代码。
<!DOCTYPE html>
    <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>
<div class="container">
    <%- include('partials/navbar') %>
    <div class="jumbotron">
        <h1>All about Node</h1>
        <p class="lead">Check out our articles below!</p>
    <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>
                <% }) %>
    <%- include('partials/footer') %>
</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>
                <% }) %>
上面的代码片段在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/ ，一个包含所有帖子的页面就会显示出来，如下图所示。
现在你已经学会了如何使用EJS 模板标签和参数，创建一个网站，重用一个页脚，并在EJS 模板中实现条件语句。