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基础系列目录 < ...
随机推荐
- JS基础_break跳出外层循环
可以为循环语句创建一个label,来表示当前循环 label:循环语句 使用break语句时,可以在break后跟着一个label 这样break会结束指定的循环 outer: for(let i=0 ...
- vuex 讲解
vuex 状态的管理状态,它采用集中式存储管理应用的所有组件的状态,尤其是在中大型项目,则是很好的开发利器 vuex 的流程图 vuex 的优势: 1. vuex 的存储状态,响应式的 2. 他是所有 ...
- Oracle 11g的日志路径
Oracle数据库的最常用问题定位日志是alert日志,Oracle数据库的日志文件alert_$ORACLE_SID.log记录了重作日志的转换,数据库启动和关闭,数据库结构的改变,回退段的修改,死 ...
- mybatis的mapper映射文件
1概述1.1应用架构 mybatis框架用于支持对关系数据库的操作,该体系的应用架构如下图所示: 在mybatis框架体系中,主要的组件是:SqlSessionFactoryBean和Mapp ...
- javascript之日期对象（Date）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- mips调试
0x01 环境搭建 由于我们通常的操作系统指令集都是x86的,所以无法跑MIPS程序.这时候就需要装QEMU来模拟,QEMU通过源码编译较为复杂,我们又没有特殊的需求,所以直接使用ubuntu的APT ...
- 阶段3 3.SpringMVC·_06.异常处理及拦截器_7 SpringMVC拦截器之拦截器接口方法演示
返回值改成false 就是不放行 没有方形,控制台只有一个输出 转发到error页面 新建error.jsp页面 控制台只有拦截器的输出.controller根本就没有执行 把代码改回来 重写第二个方 ...
- Idea Debug多线程不进断点问题处理
Idea也会使我狼狈不堪,Eclipse下约定成俗,却非Idea的默认规则. 比如 DEBUG多个线程时,Idea的默认设定就会遇到断点不能进入的问题. 解决的方法: 点击DEBUF框下的双红点(Vi ...
- JavaScript DOM 编程艺术(第二版) 有待解决的问题
原书 P181,var repeat = "moveElement('"+elementID+"', "+final_x+", "+fina ...
- ubuntu安装dockers和images：dvwa
docker安装 安装前需要更新系统 apt-get update apt-get upgrade apt-get install docker.io 安装完之后就可以试下: docker docke ...