前端？

Web界中常常聽到前端工程師、前端設計師...，但何謂前端呢？
對使用者來說，前端包含了瀏覽器呈現給使用者的畫面，畫面的呈現與運作，就是前端所負責的內容。而動態網站中，前端有一項更重要的任務，就是把**要求(Request)能夠發送給後端，後端處理完這項要求後，就會回應(Response)**對應資訊給前端頁面呈現，滿足使用者要求。
舉例來說，輸入網址是一個要求、註冊會員是一個要求、上傳影片也是一個要求；依序對應的回應就是回應網頁、回應註冊成功、回應影片上傳資訊。這些動作經過前端設計師與工程師的巧思，變得不會像文字或指令般生硬，而是巧妙地出現在瀏覽器的各個角落，引導使用者順利達成目標。使用者通常是用點擊按鈕開啟另一頁面，而不是一頁一頁輸入網址獲取對應頁面。所以不知不覺中，我們很快能上手每個網站的操作方式，這都是偉大的前端設計師與前端工程師的功勞，建立良好的User Experience(UX)，才能讓我們快速看到我們想要的資訊。(也讓我們很容易點到廣告！哈！)

前端對於發送Request、接收Response內容，呈現資訊等是我們需要了解的重點，我們一一了解。

Request

瀏覽器輸入網址，就是一個前端Request，我們開啟MyTestProject後端伺服器：

$ npm start //在目錄下輸入npm start, path/to/MyTestProject
//此時Terminal不能輸入指令，只能查看伺服器Log狀態，如要關閉伺服器，按下
Control + c 

此時Terminal狀態應為：

> mytestproject@0.0.0 start /path/to/MyTestProject
> node ./bin/www

我們打開瀏覽器，對MyTestProject伺服器做一個Request

//網址列輸入
http://localhost:3000/

瀏覽器應出現：

這樣我們就完成了"網址"的Request的指令，回到Terminal看看後端伺服器

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

第一行：GET代表Request的方式，/代表要求路徑http://localhost:3000(前省略) /，200代表紀錄下此Request與Response狀態為200，意義為要求與回應成功，整個Request(Req)與Response(Res)過程使用了28.677毫秒。
第二行：GET代表Request的方式，/stylesheets/style.css代表要求路徑http://localhost:3000(前省略) /stylesheets/style.css，200代表紀錄下此Request與Response狀態為200，意義為要求與回應成功，整個Request(Req)與Response(Res)過程使用了16.964毫秒。

在第一行的時候，後端伺服器收到了這樣的網址要求，回應了路徑/對應的頁面給前端，此時前端再向後端要求一次，要求附件/stylesheets/style.css的內容，而style.css的內容正是此頁面的介面設計相關語言。要求與回應完成後，我們就看到經過排版的畫面了。

恭喜完成一個前端發送要求的運作！