基于響應(yīng)式設(shè)計(jì)模式的Web前端開發(fā)1緒論HTML5的優(yōu)勢相比于原來的HTML的優(yōu)勢是巨大的，一個(gè)新技術(shù)的出現(xiàn)必定帶動(dòng)一代人的追捧，HTML5開辟了網(wǎng)頁設(shè)計(jì)的新開端。HTML5的出現(xiàn)席卷了全球人，這一技術(shù)使網(wǎng)頁變得更加美觀與靈活，以前需要很多代碼量實(shí)現(xiàn)的一個(gè)功能，現(xiàn)在只要簡簡單單的幾行代碼就能實(shí)現(xiàn)，方便了程序員的很多工作量，讓程序員無不為這種技術(shù)而癡迷。由于市場的龐大，使得這種技術(shù)得以廣泛應(yīng)用，收到了無數(shù)人員的廣泛好評(píng)，方便了人們的生活，可以說是一個(gè)接近于完美的技術(shù)手段。選題背景及意義隨著信息技術(shù)的不斷發(fā)展，網(wǎng)絡(luò)用戶的使用量不斷增加，用戶使用小屏幕的人數(shù)在不斷增加（如手機(jī)、平板、等等），小屏幕上網(wǎng)的使用是一種趨勢，然而超大屏幕顯示器也在快速發(fā)展中，從而導(dǎo)致了屏幕大小的顯著差異。面對如此多的終端設(shè)備和千差萬別的屏幕，傳統(tǒng)的網(wǎng)頁設(shè)計(jì)方法是很難達(dá)到為每一種屏幕尺寸設(shè)計(jì)一種專門的系統(tǒng)的，所以本文嘗試著通過響應(yīng)式設(shè)計(jì)的模式進(jìn)行構(gòu)建一個(gè)使系統(tǒng)頁面隨接入設(shè)備的顯示大小不同而自行改變視頻大小尺寸、動(dòng)態(tài)調(diào)整布局結(jié)構(gòu)、元素規(guī)格樣式，將相同的內(nèi)容以不同的格式呈現(xiàn)給不同設(shè)備的用戶的系統(tǒng)。運(yùn)用各種不同的技術(shù)加以整合運(yùn)用，使自己的網(wǎng)頁布局更加美觀和實(shí)用，最后實(shí)現(xiàn)響應(yīng)式布局，讓不同的設(shè)備適合網(wǎng)頁的布局，這就是響應(yīng)式的優(yōu)勢。基于當(dāng)前響應(yīng)web界面的設(shè)計(jì)風(fēng)格,本文試圖從響應(yīng)類型,追溯起源,響應(yīng)web頁面定義反應(yīng)網(wǎng)絡(luò)的特點(diǎn)和設(shè)計(jì)原則,應(yīng)用程序和web開發(fā)響應(yīng)進(jìn)行了對比,總結(jié)成反應(yīng)出現(xiàn)的必然性和自身的局限性,分析了響應(yīng)設(shè)計(jì)的一些原因。從界面設(shè)計(jì)的角度，分析了響應(yīng)式網(wǎng)頁所帶來的變化，指出響應(yīng)式界面設(shè)計(jì)的本質(zhì)不僅是外觀上的新穎，而且強(qiáng)調(diào)了在多終端、多設(shè)備的情況下響應(yīng)式界面的操作。對響應(yīng)式布局中的各種元素進(jìn)行分析，例如字體，圖片大小，框架等等。針對這些情況，結(jié)合筆者自己的設(shè)計(jì)實(shí)踐工作，驗(yàn)證了本文的實(shí)用價(jià)值，為界面設(shè)計(jì)提供了有價(jià)值的參考有效建議，建立了一套響應(yīng)式web界面設(shè)計(jì)指南。響應(yīng)式設(shè)計(jì)在國內(nèi)發(fā)展?fàn)顩r從應(yīng)用的角度來看，響應(yīng)站建設(shè)無疑是大勢所趨;然而，這并不是萬靈藥。響應(yīng)式網(wǎng)站更適合中小企業(yè)的官方網(wǎng)站，如淘寶、京東等大型網(wǎng)站。從市場前景,絕對沒有問題,但在技術(shù)方面,普及,當(dāng)前國內(nèi)建筑響應(yīng)網(wǎng)站大多數(shù)還在初級(jí)階段,需要適應(yīng)各種瀏覽器,技術(shù)成本較高,一般企業(yè)做一個(gè)像樣的響應(yīng)類型網(wǎng)站,略貴,這是阻礙發(fā)展的一個(gè)重要的問題反應(yīng)性網(wǎng)站;閾值技術(shù)的如果我們能解決這個(gè)問題,反應(yīng)網(wǎng)站將成為未來的主流企業(yè)網(wǎng)站,目前國內(nèi)能做的反應(yīng)網(wǎng)站在線云工具越來越多,由竹網(wǎng)站響應(yīng)云網(wǎng)站系統(tǒng)可以解決這個(gè)問題,根據(jù)竹網(wǎng)站網(wǎng)站,已經(jīng)有幾家上市公司在云網(wǎng)站系統(tǒng)的使用,這也證明了反應(yīng)網(wǎng)站正逐漸被市場接受;所以，市場沒問題，關(guān)鍵是怎么做的問題了。響應(yīng)式設(shè)計(jì)在國外發(fā)展?fàn)顩r響應(yīng)式web站點(diǎn)的概念是由美國web設(shè)計(jì)師在2010年提出的，此后響應(yīng)式布局的概念在國際上得到了廣泛的應(yīng)用。反應(yīng)網(wǎng)站在國外是很常見的,一方面,外國人和倡導(dǎo)自由的極簡主義,另一方面是一個(gè)響應(yīng)網(wǎng)站本身在屏幕上的獨(dú)特魅力,在不同終端統(tǒng)一和交互體驗(yàn),HTML5代碼簡潔,無處不顯示出一種新的感覺,和外國人緊張的工作完美,無憂無慮的生活,我想從這個(gè)角度解釋相吻合。并且響應(yīng)式設(shè)計(jì)在國外已經(jīng)相當(dāng)成熟了，運(yùn)用一種他們自己成熟的設(shè)計(jì)手法對他們來講可謂是一種輕車熟路的感覺，更何況這種技術(shù)還散發(fā)著一種讓人向往、膜拜的眼神，與外國人的生活方式如此相同，使之成為他們最喜愛的設(shè)計(jì)方式。換言之，在費(fèi)用方面此方法又有極大地本錢優(yōu)勢，其成本的低廉使之成為一種趨勢是必然的結(jié)果。一種新技術(shù)的革新無疑會(huì)推動(dòng)人類生活的變化，不管是國內(nèi)國外對新技術(shù)的渴望和未知都使得人們?yōu)橹蛲?，所以響?yīng)式設(shè)計(jì)在國外的市場上可謂是家常便飯，隨處可見，至今為止，市場的網(wǎng)頁幾乎大多都使用了這一技術(shù)，讓設(shè)計(jì)者簡潔，讓用戶體驗(yàn)良好，可謂是一種讓人值得興奮的技術(shù)。論文的組織結(jié)構(gòu)論文共分為七章撰寫，具體組織結(jié)構(gòu)如下：緒論。針對本文的選題背景及意義，國內(nèi)外的發(fā)展前景進(jìn)行簡要描述。相關(guān)技術(shù)。介紹系統(tǒng)設(shè)計(jì)開發(fā)中運(yùn)用的關(guān)鍵技術(shù)及技術(shù)介紹，主要包括前端響應(yīng)式設(shè)計(jì)技術(shù)中的關(guān)鍵技術(shù)類型，如HTML5、CSS3、流式布局、Bootstrap、JS和jQuery等關(guān)鍵技術(shù)。需求分析。介紹項(xiàng)目概況，描述了網(wǎng)站的簡要需求，介紹前端網(wǎng)頁的響應(yīng)式設(shè)計(jì)思路并介紹響應(yīng)式設(shè)計(jì)的基本流程。系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)。針對系統(tǒng)的設(shè)計(jì)，而詳細(xì)介紹系統(tǒng)的實(shí)現(xiàn)。系統(tǒng)測試。對系統(tǒng)的部分功能進(jìn)行測試，以達(dá)到用戶所要達(dá)到的效果。結(jié)論與展望?？偨Y(jié)當(dāng)前所完成的系統(tǒng)項(xiàng)目功能用途，展望該項(xiàng)目往后發(fā)展方向。

2相關(guān)技術(shù)本章將對一些項(xiàng)目中即將用到的一些技術(shù)進(jìn)行簡單介紹，作為一名技術(shù)的運(yùn)用者，我們并不需要深層次研究技術(shù)本身，只需要運(yùn)用即可，所以對技術(shù)的一定認(rèn)識(shí)還是要有的，下面我將把各個(gè)模塊，所用的技術(shù)一一列舉出來。2.1響應(yīng)式設(shè)計(jì)技術(shù)響應(yīng)式布局不僅需要滿足很多的設(shè)備的需求，而且很多的設(shè)備的屏幕大小不一，所以應(yīng)用響應(yīng)式設(shè)計(jì)來簡化我們的工作量確實(shí)是一個(gè)很好的技術(shù)手段，雖然很多的差異確實(shí)微乎其微，但是對于一個(gè)追求完美的工程師來說，這種細(xì)小的差異也不能容忍。響應(yīng)式設(shè)計(jì)使得去控制設(shè)計(jì)的結(jié)果變得更加額外困難，也使得響應(yīng)式布局非常難以預(yù)測。但這也很難說，這是響應(yīng)式布局之美的一部分。經(jīng)歷過很多的不確定性，我將掌握更多的知識(shí)層面。人們僅憑一己之力很難去確定屏幕的大小尺寸，屏幕的分辨率到底是多少，為了解決這一難題，運(yùn)用響應(yīng)式設(shè)計(jì)是我們迫在眉睫的方法，這使得我們放開雙手，讓這一技術(shù)去完全代替人們的手工自動(dòng)完成，而且使得頁面更加的智能化，更加便于操作。2.1.1HTML5HTML5是網(wǎng)絡(luò)的未來。HTML5不僅在PC上使用，也在移動(dòng)設(shè)備上使用。據(jù)了解，全球有將近10億個(gè)瀏覽器會(huì)支持HTML5在2013年里，全球HTMLWeb開發(fā)人員將達(dá)到200多萬人。HTML5不斷地改善和完美化，使得全球很多大公司都采用了這一技術(shù)，為這一技術(shù)而隨之瘋狂?？偟膩碚f，HTML5技術(shù)有一些優(yōu)勢，其中HTML5最酷的特性就是本地存儲(chǔ)，這有點(diǎn)像老技術(shù)cookie與客戶端數(shù)據(jù)庫的集成。它比cookie更好，因?yàn)樗С侄鄠€(gè)Windows商店，它具有更好的安全性和性能，甚至在瀏覽器關(guān)閉后也可以保存它。HTML5的數(shù)據(jù)庫放在了客戶端，所以完全不必要擔(dān)心用戶數(shù)據(jù)的丟失，再者其適用于所有的瀏覽器。2.1.2CSS3CSS3的由來是建立在CSS2、CSS上的，CSS3完善了CSS2等之前的很多缺點(diǎn)，接替了前幾個(gè)版本的很多優(yōu)點(diǎn)，不斷完善，進(jìn)而促成了今天的轟動(dòng)全球的CSS3。CSS3簡化的以前很多代碼完成的設(shè)計(jì)，現(xiàn)在只要幾行，甚至只要一行代碼就能完成的功能。CSS3的優(yōu)點(diǎn)在于它可以美化HTML5所寫的樣式，美化當(dāng)前的界面，使人賞心悅目，完成很多動(dòng)畫的功能。以前要美工完成的工作，現(xiàn)在只要用CSS3就能夠獨(dú)立完成，可謂是節(jié)省了人力、物力、財(cái)力。CSS3使用了很多以前使用的圖像和腳本，甚至包括動(dòng)畫，現(xiàn)在只需要幾行代碼。例如:文本陰影和盒子陰影、圖片邊框、圓角、變形(旋轉(zhuǎn)、縮放、傾斜、移動(dòng))、漸變、多圖像背景、個(gè)性化字體、動(dòng)畫、多欄布局、媒體查詢等。選擇器則簡化了前端開發(fā)工作人員中山小欖的設(shè)計(jì)，從而加快頁面載入速度。2.1.3Bootstrap由于強(qiáng)大而又簡單的Bootstrap的出現(xiàn)，使得前端工程師的工作得以簡化，加快了前端工程師的代碼速度，提供了一個(gè)規(guī)范而又優(yōu)雅的編寫環(huán)境，基于HTML和CSS的一個(gè)輕量級(jí)的前端框架。在Bootstrap官網(wǎng)上，包含了React框架、NEXT.JS輕量級(jí)框架、Node輕量而又高效的框架、Vue構(gòu)建用戶界面的框架等等。2.1.4JSPJSP（全名的JavaServerPages）是一種將靜態(tài)頁面活起來的技術(shù)，平常的靜態(tài)頁面不能跟用戶進(jìn)行交互式的對話，然而出現(xiàn)了JSP之后，用戶可以完美的與網(wǎng)頁進(jìn)行對話式的交流，所以說JSP是一種讓靜態(tài)頁面活起來的技術(shù)。JSP技術(shù)以Java語言作為腳本語言，為用戶的HTTP請求提供服務(wù)，并能與服務(wù)器上的其它Java程序共同處理復(fù)雜的業(yè)務(wù)需求。2.1.5MqSQLMySQL是一個(gè)開源的，輕量級(jí)的數(shù)據(jù)庫。由于市場上很多的數(shù)據(jù)庫都是付費(fèi)的，而且費(fèi)用特別的昂貴，所以出現(xiàn)一款免費(fèi)的，開源的數(shù)據(jù)庫就顯得尤為重要，此時(shí)，MySQL就出現(xiàn)了，以免費(fèi)，開源而占據(jù)廣泛的市場，現(xiàn)在大部分的公司都采用這一數(shù)據(jù)庫，不管是直接拿來用也好，還是對源碼加以簡單修改也好，都可以非常好的運(yùn)用這款數(shù)據(jù)庫，所以這一數(shù)據(jù)庫的使用才非常流行，所以在本系統(tǒng)中，我也將采用這一免費(fèi)的數(shù)據(jù)庫來開發(fā)學(xué)生成績管理系統(tǒng)。2.1.6TomcatTomcat是一種非常流行的Web服務(wù)器，該服務(wù)器是完全免費(fèi)的。Tomcat服務(wù)器主要由Apache軟件公司開發(fā)，為市場上的大多數(shù)Web開發(fā)公司提供服務(wù)，并受到了廣泛好評(píng)。在Web開發(fā)中，Web服務(wù)器是必不可少的，而Tomcat是服務(wù)器中的首選，因此該系統(tǒng)還將Tomcat服務(wù)器用作本系統(tǒng)的服務(wù)器管理軟件。2.2本章小結(jié)本章針對學(xué)生成績管理系統(tǒng)響應(yīng)式的設(shè)計(jì)，所用到的技術(shù)進(jìn)行簡單描述。所用技術(shù)有HTML5、CSS3、Bootstrap、JSP、MySQL、Tomcat等技術(shù)，將這些技術(shù)熟練應(yīng)用于本系統(tǒng)的開發(fā)之中，對這些技術(shù)加以深層次的了解。

3需求分析需求分析需要成為用戶的真正解決方案。但是程序員自己有一個(gè)真正的問題通常情況下，開發(fā)軟件的技術(shù)人員熟悉計(jì)算機(jī)技術(shù)。但與您的業(yè)務(wù)無關(guān)用戶了解他們的業(yè)務(wù)。但是他們對計(jì)算機(jī)技術(shù)了解不多因此，技術(shù)人員和用戶可能對同一問題有不同的認(rèn)識(shí)。因此，在軟件工程師可以開始設(shè)計(jì)軟件之前，具有計(jì)算機(jī)技術(shù)和用戶操作專業(yè)知識(shí)的軟件系統(tǒng)分析人員必須分析軟件問題的詳細(xì)需求。需求分析是軟件工程中的重要一步。在需求分析過程中，軟件系統(tǒng)分析人員查看用戶對軟件需求的需求，并接收軟件需求，以確定軟件系統(tǒng)必須滿足的功能，性能，數(shù)據(jù)和其他目標(biāo)，并加以分析。3.1可行性分析可行性分析要求精確、全面、系統(tǒng)的分析項(xiàng)目的各個(gè)方面，論文通過對學(xué)生信息管理系統(tǒng)的主要功能和作用的研究，從技術(shù)、經(jīng)濟(jì)、社會(huì)等方面進(jìn)行調(diào)查研究和分析比較，并對系統(tǒng)實(shí)現(xiàn)以后可能取得的影響進(jìn)行預(yù)測，從而提出項(xiàng)目是否值得建設(shè)或如何設(shè)計(jì)等建議。3.1.1技術(shù)可行性分析成熟的技術(shù)是實(shí)現(xiàn)用戶需求的前提。本系統(tǒng)的前端使用HTML5+CSS3來實(shí)現(xiàn)布局，該技術(shù)在世界上已經(jīng)成熟穩(wěn)定，大多數(shù)瀏覽器都支持這兩種技術(shù)。有很多不支持的這兩項(xiàng)技術(shù)的瀏覽器，我們可以用Javascript技術(shù)來實(shí)現(xiàn)最終的效果。后端采用MVC的設(shè)計(jì)模式，JSP編程技術(shù)，開發(fā)工具使用Eclipse，數(shù)據(jù)庫使用MySQL。這些開發(fā)技術(shù)在世界各地的開發(fā)公司中都已經(jīng)相當(dāng)成熟，尤其是MySQL數(shù)據(jù)庫，它具有開源、可移植等優(yōu)點(diǎn)，受到廣大編程用戶的青睞。這些成熟的技術(shù)可以滿足學(xué)生成績管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，所以該系統(tǒng)在技術(shù)上是可行的。3.1.2經(jīng)濟(jì)上可行性分析經(jīng)濟(jì)可行性研究又稱“經(jīng)濟(jì)可行性分析”。經(jīng)濟(jì)可行性研究是可行性研究中的重要組成部分，存在于項(xiàng)目可行性研究的全過程之中。其根本任務(wù)是從國民經(jīng)濟(jì)出發(fā)，通過綜合成本效益分析，通過多個(gè)方案的比較，確定建設(shè)項(xiàng)目是否接受并推薦最佳的投資方案，為決策者做出投資決策提供科學(xué)依據(jù)。從本項(xiàng)目的經(jīng)濟(jì)可行性分析來看，本項(xiàng)目使用eclipse,MySQL等開源軟件，這些軟件都是免費(fèi)的、開源的。再加上一臺(tái)個(gè)人筆記本電腦，大概幾千元左右，經(jīng)濟(jì)是完全可以進(jìn)行下去的，所以經(jīng)濟(jì)可行性完全在預(yù)算之內(nèi)。3.1.3法律上可行性分析本系統(tǒng)只針對學(xué)生的基本信息進(jìn)行數(shù)據(jù)存儲(chǔ)，只對學(xué)校管理員、老師、學(xué)生本人維護(hù)賬號(hào)密碼，因此不會(huì)泄露個(gè)人信息等重要信息文件，不會(huì)侵犯他人隱私。同時(shí)，在合法范圍內(nèi)使用本系統(tǒng)，并不會(huì)存在任何違法的問題。所以該系統(tǒng)在法律方面是完全可行的。即法律可行性通過。3.2功能需求分析3.2.1系統(tǒng)總體功能需求分析本系統(tǒng)以新余學(xué)院學(xué)生成績管理工作為背景，結(jié)合本校的學(xué)生管理事務(wù)中心的實(shí)際經(jīng)驗(yàn)，面向新余學(xué)院學(xué)生管理事務(wù)中心的工作需求設(shè)計(jì)與開發(fā)學(xué)生成績管理。按照項(xiàng)目中的實(shí)際需求，將學(xué)生成績管理系統(tǒng)劃分為管理員、教師、學(xué)生三個(gè)功能模塊，并對成績系統(tǒng)中不同的用戶設(shè)置不同的權(quán)限，不同的用戶只能做自己權(quán)限內(nèi)的事務(wù)和操作。系統(tǒng)用戶權(quán)限示意圖如圖3-1所示。圖3-1學(xué)生信息管理系統(tǒng)功能模塊圖下面將分別對學(xué)生、教師、管理員三種人員進(jìn)行需求分析，并給出子功能模塊圖。3.2.2學(xué)生的需求分析通過對學(xué)生事務(wù)中心管理人員和辦公室工作人員的調(diào)查，獲得學(xué)生需要的功能有:學(xué)生對各學(xué)科的查詢、學(xué)生對各種通知和公告的查看、學(xué)生對自己信息的修改和查看、學(xué)生對課程信息的查看等。子功能模塊圖如圖3-2所示。圖3-2學(xué)生需求功能模塊圖3.2.3管理員的需求分析經(jīng)過對學(xué)生事務(wù)中心的管理員及辦公人員的調(diào)查得出，以下管理員用戶需要的功能，管理員對公告的發(fā)布，管理員對公告的刪除，管理員對公告的批量刪除，管理員對學(xué)生信息的修改，管理員對學(xué)生信息的批量刪除，管理員對教師信息的批量刪除及修改等操作，管理員對課程信息的導(dǎo)入與刪除，管理員對學(xué)生成績的匯總及報(bào)表等功能需求。子功能模塊圖如圖3-3所示。圖3-3管理員需求功能模塊圖3.2.4教師的需求分析經(jīng)過對學(xué)生事務(wù)中心的管理員及辦公人員的調(diào)查得出，得以得出教師用戶需要的功能，教師對課程的增加，教師對課程的修改（加課或換課），教師對成績的錄入，教師對學(xué)生成績的修改等。子功能模塊圖如圖3-4所示。圖3-4教師需求功能模塊圖3.3非功能需求分析非功能規(guī)格是與系統(tǒng)特定功能不直接相關(guān)的規(guī)格。但是涉及系統(tǒng)的整體特征（例如可靠性，響應(yīng)時(shí)間，存儲(chǔ)空間等）不活動(dòng)的規(guī)范定義了系統(tǒng)提供的服務(wù)或功能限制，包括時(shí)間限制，空間限制，過程限制制定并遵循標(biāo)準(zhǔn)。它源于用戶約束，包括預(yù)算約束、制度政策、與其他硬件和軟件系統(tǒng)的互操作性，以及諸如安全法規(guī)和隱私保護(hù)立法等外部因素。3.3.1安全性需求分析學(xué)生信息管理系統(tǒng)在處理數(shù)據(jù)過程中會(huì)涉及到用戶的個(gè)人信息，要是系統(tǒng)存在安全漏洞將會(huì)造成信息的泄露及系統(tǒng)的安全性喪失，將會(huì)波及到用戶信息的安全。因此，為了使整個(gè)系統(tǒng)處于一個(gè)安全的狀態(tài)下運(yùn)行，是學(xué)生和老師的信息安全得到保障，我們將WEB服務(wù)器架設(shè)在校園內(nèi)，內(nèi)部設(shè)有安全防火墻，防止病毒以及黑客入侵服務(wù)器。不同用戶的登入采用不同的賬戶+不同的密碼+用戶身份驗(yàn)證的方式登入，用戶的密碼將采用MD5加密方法進(jìn)行加密。對數(shù)據(jù)庫還進(jìn)行了加密處理，并設(shè)計(jì)了周期性進(jìn)行備份處理。3.3.2實(shí)用性需求分析實(shí)用性需求分析主要是針對學(xué)生信息的查詢、教師課程的查詢以及管理員的實(shí)際操作。學(xué)校內(nèi)部有校園全覆蓋的校園網(wǎng)，針對每個(gè)用戶都可以隨時(shí)隨地在校園中進(jìn)行登入學(xué)生信息管理系統(tǒng)進(jìn)行操作。并且每個(gè)功能模塊都符合所需用戶的需求，讓用戶達(dá)到滿意的效果，即實(shí)用性效果良好。3.4本章小結(jié)本章主要針對系統(tǒng)功能需求進(jìn)行詳細(xì)的講解，并且闡述了每個(gè)子功能模塊所要進(jìn)行的具體操作及不同用戶所針對的不同的需求。最后，又對非功能需求進(jìn)行了簡單分析。為下一章系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)奠定了良好的基礎(chǔ)。

4系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)系統(tǒng)的詳細(xì)設(shè)計(jì)是根據(jù)系統(tǒng)需求的分析結(jié)合需要實(shí)現(xiàn)的功能而進(jìn)行代碼的編寫詳細(xì)設(shè)計(jì)。系統(tǒng)實(shí)現(xiàn)問題則是指編完代碼之后進(jìn)行代碼的調(diào)試、譯碼、運(yùn)行然后查看運(yùn)行成功的界面是否達(dá)到最初的要求。4.1登錄界面對一個(gè)基于響應(yīng)式Web設(shè)計(jì)的學(xué)生信息管理系統(tǒng)來說，一個(gè)直觀、簡潔的登錄首頁是非常重要的，給人一種初次見面的好感度提升是非常重要的，所以在設(shè)計(jì)登入首頁時(shí)就是盡可能簡潔明了的界面。系統(tǒng)的登入界面如圖4-1所示。圖4-1系統(tǒng)登錄界面圖從登錄界面可以看出一共有四欄，第一欄為用戶類型選擇，分為管理員、學(xué)生、教師三種類型；第二欄為用戶名欄；第三欄為密碼欄；第四欄為驗(yàn)證碼欄，驗(yàn)證碼為隨機(jī)給出。當(dāng)用戶輸入了用戶名和密碼，之后再輸入驗(yàn)證碼，若有一項(xiàng)沒有輸入正確將會(huì)觸發(fā)錯(cuò)誤機(jī)制，這些錯(cuò)誤可能是用戶名錯(cuò)誤、密碼錯(cuò)誤或驗(yàn)證碼錯(cuò)誤，相對應(yīng)的錯(cuò)誤，會(huì)觸發(fā)相對應(yīng)的錯(cuò)誤機(jī)制。這里截取了驗(yàn)證碼輸入錯(cuò)誤的截圖，如下圖4-2所示。圖4-2驗(yàn)證碼驗(yàn)證錯(cuò)誤圖4.2管理員操作界面當(dāng)用戶輸入的信息都正確之后，點(diǎn)擊登錄，登錄進(jìn)入管理員操作界面（這里主要用管理員身份來介紹系統(tǒng)）。登錄成功之后的系統(tǒng)界面截圖如下圖4-3所示。圖4-3管理員界面圖從上圖可以看出，管理員界面包含學(xué)生信息管理界面、教師信息管理界面、課程信息管理界面、成績報(bào)表管理界面以及系統(tǒng)設(shè)置界面。本系統(tǒng)最大的特點(diǎn)就是采用了響應(yīng)式設(shè)計(jì)的技術(shù)，對界面進(jìn)行響應(yīng)式的設(shè)計(jì)，適應(yīng)了所有設(shè)備的使用，不管是手機(jī)，平板電腦，電腦都可以方便的使用本系統(tǒng)。以下就用手機(jī)界面截圖來展示一下這個(gè)功能的便捷，如下圖4-4所示。圖4-4手機(jī)界面下的系統(tǒng)布局圖從上圖可以看出，菜單采用層疊式方式，將管理員的各個(gè)操作界面層疊起來，方便了手機(jī)用戶的使用。4.3學(xué)生的管理功能在所有的功能中，最常用的莫過于學(xué)生的成績、課程等功能了。下面我將針對學(xué)生界面進(jìn)行講解，學(xué)生操作界面如圖4-5所示。圖4-5學(xué)生操作界面圖從上圖可以看出，學(xué)生界面包含了課程信息界面、通知界面、成績界面。學(xué)生可以通過課程界面查看自己的有關(guān)課程信息；學(xué)生可以通過成績界面查看自己的成績信息。學(xué)生通過選課界面選擇自己想學(xué)的課程，可查詢可選課程和已選課程，有關(guān)界面的詳細(xì)信息如圖4-6所示。4-6學(xué)生選課界面圖學(xué)生通過查詢成績界面查詢自己的成績，也可通過打印按鈕來打印自己的成績報(bào)表，相關(guān)圖片如圖4-7所示。圖4-7學(xué)生成績界面圖4.4教師的管理功能教師一職在學(xué)生信息管理系統(tǒng)中也尤為重要，關(guān)系到課程的開設(shè)與課程成績的錄入，在學(xué)生信息管理系統(tǒng)中教師可以查看學(xué)生選課情況及自己課程開設(shè)情況。具體功能看如下圖4-8所示。圖4-8教師管理界面圖從上圖中可以看出，教師可以通過學(xué)生列表查看選自己課程的學(xué)生人數(shù)及姓名，教師還可以從我的課程中查看自己開設(shè)的課程具體情況。學(xué)生列表界面如下圖4-9所示。圖4-9學(xué)生列表圖教師所開課程圖如圖4-10所示。圖4-10教師的課程圖4.5成績報(bào)表功能學(xué)生信息系統(tǒng)中一個(gè)重要的系統(tǒng)功能--成績報(bào)表生成。選擇需要的時(shí)間區(qū)間，查詢需要搜索的學(xué)生或老師課程成績，將學(xué)生成績導(dǎo)出至Excel中，方便管理人員對學(xué)生信息的查詢。有關(guān)圖片如下圖4-11所示。圖4-11成績報(bào)表生成圖4.6本章小結(jié)本章詳細(xì)介紹了系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，通過圖文并茂的方式，讓我們更加清晰的了解學(xué)生成績管理系統(tǒng)。主要介紹了登錄界面、管理員操作界面、學(xué)生操作界面、教師操作界面和成績報(bào)表功能。

5系統(tǒng)測試5.1測試目的軟件測試的目的是在指定條件下測試軟件，并通過測試查找軟件中的錯(cuò)誤。這樣，程序員可以衡量軟件的質(zhì)量，并對軟件是否滿足原始要求或原始意圖做出正確的判斷。軟件測試隨軟件的創(chuàng)建一起進(jìn)行。在早期的軟件開發(fā)過程中，軟件規(guī)模較小且復(fù)雜度較低。軟件開發(fā)過程是混亂且非常隨機(jī)的。測試的含義相對狹窄。開發(fā)人員將測試等同于“調(diào)試”，以糾正軟件中已知的錯(cuò)誤。開發(fā)人員經(jīng)常完成這部分工作。5.2功能測試功能測試是軟件測試人員基于軟件的各個(gè)功能進(jìn)行規(guī)模化的測試運(yùn)行，對不同的功能進(jìn)行不同的測試用例針對性的測試，簡單說就是針對每個(gè)