博客

EJS模板引擎

  • Post author:
  • Post category:其他


EJS模板引擎



一、安装ejs模板引擎

cnpm install --save-dev ejs



二、ejs标签

标签 含义
<% %> 写代码
<%_ %> 删除代码前面的空格
<%= %> 绑定数据
<%- %> 转义数据，输出到模板



三、ejs模板引擎的用法



同步方法操作

// 引入ejs模板引擎
const http=require("http");
const ejs=require("ejs");
let port=80;
let host="localhost";
let app=http.createServer((req,res)=>{
   res.writeHead(200,{"Content-Type":"text/html;charset=utf-8"});
   // 使用ejs模板引擎渲染界面
   let template=`<ul>
       <%for(let i=0;i<item.length;i++){%>
           <li><%=item[i].name%></li>
       <%}%>
   </ul>`;
   let data=[
       {id:1,name:"小李"},
       {id:2,name:"小黑"},
       {id:3,name:"小赵"},
   ]
   // 同步方法操作
   let html=ejs.render(template,{item:data});
   res.end(html);
});
app.listen(port,host,()=>{
   console.log(`http://${host}:${port}`);
});



直接获取后台的数据，渲染到页面


  • main.js
     
   let data=[
       {id:1,name:"小李",des:'<h1>123</h1>'},
       {id:2,name:"小黑",des:'<h1>123</h1>'},
       {id:3,name:"小赵",des:'<h1>123</h1>'},
   ];
   ejs.renderFile("view/index.ejs",{item:data},(err,html)=>{
       if(err){
           throw err;
       }
       res.end(html);
   });

  • index.ejs
     
<body>
   <ul>
       <%item.map((it,index)=>{%>
           <li><%=it.name%><%-it.des%></li>
       <%})%>
   </ul>
</body>



动态获取数据


  • main.js
     
   let data=[
       {id:1,name:"小李",des:'<h1>123</h1>'},
       {id:2,name:"小黑",des:'<h1>123</h1>'},
       {id:3,name:"小赵",des:'<h1>123</h1>'},
   ];
   let header=["首页","联系我们"]
   ejs.renderFile("view/index.ejs",{
       item:data,
       header:header
   },(err,html)=>{
       if(err){
           throw err;
       }
       res.end(html);
   });

  • index.ejs
     
   <%-include("./child/Header.ejs",{header})%>
   <ul>
       <%item.map((it,index)=>{%>
           <li><%=it.name%><%-it.des%></li>
       <%})%>
   </ul>

  • Header.ejs
     
<div>
   <ul>
       <% header.forEach((str)=>{%>
           <li>
               <%=str%>
           </li>
       <%})%>
   </ul>
</div>


版权声明：本文为qq_45806781原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。