【前端后台】express 后台之ejs模板语法

最新推荐文章于 2025-06-05 09:09:27 发布

原创最新推荐文章于 2025-06-05 09:09:27 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#express #ejs语法 #ejs模板

前端同时被 2 个专栏收录

46 篇文章

订阅专栏

express

2 篇文章

订阅专栏

本文介绍了如何在Express框架中使用EJS模板引擎，包括安装配置步骤、基本语法及高级用法，如条件循环和文件引入等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

express的必须得和ejs模板挂钩，能够让页面更好的遍历及服务器端渲染。

安装

npm install ejs --save

express 配置模板

使用的是通过app.set()方法来配置。

var app = express();
app.set('view engine', 'ejs');
// 传参到页面里面
app.get("/",function (req,res) {
    res.render('index',{
        list:["1111","222222222222","3333333"]
    });// 参数二：是可以将json放入到页面中的。然后页面中使用 <% js东西 %>
})

下面是重点讲解的语法了。

语法

如果是普通的js脚本执行的话，就是要 <% js脚本 %> 。如果是要渲染出数据的话，使用 <%= 内容 %> 或者 <%- 内容 %>

<% %> 用于控制流
<%= %> 用于转义的输出
<%- %>== 用于非转义的输出
-%> 结束标签用于换行移除模式。Trim-mode (‘newline slurp’) 标签, 移除随后的换行符
带有 <%_ _%> 的控制流使用空白字符移除模式
自定义分隔符 (例如，使用 ‘

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>
        <!-- 下面定义一个JavaScript语法 -->
        <% var num= 12; %>
        <!-- 比如：下直接输入 -->
        <%= num %>
        <%- "哈哈哈哈" %>

        <!-- 打印：<%%> -->
        <div><%%%></div>

        <!--下面是注释，不会进行渲染出来。也不会执行里面的程序。请使用这注释方法-->
        <%# 我是注释 %>
    </h1>
</body>
</html>

<%- include 路径 %>

引入公共得头部啊之类得结构。就像HTML得差不多。

// 比如：在views文件夹中有个 public 文件夹里面一个nav.ejs文件。然后在模板中使用，比如下面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h4>我是新闻页面</h4>
    <%- include public/nav.ejs %>
</body>
</html>

// 在 nav.ejs 中
<ol>
    <li>首页</li>
    <li>列表</li>
    <li>新闻</li>
    <li>军事</li>
    <li>娱乐</li>
    <li>关于我们</li>
</ol>

<%- include 路径 %> 扩展

既然是引入的，就可以在引入的文件内使用ejs。应该原理是将整个被引入的ejs全部当做文本放入到页面中，然后进行编译执行程序的。

<!-- index.ejs -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active {
            background: darkred;
            color: white;
        }
    </style>
</head>
<body>
    <%var index = 2;%>
    <%- include hd.ejs%>
</body>
</html>

<ol>
    <% var arr = ["首页",'列表',"关于我们","上海"];for (var i= 0;i<arr.length;i++) {%>
    <li class="<% if(index==i){ %><%= "active" %><%}%>"><%= arr[i] %></li>
    <%}%>
</ol>

其实还可以直接遍历弄过来的东西，只要你想到的js操作，就可以弄到。

<% function ss (user){ %>
    <% include user/show %>
<% }) %>