freepeople性欧美熟妇, 色戒完整版无删减158分钟hd, 无码精品国产vα在线观看DVD, 丰满少妇伦精品无码专区在线观看,艾栗栗与纹身男宾馆3p50分钟,国产AV片在线观看,黑人与美女高潮,18岁女RAPPERDISSSUBS,国产手机在机看影片

正文內(nèi)容

基于web的數(shù)據(jù)收集器表單模板設(shè)計(jì)與實(shí)現(xiàn)畢業(yè)設(shè)計(jì)(編輯修改稿)

2025-06-09 23:21 本頁(yè)面
 

【文章內(nèi)容簡(jiǎn)介】 JAX交互。除此以外,JQuery提供API讓開(kāi)發(fā)者編寫(xiě)插件。其模塊化的使用方式使開(kāi)發(fā)者可以很輕松的開(kāi)發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。目前JQuery主要提供如下功能:1. 訪問(wèn)頁(yè)面框架的局部這是 DOM 模型所完成的主要工作之一,DOM獲取頁(yè)面中某個(gè)節(jié)點(diǎn)或者某一類(lèi)節(jié)點(diǎn)有固定的方法,而JQuery則大大地簡(jiǎn)化了其操作的步驟。2. 響應(yīng)事件JavaScript 有處理事件的相關(guān)方法,而引入 JQuery 之后,可以更加輕松地處理事件,而且開(kāi)發(fā)人員不再需要考慮瀏覽器兼容性問(wèn)題。3. 為頁(yè)面添加動(dòng)畫(huà)通常在頁(yè)面中添加動(dòng)畫(huà)都需要開(kāi)發(fā)大量的 JavaScript代碼,而 JQuery 大大簡(jiǎn)化了這個(gè)過(guò)程。JQuery的庫(kù)提供了大量可自定義參數(shù)的動(dòng)畫(huà)效果。4. 與服務(wù)器異步交互AJAX框架可以簡(jiǎn)化代碼的編寫(xiě),JQuery也提供了一整套AJAX相關(guān)的操作,大大方便了異步交互的開(kāi)發(fā)和使用。5. 簡(jiǎn)化常用的 JavaScript操作JQuery還提供了很多附加的功能來(lái)簡(jiǎn)化常用的 JavaScript操作,例如數(shù)組的操作、迭代運(yùn)算等 AJAX簡(jiǎn)介AJAX[4]的全稱(chēng)是Asynchronous JavaScript + XML ,AJAX不是一個(gè)技術(shù),它實(shí)際上是幾種技術(shù),每種技術(shù)都有其獨(dú)特這處,合在一起就成了一個(gè)功能強(qiáng)大的新技術(shù)。AJAX結(jié)合了Java技術(shù)、XML以及JavaScript等編程技術(shù),可以讓開(kāi)發(fā)人員構(gòu)建基于Java技術(shù)的Web應(yīng)用,并打破了使用頁(yè)面重載的慣例。 AJAX是使用客戶端腳本與Web服務(wù)器交換數(shù)據(jù)的Web應(yīng)用開(kāi)發(fā)方法。這樣,Web頁(yè)面不用打斷交互流程進(jìn)行重新加載,就可以動(dòng)態(tài)地更新。使用AJAX,用戶可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動(dòng)態(tài)的Web用戶界面。異步這個(gè)詞是指AJAX應(yīng)用軟件與主機(jī)服務(wù)器進(jìn)行聯(lián)系的方式。如果使用舊模式,每當(dāng)用戶執(zhí)行某種操作、向服務(wù)器請(qǐng)求獲得新數(shù)據(jù),Web瀏覽器就會(huì)更新當(dāng)前窗口。如果使用AJAX的異步模式,瀏覽器就不必等用戶請(qǐng)求操作,也不必更新整個(gè)窗口就可以顯示新獲取的數(shù)據(jù)。第三章 在線表單數(shù)據(jù)收集器系統(tǒng)表單模板設(shè)計(jì)用戶登陸注冊(cè)模塊流程圖如圖31所示。 圖31 登陸注冊(cè)模塊流程圖用戶訪問(wèn)網(wǎng)站,在進(jìn)行模板有關(guān)操作之前需要先登錄。若用戶已注冊(cè)則直接輸入用戶名和密碼登錄,即可查看個(gè)人模板信息并進(jìn)行所有系統(tǒng)功能操作。未注冊(cè)用戶需按照系統(tǒng)提示進(jìn)行注冊(cè)再登錄。用戶登陸成功之后,若需要發(fā)布新的模板,可通過(guò)選擇創(chuàng)建新的模板或從已有表單復(fù)制兩種方式來(lái)實(shí)現(xiàn),進(jìn)入模板編輯創(chuàng)建頁(yè)面,完成模板創(chuàng)建。其中,創(chuàng)建新的模板會(huì)跳轉(zhuǎn)到空內(nèi)容的模板編輯頁(yè)面,而從已有表單復(fù)制方式會(huì)在已選用的表單內(nèi)容基礎(chǔ)上進(jìn)行編輯修改完成模板創(chuàng)建。模板創(chuàng)建完成后需要填寫(xiě)模板設(shè)置信息,最后發(fā)布模板,等待管理員認(rèn)證。用戶的模板發(fā)布流程圖如圖32所示。圖32 模板發(fā)布流程根據(jù)系統(tǒng)的流程實(shí)現(xiàn)以及功能分析,基于web的表單數(shù)據(jù)收集器模板中心的功能結(jié)構(gòu)如圖33所示。圖33 模板中心功能結(jié)構(gòu)用戶創(chuàng)建模板可以有兩種方式。一種是可以根據(jù)需要設(shè)計(jì)新的模板,這就需要用戶在創(chuàng)建之前有必要的構(gòu)思;另一種是從已有的表單復(fù)制,這種方式是在用戶之前已創(chuàng)建成功的表單基礎(chǔ)上編輯修改成表單模板,然后發(fā)布到模板庫(kù)。 表單字段歸納在分析了眾多在線表單制作網(wǎng)站表單制作特點(diǎn)之后,系統(tǒng)歸納整理出的表單字段共18種,設(shè)計(jì)原型如圖34所示。圖34 系統(tǒng)可用表單字段 1. 單行文字在數(shù)據(jù)采集時(shí),單行文字字段應(yīng)用十分廣泛,一般用于用戶填寫(xiě)某一特定項(xiàng)文字信息,并且信息相對(duì)較短,如身份證號(hào)碼等。本系統(tǒng)單行文字字段樣式設(shè)有單行文字標(biāo)題、提示和單行文字輸入框,具體表單樣式設(shè)計(jì)如圖35所示。2. 多行文字多行文字相比于單行文字而言,用戶填寫(xiě)的信息量相對(duì)比較大,比如一段評(píng)論文字等。本系統(tǒng)多行文字字段樣式設(shè)有多行文字標(biāo)題、提示和多行文字輸入框,具體表單樣式設(shè)計(jì)如圖36所示。圖35 系統(tǒng)單行文字表單字段圖36 系統(tǒng)多行文字表單字段3. 單項(xiàng)選擇單項(xiàng)選擇是用戶表單最常用的字段之一,本系統(tǒng)提供的電子表單樣式允許用戶自由設(shè)置選項(xiàng)數(shù)量和不存在沖突的選項(xiàng)值,最大限度的滿足了用戶功能的需求,提高了系統(tǒng)靈活性。單項(xiàng)選擇字段樣式設(shè)有標(biāo)題、提示和選項(xiàng)列表,具體表單樣式設(shè)計(jì)如圖37所示。 圖37 系統(tǒng)單項(xiàng)選擇表單字段 4. 多項(xiàng)選擇多項(xiàng)選擇允許用戶自由設(shè)置選項(xiàng)數(shù)量和不存在沖突的選項(xiàng)值,并保持用戶多選的特性。多項(xiàng)選擇字段樣式設(shè)有標(biāo)題、提示和選項(xiàng)列表,具體表單樣式設(shè)計(jì)如圖38所示。 圖38 系統(tǒng)多項(xiàng)選擇表單字段 5. 圖片單選圖片單選允許用戶自由上傳一張圖片以完成特定功能,如上傳圖像。圖片單選字段樣式設(shè)有標(biāo)題、提示和圖片區(qū)域,具體表單樣式設(shè)計(jì)如圖39所示。 圖39 系統(tǒng)圖片單選表單字段6. 圖片多選圖片多選允許用戶自由上傳多張圖片以完成特定功能,如上傳連續(xù)圖冊(cè)。圖片多選字段樣式設(shè)有標(biāo)題、提示和圖片區(qū)域,具體表單樣式設(shè)計(jì)如圖310所示。 圖310 系統(tǒng)圖片多選表單字段 7. 數(shù)字?jǐn)?shù)字字段允許用戶輸入一連串?dāng)?shù)字,并最多支持16位數(shù)字。數(shù)字字段樣式設(shè)有標(biāo)題、提示和數(shù)字輸入框,具體表單樣式設(shè)計(jì)如圖311所示。 圖311 系統(tǒng)數(shù)字表單字段8. 郵箱郵箱字段允許用戶輸入郵箱地址,并保證郵箱基本格式。郵箱字段樣式設(shè)有標(biāo)題、提示和郵箱地址輸入框,具體表單樣式設(shè)計(jì)如圖312所示。圖312 系統(tǒng)郵箱表單字段9. 網(wǎng)址網(wǎng)址字段允許用戶輸入U(xiǎn)RL地址。網(wǎng)址字段樣式設(shè)有標(biāo)題、提示和網(wǎng)址輸入框,具體表單樣式設(shè)計(jì)如圖313所示。圖313 系統(tǒng)網(wǎng)址表單字段10. 地址地址字段允許用戶輸入地址,并通過(guò)下拉列表選擇省市。地址字段樣式設(shè)有標(biāo)題、提示和地址輸入框,具體表單樣式設(shè)計(jì)如圖314所示。11. 地理位置地理位置允許用戶利用網(wǎng)絡(luò)動(dòng)態(tài)獲取當(dāng)前地理位置信息。地理位置字段樣式設(shè)有標(biāo)題、提示和地址輸入框,具體表單樣式設(shè)計(jì)如圖315所示。圖314 系統(tǒng)地址表單字段圖315 系統(tǒng)地理位置表單字段12. 電話電話字段允許用戶填寫(xiě)固定電話號(hào)碼。電話字段樣式設(shè)有標(biāo)題、提示和號(hào)碼輸入框,具體表單樣式設(shè)計(jì)如圖316所示。圖316 系統(tǒng)電話表單字段13. 手機(jī)手機(jī)字段允許用戶填寫(xiě)手機(jī)號(hào)碼。手機(jī)字段樣式設(shè)有標(biāo)題、提示和號(hào)碼輸入框,具體表單樣式設(shè)計(jì)如圖317所示。 圖317 系統(tǒng)手機(jī)表單字段14. 日期日期字段允許用戶通過(guò)日期下拉框選擇填寫(xiě)日期信息。日期字段樣式設(shè)有標(biāo)題、提示和日期信息框,具體表單樣式設(shè)計(jì)如圖318所示。圖318 系統(tǒng)日期表單字段15. 時(shí)間時(shí)間字段允許用戶通過(guò)時(shí)間下拉框選擇填寫(xiě)時(shí)間信息。時(shí)間字段樣式設(shè)有標(biāo)題、提示和時(shí)間信息框,具體表單樣式設(shè)計(jì)如圖319所示。圖319 系統(tǒng)時(shí)間表單字段16. 下拉框下拉框字段允許用戶自行設(shè)定下拉列表項(xiàng)。下拉框字段樣式設(shè)有標(biāo)題、提示和下拉列表,具體表單樣式設(shè)計(jì)如圖320所示。圖320 系統(tǒng)下拉框表單字段17. 評(píng)分評(píng)分字段允許用戶自行設(shè)定評(píng)分風(fēng)格和滿分?jǐn)?shù)量。評(píng)分字段樣式設(shè)有標(biāo)題、提示和評(píng)分列表,具體表單樣式設(shè)計(jì)如圖321所示。圖321 系統(tǒng)評(píng)分表單字段18. 分節(jié)分節(jié)字段允許用戶將表單分模塊隔開(kāi)。分節(jié)字段具體表單樣式設(shè)計(jì)如圖322所示。 圖322 系統(tǒng)分節(jié)表單字段系統(tǒng)提供了18種可用字段,并通過(guò)不同功能字段組合的方式創(chuàng)建表單,減小了用戶創(chuàng)建表單的復(fù)雜度,提高了創(chuàng)建效率,改善了用戶體驗(yàn)。 創(chuàng)建新的模板用戶可以根據(jù)需要設(shè)計(jì)新的模板,進(jìn)入空內(nèi)容的模板編輯頁(yè)面。系統(tǒng)表單模板設(shè)計(jì)方式如圖323所示。圖323 系統(tǒng)表單模板創(chuàng)建方式系統(tǒng)還實(shí)現(xiàn)了根據(jù)已有表單來(lái)創(chuàng)建模板的功能,用戶可通過(guò)系統(tǒng)彈出的表單列表框選用目標(biāo)表單,如圖324所示。圖324 系統(tǒng)表單列表彈出框圖325 系統(tǒng)表單模板創(chuàng)建頁(yè)面用戶選擇目標(biāo)表單項(xiàng),系統(tǒng)跳轉(zhuǎn)到模板編輯頁(yè)面,此頁(yè)面包含了表單原有字段信息,用戶可以在此基礎(chǔ)上編輯修改,編輯頁(yè)面如圖325所示。 選用模板創(chuàng)建表單功能分析系統(tǒng)按照表單模板所實(shí)現(xiàn)的功能,以及表單內(nèi)容所屬行業(yè)不同等進(jìn)行分類(lèi),為用戶提供結(jié)構(gòu)清晰的模板分類(lèi)結(jié)構(gòu),方便用戶根據(jù)模板屬性按需查找所需的表單模板。模板分類(lèi)目錄如圖326所示。 圖326 系統(tǒng)模板分類(lèi)模板分類(lèi)結(jié)構(gòu)如圖327所示。 圖327 系統(tǒng)模板分類(lèi)目錄 系統(tǒng)需求階段通過(guò)分析其他在線表單網(wǎng)站,并通過(guò)網(wǎng)絡(luò)調(diào)查搜取素材,歸納整理覆蓋不同行業(yè)、不同功能需求的表單原型,提取出許多使用頻繁的基本表單模板并錄入系統(tǒng)模板庫(kù),如用戶信息調(diào)查表,客戶登記表,通訊錄等,供用戶參考??蛻魸M意度調(diào)查表如圖328所示。 圖328 客戶滿意度調(diào)查表 用戶通過(guò)瀏覽與需求相關(guān)的表單模板,并在找到合適的模板之后選用,在此模板基礎(chǔ)上直接編輯修改成滿足自己需求的表單,簡(jiǎn)化表單創(chuàng)建過(guò)程,提高效率及改善用戶體驗(yàn)。選用模板后的表單編輯頁(yè)面如圖329所示。 圖329 用戶選用客戶滿意度調(diào)查表后的編輯頁(yè)面系統(tǒng)賦予了用戶創(chuàng)建表單模板并發(fā)布的權(quán)限,但也需要對(duì)其操作進(jìn)行控制,否則可能導(dǎo)致惡意創(chuàng)建。為此,系統(tǒng)設(shè)立管理員并通過(guò)管理員實(shí)現(xiàn)對(duì)用戶發(fā)布的表單模板依據(jù)一定的審核規(guī)則進(jìn)行認(rèn)證,認(rèn)證通過(guò)的模板會(huì)錄入系統(tǒng)模板庫(kù),可供其他用戶訪問(wèn)。對(duì)于認(rèn)證未通過(guò)的表單模板,管理員會(huì)批回提醒創(chuàng)建者修改完善。通過(guò)這一層審核,提高了系統(tǒng)模板庫(kù)的安全度。具體審核規(guī)則包括:模板內(nèi)容是否合理、表單是否完善、是否具有可用性、是否適合其他用戶重用等。管理員登陸成功后,進(jìn)入模板管理頁(yè)面,如圖330所示。圖330 管理員模板管理頁(yè)面圖331 系統(tǒng)根據(jù)認(rèn)證狀態(tài)不同的分類(lèi)管理員通過(guò)對(duì)模板列表中的模板項(xiàng)進(jìn)行操作,設(shè)定認(rèn)證狀態(tài),完成模板認(rèn)證。系統(tǒng)前臺(tái)模板列表根據(jù)表單模板的認(rèn)證狀態(tài)分為“官方認(rèn)證”和“沙灘”兩部分,如圖331所示。通過(guò)系統(tǒng)管理員的認(rèn)證,用戶上傳的模板會(huì)發(fā)布到系統(tǒng)表單模板庫(kù)供別的用戶重用。管理員后臺(tái)管理功能的引入提高了系統(tǒng)的安全性,對(duì)系統(tǒng)的運(yùn)行與維護(hù)具有重要意義。 第四章 在線表單數(shù)據(jù)收集器表單模板功能實(shí)現(xiàn) 用戶登陸模塊此模塊體現(xiàn)用戶登錄狀態(tài),判斷用戶是否登錄,未登陸時(shí)提供用戶注冊(cè)、登陸、找回密碼功能,登陸后顯示用戶個(gè)人信息,為用戶提供查看個(gè)人模板信息、創(chuàng)建表單模板、個(gè)人中心等功能。用戶訪問(wèn)模板中心頁(yè)面,系統(tǒng)默認(rèn)顯示“廣場(chǎng)”目錄下的“熱門(mén)”子目錄頁(yè)面。如果用戶未登錄,頁(yè)面顯示出登錄狀態(tài)信息,并且不顯示“發(fā)布模板”按鈕,用戶無(wú)法完成發(fā)布模板等功能操作。只有用戶登陸成功之后才可以執(zhí)行發(fā)布模板等操作。用戶點(diǎn)擊“登陸”按鈕,觸發(fā)該按鈕綁定的JQuery的“click”事件,在“click”處理函數(shù)中通過(guò)遮罩層覆蓋當(dāng)前頁(yè)面,并在當(dāng)前頁(yè)面上層彈出登陸框,遮罩層作用是使頁(yè)面其它元素的事件不可用。通過(guò)使用彈出模態(tài)登陸框形式,避免了頁(yè)面的頻繁跳轉(zhuǎn),使用戶專(zhuān)注于當(dāng)前頁(yè)面內(nèi)容。如圖41所示。圖41 系統(tǒng)的登陸彈出框頁(yè)面登陸彈出框包括“用戶名”和“密碼”兩個(gè)輸入框,其中本系統(tǒng)用戶名為郵箱格式,為提高用戶輸入效率,通過(guò)對(duì)“用戶名”輸入框?qū)崿F(xiàn)了自動(dòng)提示功能,如圖42所示。圖42 登陸彈出框的輸入框提示頁(yè)面“用戶名”輸入框自動(dòng)提示功能JQuery代碼實(shí)現(xiàn)如下。//自動(dòng)提示功能var _list=[39。@39。,39。@39。,39。@39。,39。@39。]。$(39。username39。).autoplete({ source:function(req, resp) { var list=[]。 if (/\w+([+.]w+)*@/.test($(39。username39。).val())) { $(39。username39。).autoplete(39。close39。)。 } else { for(var index=0。index。index++) { ($(39。username39。).val()+_list[index])。 } } resp(list)。 }})。輸入框的自動(dòng)提示功能通過(guò)綁定JQuery的“blur”事件,在用戶輸入內(nèi)容時(shí),檢測(cè)輸入內(nèi)容,內(nèi)容不為空時(shí)顯示下拉列表框,列表框中自動(dòng)匹配幾種常用郵箱的后綴格式,如@,@。此外,輸入框還添加了js前端驗(yàn)證,若用戶輸入的用戶名格式不正確,提示出錯(cuò)信息。如圖43所示。圖43 登陸彈出框的js驗(yàn)證出錯(cuò)提示頁(yè)面js前端驗(yàn)證代碼實(shí)現(xiàn)如下。function changeEmailMsgBlur() { if (()!=39。39。) { if(/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/.test(())) { $(39。._msg39。).css(39。background39。,39。url(image/) top left norepeat39。).text(39。39。)。 } else { $(39。._msg39。).css(39。background39。,39。none39。).text(39。* 郵箱格式錯(cuò)誤39。)。
點(diǎn)擊復(fù)制文檔內(nèi)容
畢業(yè)設(shè)計(jì)相關(guān)推薦
文庫(kù)吧 www.dybbs8.com
備案圖片鄂ICP備17016276號(hào)-1