1.前言
WHAT ejs 啥?
高效的嵌入式 JavaScript 模板引擎。
EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。
安装
npm install ejs
2.HOW 咋用?
将模板字符串和一些数据作为参数传递给 EJS，Duang，HTML 出来了。
//1. 引用 const ejs = require('ejs') //2. 数据 var obj = { name:"ejs", description:"高效的嵌入式 JavaScript 模板引擎。" } //3. 模板 var ejsStr =` <h1><%= name %></h1> <p><%= description %></p> ` //4. 渲染 var res = ejs.render(ejsStr,obj) console.log(res);
3. node 结合
html文件
<body> <h1><%= name %></h1> <p><%= description %></p> </body>
服务器
const ejs = require('ejs') var obj = { name:"ejs", description:"高效的嵌入式 JavaScript 模板引擎。" } ejs.renderFile(__dirname+"/html文件名字",obj,function(err,data){ if(err){ console.log("错误:",err); }else{ console.log(data); } })
4基本语法
<% '脚本' 标签，用于流程控制，无输出
可以习惯 先写成对的 <% %>
js代码用 <% %>b包裹起来
<%= 输出数据到模板（输出是转义 HTML 标签）
<%= name %>
注意=和前面的%没有空格
render
ejs.render(模板,对象） 输出渲染后的 HTML 字符串
5.效果
6. 列表渲染 条件渲染
服务端
var ejs = require("ejs") var obj = { name: " ejs", description:"高效的嵌入式 JavaScript 模板引擎。", s:"<h1> 模板转义</h1>", list:["html","css","js","jQ"] }; ejs.renderFile("./03list.html", obj, function (err, str) { console.log("读取错误:",err); console.log(str) })
列表渲染 常规方式 for
<h1> <%= name %> </h1> <p> <%= description %> </p> <ul> <% for(var i=0; i < list.length;i++){%> <li> <%= list[i] %> </li> <% } %> </ul>
列表渲染 forEach
<ul> <% list.forEach(function(item){ %> <li> <%= item %> </li> <% }) %> </ul>
7.条件渲染 if
<% if(name){ %> <h2> <%= name %> </h2> <% }else{ %> <a href="#">未登录</a> <% } %>
8. html标签
<div> <%-s%> </div>
这个会直接输出
标签不转义
