ejs 模版引擎

ejs模板引擎

模板引擎是什么

模版引擎能帮我们我们动态的生成 HTML 内容。且可以实现HTML代码与js代码的分离。

使用方法

下载安装

cnpm install ejs --save

设置

//设置默认使用的模板引擎
app.set("view engine", "ejs");

app.get("/", (req,res)=>{
    res.render("index"); //不需要写res.render("./views/index.ejs");
})

新建ejs文件

新建views文件夹存放模板文件。在views文件夹下新建ejs文件，注意，扩展名必须是ejs，不是html。

渲染数据

app.get("/",(req,res)=>{
        //呈递页面
        res.render("index",{
            "name" : "zhangsan" 
        }); 
});

ejs 的语法

插值语句 <%= value %>

<p><%= title %></p>

流程控制语句 if语句 <% js代码 %>

1. if语句

//  js 的if 语句格式
<% if(条件) { %>
//  处理的逻辑 渲染的HTML结构
<% } %>

2. if-else语句

//  js 的if 语句格式
<% if(条件) { %>
//  处理的逻辑 渲染的HTML结构
<% }else { %>
//  处理的逻辑 渲染的HTML结构
<% } %>

3. if-else的嵌套

//  js 的if 语句格式
<% if(条件) { %>
//  处理的逻辑 渲染的HTML结构
<% }else  if(){ %>
//  处理的逻辑 渲染的HTML结构
<% }else if(){ %>
// .....
<% else {%>
// ...
<% }%>

流程控制语句 for循环语句 <% js代码 %>

1. for循环

<%for(let i = 0; i < arr.length; i++) {%>
//  处理的逻辑 渲染的HTML结构
<% } %>

2. forEach 循环

<% arr.forEach(function(item, index) { %>
//  处理的逻辑 渲染的HTML结构
<% }) %>