欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

node学习-express下使用ejs模板

程序员文章站 2022-07-01 10:39:25
...

Express中的模板引擎常用的是ejs与jade,这篇文章,主要介绍ejs模板引擎

目录结构

node学习-express下使用ejs模板

渲染方式

1.模板中输出变量 <%=变量名称%>

// index.js
app.set('view engine','ejs');  // 用于配置默认后缀名

app.get('/',(req,res)=>{
    res.render('index',{text:'这是模板渲染的内容'});     // 将后面的数据渲染到index.ejs模板中
});


// index.ejs
<%=text%>

当访问’/’,则返回
node学习-express下使用ejs模板

2.<% js代码 %>

  • 上面是对一个变量的输出,如果我们希望能渲染一个数组或对象,或者对渲染的数据根据判断规则显示数据,可做如下操作
  • 下面的代码是显示人员姓名和年龄,根据isShow字段来进行判断是否现在当前人员信息:
// index.js
app.set('view engine','ejs');

let arr = [
    {id:1,name:'Anna',age:6,isShow:true},
    {id:2,name:'Jake',age:12,isShow:true},
    {id:3,name:'Tom',age:3,isShow:false},
    {id:4,name:'Tony',age:18,isShow:true},
    {id:5,name:'Andy',age:10,isShow:true}
];

app.get('/',(req,res)=>{
    res.render('index',{arr:arr});
});


// index.ejs
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <% for(var i=0;i<arr.length;i++){ %>
            <% if(arr[i].isShow){ %>
                <tr id="<%= arr[i].id %>">
                    <td><%= arr[i].name %></td>
                    <td><%= arr[i].age %></td>
                </tr>
            <% } %>
        <% } %>
    </tbody>
</table>

node学习-express下使用ejs模板
3.模板嵌套 <% include 模板嵌套路径 %>

// index.js
<% include ./header.ejs %>
     <div class="center">center</div>
<% include ./footer.ejs %>

//header.js
<div class="header">header</div>

// footer.js
<div class="footer">Footer
</div>

显示效果如下:
node学习-express下使用ejs模板

4.如果后台返回的是一个html标签,我们使用<%- html标签 %>来进行渲染

// index.js
app.set('view engine','ejs');

app.get('/',(req,res)=>{
    res.render('index',{html:'<h1>这是一个标题</h1>'});
});

// index.ejs
<%- html %>

显示如下:
node学习-express下使用ejs模板

ejs相关设置

1.设置ejs渲染html页面

// index.js
app.engine('html',require('ejs').__express);
app.set('view engine', 'html');

app.get('/',(req,res)=>{
    res.render('index',{html:'<h1>这是一个标题</h1>'});
});

// index.html
<%- html %>

2.更改默认路径

  • js模板的默认路径是在views中的,从最初的目录结构我们也发现了,所有的模板都是放在views中的,所以在render的时候我们可以不写views的目录,直接写要渲染的模板,但如果我们要渲染的模板不再view下而在其它目录下,例如static中,可进行如下设置:
// index.js
app.set('view engine', 'ejs');
app.set('views','static');  // 更改模板默认路径

app.get('/',(req,res)=>{
    res.render('index',{html:'<h1>这是一个标题</h1>'});
});

目录结构如下:
node学习-express下使用ejs模板