NODEJS - EJS教程

最新推荐文章于 2024-07-25 18:19:21 发布

devil13th

最新推荐文章于 2024-07-25 18:19:21 发布

阅读量2.9k

点赞数

分类专栏： JAVASCRIPT

本文链接：https://blog.csdn.net/devil13th/article/details/50401153

版权

JAVASCRIPT 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

EJS介绍
安装EJS
例子
补充说明

EJS介绍

EJS是一种简单的模板语言，可以使用原始的JavaScript生成HTML,类似JAVA中的FREEMARK。
特点：
Fast compilation and rendering : 快速编译渲染
Simple template tags:<% %> :标签简单
Includes: 可以进行引用
Both server JS and browser support:可以运行在服务端和客户端
Static caching of intermediate JavaScript: 静态缓存JAVASCRIPT
Static caching of templates：缓存模板
Complies with the Express view system: 可以使用Express view系统编译

安装EJS

Linux 下进入某个目录后执行以下命令

 
    $ npm install ejs

在该目录下会出现node_modules/ejs目录

例子

1.简单例子，字符串为模板

 
     view plain 
     run code 
     copy to clipboard 
     print 
     ? 
    
      
 var ejs = require("ejs");  
 var people = ['geddy', 'neil', 'alex'];  
 var html = ejs.render('<%= people.join(", "); %>', {people: people});  
 console.log(html);  

2.文件为模板
模板文件ejs02.ejs:

 
     view plain 
     run code 
     copy to clipboard 
     print 
     ? 
    
    
 <!doctype html>  
 <html>  
 <head>  
 <title><%=title%></title>  
 <meta charset="utf-8"/>  
 </head>  
 <body>  
 name:<%= userInfo.name %><br/>  
 age:<%= userInfo.age %><br/>  
   
 解析html代码：<br/>  
 message:<%= userInfo.message %><br/>  
 <br/>  
 不解析html代码:<br/>  
 message:<%- userInfo.message %><br/>  
 <%# i'm description %><br/>  
 <%  
     if(userInfo.age > 5){  
   
 %>  
  5+  
 <%  
     }else{  
 %>  
     5-  
 <%  
     }   
 %>  
   
 </body>  
 </html>  

ejs02.js

 
     view plain 
     run code 
     copy to clipboard 
     print 
     ? 
    
    
 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");  

3.模仿Express

 
     view plain 
     run code 
     copy to clipboard 
     print 
     ? 
    
 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 ...");  

补充说明

<% :'Scriptlet' tag, for control-flow, no output --- js脚本
<%= :Outputs the value into the template (HTML escaped) ---标签中的变量内容进行html代码的转义后输出
<%- : Outputs the unescaped value into the template ---直接输出标签中的变量内容
<%# :Comment tag, no execution, no output ----不执行，注释
<%% : Outputs a literal '<%' ---用于输出<%
%> :Plain ending tag -- 结束标签
-%> : Trim-mode ('newline slurp') tag, trims following newline ---结束标签