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 ...
随机推荐
- poj 1459 网络流问题`EK
Power Network Time Limit: 2000MS Memory Limit: 32768K Total Submissions: 24930 Accepted: 12986 D ...
- hdu 2492 树状数组 Ping pong
欢迎参加——BestCoder周年纪念赛(高质量题目+多重奖励) Ping pong Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 3 ...
- hexo站点地图
将网站链接提交到百度 百度搜索引擎提交入口 有三种验证方式,我选择Html标签验证,在themes\next\layout\_partials\head.swing中添加验证代码: <meta ...
- token的作用
token的作用 基于 Token 的身份验证方法 使用基于 Token 的身份验证方法,在服务端不需要存储用户的登录记录.大概的流程是这样的: 客户端使用用户名跟密码请求登录 服务端收到请求,去验证 ...
- PHP生成随机数函数rand(min,max)
rand(min,max):生成min到max 的随机数,注意:包括边界rand() 返回 0 到 RAND_MAX 之间的伪随机整数.例如,想要 5 到 15(包括 5 和 15)之间的随机数,用 ...
- Android M中 JNI的入门学习
今年谷歌推出了Android 6.0,作为安卓开发人员,对其学习掌握肯定是必不可少的,今天小编和大家分享的就是Android 6.0中的 JNI相关知识,这是在一个安卓教程网上看到的内容,感觉很不错, ...
- [SQL Server]关于标识列,标识从1开始计数的的方法
DBCC CHECKIDENT ('表名', RESEED, 0) //从30开始 DBCC CHECKIDENT (jobs, RESEED, 30)
- BZOJ1079 [SCOI2008]着色方案 【dp记忆化搜索】
题目 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块. 所有油漆刚好足够涂满所有木块,即c1+c2+-+ck=n.相邻两个木块涂相同色显得很难看 ...
- 使用PowerShell登陆多台Windows，测试DCAgent方法
目标: 需要1台PC用域账户远程登陆10台PC,每台登陆后的PC执行发送敏感数据的操作后,再logoff. 在DCAgent服务器上,查看这10个用户每次登陆时,DCAgent是否能获取到登陆信息(I ...
- java算法（二） 快速排序
快速排序是一种交换排序. 快速排序由C. A. R. Hoare在1962年提出. 它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分:分割点左边都是比它小的数,右边都是比它大的数. 然后再 ...