【Express】用ejs模板渲染html /獲取後端傳來的參數

▌如何渲染html?

一直用res.send(“….“) 很浪費時間，因此可以用EJS/Pug之類的模板語言

▌在express設定使用ejs

npm install ejs-locals --save     //安裝ejs

• 建立一個view的資料夾，放入ejs檔案（但他是html）

var express = require('express');
var app = express();
app.use(express.static('public'))
----下面這些設定可以直接貼上----
var engine = require('ejs-locals');
app.engine('ejs', engine);  //載入engine
app.set('views', './views') //設定到views資料夾 
app.set('view engine', 'ejs')    //設定ejs引擎
app.get('/', function (req, res) {
    res.render('index')
});
----上面這些設定可以直接貼上----

▌使用ejs獲取後端傳來的變數

• 變數會放在res.render(‘index’, {變數}) 裡面
• 在ejs中使用<%= 變數 %>就可以「獲取後端傳來的變數」

  <% - 變數 %> 會被渲染成html

app.get('/', function (req, res) {
    res.render('index', {
        'title': ['學習心得', '閱讀筆記', '最新文章']
    })
});

//傳入ejs（其實應該要用for寫，但我懶得整理）

            <div class="box3"><img src="/images/learining.gif" alt="">
                <h2>
                    <%= title[0]%>
                </h2>
            </div>
            <div class="box3"><img src="/images/book.gif" alt="">
                <h2>
                    <%=title[1]%>
                </h2>
            </div>
            <div class="box3"><img src="/images/article.png" alt="">
                <h2>
                    <%=title[2]%>
                </h2>
            </div>
        </div>

​