全端筆記

留下學習的痕跡

0%

AC學期2-3: 自學經驗回顧

發表於 更新於 分類於 Disqus：

AC學期2-3: 自學經驗回顧

⭐ 遇到的問題及解決方式

在學習 Express 框架及串接 MongoDB 資料庫時，碰到的問題主要是 「目前的資料是什麼類型?」 以及 「對專案課程及框架概念似懂非懂」，又因為不知道資料的類型，我更無法去使用相對應的方式做邏輯處理。
所以，為了讓自己更理解整個專案及課程，我先地毯式將課程內容利用圖像化方式寫下重點以及資料流串接的方向。
再來，因為整體專案的檔案分類是利用 MVC 架構，我在二次實作時，會提早把功能分出去，例如:

  • 先分好路由檔案，然後若有其他檔案需要導入路由，我會直接做串接，如此便省去最後再重構程式碼的時間
  • 先把資料庫檔案分出去，若有其他檔案需使用資料庫檔案，便可以直接指向這個資料夾做載入

就這樣，照著思考後的圖表以及深入了解教材的字句引導，對於專案的理解視野會突然變得超不一樣，尤其會更快發現自己的盲點!也更快去解決問題!
以下，就是我如何透過這個方式去找出問題、定義問題然後一一擊破的過程。

❓ 卡關問題的突破方式

  1. query string, param, req.body的相異處
    在教案中，會使用這三種跟網址和表單送出有關的變數存取方法，一開始會把這三項使用的時機搞混，所以我會將這三項的特色列表下來，就會知道如何做應用⬇️

    存取方法 表單 Method 屬性 表現方式 是否會出現在網址
    query string GET 表單送出後，會出現在網址的 " ? " 後面的字串 是
    param GET 定義在路由的變數裡，可使用 req.param 物件取得變數值 是
    request body POST 通常使用在較隱密的表單資訊，可使用 req.body 物件取得變數值 否

  2. 資料庫串接後，資料的存取方式及取出後的資料類型
    第一次操作資料庫時，對於資料庫串接不是那麼有概念。但其實…就只是將資料庫內容轉化為 JS 可以操作的資料而已，例如陣列或物件，這個觀念懂其實資料操作上就會非常得心應手!
    在下面來分享我在操作資料庫的思考過程⬇️

    • 如何轉換 MongoDB 資料庫的 data ?
      如果要將 MongoDB 資料庫的 data 轉換為可使用 JS 操作的物件，那麼必須使用 lean 的方法來轉換。

    • 如何取得 MongoDB 資料庫的 data ? 取出來的 data 是「物件」還是「陣列」?
      要懂得操作資料，我覺得除了要知道要如何取出，更重要的是，要知道取出的資料類型是甚麼!
      因為這樣才會知道要用什麼 JS 方法去操作資料!
      這裡列出 2 種專案會用到的取出方式和取出後的資料類型⬇️

      取出資料方式 取出後的資料類型
      find() 陣列
      findById() 一個物件

  3. 渲染局部模板 (partial template) 的操作方式: res.render()
    同樣地，有了上面第三項的認知，我們在渲染畫面時，在變數的載入會更有概念!
    比如說，傳入局部樣板的變數類型可以是陣列，也可以是一個物件，甚至是字串等等，我們會更容易依照畫面渲染的需求來判斷要傳入什麼樣的變數類型，例如 helper 的使用上，載入的變數是陣列或是物件

    1
    res.render(局部樣板, { 變數 }, callback)

  4. 下拉表單(select)的屬性
    為了要做排序功能，我在這裡卡觀的難題就是「下拉選單屬性不熟悉」!
    所以，在這裡我先去了解 select 和 option 的標籤屬性，然後再寫下思考邏輯來打造排序功能!
    最大的重點就是，當表單送出後，表單如何去存取 select 中 option 的值，然後再透過取出 option 的值來架構思考邏輯
    而我的排序功能邏輯是 ➡️ 「只要某一個 option 被選取，畫面就會依照 option 的排序方式做排序」
    細節簡述如下:

    • option 被選取後，表單送出後的動作為何?
      • select 要先設定 name 屬性來定義變數名稱，因為任何 option 被選取後的值會被存在 name 裡
      • option 要設定 value 屬性，且每個 option 會有不一樣的 value
      • 當表單送出後，select 的 name 會存取選取的 option 設定的 value 值，並存入 query string 的物件中
    • 畫面如何依照 option 的排序方式改變?
      • 利用 query string 的物件，取出被選取的 option 設定的 value 值
      • 使用 mongoDB 提供的 sort 方法依照 value 值來做畫面的排序(這裡省略詳細的邏輯細節)
    • 如何讓被選取的 option 留在畫面 ?
      • 使用 helper {{if}}{{/if}} 搭配 option 的 selected 屬性，透過邏輯判斷在畫面被排序後，選取的 option 還持續留在畫面中

💐 分享與展望

在這學期中，最大的收穫是更了解表單送出後的伺服器運作，還有了解伺服器間 request 和 response 的相互溝通過程，最後，藉由 Express 框架及串接 MongoDB 資料庫的應用，打造了小型的網頁應用程式「餐廳清單」及「密碼產生器」。

而我最大的成就感是解出問題的過程，就像教案引導的方式，我們要將功能或是問題做拆解，然後再逐步寫出來!而這樣的方式，我在密碼產生器的專案感受很深，真的就是拆解步驟然後功能就水到渠成😄

之後要進入學期三了，跟自己說聲加油，我可以的💛