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 ...
随机推荐
- 【bzoj2793】[Poi2012]Vouchers 暴力
题目描述 考虑正整数集合,现在有n组人依次来取数,假设第i组来了x人,他们每个取的数一定是x的倍数,并且是还剩下的最小的x个.正整数中有m个数被标成了幸运数,问有哪些人取到了幸运数. 输入 第一行一个 ...
- NetScaler Active-Active模式
NetScaler Active-Active模式 NetScaler Active-Active模式 (此文档基于版本:NS9.3: Build 55.6 nc) By ShingTan Activ ...
- [洛谷P4841]城市规划
题目大意:求$n$个点的带标号的无向连通图的个数 题解:令$F(x)$为带标号无向连通图个数生成函数,$G(x)$为带标号无向图个数生成函数 那么$G(x) = \sum_{i=0}^{\infty} ...
- ServletContext结合Servlet接口中的init()方法和destroy()方法的运用----网站计数器
我们一般知道Servlet接口中的init()方法在tomcat启动时调用,destroy()方法在tomcat关闭时调用.那么这两个方法到底在实际开发中有什么作用呢?这就是这个随笔主要讲的内容. 思 ...
- 编写Shell脚本的最佳实践，规范一
随着写的SHELL程序越来越多,发现自己每次写都有不同的习惯或者定义了不同的东西,变量名定义得不一样,整个程序缩进不统一,没有注释等问题,等我回过头看这些程序的时候发现很麻烦.所以写了个shell代码 ...
- hdu 6114 百度之星复赛B T1
Chess Problem Description 車是中国象棋中的一种棋子,它能攻击同一行或同一列中没有其他棋子阻隔的棋子. 一天,小度在棋盘上摆起了许多車……他想知道,在一共N×M个点的矩形棋盘中 ...
- [ CodeVS冲杯之路 ] P1048
不充钱,你怎么AC? 题目:http://codevs.cn/problem/1048/ 区间DP题,设 f[i][j] 为在区间 [i,j] 中合并的最小代价 目标状态是 f[1][n],末尾的求和 ...
- ajax验证前端页面
1.html页面 用ajax验证表单的时候不需要form标签,并把提交按钮由type=“submit ”改为type=“button” 数据表结构 ajax.html <!DOCTYPE htm ...
- hdu 1142(迪杰斯特拉+记忆化搜索)
A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...
- Javascript短路表达式
短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短 ...