EJS模板引擎

最新推荐文章于 2024-07-25 18:19:21 发布

wandongle

最新推荐文章于 2024-07-25 18:19:21 发布

阅读量183

点赞数 9

文章标签： javascript 学习

本文链接：https://blog.csdn.net/wandongle/article/details/139558613

版权

一、介绍

EJS是一种简单同时又强大的模板引擎，我们可以使用EJS制作动态的html，使用EJS还可以在html文件中插入JS代码，帮助我们更方便快捷的完成任务。

二、使用EJS前的准备

1.首先需要先下载依赖

使用命令 npm i ejs

2.在node中使用时

只需要导包即可直接使用

const ejs = require('ejs');

3.在express中框架使用

设置ejs模板引擎

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

设置模板文件存放的目录

app.set('views', 'views');

模板文件的后缀必须是.ejs

三、EJS的语法

1.render

// 在路由中渲染模板
app.get('/', (req, res) => {
  res.render('index', {place: '上海'});
});

此时在index文件中，我们应该用一个同名参数接收‘上海’

<!DOCTYPE html>
<html>
<head>
  <title>欢迎</title>
</head>
<body>
  <h1>Welcome to <%= place%></h1>
</body>
</html>

在EJS模板中，<% %>可以用来插入JS代码，<%= %>中可以写入参数。

2.列表渲染

路由：

let users =['jack','peter','alice','joe']
app.get('/', (req, res) => {
  res.render('index', {users});
});

index文件：

<ul>
  <% user.foreach( item => { %>
    <li><%= item %></li>
  <% }) %>
</ul>

通过循环渲染就可以把所有用户循环打印出来，避免了大量重复代码

3.条件渲染

有时我们需要根据不同的数据，渲染不同的html内容

路由：

let users =['jack','peter','alice','joe']
app.get('/', (req, res) => {
  res.render('index', {users});
});

index文件：

<% if (user.length==0){ %>
<h1>暂无数据</h1>
<% }else{ %>
    <ul>
      <% user.foreach( item => { %>
        <li><%= item %></li>
      <% }) %>
    </ul>
<% } %>

在渲染数据之前判断了用户数量是否为0，若是则显示暂无数据，若不是，则将用户数据都显示出来。

四、总结

可以看到在EJS中使用JS的代码是非常方便的，基本只需要将其加在<% %>中，就可以对JS进行解析。变量的输出则是依靠<%= %>。此外，我们也可以通过include引入其他的模板文件，能极大的增强代码的复用性。

wandongle

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
EJS模板引擎

可以看到在EJS中使用JS的代码是非常方便的，基本只需要将其加在<% %>中，就可以对JS进行解析。变量的输出则是依靠<%= %>。此外，我们也可以通过include引入其他的模板文件，能极大的增强代码的复用性。
复制链接

扫一扫