EJS基本使用

最新推荐文章于 2024-10-13 20:51:38 发布

weixin_34376986

最新推荐文章于 2024-10-13 20:51:38 发布

阅读量273

点赞数

基本使用

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:&lt;div&gt;i&#39;m message&lt;/div&gt;

<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 ...

直接就可以在浏览器中访问了。