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基础系列目录 < ...
随机推荐
- Warning: setcookie() expects parameter 3 to be long, string given
Warning: setcookie() expects parameter 3 to be long, string given 这个是我用php7.0会报这个错误, 切换低版本php5.6就ok
- Java-GC 垃圾收集算法
程序计数器.虚拟机栈.本地方法栈随线程而生,随线程而灭. 栈帧随着方法的开始而入栈,随着方法的结束而出栈. 这几个区域的内存分配和回收都具有确定性,在这几个区域内不需要过多考虑回收的问题,因为方法结束 ...
- PHP 练习：租房子
<form action="text.php" method="post"> 区域:<input type="checkbox&qu ...
- fmri格式相关简介————转自网络
转自莫毕业 目前,脑成像数据主要有DTI.fmri.3D三种模态.这些数据在分析前都要进行格式转换,不同公司的扫描仪存储格式也不尽相同.脑成像处理软件也很多,不同软件使用的格式也不一样,所以数据转换是 ...
- win + T 快捷键
和 alt + tab 不同,win + T会在 在任务栏间的程序间进行switch
- c++传递函数当作对象传递
c++中函数当作对象来传递,类似c#中的指针操作如: #include <iostream> using namespace std; int tst(int a){ cout<&l ...
- Numpy 库
可以直接通过pip安装. pip install numpy 1 NumPy的数值类型 每一种数据类型都有相应的转换函数.使用dtype属性可以查看数组的数据类型.如下. 2 数组操作 使用arang ...
- Python学习小技巧之列表项的排序
Python学习小技巧之列表项的排序 本文介绍的是关于Python列表项排序的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 典型代码1: data_list = [6, 9, 1, ...
- [笔记] 使用v2r访问外网
介绍 首先,你需要有一台能上外网的服务器,如AWS,GCP等. 其次,请自行复制全文,然后将FXXK替换为v2r的全称(5个小写字符). 服务器上Docker镜像配置流程 拉取镜像 $ sudo do ...
- Linux中编译C文件
C/C++程序编译的过程 预处理,展开头文件,宏定义,条件编译处理等.通过gcc -E source.c -o source.i或者cpp source.c生成. 编译.这里是一个狭义的编译意义,指的 ...