iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 19
0

前面完成的部分,已經讓使用者可以瀏覽閱讀網站上的資訊了。接下來將繼續完成 更新資料 的部分。這個部分主要是讓使用者透過 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。
    (如想要刪除作者,必須先確認沒有他的書籍在案)

上一篇
Day 18- 191004學習筆記 Express read-only page
下一篇
Day 20- 191006學習筆記 Express - 建立 Form - 新增
系列文
轉職道上的萌芽人生 − 自學程式開發ing30

尚未有邦友留言

立即登入留言