VUE -- ejs模板的书写
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为数据库中的数据时，我们就可以做到实时更新网站数据了，这样一个简单动态网站就完成了，听起来是不是很简单，不过还有很长一段路要走滴，先睡了，下次再更。
VUE -- ejs模板的书写的更多相关文章
- vue 的模板编译—ast(抽象语法树) 详解与实现
首先AST是什么? 在计算机科学中,抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式,这里特指编程语言 ...
- node+ejs模板引擎的应用
前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...
- 使用ejs模板引擎
let express = require('express'); let fs = require('fs'); let ejs = require('ejs'); let app = expres ...
- ejs模板中的四种表达式输出形式
在ejs模板中,通常会用下面四种方式在HTML中输出服务端的变量或表达式的值: 1. 直接在<%%>中写表达式或变量.这种情况通常只是用来进行表达式计算或给变量赋值,不会有任何输出,被称作 ...
- 如何在 ejs 模板中使用 helper function 外部函数进行特殊处理？
一般我们想要在 ejs 模板中使用外部函数用于特殊的处理,比如:<%= ellipsis(title, 30) %> 通常的做法是: 使用 app.locals 来定义: app.loca ...
- 在express站点中使用ejs模板引擎
在express站点中使用ejs模板引擎 文/玄魂 目录 在express站点中使用ejs模板引擎 前言 1.1 安装 1.2修改app.js 1.3创建测试页面 前言 使用 vs创建 ...
- NodeJS - Express 3.0下ejs模板使用 partial展现 片段视图
如果你也在看Node.js开发指南,如果你也在一步一步实现 microBlog 项目!也许你会遇到本文提到的问题,如果你用的是Express 3.0 本书实例背景是 Express 2.0 而如今升级 ...
- Node.js学习(14)----EJS模板引擎
这个入门教程将从以下几个方面来讲解: 1. 引入EJS 2. 创建一个模板 3. 使用视图工具组件 4. 使用错误处理组件 5. 什么情况下应使用EJS 引入EJS 在我们正式开始前,我们先来做点准备 ...
- Node - EJS模板应用(node+express+ejs)
准备工作: 工具:Webstorm 1. 新建一个文件夹为blogs(随意). 一个js文件app.js. 一个文件夹views,文件夹内一个index.ejs文件,文件夹asstes内style.c ...
随机推荐
- HDU 2491
欢迎参加——BestCoder周年纪念赛(高质量题目+多重奖励) Priest John's Busiest Day Time Limit: 4000/2000 MS (Java/Others) ...
- Error: could not find java.dll 解决办法
Error: could not find java.dll 问题: 安装配置Java环境变量后,在命令行中运行java -version进行测试时却出现下面的问题: Error: opening r ...
- BZOJ 1483：[HNOI2009]梦幻布丁（链表+启发式合并）
[HNOI2009]梦幻布丁 Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2,2,1的四个布丁一 ...
- Tomcat学习笔记(六)
Tomcat日志 网上找到一篇分析不错的博文 http://peiquan.blog.51cto.com/7518552/1580189/
- TCP面试题之四次挥手过程
TCP四次挥手过程: 1.第一次挥手:Client发送一个FIN,用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态: 2.第二次挥手:Server收到FIN后,发 ...
- Velocity模版使用
<!-- https://mvnrepository.com/artifact/org.apache.velocity/velocity --> <dependency> &l ...
- POJ3207 Ikki's Story IV – Panda's Trick
Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 9426 Accepted: 3465 Description liym ...
- 让JavaScript像C#一样支持Region
问题 Web Essentials 是非常给力的js插件,具体的介绍,大家请看这里,最锋利的Visual Studio Web开发工具扩展:Web Essentials详解 . 不过在使用的过程中,让 ...
- 戴文的Linux内核专题：03 驱动程序【转】
转自:http://www.lai18.com/content/432194.html 驱动程序是使内核能够沟通和操作硬件或协议(规则和标准)的小程序.没有驱动程序,内核不知道如何与硬件沟通或者处理协 ...
- python接口自动化9-https请求（SSL）【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...