EJS模板引擎

最新推荐文章于 2024-05-11 09:34:25 发布

南初️

最新推荐文章于 2024-05-11 09:34:25 发布

阅读量1.2k

点赞数

分类专栏： Node.js

本文链接：https://blog.csdn.net/qq_45806781/article/details/116912781

版权

Node.js 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

EJS模板引擎

一、安装ejs模板引擎
二、ejs标签
三、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>

南初️

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
EJS模板引擎

EJS模板引擎一、安装ejs模板引擎二、ejs标签三、ejs模板引擎的用法同步方法操作直接获取后台的数据，渲染到页面动态获取数据一、安装ejs模板引擎cnpm install --save-dev ejs二、ejs标签标签含义<% %>写代码<%_ %>删除代码前面的空格<%= %>绑定数据<%- %>转义数据，输出到模板三、ejs模板引擎的用法.
复制链接

扫一扫