首先我们需要使用ejs，必须先安装ejs
npm install ejs
1.使用ejs解析变量
//js代码
const ejs=require('ejs');//引入ejs
ejs.renderFile('./views/1.ejs',{name:'amy'},function(err,data){
if(err)
console.log('编译失败');
else
console.log(data);
})
ejs代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我的名字叫:<% = name %>
</body>
</html>
我们执行上述代码就会发现amy已经被输出在body中
1.png
2.在ejs中解析json
有如下js代码：
const ejs=require('ejs');
ejs.renderFile('./views/2.jade',{json:{arr:[
{name:'amy',pass:'123'},
{name:'blue',pass:'456'},
{name:'jack',pass:'789'}
]}},function(err,data){
if(err)
console.log('编译失败');
else
console.log(data);
});
ejs代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<%=json.arr[0].name%>
</div>
</body>
</html>
执行以上代码我们会看到json字符串中的相应内容被输出
2.png
3.在ejs中循环json中的数据
js代码如下
const ejs=require('ejs');
ejs.renderFile('./views/3.jade',{json:{arr:[
{name:'amy',pass:123},
{name:'jack',pass:456},
{name:'blue',pass:789}
]}},function(err,data){
});
ejs代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<% for(var i=0;i<json.arr.length;i++){%>
<div>
用户名:<%=json.arr[i].user%>
密码:<%=json.arr[i].pass%>
</div>
<% } %>
</body>
</html>
执行以上代码，我们会发现输出以下结果，json中的数据都被循环到了div中
1.png
4.在ejs中解析标签
js代码如下
const ejs=require('ejs');
ejs.renderFile('./views/4.ejs',{},function(err,data){
if(err)
console.log('编译失败');
else
console.log(data);
})
ejs代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 在ejs中解析标签 -->
<%
var str='<div></div>';
%>
<%-str%>
</body>
</html>
str就代表div标签，但是解析str的时候不用<%=str%>，而是把=换成-，<%-str%>，解析出来的结果如下图所示：
2.png
5.把文本中的内容输出到html中
现在有一个aaa.txt,我们想把aaa.txt中的内容输出到html中，代码如下
js代码
const ejs=require('ejs');
ejs.renderFile('./views/ejs5.js',{},function(err,data){
if(err)
console.log('编译失败');
else
console.log(data);
});
ejs代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 把文本中的内容输出到或循环输出到ejs中 -->
//引入aaa.txt
<% include ../aaa.txt %>
//循环aaa.txt中的内容
<%for(var i=0;i<5;i++){%>
< include ../aaa.txt%>
<% } %
</body>
</html>
根据不同的值加载不同的css样式
js代码如下
const ejs=require('ejs');
ejs.renderFile('./views/6.js',{type:admin},function(err,data){
if(err)
console.log('err');
else
console.log(data);
});
ejs代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<% if(type=='admin'){%>
<% include ../style/admin.css%>
<%}else{%>
<% include ../style/user.css %>
<% } %>
</body>
</html>
网友评论