博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
VUE -- ejs模板的书写
阅读量:7065 次
发布时间:2019-06-28

本文共 1465 字,大约阅读时间需要 4 分钟。

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的简单语法了

EJS Examples

运行后结果如下:

 

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

EJS
<%- include("./header.ejs") %>

<%=title%>

<%- include("./footer.ejs") %>

 

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

我是头部

我是尾部

启动服务器后,我们输入

 

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

转载地址:http://kcxll.baihongyu.com/

你可能感兴趣的文章
Enum一点使用总结
查看>>
eclipse +VISUALSVN SERVER 创建版本控制器,防止误操作(可视化操作,简单方便,不需要修改配置文件)...
查看>>
一致性hash
查看>>
C++函数的重载
查看>>
WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu
查看>>
苹果应用的上线步骤
查看>>
初识scoket
查看>>
Stardew Valley(星露谷物语)Mod开发之路 1环境配置
查看>>
2012 借教室
查看>>
为什么是Spring Boot
查看>>
python基础-协程
查看>>
JavaScript数据类型
查看>>
hdu 2844 混合背包【背包dp】
查看>>
函数分析题
查看>>
debian手册摘要
查看>>
TreeMap 原理
查看>>
iOS开发工具——网络封包分析工具Charles
查看>>
蒙哥玛利模幂算法
查看>>
龙威零式_团队项目例会记录_14
查看>>
YAFFS2文件系统分析(转)
查看>>