Alice's notes | frond-end Class

2021/07/12 Web front-end development

npm

查詢 npm 版本：npm -v
更新 npm 套件：npm install npm -g（全域安裝）
區域安裝套件 npm install 套件名稱：npm install express

express

我電腦實際 package.json 位置好深..。實際要下載 express 不太知道要下載到哪裡，老師的方式對我來說好像不管用（應該跟電腦是mac有關？）。找到了我可以使用的方式，這邊的方式可以成功下載：Express

（這時 work 這個資料夾內就會有幾個檔案生成了，是為套件內容）

Node.js Express 框架

是一個最小且最靈活的 Node.js Web 應用程式框架
提供設立中介軟體（middleware）響應 HTTP 請求
定義了用於執行基於 HTTP 方法和 URL 不同動作的路由表
允許動態渲染基於參數傳遞給模板的 HTML 頁面

靜態網站資料夾命名為 public 是大部分習慣的命名法，但也不一定要這樣使用。

不同路徑用 get 或 post 去撰寫。

以前對表單的 get 與 post 總有點疑惑，是隨著時間過去一直有在學習，才開始比較理解它的用法與意思。今天的 express 寫到 get 、post 與 html 就可以很清楚了解他的概念了。

用後端 express 操控表單為 get 或 post 時，它會導向到什麼頁面或呈現什麼文字。

以下為描寫路徑的方法

    // b？代表 b 可有可無
    // 路徑符合 /acd /abcd
    app.get('/ab?cd', function(req, res) {
    res.send('get ab?cd')
    });

    // 路徑符合 /abcd, /abxcd, /abxydpe...
    // ab*cd 代表 ab 後可有無限多個字母，並以 cd 結尾
    app.get('/ab*cd', function(req, res) {
        res.send('get /ab*cd:' + req.url)
    });

    // 路徑符合 /wxyz /wxxyz /wxxxxyz
    // + 代表 + 前面的字母可以出現無數次以上
    app.get('/wx+yz', function(req, res) {
        res.send('get /wx+yz:' + req.url)
    });

    // 路徑符合 /test /tesest
    // () 與 ? 都代表可有可無
    app.get('/tes(es)?t', function(req, res) {
        res.send('get /tes(es)?t:' + req.url)
    });

    app.get('/tes(es)+t', function(req, res) {
        // + 就代表前面可以無限次，這邊就是 es 可以無限次
        res.send('get /tes(es)+t:' + req.url)
    });

格式化字串的輸出， %s 表示輸出字串，會從後方抓參數。 ('Listen at http://%s:%s', host, port) → 第一個 %s 就會抓 host，第二個 %s 就會抓 port。

老師說這是 C 語言的東西，但在這邊也可以應用。第一次遇到格式化字串輸出，還是蠻有趣的，而且感覺很好用！接著下面是 JSON 的寫法（get 時）

要用到 post 的話，中間要先經過一個 middleware 中介軟體（bodyParser.urlencoded），請求會先經過它，才跑後面的程式。

看到這篇 stack overflow 的問答，覺得下面有網友答的很好。

stack overflow : What are express.json() and express.urlencoded()?

    // In body-parser you can do

    // calling body-parser to
    // handle the Request Object from POST requests
    var bodyParser = require('body-parser');

    // parse application/json,
    // basically parse incoming Request Object as a JSON Object 
    app.use(bodyParser.json());

    // parse application/x-www-form-urlencoded,
    // basically can only parse incoming Request Object if strings or arrays
    app.use(bodyParser.urlencoded({ extended: false }));

    // combines the 2 above, then you can
    // parse incoming Request Object if object,
    // with nested objects, or generally any type.
    app.use(bodyParser.urlencoded({ extended: true }));

這邊也一解我對於 { extended: false / true } 的疑問。 false 只能接受字串或陣列， true 能接收任何形式。以及回答者也回答：

當使用 GET 請求時，沒有必要使用 express.json() 與 express.urlencoded()
當使用 POST 和 PUT 請求時才需要使用，因為兩者在傳送資料，並讓 server 接受與存取這些資料

下載 multer 語法：

npm install muter
npm i multer

middleware

express 中介軟體，也類似 function，不過會先執行中介軟體才執行其他程式碼。其中的 next() 很重要，若沒有加上 next()，程式碼就會停在裡面不會往下。若過濾網址的 get / post 在中介軟體之前，且符合過濾器則不會執行中介軟體，但若沒有符合過濾器，則會執行中介軟體。

幫助理解之文章：「筆記」- 何謂 Middleware？如何幫助我們建立 Express 的應用程式、 Express : 撰寫中介軟體以用於 Express 應用程式中、 [鐵人賽Day04] - 淺談Middleware

Express 產生器

先安裝產生器（只做一次）-> npm install express-generator -g
產生 express 專案 -> express 專案名稱。express myapp
到專案目錄做初始化 -> cd myapp & npm install
執行專案 -> SET DEBUG=myapp.* & npm start

JADE 模板基本用法

只要向後退一格，就表示該標籤則是在它的下層
直接在標籤後空一格就可加入文字
也可在標籤斷行的後方加入（可多行）
jade 繼承，可以代換的元素用block表示
block 後方的變數可自取並繼承取代

express 產生器感覺蠻有趣的，jade 竟然還可以繼承跟（include）跟使用函數（mixin）。之後要找一天把以前做的網站拿出來用 express 產生器練習看看！看可不可以成功連線！

Summary

今天真的收穫滿滿！學到了好多，覺得很開心！比較後端的東西學起來也很有趣呢。找工作時看到 node.js、express，總是對這兩個東西不太熟悉，上了這堂課後終於可以好好地摸一摸他們了！即使下禮拜就要換學 React 了，沒有再繼續鑽研 express，但找到方向可以自學了，太棒了！（我對下禮拜 React 也是滿懷期待呢～）

Alice'snotes

npm

express

middleware

Express 產生器

Summary

Alice's
notes