NodeJS 使用 ejs 模拟引擎渲染网页

热度 ℃

ejs 模板类似于 jsp ，可以在模板里面根据变量动态生成网页。

<%= %> 原样显示

1
2
3
4
5
resp.render('ejs_temp', {
    user: {
        input: "<div>ABC</div>",
    }
});
1
<div><%= user.input %></div>

渲染结果

1
<div>ABC</div>

<%- %> 转换内容

1
2
3
resp.render('ejs_temp', {
    name: "<div>ABC</div>",
});
1
<div><%- name %></div>

渲染结果

1
ABC

定义class

1
2
3
4
5
6
7
8
9
<style>
    .class1 {
        color: #00b7ff;
    }
    .class2 {
        background-color: #abef98;
    }
</style>
1
<div class="<%= "class1" %> <%= "class2" %>">Class1 Class2</div>

定义href

1
<a href=<%= "/users/edit/" + user.id %> >修改</a>

定义方法

1
2
3
4
5
6
resp.render('ejs_temp', {
    user: {
        name: "ABC",
        age: 25,
    }
});
1
2
3
4
5
6
<script>
    function clickMe(arg1, arg2) {
        console.log(arg1);
        console.log(arg2);
    }
</script>
1
<div onclick="clickMe(<%= "'" + user.name + "', " + user.age %>)">Click Me</div>

include

有两种写法，可以写被 include 的模板文件的扩展名，也可以不写。

1
2
<% include ejs_layout.ejs %>
<% include ejs_layout %>

ejs_include.ejs

1
<div><%= user.name %></div>

ejs_layout.js

1
<% include ejs_include.ejs %>

渲染

1
2
3
4
5
6
resp.render('ejs_layout', {
    user: {
        name: "ABC",
        age: 25,
    }
});

config

在模板文件中，可以访问到 app.locals 变量。

  • config.js
1
2
3
4
5
6
var cfg = {
    version : '1.0.1',
    url : "http://www.xx.com",
};
module.exports = route;
  • 设置locals
1
2
var cfg = require('./routes/config');
app.locals = cfg;
  • 渲染内容
1
<div><%= version %></div>

循环

1
2
3
4
5
<ul>
    <% names.forEach(function(name){ %>
        <li><%= name %></li>
    <% }) %>
</ul>
1
2
3
4
5
resp.render('ejs_temp', {
    user: {
        name: ["ABC", "XYZ"],
    }
});