EJS学习（三）之语法规则中

⚠️实例均结合node，也就是AMD规范版本

ejs中使用render()表示渲染文本

接收三个参数：模版字符串、data、options，返回一个字符串

const ejs = require('ejs');

ejs.delimiter = '$';

var html = ejs.render(`
    <$ for(var i=0; i<num; i++ ) { -$>
        <h2><$= user.name $>
        </h2><h2><$= user.age $></h2>
    <$ } -$>`
    ,{
    user:{
        name:"wangkun",
        age:22,
    },
    num:2
},{rmWhitespace:true});

console.log(html);

// 输出：
<h2>wangkun
</h2><h2>22</h2>
<h2>wangkun
</h2><h2>22</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>
    

    &lt;div&gt;&lt;/div&gt;  // ❗️发现是转义的
</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转义，我们要使用<%- %>

posted @ 2019-09-05 16:19 坤嬷嬷阅读(1663) 评论(0) 编辑收藏举报

刷新页面返回顶部

坤嬷嬷

你必须非常努力，才能看起来毫不费力