提交表單是非常多案例中都會(huì)使用到的一種功能溯街，例如活動(dòng)報(bào)名匹中，提交審核，問卷調(diào)研等等朱浴。其實(shí)它要實(shí)現(xiàn)的最終結(jié)果就是將前臺(tái)輸入的數(shù)據(jù)提交到后臺(tái)的數(shù)據(jù)庫(kù)中吊圾，今天以這個(gè)極簡(jiǎn)活動(dòng)報(bào)名為例說一下提交表單的具體做法和流程。
一.數(shù)據(jù)庫(kù)
這個(gè)極簡(jiǎn)活動(dòng)報(bào)名中提交的表單中包含Name翰蠢、Telephone项乒、Have dinner、Session和Self introduction五項(xiàng)梁沧，于是我們?cè)跀?shù)據(jù)庫(kù)中添加對(duì)應(yīng)的五個(gè)字段檀何，其中Have dinner字段用數(shù)字1和0分別表示是和否。
二.服務(wù)
服務(wù)中的五個(gè)接收參數(shù)則分別對(duì)應(yīng)數(shù)據(jù)庫(kù)的五個(gè)字段廷支，我們將每個(gè)參數(shù)提交到數(shù)據(jù)庫(kù)對(duì)應(yīng)字段即可频鉴，提交完成數(shù)據(jù)庫(kù)會(huì)返回此次提交是否成功，我們將其作為服務(wù)的返回結(jié)果恋拍。
三.前臺(tái)事件
1.組件
在前臺(tái)我們要輸入這五個(gè)提交項(xiàng)的具體值垛孔，Name、Telephone施敢、Self introduction這三項(xiàng)使用輸入框組件周荐，用戶直接輸入即可。
Have dinner則是做了一個(gè)簡(jiǎn)易的單項(xiàng)選擇器僵娃，選擇不同的選項(xiàng)會(huì)給數(shù)值變量“dinner”賦不同的值概作，而每個(gè)選擇器的是否選中屬性也與“dinner”進(jìn)行了數(shù)據(jù)綁定。
Session使用了一個(gè)拓展組件中的單項(xiàng)選擇器默怨，在選項(xiàng)屬性欄中填入了“Morning”讯榕、“Afternoon”、“Evening”三個(gè)選項(xiàng)先壕，選擇器的確定事件中會(huì)將選中選項(xiàng)保存到session項(xiàng)對(duì)應(yīng)的輸入框內(nèi)瘩扼。
2.提交
點(diǎn)擊confirm按鈕谆甜，會(huì)先判斷各個(gè)輸入框的內(nèi)容是否為空垃僚，還有內(nèi)容類型是否正確集绰，符合提交條件后會(huì)發(fā)送給提交報(bào)名動(dòng)作組，不符合則對(duì)用戶進(jìn)行提示谆棺。
在動(dòng)作組中會(huì)調(diào)用提交報(bào)名服務(wù)栽燕，將之前傳入的數(shù)據(jù)發(fā)送給服務(wù)，如果服務(wù)返回提交成功就清空前臺(tái)界面的內(nèi)容以便下一次輸入提交改淑，并且告知用戶提交成功碍岔。至此一個(gè)提交表單的流程就完成了。
總結(jié)
可以看到數(shù)據(jù)的傳遞流程是用戶輸入朵夏，然后依次傳遞到動(dòng)作組蔼啦、服務(wù)和數(shù)據(jù)庫(kù)中，所以提交表單功能的關(guān)鍵就是動(dòng)作組和服務(wù)的參數(shù)還有數(shù)據(jù)庫(kù)的字段都做到相互對(duì)應(yīng)仰猖。
