基于Bootstrap框架的動態(tài)表單設(shè)計與實現(xiàn)

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

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

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

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

1 Bootstrap框架

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

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

2 動態(tài)表單設(shè)計思路

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

系統(tǒng)所涉及的關(guān)系數(shù)表包括表單表（Form），表單組件表（Element），組件值表（ElementValue）。表單表中的字段有Id，F(xiàn)ormName，Description，OwnerId，CreateDate。FormName表示創(chuàng)建表單的中文名稱，Description字段對欲創(chuàng)建的表單進行描述說明，OwnerId表示創(chuàng)建表單的用戶Id，CreateDate表示創(chuàng)建表單的當(dāng)前時間。表單組件表中的字段包括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è)計過程中將填寫的動態(tài)表單中元素添加到表單組件表中，使系統(tǒng)能識別什么元素存儲于什么表中。Types表是存儲常用的不同組件的類型，類型可以是：“text”，“radio”，“l(fā)abel”，“checkbox”，“select”等類型。ElementValue則用來存儲這些元素組件相應(yīng)的value值。

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

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

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

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

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

Checkbox標(biāo)簽：Checkbox，標(biāo)簽名，幾個選項，選項一，選項二

Radio標(biāo)簽：Radio，標(biāo)簽名，幾個選項，選項一，選項二

Select標(biāo)簽：Select，標(biāo)簽名，幾個選項，選項一，選項二，選項三

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

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

3.1 設(shè)計表單

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

3.2 發(fā)布表單

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

3.3 導(dǎo)出表單

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

4 結(jié)語

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

[參考文獻]

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

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