Node.js-ejs模板引擎

2. EJs模板引擎

• 使用

        (1) 安装并导入

              npm install ejs

             Const ejs = require(‘ejs’);

         (2) 渲染出HTML

              a. 第一种：渲染字符串

                  Ejs.render(str,data,options);

                  //输出绘制后的HTML字符串

const http = require('http');
const ejs = require('ejs');
const server = http.createServer(function (req,res) {
    if(req.url === '/favicon.ico'){
        return false;
    }
    //第一种，直接替换字符串
    const html = ejs.render('大家好，我是<%=name%>,性别<%=sex%>',{name:'小丽',sex:'女'});
     res.writeHead(200,{
          'Content-type':'text/html;charset=utf8'
     });
     res.end(html);
});
server.listen(8087,function () {
    console.log('http server is running on port 8087');
});

b. 第二种

     Const template = ejs.compile(str,options);

     Template(data);

    //输出绘制后的HTML字符串

const http = require('http');
const ejs = require('ejs');
const server = http.createServer(function (req,res) {
    if(req.url === '/favicon.ico'){
        return false;
    }
    //第二种，
    const html2 = ejs.compile('大家好，我是<%=name%>,性别<%=sex%>');
    const html = html2({name:'小红',sex:'男'});
    res.writeHead(200,{
        'Content-type':'text/html;charset=utf8'
    });
    res.end(html);
});
server.listen(8087,function () {
    console.log('http server is running on port 8087');
});

c. 第三种：渲染文件

     Ejs.renderFile(filename,data,options,function(err,str){

            //str =>输出绘制后的HTML字符串

     });

例子：ejs.js

const http = require('http');
const ejs = require('ejs');
// 创建服务
const server = http.createServer(function (req,res) {
    if(req.url === '/favicon.ico'){
        return false;
    }
    //第三种，推荐方式
let data ={
    title:'锄禾',
    content:'锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。'
  };
  ejs.renderFile('template/index.ejs',data,function (err,html) {
    if (err) throw err;
    res.writeHead(200,{
        'Content-type':'text/html;charset=utf8'
    });
     res.end(html);
  });
 });
server.listen(8087,function () {
    console.log('http server is running on port 8087');
});

新建index.ejs文件:

    
    


    
<%=title%>
    
<%=content%>

• 模板语法

(1) 分隔符（定界符）

      a. 开始标签

              <% --脚本标签，用于流程控制，无输出

             <%=  --输出数据到模板（输出是转义HTML标签）

             <%-   ---输出非转义的数据到模板，带有html标签

             <%#   ---注释标签，不执行，不输出内容

 

      b .结束标签（定界符）

              %>  --一般结束标签

              -%>   --删除紧随其后的换行符

let data ={
    title:'锄禾',
    content:'锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。',
    message:'
李白
'
};
ejs.renderFile('template/index.ejs',data,function (err,html) {
    if (err) throw err;
    res.writeHead(200,{
        'Content-type':'text/html;charset=utf8'
    });
    res.end(html);
});

输出：index.ejs:

<%-message%>
    

(2) 模版内使用JavaScript

<%= new Date()%>
<%= 1+100%>
<%= nameList.join(‘,’)%>

(3) 流程控制

Ejs.js:

<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}) %>
<% }); %>

Index.ejs:

<% if (user) { %>
<%= user.name %>
<% } %>

例子：

Ejs.js:

const http = require('http');
const ejs = require('ejs');
// 创建服务
const server = http.createServer(function (req,res) {
    if(req.url === '/favicon.ico'){
        return false;
    }
    //第三种，推荐方式
    let data ={
        title:'锄禾',
        content:'锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。',
        message:'
李白
',
        dataList:[
            {title:'CSDN博客登录时间',date:'2018-11-21',ishot:true},
            {title:'新浪微博登录时间',date:'2018-10-28'},
            {title:'微信登录时间',date:'2018-9-26'},
            {title:'QQ登录时间',date:'2018-8-2'},
            {title:'天猫登录时间',date:'2018-12-25',ishot:true},
            {title:'淘宝登录时间',date:'2018-712-24'},
            {title:'京东登录时间',date:'2018-4-23',ishot:true},
            {title:'唯品会登录时间',date:'2018-3-21'}
        ]
    };
    ejs.renderFile('template/index.ejs',data,function (err,html) {
        if (err) throw err;
        res.writeHead(200,{
            'Content-type':'text/html;charset=utf8'
        });
        res.end(html);
    });
});
server.listen(8087,function () {
    console.log('http server is running on port 8087');
});

Index.ejs:

    
    



<%= title %>
<%= content %>
<%- message %>

    <% for (i = 1;i < 10;i++){ %>
    <%= i %>
    <% } %>


    <% dataList.forEach(function (item, index) { %>
    

        <%= item.title %>
        <%= item.date %>
    
    <% }) %>

输出：

(4) Includes

新建heaer.ejs和footer.ejs：

    
    



<%- include('header')%>
<%= title %>
<%- include('footer')%>

(5) 自定义分隔符（定界符）

     // 单个模板文件

        ejs.render('', {users: users},{delimiter: '?'});

ejs.renderFile('template/index.ejs',data,{delimiter:'?'},function (err,html) {
    if (err) throw err;
    res.writeHead(200,{
        'Content-type':'text/html;charset=utf8'
    });
    res.end(html);
});

    // 全局

         ejs.delimiter = '?';

         ejs.render('', {users: users}