iT邦幫忙

DAY 20
2

Front to Back, Node.js系列 第 20

Express 與頁面交談 - Node.js Day 18

#Express 與頁面交談 - Node.js Day 18

今天介紹 Express 與頁面的部份問題,這邊會採用 ejs,一種比較近似於 html 的 view engine,就來介紹如何透過 Express 的變數與前端頁面交談。

##內容

Express 可以允許使用 view engine,預設都是使用 jade,這邊不討論 jade, ejs 等 template engine 的差異,主要來討論一下如何透過 express 帶入變數到 view engine。

首先來建立 express 專案

express -e view-test & cd view-test

讓我們直接跳到 route 裡面看看

path: routes/index.js

裡面的程式架構,

<pre>
/*
* GET home page.
*/

exports.index = function(req, res){
res.render('index', { title: 'Express' });
};
</pre>

在 index 這個 function 裡面,可以看到使用了 res.render ,這邊會帶入兩個變數,第一個變數為 'view_name' ,會屬於字串型態,第二的變數就會是前端需要使用的變數。

接下來,看看對應的 view 的部份, view 設定會放在 views 資料夾裡面,在這個 views 資料夾裡面就可以剛才設定對應的 view -> 'index.ejs'

<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

與上面兩則程式對應,可以看到頁面上的程式邏輯判斷的前贅字是採用,

<% %>

如果要直接輸出這個變數,可以像 index.ejs 使用的方式,

<%=var%>

如果需要輸出資料,又需要 escape html 字串的時候,

<%-var%>

以上這些是簡單的 view 的使用,當然 <%%> ,也可以執行 Node.js 邏輯判斷,

:


上一篇
Express 建立 static web server - Node day 17
下一篇
Express form submit - Node.js Day 20
系列文
Front to Back, Node.js21

1 則留言

我要留言

立即登入留言