二11、Node.js-EJS 模塊引擎

時間 2019-11-08

原文原文鏈接

初識 EJS 模塊引擎

咱們學的 EJS 是後臺模板，能夠把咱們數據庫和文件讀取的數據顯示到 Html 頁面上面。它
是一個第三方模塊，須要經過 npm 安裝
https://www.npmjs.com/package/ejshtml

你們能夠在上面的網站獲取到ejs的使用說明
安裝：數據庫

npm install ejs –save / cnpm install ejs --save

Nodejs 中使用：

下面使用代碼簡單的展現出後臺數據渲染在前臺頁面的過程，從此會慢慢的補充其餘細節npm

項目結構：瀏覽器

建立服務的00service03_ejs.js代碼：函數

var http = require("http")
var url = require("url")
var ejs = require('ejs')
http.createServer(function (req, res) {
    res.writeHead(200, {"Content-Type": "text/html;charset='utf-8'"})
    var allUrl = req.url;
    var path = url.parse(allUrl).pathname;
    var str = '我是後臺數據，未來我是從數據庫讀出來的'
    var list =[
            '1111',
            '2222',
            '3333'
    ]
    var labelStr='<h2>我是html標籤h2包裹的內容</h2>';
    if (path == "/login") {
        // 把後臺（數據庫）的數據渲染到模板上面
        ejs.renderFile(//這裏咱們經過ejs.renderFile（）方法將後臺數據輸送給前臺頁面
            /**
             * ejs.renderFile（）方法一共有三個參數：
             */
            //參數1：咱們要輸出後臺數據的目標頁面路徑:
            "views/login.ejs",//這裏的login.ejs,其實就是login.html，在下面的補充內容我會補充介紹
            //參數2：咱們須要輸出的數據，以對象的形式輸出:
            {
            msg: str,
            list: list,
            labelStr:labelStr
        },
            //參數3：回調函數，輸出數據以後咱們會獲取到渲染了咱們後臺數據的頁面內容data
            function (err, data) {
            res.end(data)//而後咱們將data輸出到瀏覽器，咱們的頁面就能夠展現出來了
        });
    } else if (path == "/register") {
        res.end("register")
    } else if (path == "/admin") {
        res.end("admin")
    }
}).listen(8000)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>這是一個ejs後臺模板引擎登陸</h1>
<!--<%= %>輸出標籤（原文輸出 HTML 標籤）（就是後臺傳什麼數據，我就展現什麼數據，不會解析html標籤-->
<h1><%=msg%>></h1>
<!--<% %>流程控制標籤:裏面能夠書寫咱們的js代碼邏輯-->
<%for (var i=0;i<list.length;i++){%>
<li><%=list[i]%></li>
<%}%>
<%=labelStr%>
<!--<%- %>輸出標籤（HTML標籤會被瀏覽器解析）-->
<%-labelStr%>
</body>
</html>