畢業(yè)設(shè)計--基于web的趣味測試題系統(tǒng)設(shè)計與實現(xiàn)

1、<p><b>　　畢業(yè)設(shè)計（論文）</b></p><p>　　題 目： 基于Web的趣味測試題系統(tǒng)設(shè)計與實現(xiàn) </p><p>　　專 業(yè)： 計算機科學與技術(shù)（軟件開發(fā).NET） </p><p>　　院 （系）：

2、 軟件與應(yīng)用科技學院 </p><p>　　完成時間： 2017年6月2日 </p><p>　　2017年 6 月 2 日</p><p><b>　　摘要</b></p><p

3、>　　隨著移動互聯(lián)網(wǎng)端的不斷發(fā)展趨向于成熟，越來越多的工作都離不開移動互聯(lián)網(wǎng)端，移動互聯(lián)網(wǎng)端加速了各種工作的進程，各種各樣的測試、問卷調(diào)查等一些收集一些數(shù)據(jù)，可以挖掘出用戶的個人喜好、情感、狀態(tài)等等一系列信息。這些測試趣味性強，對用戶具有吸引性?；赪eb的趣味測試題系統(tǒng)是為用戶提供多種不同類別的趣味測試，讓用戶能夠通過不同測試（文字測試，游戲測試，圖片測試），測試出自己的不同性格或其他開心搞笑的事物，為其他事業(yè)，例如醫(yī)療事業(yè)，網(wǎng)

4、絡(luò)推廣事業(yè)等提供一些趣味測試，使之更容易采集信息或推廣一些事物。因此制作一個趣味測試題系統(tǒng)顯得尤為必要。</p><p>　　本系統(tǒng)主要講述了基于Web的趣味測試題系統(tǒng)的基本功能和使用前端技術(shù)和ASP.NET技術(shù)，使用了jQuery框架，Visual Studio2015進行編譯，用SQL Server數(shù)據(jù)庫進行數(shù)據(jù)處理，用Adobe Photoshop CC 2017對一些頁面圖標進行美工以及其他相關(guān)開發(fā)工具來

5、進行配合開發(fā)，其系統(tǒng)的主要功能實現(xiàn)了loading預(yù)加載、選項類測試、游戲類測試、屏幕自適應(yīng)、橫屏處理、夜間模式用戶注冊、用戶登錄、用戶信息查看等基本功能。并且網(wǎng)頁能夠正常運行，頁面美觀，各個頁面交互性良好。在整個設(shè)計中基本上運用JavaScript實現(xiàn)相應(yīng)的效果和交互，使用Html5完成動畫效果，使用C#和SQL Server完成數(shù)據(jù)類交互。</p><p>　　關(guān)鍵詞:趣味測試 Web前端 H5小游戲 預(yù)加載

6、</p><p><b>　　ABSTRACT</b></p><p>　　With the development of mobile Internet side constantly tend to mature,more and more work is inseparable from the mobile Internet, mobile Internet

7、end accelerated the process of all kinds of work, all kinds of test, some to collect some data, such as questionnaire survey, can dig up state, emotion, and so on a series of user's personal preference information. t

8、hese test procedures, is attracted to the user. interesting test system based on Web is to provide users with a variety of different cate</p><p>　　This system is mainly about the basic function of interestin

9、g test system based on Web and ASP.NET and use the front-end technology, USES the jQuery framework, Visual Studio2015 compile, data processing, using SQL Server database using Adobe Photoshop CC for some page icon 2017 a

10、rtists, as well as other related development tools to coordinate development, the main function of the system has realized the loading preloading, option test, games, test, screen, adaptive, landscape, night mode user re

11、</p><p>　　Keywords:Taste test Web front-end H5 little game preloading</p><p><b>　　目錄</b></p><p><b>　　摘要I</b></p><p>　　ABSTRACTI</p>

12、;<p><b>　　1 緒論1</b></p><p>　　1.1 課題背景1</p><p>　　1.2 課題目的1</p><p>　　1.3 研究的現(xiàn)狀1</p><p>　　1.3.1 國內(nèi)研究現(xiàn)狀1</p><p>　　1.3.2 國外研究現(xiàn)狀1</p&

13、gt;<p>　　1.4 課題概述2</p><p>　　1.5 相關(guān)技術(shù)軟件概述2</p><p>　　1.5.1 Web前端開發(fā)技術(shù)2</p><p>　　1.5.2 Visual Studio 20152</p><p><b>　　2 系統(tǒng)分析3</b></p><p&

14、gt;　　2.1 系統(tǒng)可行性分析3</p><p>　　2.1.1 技術(shù)及開發(fā)方法可行性3</p><p>　　2.1.2 管理可行性3</p><p>　　2.1.3 經(jīng)濟可行性3</p><p>　　2.2 系統(tǒng)需求分析3</p><p>　　2.2.1 功能分析3</p><p&g

15、t;　　2.2.2 需求分析4</p><p>　　2.2.3 性能分析4</p><p>　　2.3 業(yè)務(wù)流程分析5</p><p><b>　　3 系統(tǒng)設(shè)計6</b></p><p>　　3.1 系統(tǒng)物理環(huán)境配置6</p><p>　　3.2 系統(tǒng)規(guī)劃6</p>&l

16、t;p>　　3.3 系統(tǒng)總體設(shè)計6</p><p>　　3.4 系統(tǒng)詳細設(shè)計7</p><p>　　3.4.1 loading預(yù)加載模塊設(shè)計7</p><p>　　3.4.2 登錄模塊設(shè)計8</p><p>　　3.4.3 首頁模塊設(shè)計9</p><p>　　3.4.4 測試頁模塊設(shè)計9</p&

17、gt;<p>　　3.5 數(shù)據(jù)庫設(shè)計11</p><p>　　3.5.1 E-R圖11</p><p>　　3.5.2 數(shù)據(jù)庫概要設(shè)計11</p><p>　　3.5.3 詳細表設(shè)計12</p><p>　　4 系統(tǒng)的實現(xiàn)13</p><p>　　4.1 系統(tǒng)技術(shù)實現(xiàn)13</p>

18、<p>　　4.2 模塊實現(xiàn)13</p><p>　　4.2.1 loading模塊實現(xiàn)13</p><p>　　4.2.2 登錄注冊模塊實現(xiàn)14</p><p>　　4.2.3 首頁模塊實現(xiàn)14</p><p>　　4.2.4 測試游戲頁實現(xiàn)15</p><p>　　4.2.5 其他功能實現(xiàn)1

19、6</p><p><b>　　5 系統(tǒng)測試19</b></p><p>　　5.1 系統(tǒng)測試方法19</p><p>　　5.2 系統(tǒng)測試的目的和原則19</p><p>　　5.3 系統(tǒng)測試19</p><p>　　6 總結(jié)與展望21</p><p><

20、b>　　6.1 總結(jié)21</b></p><p><b>　　6.2 展望21</b></p><p><b>　　參考文獻22</b></p><p><b>　　致謝23</b></p><p><b>　　1 緒論</b>&

21、lt;/p><p><b>　　1.1 課題背景</b></p><p>　　隨著不斷發(fā)展成熟的移動互聯(lián)網(wǎng)端，從移動端推廣業(yè)務(wù)實行調(diào)查測試，變得尤為重要，目前存在于移動互聯(lián)網(wǎng)端的用戶逐年增長，同時越來越多的工作都離不開移動互聯(lián)網(wǎng)端。移動互聯(lián)網(wǎng)端也加速了各種工作的進程，是工作變得輕松、快捷。移動互聯(lián)網(wǎng)比在電腦端的用戶量更大也更便捷，網(wǎng)頁端比較App更加快捷，無需下載也不會占

22、用內(nèi)存，現(xiàn)在各種各樣的測試、問卷調(diào)查等用來測試出用戶的個人喜好、情感、狀態(tài)等等一系列信息來，使用戶得到自己想要的信息。本系統(tǒng)頁面美觀、交互性強和不錯的體驗，同時趣味性測試趣味性強，對用戶更具有吸引力。因此一個手機網(wǎng)頁端的趣味測試題系統(tǒng)擁有存在的意義。我采用Html中的div加css編輯頁面，更加快捷，采用JavaScript和Html5動畫進行頁面交互[1]，使用SQL Server數(shù)據(jù)庫，完全支持Web，更加快捷。</p>

23、<p>　　基于Web的趣味測試題系統(tǒng)，為用戶提供趣味性的測試，好用好玩，可為教育事業(yè)、醫(yī)療事業(yè)等提供所需的推廣和測試。</p><p><b>　　1.2 課題目的</b></p><p>　　目前國內(nèi)互聯(lián)網(wǎng)用戶突破7億，而移動互聯(lián)網(wǎng)的用戶總數(shù)幾乎是互聯(lián)網(wǎng)用戶2倍，因此各行各業(yè)與互聯(lián)網(wǎng)的交互尤為重要，而移動互聯(lián)網(wǎng)能提供更多的用戶量，對于一些需要推廣傳播

24、的事物顯得更加重要?，F(xiàn)在是大數(shù)據(jù)時代，信息的采集獲取也需要大力的推廣和傳播才能獲得跟多。而基于Web的趣味測試題系統(tǒng)，存在于移動互聯(lián)網(wǎng)端，因其在移動端傳播，優(yōu)美的畫面，趣味的測試，人性化的交互，使信息的推廣傳播速度將變的更快，更加便捷，用戶量更大，同時能為個個所需行業(yè)提供不同推廣和測試，對于其他行業(yè)來進行用戶的獲取和產(chǎn)品的推廣不失為一個很好的途徑。因此我想做一個基于Web的趣味測試題系統(tǒng)。</p><p><

25、;b>　　1.3 研究的現(xiàn)狀</b></p><p>　　1.3.1 國內(nèi)研究現(xiàn)狀</p><p>　　在國內(nèi)WebApp屬于近年來新興的。WebApp使用的技術(shù)是Html或Html5編輯前端界面，使用css樣式表編輯頁面樣式，使用JavaScript進行頁面交互[2]，使用技術(shù)ASP.NET編譯其他功能，些相對于電腦端、跨平臺有很大的優(yōu)勢，它可以跨平臺，有瀏覽器就能使用

26、，很便捷，且移動瀏覽器對Html5的支持優(yōu)于桌面瀏覽器，瀏覽器對Html5具有良好兼容性[3]。目前國內(nèi)移動互聯(lián)網(wǎng)端用戶眾多，幾近互聯(lián)網(wǎng)用戶的二倍，用戶眾多，移動設(shè)備應(yīng)用最廣，對于發(fā)展WebApp有很好的優(yōu)勢。微信端Html5小游戲的成功就說明國內(nèi)WebApp的高速發(fā)展，關(guān)于微信的實用性、移動端支付就力壓國外。</p><p>　　1.3.2 國外研究現(xiàn)狀</p><p>　　在國外，因為

27、移動互聯(lián)網(wǎng)發(fā)展的早，關(guān)于WebApp的技術(shù)、知識都比較全面[4]。相關(guān)技術(shù)發(fā)展的已經(jīng)很先進，WebApp頁面內(nèi)容都比較優(yōu)美，框架和結(jié)構(gòu)都比較規(guī)范，但相關(guān)WebApp功能方面都比較單一，支付功能、聊天功能、購物功能、視頻通話功能都是一個獨立Webpp，相比國內(nèi)一個微信就包含以上全部功能，較之國外很人性化，即使一些技術(shù)并沒有達到國際先進水平，但實用性較之國外很強大實用[5]。國外的趣味測試題多和大數(shù)據(jù)和心理測試相結(jié)合。</p>

28、<p><b>　　1.4 課題概述</b></p><p>　　基于Web的趣味測試題系統(tǒng)，是一個基于Web的移動端WebApp，采用Html5，css3布置頁面內(nèi)容，用JavaScript，ASP.NET技術(shù)進行頁面的交互和功能的實現(xiàn)，使用Jquery框架簡化編譯難度，使用SQL Server數(shù)據(jù)庫進行數(shù)據(jù)操作。</p><p>　　主要功能是為用戶提

29、供多種多樣的趣味測試，趣味小游戲，以此來讓用戶了解自己的隱性信息，也可為其他需要推廣功能和調(diào)查功能的各行各業(yè)提供支持，小測試和小游戲會通過用戶得分推斷出不同結(jié)果。其他基礎(chǔ)功能包括loading預(yù)加載、屏幕自適應(yīng)、橫屏處理、包括夜間模式、登錄功能、注冊功能、個人信息查看功能等等[6]。</p><p>　　1.5 相關(guān)技術(shù)軟件概述</p><p>　　基于Web的趣味測試題系統(tǒng)，使用前端技術(shù)

30、和ASP.NET技術(shù)，使用了jQuery框架，Visual Studio2015進行編譯，用SQL Server數(shù)據(jù)庫進行數(shù)據(jù)處理[7]，用Adobe Photoshop CC 2017進行頁面設(shè)計和制圖。</p><p>　　1.5.1 Web前端開發(fā)技術(shù)</p><p>　　運用HTML和css布置頁面內(nèi)容，JavaScript來實現(xiàn)交互，配合ASP.NET技術(shù)實現(xiàn)功能，運用Firef

31、ox等瀏覽器進行調(diào)試，可以使用多種框架，符合W3C準則，使用js配合animation動畫完成頁面動畫交互。</p><p>　　1.5.2 Visual Studio 2015</p><p>　　Visual Studio 2015能滿足前端后臺數(shù)據(jù)庫的同時編譯，代碼編輯支持SQL、C#、HTML、css和JavaScript，完全滿足WebAPP的開發(fā)條件，對系統(tǒng)進行調(diào)試可以直接顯示

32、出問題代碼處[8]。</p><p><b>　　2 系統(tǒng)分析</b></p><p>　　2.1 系統(tǒng)可行性分析</p><p>　　2.1.1 技術(shù)及開發(fā)方法可行性</p><p>　　基于Web的趣味測試題系統(tǒng)，是基于Web的Asp.net程序，采用Html5，css3布置頁面內(nèi)容，用JavaScript，ASP.

33、NET技術(shù)進行頁面的交互和功能的實現(xiàn)，使用Jquery框架簡化編譯難度[9]，使用SQL Server數(shù)據(jù)庫進行數(shù)據(jù)操作。</p><p>　　Html5，css3，JavaScript能夠很好的完成前端所需的絕大多數(shù)功能，并能提供便捷、優(yōu)美的畫面。Css3可以再不改變其他系統(tǒng)功能和不影響其他句子語義情況下，為程序員提供更多的選擇來對提升頁面的美觀度[10]。同時Html的存在，程序員可以直接在網(wǎng)頁查看代碼，并進

34、行調(diào)試，更容易找出錯誤，很方便，并可以通過JavaScript和Html頁面的配合做到屏幕自適應(yīng)瀏覽器，SQL Server配合Web的數(shù)據(jù)庫，兩者的交互性很好[11]。因此在技術(shù)上可行。</p><p>　　2.1.2 管理可行性</p><p>　　本系統(tǒng)基于Web所建，html5編輯頁面，保證了可擴展性強，對于頁面的管理很方面，后期頁面的增加刪除修改很方面、可維護性強、費用低。使用J

35、avaScript進行頁面交互，操作html 的dom很方便。數(shù)據(jù)的處理都由前臺完成處理傳給后臺，數(shù)據(jù)的處理通過SQL Server數(shù)據(jù)庫[12]。SQL Server和Visual Studio2015關(guān)聯(lián)性良好支持度高，可以良好的應(yīng)對后臺對數(shù)據(jù)庫的密集操作[13]。Html機構(gòu)標準、css表現(xiàn)標準、JavaScript行為標準，相互分離互補影響，前期制作后期維護都狠方便，因此在管理上可行。</p><p>　

36、　2.1.3 經(jīng)濟可行性</p><p>　　本系統(tǒng)使用WebApp開發(fā)成本低，前端編譯頁面，后期維護更新低。使用HTML、css和JavaScript和所使用的開發(fā)軟件均屬于開源，因此經(jīng)濟上可行。</p><p>　　2.2 系統(tǒng)需求分析</p><p>　　2.2.1 功能分析</p><p>　　基于Web的趣味測試題系功能模塊，分別是

37、用戶注冊登錄、夜間模式、用戶分別進行文字類測試、圖片類測試和游戲類測試、用戶個人信息查詢、用戶測試記錄查詢。如圖2.1功能需求圖所示。</p><p>　　圖2.1 功能需求圖</p><p>　　2.2.2 需求分析</p><p>　　基于Web的趣味測試題系統(tǒng)的功能需求包括以下幾個方面：</p><p>　　登錄模塊：后臺將輸入的用戶名

38、和密碼與數(shù)據(jù)庫進行對比確認是否正確[14]，如果用戶不存在，就去注冊。可以跳過登錄或跳過注冊直接進入主頁，需要注冊就輸入注冊信息，錄入數(shù)據(jù)庫，滿足輸入條件，既注冊成功，可登陸主頁[15]。</p><p>　　Loading預(yù)加載模塊：使用loading預(yù)加載對頁面進行預(yù)加載，防止網(wǎng)速過慢情況下出現(xiàn)的頁面不穩(wěn)地狀況，首先監(jiān)測頁面是否第一次加載，如果第一次加載就進行l(wèi)oading預(yù)加載模塊，loading頁面最先顯

39、示，其他頁面不顯示，loading頁面動態(tài)顯示當前加載進度，loading預(yù)加載動畫進行平滑處理，不會因網(wǎng)速慢卡死或因網(wǎng)速過快一閃而過。</p><p>　　頁面處理模塊：使用css和JavaScript的緊密配合，完成頁面的交互和功能，橫屏提示，當頁面處于橫屏狀態(tài)使進行橫屏提示。頁面自適應(yīng)，當頁面大小發(fā)生變化后，頁面內(nèi)容將等比例縮放，內(nèi)容不會發(fā)生變形。夜間模式，點擊夜間模式觸發(fā)屏幕亮度變?yōu)橐归g模式，夜間模式有兩

40、個等級。</p><p>　　個人中心模塊：用戶或游客可以再首頁側(cè)邊欄進入個人中心，在個人中心游客可以登錄，用戶可以在此查看自己的個人信息，游客可以在個人中心登錄，同時也可以將頁面調(diào)成夜間模式。</p><p>　　測試模塊：用戶和游客進行測試，在文字類測試中，沒選擇一個選項都將獲得不同的分數(shù)，如果當前題不是最后一題，則分數(shù)累加并進入下一題，如果當前題是最后一題，則根據(jù)總分顯示不同結(jié)果。在

41、游戲類測試里，每選對一題或完成一關(guān)，則獲得一定分數(shù)，選錯失敗不得分，選題選到最后一題，分數(shù)統(tǒng)計顯示結(jié)果，關(guān)卡類失敗既結(jié)束游戲，根據(jù)當前得分顯示結(jié)果。</p><p>　　2.2.3 性能分析</p><p>　　基于Web的趣味測試題系統(tǒng)需要滿足以下性能：</p><p>　　外觀性要求：本系統(tǒng)使用Html5、css3和Photoshop，所以頁面美觀尤為重要，并且

42、需要簡潔，操作簡單，頁面轉(zhuǎn)換要轉(zhuǎn)換融洽。</p><p>　　數(shù)據(jù)要求：對于賬號和密碼，類型和是否匹配，必須嚴格要求，不能出現(xiàn)差錯。</p><p>　　測試要求：測試需要擁有趣味性、可玩性。</p><p>　　2.3 業(yè)務(wù)流程分析</p><p>　　業(yè)務(wù)流程圖見圖2.2，輸入網(wǎng)址，網(wǎng)頁進行自適應(yīng)當前頁面大小，并進行橫屏處理，同時進入lo

43、ading預(yù)加載頁，預(yù)加載完畢，進入登錄頁，注冊登錄成功或者成為游客，進入先導頁（可招標廣告），2s后進入主頁，用戶可在個人中心，查看個人信息，可調(diào)節(jié)夜間模式。在主頁選擇不同測試模式，進入不同測試，進行測試，在測試頁每道測試可選擇不同的選項，同時獲得分數(shù)，測試完畢后根據(jù)分數(shù)顯示結(jié)果，返回主頁，用戶可選擇不同測試題頁面進行多種不同的趣味測試。測試可以是趣味測試，趣味推廣，趣味調(diào)查。</p><p>　　圖2.2 業(yè)

44、務(wù)流程圖</p><p><b>　　3 系統(tǒng)設(shè)計</b></p><p>　　3.1 系統(tǒng)物理環(huán)境配置</p><p>　　WebApp可跨平臺，在Android和ios等不同系統(tǒng)的瀏覽器中運行，在SQL Server數(shù)據(jù)庫內(nèi)需設(shè)置成SQL Server身份驗證，網(wǎng)頁調(diào)試功能開啟。</p><p>　　電腦配置，處理器

45、Intel(R)Core(TM)i5-3337U CPU @ 1.8GHz，內(nèi)存4GB，系統(tǒng)類型64位操作系統(tǒng)，X64處理器，Windows10系統(tǒng)，安裝數(shù)位板控件，鏈接外部數(shù)位板。</p><p><b>　　3.2 系統(tǒng)規(guī)劃</b></p><p>　　本系統(tǒng)采用Html5和css3進行頁面設(shè)計，用JavaScrip進行頁面交互和功能實現(xiàn)，采用JavaScript

46、和后臺同時對數(shù)據(jù)進行處理，后臺將數(shù)據(jù)存入調(diào)出數(shù)據(jù)庫。</p><p>　　本系統(tǒng)為用戶提供不同趣味測試，用戶或游客與本應(yīng)用進行互動，用戶進行不同趣味測試獲取不同趣味結(jié)果。</p><p>　　用戶進入系統(tǒng)后，先進入loading頁面，loading頁面完成后進入登錄頁面，登錄成功或跳過的登陸后即可進入主頁，在主頁可以點開側(cè)邊欄進入個人中心也可以調(diào)節(jié)夜間模式，在個人中心可也查看個人信息和查看

47、個人測試記錄，在主頁可以選擇三個測試方向來進行測試，進入不同測試分頁后開始選擇要測試的題或游戲，選擇測試題，測試結(jié)束后可以選擇返回首頁。</p><p>　　3.3 系統(tǒng)總體設(shè)計</p><p>　　系統(tǒng)總體設(shè)計見圖3.1，進入loading進行預(yù)加載，預(yù)加載完畢后進入登錄頁，用戶選擇注冊登錄或跳過登錄后，進入主頁主頁顯示，主頁可以點開內(nèi)包含側(cè)邊欄頁、文字類測試頁、圖片類測試頁、游戲類測試

48、頁。</p><p>　　側(cè)邊欄頁包含個人中心頁，設(shè)置頁，夜間模式按鈕，三個類測試頁可進入測試頁和游戲頁，測試頁和游戲頁顯示不同的趣味測試和不同的小游戲，趣味測試或游戲結(jié)束后顯示結(jié)果頁。</p><p>　　個人中心包括用戶個人信息頁和用戶測試記錄頁，用戶測試記錄頁包括測試記錄詳細頁。</p><p>　　游戲類測試和文字類測試，包含測試內(nèi)容頁和結(jié)果頁，游戲類測試還

49、單獨包含規(guī)則頁。測試頁內(nèi)容為題目動畫交互。</p><p>　　圖3.1 系統(tǒng)總體設(shè)計圖</p><p>　　3.4 系統(tǒng)詳細設(shè)計</p><p>　　3.4.1 loading預(yù)加載模塊設(shè)計</p><p>　　loading預(yù)加載模塊設(shè)計見圖3.2，進入loading預(yù)加載頁，js判斷頁面是否第一次加載，不是第一次加載，直接跳過預(yù)加載進入

50、登錄頁，否則開始預(yù)加載預(yù)加載頁，預(yù)加載頁加載完畢先顯示預(yù)加載頁并開始預(yù)加載除預(yù)加載頁外的全部頁面內(nèi)圖片。</p><p>　　loading動畫表示預(yù)加載進度，loading動畫結(jié)束即加載完畢，loading動畫變化速度因網(wǎng)速過慢或忽快忽慢而變化，為應(yīng)對此類變化，動畫實施平滑loading處理后進行顯示。</p><p>　　平滑loading設(shè)施合理時間為3秒，根據(jù)合理時間、當前速度、上

51、次速度來計算合理速度，速度過慢平滑不會使動畫直接卡死（除因頁面錯誤而導致的動畫停止），速度過快平滑處理后是速度保持在合理速度，速度非?？靹t，則直接控制loading動畫速度為強制顯示三秒。</p><p>　　當預(yù)加載動畫播放結(jié)束，則除預(yù)加載頁外的所有圖片預(yù)加載結(jié)束，預(yù)加載頁隱藏，顯示登錄頁。</p><p>　　圖3.2 loading預(yù)加載設(shè)計圖</p><p>

52、;　　3.4.2 登錄模塊設(shè)計</p><p>　　登錄模塊的設(shè)計見圖3.3，用戶loading預(yù)加載結(jié)束后，可以選擇是否跳過登錄直接進行趣味測試，不跳過的話后臺將輸入的用戶名和密碼與數(shù)據(jù)庫進行對比確認是否正確，如果用戶不存在，就去注冊。</p><p>　　可以跳過注冊直接進入主頁，需要注冊就輸入注冊信息，錄入數(shù)據(jù)庫，滿足輸入條件，即輸入不能為空，名字必須為漢字或英文，年齡只能輸入2為的

53、數(shù)字，然后注冊成功，可登陸主頁，直接跳過更加方便快捷。</p><p>　　對于只想測試的用戶來說，減少了測試時間，本系統(tǒng)主要進行推廣和調(diào)查的趣味測試題和小游戲，因此是否為用戶并無關(guān)緊要。</p><p>　　用戶登陸成功后，頁面?zhèn)饔脩裘到o下一個頁面即首頁，首頁獲得用戶名值之后在做其他相關(guān)處理。</p><p>　　圖3.3 登錄模塊的實現(xiàn)</p>

54、<p>　　3.4.3 首頁模塊設(shè)計</p><p>　　首頁模板設(shè)計見圖3.4，首頁可以進入所有頁面，可打開側(cè)邊欄進入個人中心查看個人信息，在側(cè)邊欄調(diào)節(jié)夜間模式，游客可進入個人中心進行登錄，可在主頁選擇不同測試頁面，然后選擇不同測試題，不同的測試頁面包括文字類測試、圖片類測試、游戲類測試。首頁模塊是本系統(tǒng)的中心轉(zhuǎn)接頁。鏈接了登錄頁和測試頁，登錄后進入主頁，測試頁返回主頁。</p><

55、;p>　　圖3.4 首頁模塊設(shè)計</p><p>　　3.4.4 測試頁模塊設(shè)計</p><p>　　測試頁模板設(shè)計見圖3.5，進入測試頁面，開始測試，在測試中途也可以選擇返回首頁，返回首頁時重置測試進度，進行測試選擇選項，選擇后顯示下一題，如果選擇到最后一題，則出現(xiàn)結(jié)果頁。測試模塊通過記分推算結(jié)果，讀題選擇答案，不同答案對應(yīng)不同分數(shù)，選擇后進入下一題，若當前題目為最后一題，選擇答案

56、后，結(jié)束測試顯示結(jié)果頁。</p><p>　　圖3.5 測試頁模塊設(shè)計圖</p><p>　　測試頁邏輯見圖3.6，測試頁有文字類測試和游戲類測試。文字類測試有一個選擇或多個選擇，一個選擇的文字類測試單個選項既對應(yīng)某個答案。多個選擇的情況下，選擇不同選項獲得不同分數(shù)，不同分數(shù)對應(yīng)不同結(jié)果。進入文字類測試后，選擇選項，獲得分數(shù)，進入下一題，分數(shù)累加，若就一個選項則直接進入結(jié)果頁，多個選項，則

57、依次選擇，分數(shù)疊加計算推出結(jié)果，結(jié)果顯示選擇返回首頁結(jié)束。游戲類測試根據(jù)游戲規(guī)則，每完成一關(guān)，正確得一分，錯誤不得分，關(guān)卡完結(jié)游戲計算得分顯示結(jié)果結(jié)束游戲，游戲結(jié)束后可以選擇返回首頁。</p><p>　　圖3.6 測試頁邏輯</p><p><b>　　3.5 數(shù)據(jù)庫設(shè)計</b></p><p>　　趣味測試題系統(tǒng)，數(shù)據(jù)庫的設(shè)計主要是添加和查

58、詢，登錄判斷查詢數(shù)據(jù)，注冊信息的添加，個人信息的顯示。</p><p>　　3.5.1 E-R圖</p><p>　　系統(tǒng)E-R圖見圖3.7，用戶擁有用戶名、密碼、名字、年齡和ID，可以操作測試題，擁有測試記錄，測試題擁有測試題名、A評價、B評價、C評價、D評價，測試記錄擁有用戶名、測試題名、測試評價、結(jié)果得分，記錄測試題記錄，當用戶登陸后進入個人中心即可點擊個人信息進行查看個人信息，同時

59、用戶擁有測試記錄和可以操作測試題來進行游戲測試，用戶也可以在個人中心點擊測試記錄查看以往測試，在測試記錄頁點擊詳情即可查看測試的詳情內(nèi)容。</p><p>　　圖3.7 系統(tǒng)E-R圖</p><p>　　3.5.2 數(shù)據(jù)庫概要設(shè)計</p><p>　　表3.1數(shù)據(jù)設(shè)計由基于Web的趣味測試題系統(tǒng)功能需求所設(shè)計。建立表時使用SQL Server能滿足本系統(tǒng)對數(shù)據(jù)庫的所

60、需技術(shù)。SQL Server也能和Visual Studio2015平臺進行很好的交互。數(shù)據(jù)設(shè)計有三個表分別為用戶所有信息，測試題全部信息，用戶的測試記錄。</p><p><b>　　表3.1 數(shù)據(jù)設(shè)計</b></p><p>　　3.5.3 詳細表設(shè)計</p><p>　　表3.2用戶信息表，表內(nèi)存放用戶所有信息，個人中心查看用戶信息查看本

61、表。</p><p>　　表3.2 用戶信息表</p><p>　　表3.3測試題表，test表存放游戲信息，配合用戶查看測試分析和查看自己的測試記錄。</p><p><b>　　表3.3 測試題表</b></p><p>　　表3.4用戶測試記錄表，userRecord表存放用戶所完成過的測試、所完成過得測試的結(jié)果和

62、對測試題進行的評論，用于用戶查看自己的測試記錄，和test表配合顯示測試結(jié)果。</p><p>　　表3.4 用戶測試記錄表</p><p><b>　　4 系統(tǒng)的實現(xiàn)</b></p><p>　　4.1 系統(tǒng)技術(shù)實現(xiàn)</p><p>　　基于Web的趣味測試題系統(tǒng)使用WebApp和ASP.NET開發(fā)技術(shù)，使用Adobe

63、 Photoshop CC 2017進行對頁面的美工設(shè)計制作，Visual Studio2015平臺上進行代碼編輯，運用JavaScript實現(xiàn)相應(yīng)的動畫效果、頁面交互和功能實現(xiàn)，使用了jQuery框架使代碼編輯更加簡潔，使用Html5完成動畫效果使頁面更加流暢。使用SQL Server數(shù)據(jù)庫，對數(shù)據(jù)進行相關(guān)功能需求的處理。</p><p>　　基于Web的趣味測試題系統(tǒng)根據(jù)需求分為登錄注冊能，用戶信息查詢修改功

64、能，橫屏處理，頁面自適應(yīng)，夜間模式，個人信息查看功能，測試功能，小游戲測試功能以及游戲數(shù)據(jù)獲取統(tǒng)計分析功能。頁面之間的交互，均又js完成，不用的頁面全部隱藏，當觸摸到某個DOM節(jié)點時，如果需要頁面顯示，觸發(fā)觸屏事件，事件內(nèi)在做其他需求的判斷。</p><p><b>　　4.2 模塊實現(xiàn)</b></p><p>　　4.2.1 loading模塊實現(xiàn)</p>

65、;<p>　　loading預(yù)加載圖見圖4.1，第一次進入頁面時，顯示預(yù)加載界面，預(yù)加載界面對圖片進行預(yù)加載，預(yù)加載過程中，預(yù)加載進度顯示為瓶內(nèi)液體的變化，預(yù)加載速度顯示為瓶內(nèi)液體的下降速度，動畫經(jīng)過平滑處理，不會因網(wǎng)速的快慢而一閃而過或看著下降不自然，預(yù)加載頁進行了雙重預(yù)加載，先對預(yù)加載頁進行了預(yù)加載，不會出現(xiàn)，預(yù)加載頁半天不顯示的情況，在預(yù)加載結(jié)束后平滑進入登錄頁。如果不是第一次進入則直接跳過預(yù)加載頁。</p&g

66、t;<p>　　圖4.1 loading預(yù)加載圖</p><p>　　4.2.2 登錄注冊模塊實現(xiàn)</p><p>　　登錄注冊模塊見圖4.2 登錄頁和注冊頁，在登錄頁輸入用戶名和密碼，點擊登錄按鈕觸發(fā)登陸事件，后臺調(diào)用數(shù)據(jù)庫進行查詢對比，成功跳轉(zhuǎn)主頁，失敗提示，跳過登陸讓方便只想進行測試的游客，點擊注冊跳轉(zhuǎn)注冊頁面。注冊頁面跳過注冊，同方便游客，注冊登錄上傳數(shù)據(jù)至數(shù)據(jù)庫。&

67、lt;/p><p>　　圖4.2 登錄頁和注冊頁</p><p>　　4.2.3 首頁模塊實現(xiàn)</p><p>　　首頁模塊見圖4.3主頁和側(cè)邊欄，首頁可以進入所有頁面，可打開側(cè)邊欄進入個人中心查看個人信息，也可查看測試游戲的記錄，在記錄測試頁可以點開詳細結(jié)果頁來查看詳細結(jié)果，側(cè)邊欄還包括夜間模式。游客可進入個人中心進行登錄?？稍谥黜撨x擇不同測試頁面，頁面下方的三個圖標

68、可以進入不同頁面，然后選擇不同測試題。</p><p>　　圖4.3 主頁和側(cè)邊欄</p><p>　　4.2.4 測試游戲頁實現(xiàn)</p><p>　　文字類設(shè)計：文字類設(shè)計見圖4.4文字類測試，在文字類測試中，當點擊選項后，點擊的選項所屬的題隱藏，下一題的選項依次動畫進入，每選擇一個選項都將獲得不同的分數(shù)，如果當前題不是最后一題，則分數(shù)累加并進入下一題，如果當前題

69、是最后一題，則根據(jù)總分顯示不同結(jié)果，然后可以點擊頁面左上角箭頭返回首頁，在測試中途返回首頁，則本題刷新，下次進入題目將重新開始。</p><p>　　圖4.4 文字類測試</p><p>　　游戲類設(shè)計：游戲類見圖4.5游戲類測試。游戲一、在游戲類測試里，進入游戲頁面彈出游戲規(guī)則頁，點擊開始規(guī)則頁隱藏游戲開始，游戲開始后，測試頁面內(nèi)頁可再次點開查看游戲規(guī)則，每選中一個選項，選擇錯誤，動畫提

70、示錯誤，選擇正確，動畫提示正確，游戲進行每選對一題或完成一關(guān)，則獲得一定分數(shù)，選錯失敗不得分，選題不結(jié)束，則分數(shù)一直累加，選題選到最后一題，分數(shù)統(tǒng)計顯示結(jié)果，關(guān)卡類失敗既結(jié)束游戲，根據(jù)當前得分顯示結(jié)果。</p><p>　　圖4.5 游戲類測試</p><p>　　4.2.5 其他功能實現(xiàn)</p><p>　　夜間模式，見圖4.6夜間模式，在側(cè)邊欄點擊夜間模式進入夜

71、間模式，夜間模式有兩個等級，當點擊夜間模式的時候，js動態(tài)創(chuàng)建一個寬高均為零固定在左上角的Div，調(diào)節(jié)Div的外輪廓調(diào)到寬高最大值，外輪廓部分并不影響點擊其他節(jié)點，然后改變Div外輪廓顏色和透明度，既能調(diào)節(jié)屏幕的亮度，最低透明度既為全亮，夜間模式一級透明度為0.3，夜間模式二級透明度為0.8。</p><p><b>　　圖4.6 夜間模式</b></p><p>　

72、　橫屏處理，見圖4.7橫屏處理，js監(jiān)聽頁面當頁面發(fā)生變化時檢測是否處于橫屏狀態(tài)，判斷調(diào)出橫屏頁。首先js動態(tài)監(jiān)聽頁面是否變化，當頁面寬高發(fā)生變化時，檢測函數(shù)調(diào)用橫屏處理方法，橫屏處理方法調(diào)整橫屏頁面寬高，保證能覆蓋整個頁面，并動態(tài)更改橫屏頁面的CSS使之顯示，正常狀態(tài)下橫屏頁面不顯示，屏幕變化過程中仍處于正常狀態(tài)，js判斷后仍隱藏頁面不顯示頁面。</p><p><b>　　圖4.7 橫屏處理<

73、/b></p><p>　　屏幕自適應(yīng)見圖4.8，屏幕自適應(yīng)可以適應(yīng)大多數(shù)手機屏幕，實現(xiàn)方法為將最外層div定義為容器盒子，將其他頁面和圖片固定大小全放入盒子內(nèi)，固定容器寬高，然后js動態(tài)獲取當前頁面寬高，動態(tài)計算當前中間位置，動態(tài)監(jiān)測屏幕是否發(fā)生變化，當屏幕發(fā)生變化時，js動態(tài)更改容器坐標使之居中，更改容器寬高使頁面無論怎樣變化，頁面始終上下居中，頁面內(nèi)容等比例縮放文字圖片不變形不。</p>

74、<p>　　圖4.8 屏幕自適應(yīng)</p><p>　　用戶個人信息見圖4.9，個人信息顯示，登錄成功后頁面獲取上一個頁面?zhèn)鬟^來用戶名值，本頁面對比數(shù)據(jù)庫獲取相同用戶名的姓名和年齡信息，使用前后臺數(shù)據(jù)雙向綁定使個人信息在前臺動態(tài)變化。</p><p>　　圖4.9 用戶個人信息</p><p>　　用戶測試記錄見圖4.10，測試記錄頁面獲取在登陸成功后上頁

75、面的傳值即當前用戶名，在本頁面查詢數(shù)據(jù)庫相關(guān)表當前用戶名的測試記錄，再通過獲取測試記錄表內(nèi)的測試題名和結(jié)果選項查詢測試內(nèi)容表內(nèi)的相關(guān)內(nèi)容，輸出到后臺，在與前臺雙向綁定，在測試記錄頁點擊詳情查看測試結(jié)果詳情。</p><p>　　圖4.10 用戶測試記錄</p><p><b>　　5 系統(tǒng)測試</b></p><p>　　5.1 系統(tǒng)測試方法&

76、lt;/p><p>　　本系統(tǒng)會依次進行功能測試、性能測試、安全性測試和回歸測試。</p><p>　　功能測試，檢測本系統(tǒng)的功能是否能正常完成，檢測各模塊之間的關(guān)系是否能流通，檢測個頁面之間的交互時候能正常進行，檢測個個頁面是否簡潔美觀，操作方便。</p><p>　　性能測試，檢測系統(tǒng)從打開到運行成功所需時間，然后進行優(yōu)化。檢測數(shù)據(jù)輸入輸出數(shù)據(jù)庫。</p>

77、;<p>　　安全性測試，是否經(jīng)過不可逆加密，是否存在密碼篡改的可能。</p><p>　　回歸測試，測試系統(tǒng)在制作和運行時所遇到Bug是否的到修正，Bug修正后的結(jié)果怎么樣，系統(tǒng)是否受到影響。</p><p>　　5.2 系統(tǒng)測試的目的和原則</p><p>　　進行多種多樣的不同測試功能測試、性能測試、安全測試、回歸測試，和各種其他原則的情況下，完

78、成不同的測試，并使測試按計劃完成，對比系統(tǒng)是否符合系統(tǒng)的需求和功能，同時記錄系統(tǒng)的缺陷和出現(xiàn)的Bug，做好記錄、追蹤、修復。</p><p><b>　　5.3 系統(tǒng)測試</b></p><p>　　彈框測試見圖5.1彈框測試，能測試出后臺方法是否運行。在數(shù)據(jù)中查看數(shù)據(jù)是否錄入成功，在數(shù)據(jù)庫中查詢看數(shù)據(jù)是否能查詢成功。其他測試包括輸入年齡必修小于2位數(shù)等均為彈框提示。

79、</p><p><b>　　圖5.1 彈框測試</b></p><p>　　輸出測試見圖5.2測試，在測試中我實用JavaScript和后臺C#調(diào)用JavaScript來對系統(tǒng)進行測試，測試頁面是否交互成功，值是否傳遞成功，方法是否調(diào)用成功。在頁面檢測模式下，和清晰檢測到頁面的變動和交互。給每個調(diào)用的方法斷點輸出信息，測試方法是否才正常調(diào)用，分數(shù)方法每一次都輸出分數(shù)

80、，測試分數(shù)計算是否正常。</p><p><b>　　圖5.2 輸出測試</b></p><p><b>　　6 總結(jié)與展望</b></p><p><b>　　6.1 總結(jié)</b></p><p>　　通過本次畢業(yè)設(shè)計，我將大學所學的很多知識都聯(lián)系在一起，并進行了實踐了，從理

81、論知識，到實踐，我了解自身的長處和不足，對于知識的掌握，有些眼高手低，今后我要在努力學習知識的同時，多進行實踐，把知識和實踐聯(lián)合在一起。通過設(shè)計我發(fā)現(xiàn)我對于前端掌握的很好，對于后臺很多知識都有些模糊忘記了，于此我想舍友咨詢了很多不懂的問題，同時查閱了大量的資料，彌補了自身的不足。</p><p>　　畢業(yè)設(shè)計是對我大學四年知識學習與實踐相結(jié)合的一次檢測，也是我大學四年的最后一個里程碑，大學最后的那個句號，同時是我

82、步入社會工作的一個良好的起步，畢業(yè)設(shè)計讓我把大學四年的知識總結(jié)并運用于實踐，付諸與行動，培養(yǎng)和提高的我的動手能力、分析能力等等，為我以后的前端工作就業(yè)奠定了良好基礎(chǔ)，為我成為全棧工程師指明了方向。</p><p>　　畢業(yè)的鐘聲快要響起了，畢業(yè)設(shè)計也完成了大部分，經(jīng)過很多寂靜的夜，終于完成了基于Web的趣味測試題系統(tǒng)。在畢業(yè)設(shè)計之前，我有些眼高手低，總感覺自己掌握了很多知識，寫項目沒問題夜郎自大，但實踐的時候才發(fā)

83、現(xiàn)，光掌握知識的作用并不大，同時要付諸于實踐。</p><p>　　通過完成基于Web的趣味測試題系統(tǒng)，我學習到了很多道理，光學不做等于白學，同時我學的也比較淺顯，與我想進步成強大的前端全棧工程師還有很大差距。在學習的同時我還應(yīng)該不斷學習新知識，一些相關(guān)專業(yè)和互聯(lián)網(wǎng)新發(fā)展出來的知識。在今后的成為前端全棧工程師路上，我會不斷的充實自己，學習更多相關(guān)知識。</p><p><b>　

84、　6.2 展望</b></p><p>　　我后期我會給系統(tǒng)添加得分統(tǒng)計結(jié)果分析性格，我會給系統(tǒng)添加上不同趣味測試的不同年齡段選擇的不同結(jié)果，給系統(tǒng)添加上點贊功能和評價功能，使系統(tǒng)更加完善，成為前后臺和頁面美觀和性能都為不可多得的好系統(tǒng)。</p><p>　　本次畢業(yè)設(shè)計有很多地方我感覺自己做的并不完善，雖然畢業(yè)設(shè)計結(jié)束了，但接下來我仍然會去完善和優(yōu)化我的項目，使邏輯和功能更加

85、完善，頁面更加簡潔優(yōu)美，使之成為優(yōu)秀的項目。</p><p><b>　　參考文獻</b></p><p>　　[1]Nicho C Zakas.JavaScript高級程序設(shè)計[M].北京:人民郵電出版社,2012年3月.54～60</p><p>　　[2]道格拉斯·克羅克福德.JavaScript語言精粹[M].北京:電子工業(yè)出

86、版社,2012年9月.21～64</p><p>　　[3]唐俊開.Html5移動Web開發(fā)指南[M].北京:電子工業(yè)出版社,2013年3月.89～105</p><p>　　[4]薛均曉,李占波.UML系統(tǒng)分析與設(shè)計[M].北京:機械工業(yè)出版社,2014年9月</p><p>　　[5]朱少民.軟件測試方法與技術(shù)[M].北京:清華大學出版社,2014年10月.34

87、～40</p><p>　　[6]張海藩,牟永敏.軟件工程導論[M].北京:清華大學出版社,2013年8月.12～25</p><p>　　[7]衛(wèi)琳.SQL Server 2012數(shù)據(jù)庫應(yīng)用與開發(fā)教程[M].北京:清華大學出版社,2014年8月.57～80</p><p>　　[8]布洛克著,西布拉奧等.ASP.NET WebAPI設(shè)計[M].北京:人民郵電出版社

88、,2015年1月.50～55</p><p>　　[9]單東林,張曉菲,魏然.鋒利的jQuery[M].北京:人民郵電出版社,2012年7月</p><p>　　[10]劉西杰,張婷.HTML CSS JavaScript網(wǎng)頁制作從入門到精通[M].北京:人民郵電出版社,2016年7月.86～92</p><p>　　[11]傳智播客高教產(chǎn)品研發(fā)部.C#程序設(shè)計基礎(chǔ)

89、入門教程[M].北京:人民郵電出版社,2014年9月.74～76</p><p>　　[12]明日科技.SQL Server從入門到精通[M].北京:清華大學出版社,2012年09月</p><p>　　[13]王英英.SQL Server 2014從零開始學[M].北京:清華大學出版社,2016年10月</p><p>　　[14]斯蒂芬森.SQL入門經(jīng)典[M].

90、北京:人民郵電出版社,2011年11月.24～26</p><p>　　[15]John sharp.VisualC#從入門到精通[M].北京:清華大學出版社,2016年6月</p><p><b>　　致謝</b></p><p>　　大學時光，好似白駒過隙，轉(zhuǎn)瞬即逝，回首大學四年時光，感謝老師的淳淳教導，感謝歡聲笑語共患難的室友，感謝擁有美

91、麗四季的校園，劍未配妥，出門已是江湖，祝愿大家歷盡千帆，歸來仍是少年。</p><p>　　感謝老師和同學，從選題到開題報告到設(shè)計完成到論文完成，老師給予了我很正確的指導，給我指明了方向，并給我很大的鼓勵，使我完成了畢業(yè)設(shè)計，老師性格很好，對每一位同學的指導都很明確，感謝老師。同時感謝其他老師教給我的前端知識，使我完成了本系統(tǒng)。</p><p>　　在后臺技術(shù)問題上，我還請教了舍友很多問題