EJS基本使用
基本 使用
2023-09-27 14:24:30 时间
基本使用
Render 渲染字符串
Compile编译字符串到模板函数(需调用才能生成html内容)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ejs</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script src="ejs.js"></script>
<script>
var html = ejs.render('<%= "hello,world" %>',''); // 直接输出html
var template = ejs.compile('<%= 456 %>'); // 输出一个函数
var result = template(); // 处理之后,成为html
document.getElementById('div1').innerHTML=html;
document.getElementById('div2').innerHTML=template;
document.getElementById('div3').innerHTML=result;
</script>
</body>
</html>
hello,world
function (data) { var include = function (path, includeData) { var d = utils.shallowCopy({}, data); if (includeData) { d = utils.shallowCopy(d, includeData); } return includeFile(path, opts)(d); }; return fn.apply(opts.context, [data || {}, escapeFn, include, rethrow]); }
456
使用模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ejs</title>
</head>
<body>
<script id="users" type="text/template">
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li><%= name%></li>
<% }) %>
</ul>
<% } %>
</script>
<script src="ejs.js"></script>
<script>
var users = document.getElementById("users").innerHTML;
var namesArr = ['zhangsan','lisi','wangwu']; // 从接口中获取
var html = ejs.render(users,{names:namesArr});
document.body.innerHTML = html;
</script>
</body>
</html>
zhangsan
lisi
wangwu
node中使用
npm install ejs
新建ejs01.js
var ejs = require("ejs");
var people = ['geddy', 'neil', 'alex'];
var html = ejs.render('<%= people.join(", "); %>', {people: people});
console.log(html);
node 执行
$ node ejs01.js
geddy, neil, alex
一个综合的例子:
新建模板ejs02.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<title><%=title%></title>
<meta charset="utf-8"/>
</head>
<body>
name:<%= userInfo.name %><br/>
age:<%= userInfo.age %><br/>
<%%= %> 使用方法:变量若包含 '<' '>' '&'等字符会被转义 :
message:<%= userInfo.message %>
<br/>
<%%- %> 使用方法:输出变量原值,不转义:
message:<%- userInfo.message %>
<%# 注释不显示 %>
<br/>
<%
if(userInfo.age > 5){
%>
5+
<%
}else{
%>
5-
<%
}
%>
</body>
</html>
新建控制器
ejs02.js
var ejs = require("ejs");
var fs = require("fs");
//var people = ['geddy', 'neil', 'alex'];
//var html = ejs.render('<%= people.join(", "); %>', {people: people});
var title="hello world";
var userInfo = {
name : "devil13th",
age : 5,
school : "THD",
message : "<div>i'm message</div>"
}
fs.readFile("ejs02.ejs","utf-8",function(err,data){
console.log(data);
console.log("========================");
var text = ejs.render(data,{title:title,userInfo:userInfo});
console.log(text);
})
console.log("finish");
这个时候执行node ejs02.js
$ node ejs02.js
finish
<!DOCTYPE html>
<html lang="en">
<head>
<title><%=title%></title>
<meta charset="utf-8"/>
</head>
<body>
name:<%= userInfo.name %><br/>
age:<%= userInfo.age %><br/>
<%%= %> 使用方法:变量若包含 '<' '>' '&'等字符会被转义 :
message:<%= userInfo.message %>
<br/>
<%%- %> 使用方法:输出变量原值,不转义:
message:<%- userInfo.message %>
<%# 注释不显示 %>
<br/>
<%
if(userInfo.age > 5){
%>
5+
<%
}else{
%>
5-
<%
}
%>
</body>
</html>
========================
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello world</title>
<meta charset="utf-8"/>
</head>
<body>
name:devil13th<br/>
age:5<br/>
<%= %> 使用方法:变量若包含 '<' '>' '&'等字符会被转义 :
message:<div>i'm message</div>
<br/>
<%- %> 使用方法:输出变量原值,不转义:
message:<div>i'm message</div>
<br/>
5-
</body>
</html>
还可以继续升级,创建server_ejs02.js
var ejs = require("ejs");
var fs = require("fs");
var http = require("http");
http.createServer(function(req,res){
fs.readFile("ejs02.ejs","utf-8",function(err,data){
res.writeHead(200,{'Content-Type':'text/html'});
var title="hello world";
var userInfo = {
name : "devil13th",
age : 5,
school : "THD",
message : "<div style='border:1px solid red;'>i'm message</div>"
};
var html = ejs.render(data,{title:title,userInfo:userInfo});
res.end(html);
})
}).listen(3000);
console.log("server running ...");
执行node server_ejs02.js
$ node server_ejs02.js
server running ...
直接就可以在浏览器中访问了。
相关文章
- OkHttp3的基本使用
- TypeScript算法题实战——哈希表篇(Set和Map的基本用法、快乐数、两数相加、四数相加)
- 【数据挖掘】使用移动平均预测道琼斯、纳斯达克、标准普尔指数——Python中的基本数据操作和可视化
- PowerMock(一):PowerMock的基本使用
- 终于搞懂了Java中基本数据类型和引用数据类型的区别啦!
- JdbcTemplate的基本使用
- 【LeetCode】基本计算器 II [M](栈)
- ckeditor:基本使用方法
- 使用gitlab的基本过程,常用的git和gitlab命令
- guice基本使用,guice整合guice-servlet,web scope注解(六)
- Apache ActiveMQ消息中间件的基本使用
- Android 开发第四讲 TextView的基本使用
- 基于rabbitmq的Spring-amqp基本使用
- Shrio第一天——入门与基本概述
- Java8 Lamda的基本使用
- QT基本使用
- PHP实现四种基本排序算法 得多消化消化
- Go 中的反射 reflect 介绍和基本使用
- log4j的基本使用和参数设定
- Neo4j基本使用及导入三元组
- redis的五种基本数据类型
- IDEA使用--字体、编码和基本设置
- 负载均衡集群ipvsadm命令及基本用法
- spring成神之路第三篇:Spring容器基本使用及原理(ApplicationContext接口获取bean的4种方式)
- 本行卡修改密码基本流程说明
- Express的基本使用
- 一文弄懂Docker基本使用
- TypeScript学习笔记(二):基本数据类型及数据转换
- SQL总结(一)基本查询
- Oracle的存储过程基本写法
- Sql Server系列:Select基本语句
- 《Linux From Scratch》第三部分:构建LFS系统 第六章:安装基本的系统软件- 6.72. 清理
- C语言变量常量,基本数据类型及数据类型转换详讲
- ajax与axios基本使用