2018年12月23日 星期日

【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>

沒有留言:

張貼留言

【JavaScript】用物件Mapping的方法

If的寫法 我們希望當變數是a時就回傳1,變數是b就回傳2,變數是c就會回傳3,一般寫法就是用if,但是這樣會很冗 ​ // IF style var word if(word == 'a'){ word = 1 } else if...