使用ivx實現提交報名表單的經驗總結

提交表單是非常多案例中都會使用到的一種功能,例如活動報名,提交審覈,問卷調研等等。其實它要實現的最終結果就是將前臺輸入的數據提交到後臺的數據庫中,今天以這個極簡活動報名爲例說一下提交表單的具體做法和流程。
使用ivx實現提交報名表單的經驗總結
一.數據庫
這個極簡活動報名中提交的表單中包含Name、Telephone、Have dinner、Session和Self introduction五項,於是我們在數據庫中添加對應的五個字段,其中Have dinner字段用數字1和0分別表示是和否。
使用ivx實現提交報名表單的經驗總結
二.服務
服務中的五個接收參數則分別對應數據庫的五個字段,我們將每個參數提交到數據庫對應字段即可,提交完成數據庫會返回此次提交是否成功,我們將其作爲服務的返回結果。
使用ivx實現提交報名表單的經驗總結
三.前臺事件
1.組件
在前臺我們要輸入這五個提交項的具體值,Name、Telephone、Self introduction這三項使用輸入框組件,用戶直接輸入即可。
使用ivx實現提交報名表單的經驗總結
Have dinner則是做了一個簡易的單項選擇器,選擇不同的選項會給數值變量“dinner”賦不同的值,而每個選擇器的是否選中屬性也與“dinner”進行了數據綁定。
使用ivx實現提交報名表單的經驗總結
Session使用了一個拓展組件中的單項選擇器,在選項屬性欄中填入了“Morning”、“Afternoon”、“Evening”三個選項,選擇器的確定事件中會將選中選項保存到session項對應的輸入框內。
使用ivx實現提交報名表單的經驗總結
2.提交
點擊confirm按鈕,會先判斷各個輸入框的內容是否爲空,還有內容類型是否正確,符合提交條件後會發送給提交報名動作組,不符合則對用戶進行提示。
使用ivx實現提交報名表單的經驗總結
在動作組中會調用提交報名服務,將之前傳入的數據發送給服務,如果服務返回提交成功就清空前臺界面的內容以便下一次輸入提交,並且告知用戶提交成功。至此一個提交表單的流程就完成了。
使用ivx實現提交報名表單的經驗總結
總結
可以看到數據的傳遞流程是用戶輸入,然後依次傳遞到動作組、服務和數據庫中,所以提交表單功能的關鍵就是動作組和服務的參數還有數據庫的字段都做到相互對應。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章