xzsz

ejs官方文档:https://ejs.bootcss.com/

 

1.什么是 EJS?

"E" 代表 "effective",即【高效】。

EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。

EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。

2.EJS特性:

  • 快速编译与绘制输出
  • 简洁的模板标签:<% %>
  • 自定义分割符(例如:用 <? ?> 替换 <% %>)
  • 引入模板片段
  • 同时支持服务器端和浏览器 JS 环境
  • JavaScript 中间结果静态缓存
  • 模板静态缓存
  • 兼容 Express 视图系统

3.EJS安装:利用 NPM 安装 EJS 很简单。

$ npm install ejs

 

 

4.EJS标签含义:

  • <% 'js脚本' 标签,用于流程控制,无输出。
  • <%= 输出数据到模板(输出是转义 HTML 标签)
  • <%- 输出非转义的数据到模板
  • <%_ 删除其前面的空格符
  • <%# 注释标签,不执行、不输出内容
  • <%% 输出字符串 '<%'

 

5.上栗子:https://github.com/lipeifeng/myBlog/tree/master/Nodejs/ejs

(1).node安装 EJS:

(2).html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <table>
  <thead>
    <th>姓名</th>
    <th>年龄</th>
  </thead>  
  <tbody>
  <% for(var i=0;i<list.length;i++){var u=list[i]; %>
    <tr>
    <td><%=u.name%></td>
    <td><%=u.age%></td>
    </tr>
  <% } %>
  </tbody>
</table>
</body>
</html>
View Code

 

(3). nodejs脚本:

var http=require('http');

var fs=require('fs');

var ejs=require('ejs');

http.createServer(function(req,res){
  var dataList={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};  
  // console.log(req.url);
  fs.readFile('demo.html',function(err,data){
    // console.log(data);
    var datas=data.toString();
    var html=ejs.render(datas,dataList);
    res.end(html);
  });

}).listen(80);
View Code

 

(4)运行结果 :

 

 

分类:

JS

技术点:

相关文章: