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

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

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

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

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

5、進(jìn)行配合開發(fā)，其系統(tǒng)的主要功能實(shí)現(xiàn)了loading預(yù)加載、選項(xiàng)類測(cè)試、游戲類測(cè)試、屏幕自適應(yīng)、橫屏處理、夜間模式用戶注冊(cè)、用戶登錄、用戶信息查看等基本功能。并且網(wǎng)頁(yè)能夠正常運(yùn)行，頁(yè)面美觀，各個(gè)頁(yè)面交互性良好。在整個(gè)設(shè)計(jì)中基本上運(yùn)用JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互，使用Html5完成動(dòng)畫效果，使用C#和SQL Server完成數(shù)據(jù)類交互。</p><p>　　關(guān)鍵詞:趣味測(cè)試 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 國(guó)內(nèi)研究現(xiàn)狀1</p><p>　　1.3.2 國(guó)外研究現(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)濟(jì)可行性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è)計(jì)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è)計(jì)6</p><p>　　3.4 系統(tǒng)詳細(xì)設(shè)計(jì)7</p><p>　　3.4.1 loading預(yù)加載模塊設(shè)計(jì)7</p><p>　　3.4.2 登錄模塊設(shè)計(jì)8</p><p>　　3.4.3 首頁(yè)模塊設(shè)計(jì)9</p><p>　　3.4.4 測(cè)試頁(yè)模塊設(shè)計(jì)9</p&

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

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

19、6</p><p><b>　　5 系統(tǒng)測(cè)試19</b></p><p>　　5.1 系統(tǒng)測(cè)試方法19</p><p>　　5.2 系統(tǒng)測(cè)試的目的和原則19</p><p>　　5.3 系統(tǒng)測(cè)試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>　　參考文獻(xiàn)22</b></p><p><b>　　致謝23</b></p><p><b>　　1 緒論</b>&

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

44、務(wù)流程圖</p><p><b>　　3 系統(tǒng)設(shè)計(jì)</b></p><p>　　3.1 系統(tǒng)物理環(huán)境配置</p><p>　　WebApp可跨平臺(tái)，在Android和ios等不同系統(tǒng)的瀏覽器中運(yùn)行，在SQL Server數(shù)據(jù)庫(kù)內(nèi)需設(shè)置成SQL Server身份驗(yàn)證，網(wǎng)頁(yè)調(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進(jìn)行頁(yè)面設(shè)計(jì)，用JavaScrip進(jìn)行頁(yè)面交互和功能實(shí)現(xiàn)，采用JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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