浅谈ejs

Posted 2020-11-26 cc-qm

浅谈ejs

后端渲染

通常根据后端返回的json数据，然后来生成html被称为前端渲染，而后端渲染是后端把json和html结合渲染好后再返回浏览器，没前端什么事了

模板引擎

无论前后谁渲染页面，都会用到模板引擎，前端操作页面实际上是操作dom，后端渲染页面是把数据和html字符拼接后丢给浏览器

引擎	前端	后端
angularJs	√	×
vue/mustach	√	√
react	√	√
angularTs/mustach	√	√
jade/pug	×	√
ejs	×	√
jquery + art-template	√	×
handlerbars	√	×

ejs

原理: fs抓取前端静态页面 + ejs + 数据 -> 返回send（data） -> 浏览器

特点：非侵入式，温和，依赖弱

ejs模板文件语法

• ejs 结构就是html
• 输出: <%= 数据名|属性名|变量名 + 表达式 %>
• 语句： <% 语句 %> 需要被<% %> 包裹
• 非转义输出: <%- 数据名|变量名 + 表达式 %>
• 载入公共：<%- include(‘./hd.ejs‘,{数据}) %>

使用

const ejs = require("ejs");
app.get("/", (req, res) => {
  ejs.renderFile("./views/index.ejs", data, (err, data) => {
    if (!err) {
      res.send(data);
    }
  });
});

传到ejs文件的data数据为

let data = {
  title: "ejs模板标题",
  list: [
    { id: 1, name: "cc", age: 10 },
    { id: 2, name: "cc", age: 10 },
    { id: 3, name: "cc", age: 10 }
  ],
  html: "<strong>强壮的</strong>"
};

用法一：输出变量值

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

---

用法二：包裹循环语句输出

    <ul>
      <% for(let i=0,len=list.length;i<len;i++){
           %><li><a href="#"><%=list[i].id+list[i].name%></a></li><%
       } 
    %>
    </ul>

---

用法三：保留html格式的文本，不转译输出

<%-html%>

---

用法四：载入公共的ejs文件

<%-include("./hd.ejs",{title:'啦啦啦'})%>

---

用法五：载入外部样式

得先部署静态资源

app.use(express.static("./public"));

再ejs文件引入外部样式，注意url地址是相对 静态资源地址根目录 的路径

<link rel="stylesheet" href="/css/style.css">

---

渲染页面的另一用法

该方式的 ejs文件 默认放在==views==目录下

res.render("./index.ejs", data);

可以手动更改默认的模板文件夹

app.set("views", "pages");//将默认文件夹改为pages

---

中间件配置

//中间件配置
app.set('view.engine','html');  //模板最终  输出类型设置
app.set('views','./views');     //引擎模板目录设置

app.engine('html',consolidate.ejs); //输出与引擎匹配
app.engine('css',consolidate.jade); //输出与引擎匹配

//渲染
app.get('xxx',(req,res)=>{
  res.render('模板文件名',{数据}) //整合页面和数据，完成渲染，发往浏览器,并结束响应
})

以上就是本人对于ejs的简单了解，如有不对，欢迎指出~

まだね~