談華宇++吳昶成++邱小平

摘 要：通過分析動(dòng)態(tài)表單的實(shí)現(xiàn)原理，采用Bootstrap前端框架設(shè)計(jì)并實(shí)現(xiàn)了在線表單設(shè)計(jì)器。動(dòng)態(tài)表單設(shè)計(jì)器是將用戶待填寫表單中的各種數(shù)據(jù)項(xiàng)組成特定格式的字符串，再將字符串存儲(chǔ)到數(shù)據(jù)庫相應(yīng)的字段中以實(shí)現(xiàn)表單結(jié)構(gòu)信息保存的功能。從數(shù)據(jù)庫中讀取字段，再拼接成指定格式的字符串，并對(duì)其讀取解析還原成表單的樣式，即簡單的置換型模板引擎。

關(guān)鍵詞：Bootstrap；動(dòng)態(tài)表單；模板引擎

隨著互聯(lián)網(wǎng)的日益發(fā)展，基于瀏覽器/服務(wù)器（B/S）的開發(fā)模式已成為如今的應(yīng)用系統(tǒng)開發(fā)的主流，表單作為業(yè)務(wù)的樞紐和信息的承載體也越來越重要，然而傳統(tǒng)的表單操作存在著操作不靈活，實(shí)現(xiàn)復(fù)雜，功能簡單等缺點(diǎn)。隨著用戶對(duì)于表單需求的發(fā)展變化，固定格式的表單結(jié)構(gòu)和單一的表單元素已經(jīng)無法滿足用戶的需求，用戶對(duì)動(dòng)態(tài)表單生成的功能需求迫在眉睫[1]。因此，文章提出了利用Bootstrap前端框架實(shí)現(xiàn)設(shè)計(jì)動(dòng)態(tài)表單，用戶填寫表單內(nèi)容等功能的技術(shù)實(shí)現(xiàn)。

1 Bootstrap框架

Bootstrap是Twitter推出的一個(gè)開源的用于前端開發(fā)的工具包。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項(xiàng)目。

Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個(gè)漂亮、功能完備的網(wǎng)站。并且可以對(duì)Bootstrap中所有的CSS變量進(jìn)行修改，依據(jù)自己的需求定制代碼。

2 動(dòng)態(tài)表單設(shè)計(jì)思路

由于表單中元素的不確定性，動(dòng)態(tài)表單設(shè)計(jì)器必須能根據(jù)用戶的需要，自由的添加或刪除表單中的元素，并能通過發(fā)布給用戶填寫的表單來收集所需要的信息[2]。想要實(shí)現(xiàn)表單設(shè)計(jì)器，可以像可視化編程環(huán)境中的控件拖放一樣將已設(shè)計(jì)好的表單組件從組件庫中取出放在系統(tǒng)界面的合適位置上，最后保存生成動(dòng)態(tài)表單，表單保存成功后會(huì)在關(guān)系數(shù)據(jù)庫中自動(dòng)新建對(duì)應(yīng)的數(shù)據(jù)表，表名為該表單的拼音，用于存儲(chǔ)用戶填寫表單信息。動(dòng)態(tài)表單實(shí)現(xiàn)原理如圖1所示。

系統(tǒng)所涉及的關(guān)系數(shù)表包括表單表（Form），表單組件表（Element），組件值表（ElementValue）。表單表中的字段有Id，F(xiàn)ormName，Description，OwnerId，CreateDate。FormName表示創(chuàng)建表單的中文名稱，Description字段對(duì)欲創(chuàng)建的表單進(jìn)行描述說明，OwnerId表示創(chuàng)建表單的用戶Id，CreateDate表示創(chuàng)建表單的當(dāng)前時(shí)間。表單組件表中的字段包括Id，F(xiàn)ormId和TypeId。其中FormId表示該組件所屬的表單Id，TypeId表示表單中當(dāng)前組件的類型Id，如：Text，Radio或Checkbox。組件值表中包括的字段有Id，ElementId，ElementName，ElementValue。其中ElementId表示組件Id，記錄值為表單組件表（Element）中的主鍵Id值，ElementName表示表單中組件的name屬性值，ElementValue表示表單中組件的value屬性值。用戶在表單的設(shè)計(jì)過程中將填寫的動(dòng)態(tài)表單中元素添加到表單組件表中，使系統(tǒng)能識(shí)別什么元素存儲(chǔ)于什么表中。Types表是存儲(chǔ)常用的不同組件的類型，類型可以是：“text”，“radio”，“l(fā)abel”，“checkbox”，“select”等類型。ElementValue則用來存儲(chǔ)這些元素組件相應(yīng)的value值。

3 具體功能實(shí)現(xiàn)

利用Bootstrap框架設(shè)計(jì)出用戶界面，前臺(tái)利用特定格式的字符串傳給后臺(tái)，后臺(tái)再將字符串中需要的部分存入關(guān)系數(shù)據(jù)庫的四個(gè)表中。即用簡單的置換型模板引擎實(shí)現(xiàn)將指定模板內(nèi)容（字符串）中的特定標(biāo)記（子字符串）替換，便生成了最終需要的動(dòng)態(tài)表單。特殊格式的字符串如下：

字符串第一項(xiàng)為當(dāng)前的表單名稱

Label標(biāo)簽：label，value屬性，name屬性

Text標(biāo)簽：text，name屬性

Checkbox標(biāo)簽：Checkbox，標(biāo)簽名，幾個(gè)選項(xiàng)，選項(xiàng)一，選項(xiàng)二

Radio標(biāo)簽：Radio，標(biāo)簽名，幾個(gè)選項(xiàng)，選項(xiàng)一，選項(xiàng)二

Select標(biāo)簽：Select，標(biāo)簽名，幾個(gè)選項(xiàng)，選項(xiàng)一，選項(xiàng)二，選項(xiàng)三

然后分別存入Form表，Element元素表，ElementValue元素值表中。

默認(rèn)傳輸數(shù)據(jù)為：Checbox，復(fù)選框，3，選項(xiàng)一，選項(xiàng)二，Select，下拉菜單，3，選項(xiàng)一，選項(xiàng)二，Radio，單選框，2，選項(xiàng)一，選項(xiàng)二，label，文本框，input1，text，input1.

3.1 設(shè)計(jì)表單

管理員可以設(shè)計(jì)表單，由于表單元素的不確定性，由用戶來添加或者刪除表單中的元素。目前只可以有文本框，下拉框，單選框和多選框拖入（或點(diǎn)擊）表單，在表單區(qū)域，單擊相應(yīng)的字段會(huì)彈出屬性設(shè)置對(duì)話框，用戶填寫相關(guān)的信息后點(diǎn)擊“確定”按鈕即可保存設(shè)置；若不需要一些表單字段，可以鼠標(biāo)左鍵將相應(yīng)的字段拖到控件區(qū)域便可移除。設(shè)計(jì)好后保存，保存成功會(huì)在右下角出現(xiàn)消息提示。前臺(tái)根據(jù)特定格式的字符串，傳給后臺(tái)，然后進(jìn)行向四個(gè)表中填寫數(shù)據(jù)。

3.2 發(fā)布表單

管理員可以將設(shè)計(jì)好的表單發(fā)布給指定用戶填寫，可以選擇表單以及何人可以填寫表單等，發(fā)布后，存入Task表中，其他用戶即可在待填表單中進(jìn)行填寫提交。

3.3 導(dǎo)出表單

管理員可以將用戶填寫的表單導(dǎo)出成Excel，利用SQL語句關(guān)聯(lián)表單將信息導(dǎo)出。

4 結(jié)語

文章主要闡述了動(dòng)態(tài)表單設(shè)計(jì)器的設(shè)計(jì)思路和實(shí)現(xiàn)，基本的用戶設(shè)計(jì)表單和用戶填寫數(shù)據(jù)功能已經(jīng)實(shí)現(xiàn)。該系統(tǒng)能夠滿足用戶對(duì)信息管理系統(tǒng)中表單形式不斷變化的要求，并且通過動(dòng)態(tài)表單系統(tǒng)收集用戶填寫的信息。下一步的研究方向?yàn)橛脩舳啻翁顚懕韱魏?，表單的?shù)據(jù)遺留問題。

[參考文獻(xiàn)]

[1]洪英漢，劉竹松，龍桂和.基于SSH框架的動(dòng)態(tài)表單設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代計(jì)算機(jī)：下半月版，2009（9）：186-188.

[2]王智廣，陳濤，陳明，等.軟件開發(fā)中動(dòng)態(tài)表單的解決方案[J].內(nèi)蒙古師范大學(xué)學(xué)報(bào)：自然科學(xué)版，2010，39（5）：467-472.