ExpressJS專案中的前端概念-3

第 11 屆 iThome 鐵人賽

DAY 9

Modern Web

網站前端後端與API系列第 9 篇

11th鐵人賽

BigQ

2019-09-25 22:08:38

1009 瀏覽

分享至

為什麼只下了一個網址Req會有兩個Req跟Res的Log?

針對昨天Req後的Log：

GET / 200 28.677 ms - 207
GET /stylesheets/style.css 200 16.964 ms - 111

呼叫了兩個前端的路徑，讓我們來看看對應的內容，打開專案中的資料夾views，打開index.ejs可以看到一些程式碼：

//index.ejs
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
...
</html>

裡面包含了一些HTML程式碼，先不要看懂程式碼細節，這index.ejs就是要呈現在使用者瀏覽器的內容，透過後端伺服器傳送給使用者。
有個內容值得注意，第六行的<link rel='stylesheet' href='/stylesheets/style.css' />就是呼叫樣式相關CSS語言的程式。哦！所以昨天第二個呼叫就是從這邊呼叫的！我們試著把這行隱藏，存檔蓋掉原本的index.ejs，再重新整理網頁(記得啟動後端伺服器)。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <!-- <link rel='stylesheet' href='/stylesheets/style.css' /> -->//隱藏起來
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

存檔後於瀏覽器輸入http://localhost:3000(或對已經開著的頁面重新整理)：

比較一下原本的

是不是發現樣式不同了呢！因為沒有樣式包style.css就沒有空行與字體等排版。這樣對於前端部分呈現的內容應該有近一步地掌握度了。

專案前端相關架構

前端相關的兩個資料夾包括：
views(使用者看得到的介面主框架)
public(前端相關套件，前端使用者可見此資料夾內容)

views

views內有index.ejs與error.ejs，當req路徑/時，後端伺服器收到指令會透過路由器routes資料夾中的index.js(後端章節介紹)處理後，回應index.ejs，若是錯誤的請求，則回應error.ejs。當然，可以增加路由器的內容，如收到指令後，回應一個新的自定義ejs模板給前端使用者。是的，光是這樣就可以建立多頁面的網頁(不同網址req透過路由器分配res不同頁面)。

public

而views模板會用引用到的內容，通常會放在public內，上述的style.css就是一個例子，而其他的javascripts腳本、圖片、影片...等都會放在對應資料夾。當然，也可以自己建立資料或檔案夾給前端模板(ejs)引用，ExpressJS只是為了使用者方便，建立了目前的分類。

如果眼尖的你稍微對HTML有點印象，可以發現index.ejs中的<%= title %>不是典型HTML用法。沒錯，這是動態模板設計，也是ejs模板專屬用法。若不懂HTML，我們會在後端章節敘述這段的用法。

下篇我們會介紹HTML, javascripts與CSS基本用法，讓我們可以對介面上更有概念，也可以透過實例操作加深今天的印象。

補：
程式編譯軟體有很多，可以直接用內建的vi進行編修，或是下載Sublime使用，編輯儲存後再由Terminal下指令透過NodeJS執行(也可以用記事本編輯儲存喔！就只是不同的編輯環境。)
引用兩位大神的文章：
鳥哥的Linux 私房菜-- vi 文書處理器
 Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學