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 ...
随机推荐
- Ajax---概念介绍
Ajax不是某种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 运用HTML和CSS来实现页面,表达信息: 运用XMLHttpRequest和Web服务器进行数据的异步交换: ...
- 29个android开发常用的类、方法及接口
在安卓开发中,我们常常都需要借助各种各样的方法.类和接口来实现相关功能.提升开发效率,但对于初学者而言,什么时候该用什么类.方法和接口呢?下面小编整理了29个,日常开发中比较常用的类.方法.接口及其应 ...
- msvs命令行编译lua5.3.4
msvs命令行编译lua5.3.4 vslua.bat @echo off md bin md lib md include cd src cl /c /nologo /W3 /O2 /Ob1 /Oi ...
- BZOJ - 2728 与非
题意: 给定N个数,一个数k和一个范围[L,R].每个数可以使用任意次,k表示与非不超过k位.求出范围内有多少个数可以由他们的与非和表示. 题解: m个数进行NAND,最终的数二进制下某一位如果为1, ...
- Educational Codeforces Round 2 B. Queries about less or equal elements
打开题目连接 题意:给2个数组(无序的)啊a,b,判断b数组中的每一个元素大于a数组中个数. ACcode: #include <iostream> #include <vector ...
- git隐藏文件复制
从网上down的开源项目,如何添加到自己的github上呢? 问题:直接复制老项目到自己的目录,隐藏的.git文件不会被复制过去,就算是执行cp命令,也不会复制!导致项目运行会出错!! 解决: ...
- JS 问题整理 (1)
监听frame加载完毕 兼容Firefox/Opera/Safari/IE的处理方式,原文链接 var oFrm = document.getElementById('ifrm'); oFrm.onl ...
- Android的CheckBox(多选框)
1.布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- (转)vim 常用快捷键 二
转自:http://www.cnblogs.com/wangkangluo1/archive/2012/04/12/2444952.html 键盘移动 (Move) 一切都从键盘的移动 k -> ...
- F28379D烧写双核程序(在线&离线)
烧写双核程序前需知在分别对F28379D的CPU1和CPU2两个核进行烧写程序时,需要在CCS中建立两个工程,独立编写两个核的程序.如controlSUITE中提供的双核程序例程: 1. 在线1.1 ...