ejs模板引擎

時間 2019-11-10

標籤 ejs 模板引擎简体版

原文原文鏈接

第一部分：ejs模板引擎

ejs-cli

ejs預先定義好
            數據---將數據注入到模板中->|編譯
                                          
                           帶有數據的html頁面

cnpm install ejs-cli -g 全局安裝
ejs-cli-h 幫助文檔
標準的json字符串外面必須是單引號javascript
編譯ejs模板文件命令css

一、什麼是模板引擎，爲何要用模板引擎
循環遍歷數據顯示
實現數據與試圖分離（即html結構與數據分離）
例如
用jQuery或原生js將如下用戶信息顯到網頁表格中
userList = [{"username":"Alice",classNo:"1001","age":20},
{"username":"Tom",classNo:"1002","age":22},
{"username":"Jhon",classNo:"1001","age":19},
{"username":"Mary",classNo:"1003","age":21},
{"username":"Jerry",classNo:"1002","age":18},
{"username":"Jenny",classNo:"1004","age":22}]html

二、準備

全局安裝ejs-cli cnpm install ejs-cli -g
全局安裝ejs cnpm install ejs -g
查看幫助命令 ejs-cli -h

三、ejs模板語法

EJS是一個javascript模板庫，用來從json數據中生成HTML字符串

功能：緩存功能，可以緩存好的HTML模板；
<% code %>用來執行javascript代碼

(1)、 ejs模板文件後綴名 .ejs

(2)、編譯ejs模板文件命令

參數輸入形式
ejs-cli -f(--f) 模板文件路徑 -o(--out) 輸出文件路徑 -O(--options) 輸入模板參數

ejs-cli -f "index.ejs" -o "../dist" -O '{"title":"Hello wrold"}'java

$ ejs-cli -f ./injector02.ejs -o ../dist -O '{"name":"Alice","age":15}'

(3)、模板中輸出變量

聲明變量<% title="EJS Template engine" %>
輸出變量
<%= username %> 特殊字符將進行轉義
web
<%- myHtml %> 變量直接輸出，不作轉義處理
數據庫

4.變量定義標籤屬性

<h1 style="<%= style %>"></h1>express

5.循環

<ul>
      <% for(var i in users){ %>
      <li><%= users[i].username %>--<%= users[i].age %></li>
  <% } %>
  </ul>

.ejsnpm

<!-- 定義一組數組 -->
    <% users=["Jack","Rose","Alice","Ave"] %>
    <ul>
        <% for(var item in users){ %>
        <li>
        <%= users[item] %>
        </li>
        <% } %>
    </ul>

服務檯json

$ ejs-cli -f for.ejs -o ../dist

服務檯運行以後自動出現html數組

<!-- 定義一組數組 -->

<ul>
    
    <li>
    Jack
    </li>
    
    <li>
    Rose
    </li>
    
    <li>
    Alice
    </li>
    
    <li>
    Ave
    </li>
    
</ul>

6.if語句

<% if(isLogin){ %>
    <p><a href="#">Jerry</a> | <a href="#">退出</a></p>
<% }else{ %>
    <p><a href="#">登陸</a> | <a href="#">註冊</a></p>
<% } %>

.ejs

<!-- 將全部條件判斷代碼放<% %>裏面便可 -->
    <% if(isLogin){ %>
    <div class="user">
        <a href="">Jack</a>
        <a href="">退出</a>
    </div>
    <% }else{ %>
    <div class="login">
        <a href="">登陸</a>
        <a href="">註冊</a>
    </div>
    <% } %>

7.模板嵌套

<% include 嵌套模板路徑 %>
<% include ./header %>

例

新建文件
head.ejs
    <meta charset="utf-8"/>
    <title><%= title %></title>
    <link rel="styleSheet" type="text/css" href="/css/index.css" />
header.ejs
    <nav>
        <li>item-one</li>
        <li>item-two</li>
        <li>itm-three</li>
    </nav>
            
footer.ejs
    <p>powered by Node.js Author:Jessco 215668636lai@gmail.com</p>
index.ejs
    <!DOCTYPE html>
    <html lang="en">

        <head>
            <% include ./head %>
        </head>

        <body>
            <main>
                <% include ./header %>
                <div>main content</div>
                <% include ./footer %>
            </main>
        </body>
    </html>

爲何使用ejs

在web項目中渲染頁面，咱們不少時候，會用json或者拼接字符串的方式，不夠美觀，破壞原有html結構，大量的html拼接會使代碼難以閱讀。
ejs是一個簡單高效的模板語言，經過數據和模板，能夠生成HTML標記文本。

第二部分：ejs在express中使用方法

一、爲express服務器，設置模板引擎類型

app.set("view engine","jade/ejs/handlebars/任選其一")

二、配置ejs模板文件存放路徑

app.set("View",path)

三、將ejs模板渲染成html頁面後返回給瀏覽器

res.render(path,data)
path:模板文件路徑字符串
渲染模板時須要使用的數據，對象
res.render("404")
res.render("login",{title:"用戶登陸「})

express -generator ———用來快速生成一個基於express服務器的項目

使用方法

一、全局安裝

cnpm install express -generator -g

二、使用
express -e projectName
-e 模板名稱（使用的模板類型） projectName 項目

三、進入到該項目
cd projectName

四、安裝項目依賴包
cnpm install
-e 表明ejs模板 -pug 表明pug模板

express中使用express -session中間件的步驟

一、安裝express -session模塊

二、引入var session =require("express -session")

三、調用中間件

app.use(session,({
          secret:"aaa",
           resave:false,
           saveUninitialized:true,
           cookie:{
               secure:false,maxAge:1000*60*60
           }//cookie保存的時間值
   }))

利用session記錄用戶訪問網站次數

if(req.session.times){
    req.session.times++;
}else{
    req.session.times=1;
    //判斷出若是用戶是第一次訪問，則在req.session對象上添加times屬性
}//假如用戶第一次訪問的時候req.session.times值爲undefined

在後臺解析cookie，須要下載cookie -parser

cnpm install cookie -parser --save

爲ejs設置公共變量

給信息作預處理返回

讓res.render都有{isLogin:true,username:""}

var app=express()
  app.use(function(req,res,next){
      res.locals={isLogin:true,username:""}
  })

session是在服務端保存的一個數據結構，用來跟蹤用戶的狀態，這個數據能夠保存在集羣，數據庫文件中

cookie是客戶端保存用戶信息的一種機制，用來記錄用戶的一些信息，也是實現session的一種方式。單個cookie保存不能超過4k，不少瀏覽器都限制了一個站點最多保存20個cookie，session的運行依賴於session id，而session id是存在cookie中的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。