Node js 嵌入式模板引擎 ejs 的使用

時間 2019-12-10

原文原文鏈接

npmjs地址: https://www.npmjs.com/package/ejs
github在線測試: https://ionicabizau.github.io/ejs-playground/
中文文檔: https://ejs.bootcss.comjavascript

基本使用

安裝 ejs 模板引擎

npm install ejs --save

js 部分css

const http = require("http");
const fs   = require("fs");
const ejs  = require("ejs");

// 模擬數據
let info = {
    name : 'alex',
    vip  : true,
    hobby: [
        'js', 'node', 'vue', 'ejs', 'express'
    ]
};

// 建立http服務並監聽端口
http.createServer((request, response, next) => {
    if (request.url === "/") {
        // fs 讀文件
        fs.readFile(__dirname + '/index.html', (err, data)=>{
            if (err) throw err;
            // 渲染模板 而且給模板分配數據
            let template = ejs.render(data.toString(), { title:'ejs模板引擎', user:info});
            // 響應
            response.end(template);
        });
    }
}).listen(3000);

ejs 模板部分html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 普通字符串的顯示 -->
    <title><%= title %></title>
    <style>
        * { margin: 0; padding: 0; }
        .user { font-size: 30px; }
        .user span{ color: #f00; }
    </style>
</head>
<body>
    <div>
        <!-- 流程控制 -->
        <div class="user">姓名: <%= user.name%>
            <% if (user.vip) { %>
                <span>vip</span>
            <% } %>
        </div>
        <!-- 循環控制 -->
        <div class="user">愛好:
            <% user.hobby.forEach(item=>{ %>
                <span><%= item %></span>
            <% }) %>
        </div>
    </div>
</body>
</html>

在 express 框架中使用 ejs 模板引擎

安裝 express 框架

npm install express --save

express 中文文檔: http://www.expressjs.com.cn/4x/api.htmlvue

配置 express 的模板引擎爲 ejs

// 引入模塊
const app  = require("express")();
const ejs  = require("ejs");

// 設置模板存放的目錄
app.set('views', './view');
// 設置模板文件的後綴
app.engine('.html', ejs.__express);

// 使用默認的模板引擎是能夠省略
// app.set('view engine', 'html');

在 express 框架中使用 ejs 模板引擎

js 部分java

// 引入模塊
const app  = require("express")();
const ejs  = require("ejs");

// 監聽端口
app.listen(3000);

// 設置模板存放的目錄
app.set('views', './view');
// 設置模板文件的後綴
app.engine('.html', ejs.__express);

// 使用默認的模板引擎是能夠省略
// app.set('view engine', 'html');


app.get("/", (request, response) => {
    // render,渲染模板
    // 此時會自動到 app.set('views', './view')
    // 配置好的目錄中去找
    response.render("index.html",{
        title: 'ejs template engine',
        user: {
            name: 'alex',
            vip : true,
            hobby: [ "javascript", "Java", "C", "C++" ],
        },
    });
});

模板部分node

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 普通字符串的顯示 -->
    <title><%= title %></title>
    <style>
        * { margin: 0; padding: 0; }
        .user { font-size: 30px; }
        .user span{ color: #f00; }
    </style>
</head>
<body>
    <div>
        <!-- 流程控制 -->
        <div class="user">姓名: <%= user.name%>
            <% if (user.vip) { %>
                <span>vip</span>
            <% } %>
        </div>
        <!-- 循環控制 -->
        <div class="user">愛好:
            <% user.hobby.forEach(item=>{ %>
                <span><%= item %></span>
            <% }) %>
        </div>
    </div>
</body>