提醒：由於看到這系列鐵人訂閱人數漸漸變多，標記一下這些內容是在「非常萌新時期」所寫，更多技術內容請參考我的 Github，歡迎跟我一起討論 ^ ^

前面完成的部分，已經讓使用者可以瀏覽閱讀網站上的資訊了。接下來將繼續完成 更新資料 的部分。這個部分主要是讓使用者透過 HTML form 來提交資料。

HTML Forms

• HTML Form 有許多種輸入框可以用來接收各類型資料，而且可使用 POST 來發送資料，因此也相對安全，可保護其不會受到 cross-site request forgery 的威脅。
• 需處理的部分大致有：編寫HTML、驗證並清除有害的資料、告知錯誤訊息、處理成功提交的資料、告知資料已提交。
• 基本語法：
  • type：可指定輸入內容的類型。
  • name：可想像這個 form 提交後，會將所有資料做成一個 object，而 name 就是對照這 input 輸入的資料的名稱。
  • value：輸入框中顯示的預設內容。
  • <label>：藉由 for 與特定ID的 <input> 綁在一起，一般可當作其標題。（如點選label，可自動跳轉到input）
  • submit：提交整個 form 輸入的資料給 server。
  • action：資料提交的目的地。（若填空的，則提交到當前頁面URL）
  • method：HTTP request 的方式。
    • POST：用於更改server的資料。（安全性較高）
    • GET：只用在不需更改資料的地方。

  <form action="/提交資料到此_url/" method="post">
      <label for="對應的ID">標題: </label>
      <input id="對應的ID" type="text" name="資料的名稱" value="預設顯示內容">
      <input type="submit" value="提交按鈕上的文字">
  </form>
  

Form 處理流程

• 使用者請求顯示 form。
• 生成預設 form（可空白或預設一些值）傳回給使用者。
• 填好後以 POST 提交資料。
• 經由驗證、清理，若內容不合規定，則回傳已填的 form，並提示錯誤訊息。
• 當內容完全符合規定，則開始執行後續動作。
• 最後將使用者導入成功提交 form 的頁面。

Validation and sanitization

• Validation：確認資料都是符合該項目所需求的資料。
• Sanitization：移除或取代可能會造成惡意破壞的內容。
• 此教材使用 express-validator 來處理這個部分。
• 以 npm install express-validator --save 進行安裝。
• 此專案所需的功能：
  • body(fields[, message])：用以檢查資料是否符合規定。
    （body('資料名稱-即input的name', '錯誤時回傳的訊息').檢查的條件）

  // 檢查條件可設定單個：（是否大於一個字元）
  body('name', 'Empty name').isLength({ min: 1 }),
  // 檢查條件可設定多個：（null ＆ empty略過）＋（是否符合正規日期 ）
  body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(),
  // 也可以一對一配對 條件＆錯誤訊息
  body('name').isLength({ min: 1 }).trim().withMessage('Name empty.').isAlpha().withMessage('Name must be alphabet letters.'),
  

  • sanitizeBody(fields)：用以清理資料。
    （sanitizeBody('資料名稱-即input的name').清理的動作）

  // 移除 HTML 字元，以避免 JavaScript cross-site scripting attacks
  sanitizeBody('name').trim().escape(),
  // 將其轉為日期格式
  sanitizeBody('date').toDate(),
  

  • validationResult(req)：檢查是否有經由以上 validator 抓到的錯誤。
    • 以 isEmpty() 以查看 errors 是否為空，來判斷是否有錯誤存在。
    • 若有錯誤可以 errors.array() 將錯誤訊息包成 array 回傳。

  (req, res, next) => {
    const errors = validationResult(req)
    if (!errors.isEmpty()) {
    } else { }
  }
  

Form 的設計思路：

在此專案中，存在著許多互相關聯的 model（如書本中有作者資訊），因此設計更新資料中，此案例的 form 遵循兩個規則：

• 新增一個 object 只能選擇 已存在的object 當作其相關聯內容。
  （如想要新增書本，只能選擇已在案的作者）
• 只能刪除 未被其他object聯繫 的 object。
  （如想要刪除作者，必須先確認沒有他的書籍在案）