node学习-express下使用ejs模板

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

目录结构

node学习-express下使用ejs模板_第1张图片

渲染方式

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张图片

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
<thead>
        <tr>
            <th>姓名th><th>年龄th>tr>thead><tbody><% for(var i=0;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张图片
3.模板嵌套 <% include 模板嵌套路径 %>

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

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

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

显示效果如下:
node学习-express下使用ejs模板_第4张图片

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

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

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

这是一个标题

'
}); }); // index.ejs <%- html %>

显示如下:
node学习-express下使用ejs模板_第5张图片

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:'

这是一个标题

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

这是一个标题

'
}); });

目录结构如下:
node学习-express下使用ejs模板_第6张图片

你可能感兴趣的:(node学习-express下使用ejs模板)