node学习-express下使用ejs模板

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

目录结构

渲染方式

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

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

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


// index.ejs
<%=text%>

当访问’/’，则返回

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>

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>

显示效果如下：

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

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

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

// index.ejs
<%- html %>

显示如下：

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>'});
});

目录结构如下：