iT邦幫忙

2

node.js - express #9

pyk 1 月前5569 瀏覽

接續上篇的基本設定 第七個應用:開發旅行社網站(1)第七個應用:開發旅行社網站(2)

第七個應用:開發旅行社網站(3)

middleware是一種處理請求的模組。
static這個middleware可以將多個目錄指派為存放靜態資源的目錄,裡面的資源可以不透過任何特殊處理就直接發送到客戶端,例如圖片、css檔、客戶端的javascript等資源。

  1. 在創立public資料夾,這個資料夾內的資料均為公開資料
  2. public資料夾底下創img資料夾
  3. img資料夾下放入logo圖片
  4. 修改meadowlark.js,加入新的程式碼讓/img/logo.jpg會自動添加上/public變成正確的路徑
    但使用者並不會看到public這部分的路徑
app.use(express.static(__dirname + '/public'));
  1. 修改main.handlebars,讓logo出現在每個網頁上(檔名需改成自己的)
<header><img src="/img/logo.jpg" alt="Meadowlark Travel Logo"></header>

再次打開就會看到圖片出現了,雖然是放在/public/img/logo.jpg
但路徑只需要寫/img/logo.jpg便能夠顯示
http://ithelp.ithome.com.tw/upload/images/20170814/201051549PcJqtjCI5.png

以上都是屬於靜態的顯示
view engine也能夠包含動態訊息

  1. meadowlark.js中定義幸運餅乾(fortune cookie)
var fortunes = [
    "Conquer your fears or they will conquer you.", 
    "Rivers need springs.",
    "Do not fear what you don't know.",
    "You will have a pleasant surprise.",
    "Whenever possible, keep it simple.",
];
  1. 修改about.handlebars來顯示內容
    加入以下程式碼
<p>Your fortune for the day:</p>	
<blockquote>{{fortune}}</blockquote>
  1. 修改meadowlark.js有關/about的路由規則
app.get('/about', function(req, res) {
    var randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
    res.render('about', { fortune: randomFortune });
});

重新打開後就會看到random的幸運餅乾了!


尚未有邦友留言

立即登入留言