[Day 11] [Express] 用 Express 和 Node 做一個簡單的 web application

2022 iThome 鐵人賽

DAY 1

自我挑戰組

30 天線上自學前端系列第 11 篇

14th鐵人賽

wscindy

2022-09-11 19:29:21

1062 瀏覽

分享至

今天上到的課程是用 Express 和 Node 做一個簡單的 web application。看了一下完成的樣子，簡單說是個計算機，但只有加法（笑）～

不過插播個別的東西，因為我剛打好標題時，發現好像不太懂 Express 是什麼（或是我忘了 XDDDD）所以又拉回去之前影片看了一下子，還有上網查查 XD，也順便在這邊筆記一下 Node、Express 之間的關係：Express 是 node 的框架，然後 node 是 Javascript 的環境。若有錯也歡迎留言指教～ Me 還是新手～

課程至此，也詳細地說明了一番 web application 和 website 的差異。

website：首先是瀏覽器會跟伺服器提出請求，然後等伺服器回傳 CSS, Javascript, HTML 檔案，如果有任何需要被執行的 Javascript code，他會在 client side 執行，而且是使用者的瀏覽器上執行，所以，當瀏覽器全部 load 好了全部的網頁檔案，就會開始在 client side 執行 Javascript。
web application：跟 website 不同的地方是，Javascript 會在 server side 執行，而不是在 client side。所以當瀏覽器對伺服器提出請求，最後只會得到 Javascript 執行的結果，使用者不會看到任何 code 和我們功能的邏輯。所以我們得以做出更快、更複雜的網站，讓我們網站在渲染前就先計算好，然後傳遞給使用者。也就是說，我們可以控制資料庫、用查詢（query / search）等等。

OK，接下來課程的小挑戰，是要先做一個只有加法的計算機。

首先先創一個 html file

touch index.html

然後在 HTML 檔案裡建好輸入匡和送出匡。中間的註解是順便筆記每個 parameter 是什麼意思：

<body>
    <h1>Calculator</h1>
    <form action="/" method="post">
        <!-- 'action' means where you want to send your data. In this case is the server. -->
        <input type="text" name="num1" placeholder="First number">
        
        <!--  'placeholder' means the text in grey that tells the user what they should type in this box.
              'name' needs to be uniqely identifies that data that's inside this input. -->
        
        <input type="text" name="num2" placeholder="Second number"> 
        <button type="submit" name="submit">calculate!</button>
    </form>
</body>

所以目前前端會長這樣：

目前為止，輸入數字後按送出，會出現 404，原因是 server.js 裡面還沒設定對 post 要怎麼回應。

所以，我們回到 server.js 來做一個針對 post 回應的 callback 確認一下目前進度，還沒有計算功能：

app.post('/', function(request, response){
    response.send('thank for click it')
})

這時老師建議安裝套件 npm install body-parser，因為課程沒有多提及這是幹嘛的，所以我上網查了一下：

body-parser 是什麼？ / ref. [今晚我想來點 Express 佐 MVC 分層架構] DAY 06 - Express 與 body-parser

body-parser 是 Express 經常使用的中介軟體，用於解析請求的資料(body)，比如說：POST 一筆 JSON 格式的資料到我們的 Express App，這時可以透過 body-parser 快速解析這筆資料，以方便取用。下方的圖為 Express 的運作模型，可以看到 body-parser 會先進行資料的解析，才會把解析後的資料傳給其他相關的 middleware 使用。

然後再回到 server.js，然後加入 app.use(bodyParser.urlencoded({extended: true})) ：

// 'urlencoded' using this when we're trying to parse data that comes from an HTML form
// 'extended: true' allows us to post nested objects.
app.use(bodyParser.urlencoded({extended: true}));

原因是因為這樣可以在 terminal 裡面看到使用者回傳的是什麼，也就是解析（parse）HTTP 收到的請求變成 form data，就像在 Chrome console 裡面看到的一樣。

接著把小挑戰的要求做在 server.js 裡面：

app.post('/', function(request, response){
    var num1 = Number(request.body.num1);
    var num2 = Number(request.body.num2);
    var result = num1 + num2

    response.send('the result is ' + result)
})

// '__dirname' is the file path of this current file
// Number() is change 'text' to number.

就完成了～所以當輸入 3 + 3 後，在前端會看到：

the result is 6