Kotlin 寫網頁資料驗證、產生測試資料，並顯示表格式資料
[Vaadin on Kotlin]Bean Validation 驗證資料 / 使用 javafaker 產生測試資料
本文摘要 :
- 一般網頁程式如何驗證資料
- Kotlin Jakarta Bean Validation (Java Bean Validation)
- 如何使用 Vaadin Grid 顯示資料表
- 使用 JavaFaker 產生測試資料
當使用者輸入資料後，系統會檢查使用者所輸入的資料是否正確。 例如姓名不得為空、最少2個字、最多10個字，抑或是email格式是否正確等資料規範。 驗證資料正確性有幾種方式，前端輸入資料後驗證、資料傳送到後端驗證、將資料儲存到資料庫時驗證等。以下將簡述三種資料驗證的使用時機。
- 前端驗證 : Client 端(通常是網頁或APP) 當使用者輸入後，傳送到後端或儲存前預先檢查使用者所填寫資料是否正確。
- 後端驗證 : 通常 Server 端會接收多管道的資料來源，為免前端未檢查到，Server 端接收資料後會再次檢查資料正確性。
- 資料庫驗證 : 儲存到資料庫時除了資料表限定的資料格式及長度規範，部份專案會於儲存到資料庫前使用Stored Procedure 再次檢查。
(因資料庫驗證複雜，在此謹就資料欄位長度及型態說明)
多重資料驗證雖然保護了資料的正確性及完整性，於開發者而言，多重驗證也意味前後端須要重複編寫同樣的檢查邏輯。
VoK 的資料驗證
在 Vaadin 中使用 JSR 380 (也稱為 Bean Validation 2.0）驗證 Java Bean， JSR 380 是用於 Bean 驗證的 Java API 的規範，為 Jakarta EE 和 JavaSE 的其中一部分。使用諸如 @NotNull、@Min和@Max 之類的註釋，確保 Bean 的屬性符合特定條件。此 API 有兩個相容的實作，最廣為使用的是 Hibernate Validator。
請開啟 Module 層級 build.grade，導入類別庫 hibernate-validator
接著開啟 Entity Student.kt，加上欄位驗證註釋。
第 10 行，@field: 為 Kotlin Annotation use-site target (詳見 Kotlin 官網)。Kotlin 中所使用的許多庫、框架和工具實際上是為了 Java 設計的，無論是編譯或執行時，都可能需要特定註釋以正常運作，但 Kotlin 畢竟不是 Java， Kotlin 簡化的程式碼，property, setter, getter, field 存在同一個類別並擁有相同的命名，如何確保註釋到正確的位置上？use-site target 即用於此。簡言之，@field: 指定 @NotNull 用於 Java field。
第 12 行，@Length 規範資料長度。文字長度不分中英文，若為欄位輸入為中文字請特別留意。
第 15 行，@Past 表示日期需為過去的時間，多半用於生日
第 24–25 行，用於規範最大值和最小值，型態為 Long。
第 29 行，亦可使用 Range 規範連續之數值區間，型態為 Long。
請打開 CreateStudentView.kt，修改程式以確保儲存資料前驗證資料。
第 4 行，儲存 Java Bean 先驗證bean是否正確，若有誤即在 bind 欄位下方出示錯誤原因，isOK方法回傳驗證的 boolan 值
第 16 行，產生學號，格式為 VOKyyyy000000
執行結果如下 :
自訂訊息
執行結果可看出使用@Max, @Min, @Range 所註釋的差別符。亦可自訂提示訊息，請打開Student.kt，更改姓名提示文字
欄位提示文字
此例中，身高和體重欄位，使用者可能會對單位感到困惑，到底是公分還是公尺、公斤還是磅？除了可以在身高/體重後面加上資料驗證文字提示外，以此為例，我們也可在欄位上加上提示文字。開啟CreateStudentView.kt，在輸入欄位上加上 placehoder。
這樣就完成了欄位提示。
查詢並顯示全部學生資料
新增學生資料後，需要一個能夠顯示所有學生資料的畫面，新增 AllStudentsView.kt。
第 16–25 行，定義顯示資料的 component — grid。
第 18 行，設定 grid 的資料提供者。dataloader 為 vok-orm 的一員，提供資料庫單一 Entity 內容。
第 19–24 行，新增 grid 內的 column，並設定資料欄位。
第 28–30 行，複寫 afterNavigation 方法，導覽到此頁後，更新 grid 內容。
執行後開啟 http://localhost:8080/students 即可顯示所有學生資料。這裡使用 Grid 元件顯示，Grid 支援 paging、lazy-loading，還能夠排序和過濾資料，是個功能強大的元件。
產生測試資料
由於範例使用的 H2 database，重新啟動程式，原先建立資料就消失了，測試時必須不斷重建資料確實有點困擾。這裡我們使用 JavaFaker 來產生測試資料。 請在 web/build.gradle.kts 加入依賴
開啟檔案 AllStucentsView.kt，在 grid 上方加個 button
第 3 行，初始化 Faker 時設定 Locale 為台灣
第 4 行，產生20筆測試資料
第 7 行，使用 Vaadin 提供的方法 LocalDateToDateConverter().convertToPresentation() 做資料型態轉換，將faker 產生的 Date 轉換成 Student 需要的 LocalDate
第 9 行，性別取 Enum Gender 隨機值
第 10~11 行，給予適當區間取小數一位的隨機值
第 12 行，產生學號
第 13 行，儲存 Student Entity
第 14 行，待資料產生後，別忘了更新 grid
資料表格改標題文字
最後，再給資料加上標題。開啟 AllStucentsView.kt，加上setHeader() method chaining，最後會回傳加上標題文字的 column。
執行結果
執行結果如下。畫面中可看到標題旁有上下三角圖符號，點選符號可用該列資料排序。下圖採身高由高而低排序:
