EJS学习（三）之语法规则中
⚠️实例均结合node，也就是AMD规范版本
ejs中使用render()表示渲染文本
接收三个参数：模版字符串、data、options，返回一个字符串
const ejs = require('ejs');
ejs.delimiter = '$';
var html = ejs.render(`
<$ for(var i=; i<num; i++ ) { -$>
<h2><$= user.name $>
</h2><h2><$= user.age $></h2>
<$ } -$>`
,{
user:{
name:"wangkun",
age:,
},
num:
},{rmWhitespace:true});
console.log(html);
// 输出：
<h2>wangkun
</h2><h2></h2>
<h2>wangkun
</h2><h2></h2>
ejs中使用renderFile()表示渲染文件
接收四个参数：模版字符串、data、options、callback，没有返回值
const ejs = require('ejs');
ejs.renderFile("./work/lesson12/view/1.ejs",{name:'wangkun'},function(err,data){ // err是错误，data是渲染完的数据
if(err){
console.log("出错了");
}else{
console.log(data);
}
});
ejs中使用<% %>输出脚本
实例一：ejs中的for循环
// 3.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% for(var i=0; i<json.arr.length; i++) {%>
<div>
用户名：<%= json.arr[i].user %>
年龄：<%= json.arr[i].age %>
</div>
<% } %>
</body>
</html> // 3.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/3.ejs',{
json:{
arr:[
{user:"pear",age:"12"},
{user:"apple",age:"13"},
{user:"banana",age:"14"},
{user:"orange",age:"15"}
]
}
},function(err,data){
console.log(data);
}); // 输出： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <div>
用户名：pear
年龄：12
</div> <div>
用户名：apple
年龄：13
</div> <div>
用户名：banana
年龄：14
</div> <div>
用户名：orange
年龄：15
</div> </body>
</html>
⚠️ 所有使用 <% %> 括起来的内容都会被编译成 Javascript，你可以在模版文件中像写 js 一样 Coding，也允许你声明变量，作用域就是当前模版，因为一个模版会被编译成一个 Javascript 函数
ejs中使用<%= %>转义输出
实例一：
// 1.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
我的名字:<%= name %> // 表示赋值
<%= 12+5 %>
<%= 'asdfasdf' %>
</body>
</html> // ejs1.js内容：
const ejs = require('ejs');
ejs.renderFile("./work/lesson12/view/1.ejs",{name:'wangkun'},function(err,data){ // err是错误，data是渲染完的数据
if(err){
console.log("出错了");
}else{
console.log(data);
}
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
我的名字:wangkun
17
asdfasdf
</body>
</html>
实例二：
// 2.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<%= json.arr[0].user %>
<%= json.arr[0].age %>
<%= json.arr[2].user %>
<%= json.arr[2].age %>
</div>
</body>
</html> // 2.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/2.ejs',{
json:{
arr:[
{user:"pear",age:"12"},
{user:"apple",age:"13"},
{user:"banana",age:"14"},
{user:"orange",age:"15"}
]
}
},function(err,data){
console.log(data);
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
pear
12
banana
14
</div>
</body>
</html>
实例三：
// 4.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%
var str = "<div></div>"
%> <%= str %>
</body>
</html> // 4.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/4.ejs',{},function(err,data){
console.log(data);
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <div></div> // ❗️发现是转义的
</body>
</html>
ejs中使用<%- %>非转义输出
// 4.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%
var str = "<div></div>"
%> <%- str %>
</body>
</html> // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <div></div>
</body>
</html>
ejs中使用<%% %>输出模版字符串
// 7.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%% if(user.name) { %>
<%%= user.name %>
<%% } %>
</body>
</html> // 7.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/7.ejs',{
user:{
name:"wangkun",
age:22
}
},(err,data)=>{
if(err) {
console.error(err);
}else {
console.log(data);
}
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% if(user.name) { %>
<%= user.name %>
<% } %>
</body>
</html>
ejs中使用<%_ _%>删除标签前后的空格
情况一：<%_ 和 _%>一起使用
// 9.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%_ if(user.name) { _%>
<h2><%= user.name _%></h2>
<%_ }else{ _%>
<h2><%= user.age _%></h2>
<%_ } _%>
</body>
</html> // 9.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/9.ejs',{
user:{
name:"wangkun",
age:22
}
},(err,data)=>{
if(err) {
console.error(err);
}else {
console.log(data);
}
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2> // 注意标签前后没有空格
</body>
</html> // 不使用<%_ _%>输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2> // 注意标签有空格
</body>
</html>
情况二：单独使用<%_
// 9.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%_ if(user.name) { %>
<h2><%= user.name %></h2>
<%_ }else{ %>
<h2><%= user.age %></h2>
<%_ } %>
</body>
</html> // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <h2>wangkun</h2> // 注意标签前后空格没有被删除 </body>
</html>
情况三：单独使用_%>
// 9.ejs内容；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% if(user.name) { _%>
<h2><%= user.name _%></h2>
<% }else{ _%>
<h2><%= user.age _%></h2>
<% } _%>
</body>
</html> // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2> // 标签前后没有空格，但是样式乱了
</body>
</html>
综合以上三种情况，强烈推荐<%_和_%>一起使用，可以有效删除标签前后空格并且样式不会乱☺️
ejs中使用<% -%>删除换行符
情况一：
// 10.ejs内容；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% for(var i=0; i<num; i++ ) { -%>
<h2><%= user.name %></h2>
<h2><%= user.age %></h2>
<% } -%>
</body>
</html> // 输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2>
<h2>22</h2>
<h2>wangkun</h2> // 虽然标签前后空格删除了，但样式乱掉了
<h2>22</h2>
</body>
</html> // 不使用-%>输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2>
<h2>22</h2>
<h2>wangkun</h2> // 标签前后有空格
<h2>22</h2>
</body>
</html>
情况二：传配置参数rmWhitespace，这样格式就不会乱掉
// 10.ejs内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/10.ejs',{
user:{
name:"wangkun",
age:22,
},
num:2
},{rmWhitespace:true},(err,data)=>{
if(err) {
console.error(err);
}else {
console.log(data);
}
}); // 输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2>
<h2>22</h2>
<h2>wangkun</h2>
<h2>22</h2>
</body>
</html>
ejs中使用<%# %>进行注释没有任何输出
// 8.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%# if(user.name) { %>
<%= user.name %>
<%# } %>
</body>
</html> // 8.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/8.ejs',{
user:{
name:"wangkun",
age:22
}
},(err,data)=>{
if(err) {
console.error(err);
}else {
console.log(data);
}
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> wangkun </body>
</html>
ejs中使用include引入内容
通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件，你可以通过 <%-
include('user/show'); %> 代码包含后者。你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
情况一：基础，引入文本文件
// 5.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% include a.txt %>
</body>
</html> // a.txt内容：
jidhhdka
kidutyui
iiiiisnhakjdhgagd // 5.js内容：
const ejs = require('ejs'); ejs.renderFile('./work/lesson14/view/5.ejs',{},function(err,data){
console.log(data);
}); // 输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
jidhhdka
kidutyui
iiiiisnhakjdhgagd
</body>
</html>
情况二：配合循环一起使用
// 6.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% for(var i=0; i<5; i++) { %>
<% include a.txt %>
<% } %>
</body>
</html> // 输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> jidhhdka
kidutyui
iiiiisnhakjdhgagd jidhhdka
kidutyui
iiiiisnhakjdhgagd jidhhdka
kidutyui
iiiiisnhakjdhgagd jidhhdka
kidutyui
iiiiisnhakjdhgagd jidhhdka
kidutyui
iiiiisnhakjdhgagd </body>
</html>
情况三：引入css文件
// 7.ejs内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 通过type判断引入谁 -->
<% if(type == 'admin') { %>
<% include admin.css %>
<% }else {%>
<% include user.css %>
<% } %>
</body>
</html> // admin.css内容：
div{
width: 800px;
} // user.css内容：
div{
width: 800px;
}
注意：
1、include因为不是js中的语法，所以要单独占据一行
2、include后面不能是变量
3、Include 可以引用相对路径的模版文件，例如有 html/index.html 和 html/_block/head.html这两个文件， 你就可以在 index.html 这么用 <% include _block/head.html %>。
4、如果我们引入的是一个文本那么可以使用<% %>，但是如果是ejs或html为了防止将引入的html转义，我们要使用<%- %>
EJS学习（三）之语法规则中的更多相关文章
- php学习一：语法规则
1.书写规则 在html中嵌入php的时候,需要有结束语,即<?php ...?>,在靠近结束符号的最后一个语句可以不用写分号: 但是在单独的php中,最后可以不用以?>来结尾; 2 ...
- oracle学习 三（持续更新中）
关于ora 01219问题的解决 之前学习oracle的时候练习去建立表空间,建了很多之后手动删除了,之后再使用自己创建的用户名登陆数据库就会造成数据库 ORA-01031: ORACLE initi ...
- 学习h264 的语法规则，如何才能看懂H264 的官方文档
1. 今天想查h264 的帧率,查找资料如下: 首先要解析sps,得到两个关键的数值: num_units_in_tick, time_scale fps=time_scale/num_units_i ...
- JavaWeb学习(三) : 如何在 Eclipse 中创建一个Web 项目并成功运行？
前置条件 : 1.确保已安装 Eclipse.Tomcat 服务器安装包 2.jdk.环境变量都已配置成功. 3.注意在安装 Eclipse 时一定要选择第二个有 Web 项目的进行安装, 不然安装成 ...
- 【 MAKEFILE 编程基础之二】MAKEFILE 书写规划以及语法规则！
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/gcc-makefile/768.html ...
- SCARA——OpenGL入门学习三
OpenGL入门学习[三] 在第二课中,我们学习了如何绘制几何图形,但大家如果多写几个程序,就会发现其实还是有些郁闷之处.例如:点太小,难以看清楚:直线也太细,不舒服:或者想画虚线,但不知道方法只能用 ...
- Jade学习（三）之语法规则下
jade可以自动识别单双标签 // 1.jade内容: input(type="button", value="点击") div // 此时输出❌error:i ...
- Python学习系列（四）Python 入门语法规则2
Python学习系列(四)Python 入门语法规则2 2017-4-3 09:18:04 编码和解码 Unicode.gbk,utf8之间的关系 2.对于py2.7, 如果utf8>gbk, ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
随机推荐
- stingstream 类
使用完后在使用必须要clear():
- FastAdmin 添加新字段后，不显示，可以直接去修改对应的js
- Ubuntu14.04升级cmake版本的方法
在Ubuntu14.04用以下命令默认安装的cmake版本为2.8.x,有时我们需要更高版本的cmake,所以需要升级. $ sudo apt-get install cmake 可通过以下命令查询c ...
- list元素按照日期排序
private static void ListSort(List<AppClassInfoVo> list) { Collections.sort(list, new Comparato ...
- View的事件机制
为了更好的研究View的事件转发,我们自定以一个MyButton继承Button,然后把跟事件传播有关的方法进行复写,然后添加上日志. import android.content.Context; ...
- JQUERY的$(function(){})和window.onload=function(){}的区别
在Jquery里面,我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.o ...
- 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_8 响应json数据之响应json格式数据
springMvc的框架已经帮我们做好了.发过来的数据转换为javaBean对象 发过来的键值的形式,如果属性和javaBean对应的话,可以直接封装到对象中. key做额外的转换的时候,需要另外的j ...
- Linux scp 免密码 传输文件
Linux scp 免密码 传输文件 背景介绍 最近项目是集群化部署(由 node1,node2,node3 三台 CentOS 7.4 的虚拟机构成). 但是,涉及到跨机器同步文件的问题,想通过写s ...
- spring-boot集成1：起步
Why spring-boot? 1. 创建独立的Spring应用程序 2. 嵌入的Tomcat,Jetty和Undertow,无需部署WAR文件 3. 通过starter依赖,简化Maven配置 4 ...
- Python爬虫学习==>第三章：Redis环境配置
学习目的: 学习非关系型数据库环境安装,为后续的分布式爬虫做基建 正式步骤 Step1:安装Redis 打开http://www.runoob.com/,搜索redis安装 打开搜索的内容,得到red ...