Node.js-ejs模板引擎

最新推荐文章于 2023-10-14 01:54:25 发布

ZhangXD_BLOG

最新推荐文章于 2023-10-14 01:54:25 发布

阅读量351

点赞数

分类专栏： NodeJS

本文链接：https://blog.csdn.net/u012054869/article/details/85265192

版权

NodeJS 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

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文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%=title%></title>
</head>
<body>
    <h1><%=title%></h1>
    <p><%=content%></p>
</body>
</html>

模板语法

(1) 分隔符（定界符）

a. 开始标签

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

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

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

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

b .结束标签（定界符）

%> --一般结束标签

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

let data ={
    title:'锄禾',
    content:'锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。',
    message:'<h2>李白</h2>'
};
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:

<p><%-message%></p>

(2) 模版内使用JavaScript

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

(3) 流程控制

Ejs.js:

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

Index.ejs:

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

例子：

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:'<h2>李白</h2>',
        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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<style>
    ul li.hot {
        color: red;
    }
</style>
<body>
<h1><%= title %></h1>
<p><%= content %></p>
<p><%- message %></p>
<p>
    <% for (i = 1;i < 10;i++){ %>
    <%= i %>
    <% } %>
</p>
<ul>
    <% dataList.forEach(function (item, index) { %>
    <li class="<%= item.ishot ? 'hot' : '' %>">
        <%= item.title %>
        <span><%= item.date %></span>
    </li>
    <% }) %>
</ul>
</body>
</html>

输出：

(4) Includes

新建heaer.ejs和footer.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
<!--引入头部-->
<%- include('header')%>
<h1><%= title %></h1>
<%- include('footer')%>
</body>
</html>

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

// 单个模板文件

ejs.render('<?= users.join(" | "); ?>', {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.join(" | "); ?>', {users: users}

ZhangXD_BLOG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Node.js-ejs模板引擎

2. EJs模板引擎使用 (1) 安装并导入 npm install ejs Const ejs = require(‘ejs’); (2) 渲染出HTML a. 第一种：渲染字符串 Ejs.render(str,data,optio...
复制链接

扫一扫