ejs模板的书写

0.412字数 630阅读 43587

友情链接:ejs.coembeddedjs


1、EJS是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本。可以说EJS是一个JavaScript库,EJS可以同时运行在客户端和服务器端,客户端安装直接引入文件即可,服务器端用npm包安装

2、EJS的特点:

  • 快速编译和渲染

  • 简单的模板标签

  • 自定义标记分隔符

  • 支持文本包含

  • 支持浏览器端和服务器端

  • 模板静态缓存

  • 支持express视图系统

3、EJS成员函数:

  • Render(str,data,[option]):直接渲染字符串并生成html

str:需要解析的字符串模板

data:数据

option:配置选项

  • Compile(str,[option]):编译字符串得到模板函数

str:需要解析的字符串模板

option:配置选项

两个函数包括的配置选项如下:

4、EJS常用标签

  • <% %>流程控制标签

  • <%= %>输出标签(原文输出HTML标签)

  • <%- %>输出标签(HTML会被浏览器解析)

  • <%# %>注释标签

  • % 对标记进行转义

  • -%>去掉没用的空格

说明:ejs中的逻辑代码全部用JavaScript

5、接下来看一个例子就可以明白EJS的简单语法了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>EJS Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="ejs.min.js"></script>
<script >
    var data={flag:false,
                data1:["====1","====2","====3"],
                data2:["====4","====5","====6"]
            };

    window.onload=function(){
        var tem=document.getElementById("tem").innerHTML;
        var html=ejs.render(tem,data);
        document.getElementsByTagName("body")[0].innerHTML=html;
    }
</script>
</head>
<body>
<script type="text/javascript" id="tem">
<ul>
    <%if(flag){%>
      <%for (var i=0;i<data1.length;i++){%>
      <li><%=data1[i]%></li>
      <%}%>
      <%}else{%>
        <%for(var i=0;i<data2.length;i++){%>
        <li><%=data2[i]%></li>
        <%}%>
        <%}%>
      </ul>
</script>
</body>
</html>

运行后结果如下:


4、过滤器(把结果进一步加工的函数):

语法如下:

<%=: data.age | plus:5%>

注意:和|两个符号:

此外,还有文件包含的语法:

<%- include(path) %>

接下来用这个写一个服务器端的,文件目录如下:

app.js文件内容如下:

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文件内容如下这里引用了头部和尾部:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>EJS</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="../css/main.css" rel="stylesheet">
</head>
<body>
<%- include("./header.ejs") %>
    <h1><%=title%></h1>
    <%- include("./footer.ejs") %>
</body>
</html>

头部和尾部都是一行代码如下:

<h1>我是头部</h1>
<h1>我是尾部</h1>

启动服务器后,我们输入http://localhost:3000/ejs,显示内容如下:

这说明我们利用ejs模板做到了正确输出,这既可以大大增加代码的复用性,而且当data为数据库中的数据时,我们就可以做到实时更新网站数据了,这样一个简单动态网站就完成了,听起来是不是很简单,不过还有很长一段路要走滴,先睡了,下次再更。

最后是一个广告贴,最近新开了一个分享技术的公众号,欢迎大家关注👇

推荐阅读更多精彩内容