Express模板引擎

与express一起使用的一些流行模板引擎是Pug,Mustache和EJS。Express应用程序默认使用Pug，但他也支持其他几个。

需要在应用中进行如下设置才能让Express渲染模板引擎：

view，放模板的文件目录，例如：app.set('views','./views)。
view engine,要使用的模板引擎。例如，要使用pug模板引擎：app.set('view engine', 'pug')

在路由中渲染模板

在路由渲染模板并将渲染后的HTML字符串发送到客户端。

res.rander(view [, locals] [, callback])
1

view:一个字符串，view是渲染的模板文件的文件路径。
locals:一个对象，其属性定义视图的局部变量。

router.get("/", (req, res) => {
  // res.send({ list: ['aaa', 'bbb', 'ccc'] })
  res.render("list", { title: "新闻", list: ["aa", "bb", "cc"] })
})
1
2
3
4

ejs模板引擎的使用

安装ejs

npm i ejs
1

在express配置ejs模板引擎

使用ejs模板引擎

在入口文件中配置如下代码，配置Express使用ejs模板引擎

//配置模板引擎
app.set("views", path.join(__dirname, "./views")) //设置模板引擎的保存位置
app.set('view engine', 'ejs')
1
2
3

注意：

此时指定的模板目录为views，且模板文件的后缀名为.ejs

设置模板后缀为html

在app.js中添加如下代码，配置Express使用ejs模板引擎。并指定模板后缀名为html。

app.set('views',path.join(__dirname,'views')); //设置模板存储位置
app.set('view engine','html');
app.engine('html',require('ejs').renderFile); //使用ejs模板引擎解析html
1
2
3

注意：此时指定的模板目录为views，且模板文件的后缀名为.html。

ejs模板语法

<%= %>   输出标签
<%- %>   输出html标签（html会被浏览器解析）
<%# %>   注释标签
<% %>    流程控制标签（写的是if,else,for）
<%- include("header.html",{user:user})%>  导入公共的模板内容

1
2
3
4
5
6

<body>
  <%- include("./haeder.html",{isShow:true})%>
    这是list页面
    <%=title%>
      <ul>
        <% for(var i=0;i<list.length;i++){ %>
          <li>
            <%=list[i]%>
          </li>
          <%} %>
      </ul>
      <h%- <h5>我是输出的html标签</h5>%>

        <%# <h3>注释标签，不会显示在页面结构中</h3>%>
          <%- include("./footer.html")%>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Snipaste_2022-06-27_16-51-25

相关阅读:
mysql查询 limit 1000,10 和limit 10 的速度一样吗？
CSS基础入门
全志A40i开发板硬件说明书——100%国产＋工业级方案（中）
派派派森03
synchronized
PyTorch常用参数初始化方法详解
企业级win10电脑下同时存在Python3.11.7Python3.6.6，其中Python3.6.6是后装的【过程与踩坑复盘】
JNPF开发平台凭什么火？
分布式事务（Seata）——Seata分布式事务XA模式、AT模式、TCC模式的介绍和对比 & 结合案例分析AT模式和XA模式【源码】
6-2 分治法求解金块问题

原文地址：https://blog.csdn.net/liyuchenii/article/details/125487760