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基础系列目录 < ...
随机推荐
- TCP层shutdown系统调用的实现分析
概述 shutdown系统调用在tcp层会调用两个函数,对于ESTABLISHED状态需要调用tcp_shutdown关闭连接,对于LISTEN和SYN_SENT状态则需要以非阻塞模式调用tcp_di ...
- Android 获取Bitmap方式
1.获得当前项目资源文件(assets)下图片 (1).获得图片数据流 private Bitmap getBotMapInfo() { Bitmap bitmap = null; try { Inp ...
- 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
- react 的基础知识
react 是目前最流行的框架: 其中是采用 mvvm 的思想,让我们把所有的只关注视图层和逻辑层, 从而可以更好的书写代码: 在 react 中我们的 html 结构也是通过 js 来实现的,而且在 ...
- OGG 从Oracle备库同步数据至kafka
OGG 从Oracle备库同步数据至kafka Table of Contents 1. 目的 2. 环境及规划 3. 安装配置JDK 3.1. 安装jdk 3.2. 配置环境变量 4. 安装Data ...
- flutter 延时函数delay Loading页面
loading 页面 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Lo ...
- JAVA记事本的图形用户界面应用程序含过滤
JAVA记事本的图形用户界面应用程序 过滤 题目简介: 整体分析: 实验代码: package note; import java.awt.EventQueue; import java.awt.ev ...
- 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_6 自定义类型转换器代码编写
mvc是基于组件的方式 类型转换的接口Converter,想实现类型转换,必须实现这个接口 Ctrl+N搜索 converter 这是一个接口类 它有很多的实现类.S是字符串.后面T是指要转换类型 新 ...
- .NetCore接入Log4Net
首先接入NuGet包Log4Net 在项目中添加log4net.config文件 Log4Net的级别None>FATAL>ERROR>WARN>INFO>DEBUG&g ...
- 3 Java Web 入门 1 Servlet 入门
1 Tomcat 1.1 安装 JDK Oracle 官网 1.2 安装 Tomcat