1、EJS是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本。可以说EJS是一个JavaScript库,EJS可以同时运行在客户端和服务器端,客户端安装直接引入文件即可,服务器端用npm包安装
2、EJS的特点:
- 快速编译和渲染
- 简单的模板标签
- 自定义标记分隔符
- 支持文本包含
- 支持浏览器端和服务器端
- 模板静态缓存
- 支持express视图系统
3、EJS成员函数:
- Render(str,data,[option]):直接渲染字符串并生成htmlstr:需要解析的字符串模板data:数据option:配置选项
- Compile(str,[option]):编译字符串得到模板函数str:需要解析的字符串模板option:配置选项
两个函数包括的配置选项如下:
![](http://upload-images.jianshu.io/upload_images/1641380-5a3d02a56d984f51.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4、EJS常用标签
- <% %>流程控制标签
- <%= %>输出标签(原文输出HTML标签)
- <%- %>输出标签(HTML会被浏览器解析)
- <%# %>注释标签
- % 对标记进行转义
- -%>去掉没用的空格说明:ejs中的逻辑代码全部用JavaScript
5、接下来看一个例子就可以明白EJS的简单语法了
EJS Examples
运行后结果如下:
![](http://upload-images.jianshu.io/upload_images/1641380-0ce8c5053a262adb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4、过滤器(把结果进一步加工的函数):
![](http://upload-images.jianshu.io/upload_images/1641380-9f9bb884cf7b4084.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/1641380-bba0337981710e7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/1641380-cf898087ccc0ed93.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
语法如下:
<%=: data.age | plus:5%>
注意:和|两个符号:
此外,还有文件包含的语法:<%- include(path) %>
接下来用这个写一个服务器端的,文件目录如下:
![](http://upload-images.jianshu.io/upload_images/1641380-693eff07cbdb2e49.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
var http=require("http");var express=require("express");var app=express();var tem={ message:"我是中间部分"}//创建服务器http.createServer(app).listen(3000,function(){ console.log("Server is listening port 3000");});//挂载静态资源处理中间件app.use(express.static(__dirname+"/public"));//设置模板视图的目录app.set("views","./public/views");//设置是否启用视图编译缓存,启用将加快服务器执行效率app.set("view cache",true);//设置模板引擎的格式即运用何种模板引擎app.set("view engine","ejs");//设置路由app.get("/ejs",function(req,res){ res.render("ejs1",{title:tem.message});});
ejs1.ejs文件内容如下这里引用了头部和尾部:
EJS <%- include("./header.ejs") %><%=title%>
<%- include("./footer.ejs") %>
头部和尾部都是一行代码如下:
我是头部
我是尾部
启动服务器后,我们输入
![](http://upload-images.jianshu.io/upload_images/1641380-35a7877013545e99.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)