Node.js_express_服务器渲染页面 ejs

服务器渲染页面 ejs

高效的 js 模版引擎

将数据提前渲染到页面上, 再将渲染好的页面返回响应给浏览器

  • 下载 ejs 包

npm install ejs

无需引用,但是要配置模板资源目录

// app.set(‘views‘, ‘模板资源目录‘);

app.set(‘views‘, ‘views‘);    // 通常文件夹 也叫 views

  • 基本使用

1. 配置模板资源目录

app.set(‘views‘, ‘views‘);    // 通常文件夹 也叫 views

2. 配置要使用的模板引擎

app.set(‘views engine‘, ‘ejs‘);

3. 将 后台数据 渲染到 模板资源

  • app.get(/ejs, (request, response)=>{ const data = [{ "name": ‘孙悟空‘. "age": 555 },{
    "name": ‘白骨精‘,
    "age": 18
    }]; response.render(
    ‘test.ejs‘, {data}); // .ejs 可以省略 });

4. views/test.ejs 

模板语法

1. <%        %>        其中可以写任意 js 代码

2. <%=         %>

3. <%-             %>

源码测试

  • <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> </head> <body> <% console.log("哈哈"); %> 不会显示到页面上 <%= data[0].name %> 输出指定数据到页面上 不会解析标签,转义 HTML 相关源码后输出
    安全性更高
    <%- data[1].name %> 输出指定数据到页面上 解析 HTML 源码 一般结合使用: <% for(var i=0; i<10; i++){ %> <%= data[i].name %> <% }; %>
    </body></html>

凡是经过用户输入的东西,都需要进行特殊处理。

5

55

5

5

5

5

5

5

5

55

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

相关文章