基于HTML5的校園移動(dòng)客戶端的設(shè)計(jì)與實(shí)現(xiàn)

1、天津職業(yè)技術(shù)師范大學(xué)Tianjin University of Technology and Education畢 業(yè) 設(shè) 計(jì)專 業(yè)： 計(jì)算機(jī)科學(xué)與技術(shù) (五年)班級(jí)學(xué)號(hào)： 1013 29 學(xué)生姓名： 張宇行 指導(dǎo)教師： 龔良波 講師 二一五年六月天津職業(yè)技術(shù)師范大學(xué)本科生畢業(yè)設(shè)計(jì)基于HTML5綜合服務(wù)系統(tǒng)移動(dòng)客戶端的設(shè)計(jì)與實(shí)現(xiàn)Design and Implementation of a Comprehensive Service System HTML5-based Mobile Client專業(yè)班級(jí)：計(jì)科1013學(xué)生姓名：張宇行指導(dǎo)教師：龔良波 講師學(xué) 院：信息技術(shù)工程學(xué)院2015 年 6

2、 月摘 要開發(fā)本系統(tǒng)的主要工作目的是將最新的超文本標(biāo)記語言HTML5、CSS3，以及jQuery Mobile框架應(yīng)用到實(shí)際項(xiàng)目中，借助這些最新的網(wǎng)站設(shè)計(jì)技術(shù)實(shí)現(xiàn)頁面布局、色彩顯示和控件顯示。很好的解決不同設(shè)備之間的兼容性問題，降低網(wǎng)站的開發(fā)成本。同時(shí)，推進(jìn)這些互聯(lián)網(wǎng)新技術(shù)的應(yīng)用。在整個(gè)項(xiàng)目的開發(fā)中使用多瀏覽器兼容的javascript庫jQuery處理HTML事件、實(shí)現(xiàn)動(dòng)畫效果，以及為網(wǎng)站提供AJAX交互。同時(shí)，使用.NET Web組件里的一般處理程序處理傳入到服務(wù)器的HTTP請(qǐng)求，以返回我們需要的字符串或者對(duì)數(shù)據(jù)表中的內(nèi)容進(jìn)行修改。最終實(shí)現(xiàn)了基于HTML5的綜合服務(wù)系統(tǒng)移動(dòng)客戶端。該客戶端

3、實(shí)現(xiàn)了“新聞公告”、“課表查詢”、“四六級(jí)報(bào)名”、“我要請(qǐng)假”、“云記事”等頁面。使同學(xué)們不必再在網(wǎng)站上下載手機(jī)App就可以直接訪問綜合服務(wù)系統(tǒng)，降低了訪問成本。同時(shí)，提高了訪問網(wǎng)站的效率。實(shí)踐證明，雖然目前諸如jQuery Mobile這些插件還存在一些需要完善的地方，且目前人們對(duì)基于HTML5的移動(dòng)Web開發(fā)的認(rèn)識(shí)還不夠深刻，但是借助于這些新的技術(shù)確實(shí)可以有效的提高項(xiàng)目開發(fā)的效率。關(guān)鍵詞：綜合服務(wù)系統(tǒng)；jQuery Mobile；jQuery；HTML5ABSTRACTThe main purpose of the development of this system is the lat

4、est HTML HTML5, CSS3, and jQuery Mobile framework is applied to actual projects, with the latest web design technology page layout, color display and control displays. Good resolve compatibility issues between different devices, reduce the cost of site development. At the same time, promote the appl

5、ication of these new Internet technologies.Use in the development of the entire project in multi-browser compatible with HTML jQuery javascript library events, to achieve animation effects, as well as the site offers interactive AJAX. At the same time, the use of .NET Web components in general handl

6、er incoming HTTP requests to the server, we need to return a string of data in a table or modify the content.Ultimately the HTML5-based mobile clients integrated service system. The client achieved a "news bulletin", "curriculum inquiry", "forty-six registration", "

7、;I want to leave", "Cloud Events" and other pages. So that students do not have to download the mobile App on the site can be accessed directly integrated service system, reducing the cost of access. At the same time, improve the efficiency of access to the site.Practice has proved th

8、at, although these plug-ins such as jQuery Mobile are still some need to be perfected, and now people are moving to HTML5-based Web development knowledge not impressive enough, but the help of these new technologies really can effectively improve the efficiency of project development .Key Words：Inte

9、grated service system; jQuery Mobile; jQuery; HTML5目 錄1 引言11.1應(yīng)用背景11.2研究設(shè)想11.3預(yù)期結(jié)果22 可行性分析32.1技術(shù)可行性32.2經(jīng)濟(jì)可行性32.3操作可行性32.4數(shù)據(jù)流圖32.5數(shù)據(jù)字典43 需求分析73.1網(wǎng)站規(guī)劃73.2需求分析73.3系統(tǒng)E-R圖83.4軟硬件要求83.5運(yùn)行環(huán)境要求94 總體設(shè)計(jì)104.1總體設(shè)計(jì)104.1.1功能模塊圖104.2數(shù)據(jù)庫設(shè)計(jì)114.3輸出API設(shè)計(jì)155 功能實(shí)現(xiàn)185.1開發(fā)環(huán)境185.2前臺(tái)頁面設(shè)計(jì)與實(shí)現(xiàn)185.2.1系統(tǒng)封面185.2.2用戶登陸195.2.3主界面20

10、5.2.4新聞公告215.2.5課表查詢255.2.6四六級(jí)報(bào)名285.2.7云筆記295.2.8普通話報(bào)名305.2.9我要請(qǐng)假316 系統(tǒng)測(cè)試356.1系統(tǒng)測(cè)試的目的356.2測(cè)試環(huán)境356.3測(cè)試方法356.4測(cè)試步驟356.5詳細(xì)測(cè)試366.5.1自動(dòng)加載頁366.5.2用戶登陸頁366.5.3主界面366.5.4新聞公告頁366.5.5課表查詢頁366.5.6四六級(jí)報(bào)名頁376.5.7云筆記頁376.5.8普通話報(bào)名頁386.5.9我要請(qǐng)假頁386.6整體測(cè)試和驗(yàn)收測(cè)試38結(jié) 論39參考文獻(xiàn)41附錄一：主要業(yè)務(wù)數(shù)據(jù)流定義42附錄二：主要數(shù)據(jù)存儲(chǔ)的定義46致 謝4850天津職業(yè)技術(shù)師范

11、大學(xué)2015屆本科生畢業(yè)設(shè)計(jì)1 引言1.1應(yīng)用背景最近幾年發(fā)展最快的產(chǎn)業(yè)莫過于移動(dòng)互聯(lián)網(wǎng)，移動(dòng)互聯(lián)網(wǎng)的迅速發(fā)展帶來了許多商機(jī)。因此，吸引了很多企業(yè)和個(gè)人加入，而這恰恰又推動(dòng)了移動(dòng)互聯(lián)網(wǎng)相關(guān)的新技術(shù)的推廣和更新。移動(dòng)互聯(lián)網(wǎng)的發(fā)展離不開智能手持設(shè)備的迅速推廣，而智能手持設(shè)備則因其相對(duì)廉價(jià)的硬件成本和使用的便捷性而得到廣泛的應(yīng)用。根據(jù)2014年智能手機(jī)的出貨量數(shù)據(jù)統(tǒng)計(jì)，使用Android和IOS操作系統(tǒng)的智能手機(jī)占全球智能手機(jī)出貨量的96.3%。因此，Google公司的Android和蘋果公司的IOS占據(jù)了主要的市場(chǎng)份額。那么，我們?cè)陂_發(fā)移動(dòng)應(yīng)用的時(shí)候至少要考慮這兩種情況，而這勢(shì)必增加企業(yè)或個(gè)人的開

12、發(fā)成本。而基于瀏覽器的Web App的出現(xiàn)無疑會(huì)大大降低企業(yè)的開發(fā)成本，同樣的，對(duì)于用戶也不必再下載不同版本的手機(jī)應(yīng)用程序，只要打開對(duì)應(yīng)的網(wǎng)址即可。作為社會(huì)成員的一部分，我校的學(xué)生也有同樣的需求。因此，非常有必要開發(fā)一款基于手機(jī)Web瀏覽器的綜合服務(wù)系統(tǒng)，供同學(xué)們使用。開發(fā)基于手機(jī)或平板電腦瀏覽器的Web網(wǎng)站將有助于大家更進(jìn)一步的了解這些最新的技術(shù)，有助于新技術(shù)的普及。在移動(dòng)Web開發(fā)方面，國外的一些研發(fā)團(tuán)隊(duì)開發(fā)了諸如jQuery Mobile、JQ Touch、Sencha Touch、PhoneGap等框架。而在我們國內(nèi)，能夠參與開發(fā)這些框架的人就很少了，更多的人是在使用和推廣這些框架。在

13、互聯(lián)網(wǎng)上或圖書館中，自己可以查閱的關(guān)于jQuery Mobile的完整的項(xiàng)目實(shí)例很少，自己只能夠查閱到一些模塊化的資料。因此，就更有必要開發(fā)一個(gè)完整的項(xiàng)目并將這些代碼分享給大家，供大家學(xué)習(xí)。1.2研究設(shè)想目前，國內(nèi)的一些大的網(wǎng)站已經(jīng)開始開發(fā)和應(yīng)用自己的移動(dòng)Web網(wǎng)站了，作為一名計(jì)算機(jī)專業(yè)的畢業(yè)生，應(yīng)該主動(dòng)去接觸、應(yīng)用和推廣這些新技術(shù)。學(xué)習(xí)了五年的計(jì)算機(jī)技術(shù)，自己已經(jīng)具備了學(xué)習(xí)新技術(shù)的能力。同時(shí)，借助于互聯(lián)網(wǎng)上的資料和圖書館里的資源自己應(yīng)該能夠開發(fā)出一款帶給同學(xué)們方便的應(yīng)用系統(tǒng)。本系統(tǒng)將基于jQuery Mobile這個(gè)框架進(jìn)行開發(fā)，該框架支持國內(nèi)主流的移動(dòng)平臺(tái)，很好的解決了瀏覽器兼容性的問題，

14、在項(xiàng)目開發(fā)的過程中主要使用jQuery Mobile自帶的組件、主題進(jìn)行開發(fā)。同時(shí)，在處理事件的時(shí)候主要使用jQuery腳本，只有在jQuery沒有辦法實(shí)現(xiàn)的情況下才考慮使用javascript腳本。在網(wǎng)頁設(shè)計(jì)中使用HTML5作為網(wǎng)站的編碼標(biāo)準(zhǔn)，同時(shí)，依靠基于CSS3標(biāo)準(zhǔn)的層疊樣式表來對(duì)網(wǎng)頁進(jìn)行設(shè)計(jì)。開發(fā)該系統(tǒng)將以提高網(wǎng)站的可訪問性為宗旨，盡可能的提高用戶體驗(yàn)度。1.3預(yù)期結(jié)果基于HTML5和CSS3，以及jQuery Mobile完全可以實(shí)現(xiàn)系統(tǒng)的界面設(shè)計(jì)。同時(shí)，借助于SQL Server 2008和.NET就可以很好的實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)和數(shù)據(jù)的輸出轉(zhuǎn)換。相信，在指導(dǎo)老師的引領(lǐng)和自己的努力之下，一

15、定可以開發(fā)出一個(gè)基于移動(dòng)Web瀏覽器的綜合服務(wù)系統(tǒng)，借助于該系統(tǒng)大家可以輕松的查看學(xué)校發(fā)布的公告、通知。同時(shí)，類似于“四六級(jí)報(bào)名”、“普通話報(bào)名”、“請(qǐng)假”等事情也可以直接借助于本系統(tǒng)來完成。從此，大家不僅可以選擇以App的形式訪問學(xué)校綜合服務(wù)系統(tǒng)，而且可以通過訪問移動(dòng)Web的形式訪問綜合服務(wù)系統(tǒng)。移動(dòng)Web網(wǎng)站的使用使大家無論是高端的智能手機(jī)還是內(nèi)存較小的移動(dòng)終端，只要它可以打開瀏覽器，就可以獲取到最新的校園公告。 2 可行性分析2.1技術(shù)可行性自萬維網(wǎng)聯(lián)盟在2012年宣布HTML5規(guī)范正式定稿以來，HTML5在網(wǎng)站開發(fā)方面的應(yīng)用鋪天蓋地席卷而來。與此同時(shí)，支持HTML5的瀏覽器也越來越多，

16、從國外的Chrome、IE9、Safari、Opera到國內(nèi)的傲游瀏覽器、搜狗瀏覽器、QQ瀏覽器等都開始具備支持和兼容HTML5的能力。由此可見，開發(fā)基于HTML5的綜合服務(wù)系統(tǒng)可以在較廣泛的瀏覽器中運(yùn)行。伴隨著智能手持設(shè)備迅速占據(jù)整個(gè)移動(dòng)市場(chǎng)，在移動(dòng)設(shè)備上開發(fā)具有較高兼容性的網(wǎng)站已經(jīng)成為了一種非常急迫和實(shí)用的需求。與早期版本的網(wǎng)頁設(shè)計(jì)語言相比，HTML5和CSS3在頁面布局與設(shè)計(jì)方面具有使用起來更方便、樣式更加靈活以及兼容性更高等優(yōu)勢(shì)。另一方面，諸如jQuery Mobile等手機(jī)Web開發(fā)框架的出現(xiàn)，已經(jīng)在某種程度上很好地解決了不同手持設(shè)備的兼容性問題。2.2經(jīng)濟(jì)可行性在經(jīng)濟(jì)方面，借助于現(xiàn)

17、有的筆記本電腦、圖書館里的資料以及互聯(lián)網(wǎng)上的資料完全可以在有限的時(shí)間內(nèi)開發(fā)出滿足同學(xué)們需求的系統(tǒng)。不需要額外購買更多的硬件設(shè)備或軟件。具備經(jīng)濟(jì)可行性。2.3操作可行性系統(tǒng)將參照原有電腦版、安卓版綜合服務(wù)系統(tǒng)的設(shè)計(jì)風(fēng)格。同時(shí)，界面將設(shè)計(jì)的更加簡(jiǎn)潔，從而使系統(tǒng)更具實(shí)用性。對(duì)用戶來說，只要會(huì)使用手機(jī)瀏覽器上網(wǎng)，就有足夠的能力輕松地訪問本系統(tǒng)。同時(shí)，在系統(tǒng)中，將給出較多友好的文字提示，以方便大家使用該系統(tǒng)。2.4數(shù)據(jù)流圖數(shù)據(jù)流圖作為交流信息的基本工具，在分析員和用戶之間起著“橋梁”的作用。由于數(shù)據(jù)流圖中主要使用了四種基本符號(hào)，并且不包含程序具體實(shí)現(xiàn)的細(xì)節(jié)。因此，大多數(shù)非計(jì)算機(jī)專業(yè)的人都可以較容易的理解

18、它。本系統(tǒng)的數(shù)據(jù)流圖如圖2-1所示：圖2-1系統(tǒng)數(shù)據(jù)流圖2.5數(shù)據(jù)字典數(shù)據(jù)字典包含了數(shù)據(jù)流圖中所有元素定義的解釋，以方便用戶查閱。以下是對(duì)系統(tǒng)中所涉及的元素的定義：1、 數(shù)據(jù)項(xiàng)定義：系統(tǒng)的數(shù)據(jù)項(xiàng)描述如表2-1所示：表2-1系統(tǒng)的數(shù)據(jù)項(xiàng)描述序號(hào)列 名字段描述數(shù)據(jù)類型可否為空I01-01user_id學(xué)號(hào)varchar(11)否I01-02user_password登錄密碼varchar(20)否I01-03user_name姓名nvarchar(20)否I01-04user_class班級(jí)nvarchar(20)否I01-05user_academy學(xué)院nvarchar(20)是I01-06us

19、er_sex性別nvarchar(1)是I01-07Cet四、六級(jí)報(bào)名tinyint是I01-08com云記事nvarchar(max)是表2-1續(xù)表I01-09chi普通話報(bào)名bit是I01-10ID_card身份證號(hào)varchar(18)是I01-11cet_done是否報(bào)過CETbit否I01-12news_id緊急通知IDint否I01-13news_title標(biāo)題nvarchar(50)否I01-14news_adddate添加日期smalldatetime否I01-15news_source發(fā)布人nchar(20)否I01-16news_content詳細(xì)內(nèi)容nvarchar(30

20、00)否I01-17news_id2新聞消息IDint否I01-18news_title2標(biāo)題nvarchar(50)否I01-19news_adddate2添加日期date否I01-20news_source2發(fā)布人nchar(20)否I01-21news_content2詳細(xì)內(nèi)容nvarchar(3000)否I01-22id課程號(hào)int否I01-23class班級(jí)nvarchar(20)否I01-24c1課程1nvarchar(200)否I01-25c2-c25課程2-25nvarchar(200)否I01-26aID假條IDint否I01-27aKind請(qǐng)假類型nvarchar(20)否

21、I01-28aStartTime請(qǐng)假開始時(shí)間datetime否I01-29aStopTime請(qǐng)假結(jié)束時(shí)間datetime否I01-30aTell聯(lián)系電話char(12)否I01-31aReason請(qǐng)假事由nvarchar(200)否I01-32aUser_id用戶登錄IDvarchar(11)否I01-33aSubmitTime假條提交時(shí)間datetime否I01-34AuthPerson審批人nvarchar(20)是I01-35AuthTime審批時(shí)間datetime是I01-36AuthStep審批人類型nvarchar(50)是I01-37AuthResult審批結(jié)果nvarchar(

22、20)是2、 主要業(yè)務(wù)數(shù)據(jù)流定義：數(shù)據(jù)流編號(hào)：D1-01數(shù)據(jù)流名稱：用戶信息數(shù)據(jù)流來源：用戶數(shù)據(jù)流去向：P1-01數(shù)據(jù)流組成：I01-01+I01-02數(shù)據(jù)流編號(hào)：D1-02數(shù)據(jù)流名稱：驗(yàn)證信息數(shù)據(jù)流來源：F1-01數(shù)據(jù)流去向：P1-01數(shù)據(jù)流組成：I01-01+I01-02該部分內(nèi)容較多，詳細(xì)內(nèi)容，請(qǐng)參見附錄一。3、 主要數(shù)據(jù)存儲(chǔ)的定義：名稱：用戶信息表編號(hào)：F1-01簡(jiǎn)述：用來存儲(chǔ)用戶信息的表流出的數(shù)據(jù)流：D1-02組成：I01-01+I01-02+I01-03+I01-04+I01-05+I01-06+I01-07+I01-08+I01-09+I01-10+I01-11名稱：緊急通知表編

23、號(hào)：F1-02簡(jiǎn)述：用來存儲(chǔ)新聞消息緊急通知信息的表流出的數(shù)據(jù)流：組成：I01-12+I01-13+I01-14+I01-15+I01-16該部分內(nèi)容較多，詳細(xì)內(nèi)容請(qǐng)參見附錄二。3 需求分析3.1網(wǎng)站規(guī)劃開發(fā)本系統(tǒng)的過程中，應(yīng)該考慮以下幾點(diǎn)：1、 網(wǎng)站的設(shè)計(jì)風(fēng)格參照電腦版綜合服務(wù)系統(tǒng)在開發(fā)本網(wǎng)站的過程中頁面主要選擇以藍(lán)色為基調(diào)。這參照了電腦版綜合服務(wù)系統(tǒng)的設(shè)計(jì)風(fēng)格。這種設(shè)計(jì)將有助于大家盡快的習(xí)慣移動(dòng)版綜合服務(wù)系統(tǒng)。2、 對(duì)頁面的樣式文件和腳本文件統(tǒng)一部署對(duì)復(fù)雜頁面的CSS和jQuery代碼統(tǒng)一放在tute.css文件和tute.js文件中。這有助于網(wǎng)站的后期維護(hù)，同時(shí)有助于統(tǒng)一網(wǎng)站的編碼風(fēng)格。

24、亦可以減少重復(fù)CSS代碼的編寫。3.2需求分析本系統(tǒng)是一個(gè)聯(lián)系學(xué)校和同學(xué)們的校園內(nèi)部門戶網(wǎng)站，可以在同學(xué)們和學(xué)校之間架起一座通信的橋梁。同學(xué)們可以借助于該網(wǎng)站隨時(shí)隨地的查看學(xué)校發(fā)布的通知，以及下載學(xué)校發(fā)布在校園網(wǎng)上的文件。除此之外，之前只可以在電腦端完成的操作，以后同學(xué)們?cè)谑謾C(jī)上就可以實(shí)現(xiàn)。比如，在手機(jī)端實(shí)現(xiàn)大學(xué)英語四六級(jí)報(bào)名、普通話報(bào)名。另外，當(dāng)同學(xué)們身邊沒有電腦時(shí)，也可以直接在手機(jī)端綜合服務(wù)系統(tǒng)里申請(qǐng)假條，這將極大地方便同學(xué)們的出行。還有，當(dāng)同學(xué)們?cè)谏险n、聽講座或者開會(huì)由于某種原因而沒有帶記事本的時(shí)候，可以拿出手機(jī)將自己的筆記記錄在云筆記中，便于課下或會(huì)后整理。保存在云筆記中的內(nèi)容將會(huì)存儲(chǔ)

25、到學(xué)校服務(wù)器上，即便手機(jī)丟失，自己記錄的文字也不會(huì)丟失。因此，針對(duì)我校學(xué)生的實(shí)際需求，整理和定義了以下需求，如表3-1所示：表3-1系統(tǒng)功能需求分析功能模塊實(shí)現(xiàn)功能用戶登錄驗(yàn)證用戶名和密碼新聞公告查看學(xué)校發(fā)布的新聞公告、緊急通知課表查詢查詢某班級(jí)的課表四、六級(jí)報(bào)名大學(xué)英語四、六級(jí)報(bào)名云筆記臨時(shí)記錄課堂、會(huì)議內(nèi)容普通話報(bào)名報(bào)名普通話我要請(qǐng)假申請(qǐng)休假、查看自己的請(qǐng)假記錄3.3系統(tǒng)E-R圖實(shí)體-聯(lián)系圖是根據(jù)用戶的要求建立的概念性的數(shù)據(jù)模型，用于輔助用戶與系統(tǒng)分析員進(jìn)行交流。本系統(tǒng)對(duì)應(yīng)的實(shí)體-聯(lián)系圖如圖4-2所示：圖3-1系統(tǒng)E-R圖3.4軟硬件要求本系統(tǒng)后臺(tái)基于SQL Server 2008 Ent

26、erprise開發(fā)，前臺(tái)頁面基于jQuery Mobile 框架和jQuery腳本語言開發(fā)。對(duì)于SQL Server 2008 Enterprise，可以存儲(chǔ)TP級(jí)圖3-1續(xù)圖的數(shù)據(jù)，其關(guān)鍵在于數(shù)據(jù)表的設(shè)計(jì)。對(duì)于校園綜合服務(wù)系統(tǒng)存儲(chǔ)的數(shù)據(jù)GB級(jí)就足以滿足需求了；而對(duì)于瞬時(shí)訪問量，通常SQL Server 2008 Enterprise瞬時(shí)可以承受數(shù)千次的并發(fā)寫，而本系統(tǒng)主要提供信息查閱。所以，提供瞬時(shí)上千次的讀是沒有問題的。眾所周知，數(shù)據(jù)寫要比數(shù)據(jù)讀對(duì)系統(tǒng)的要求高很多。綜上所述，軟件方面，現(xiàn)有的PC版綜合服務(wù)系統(tǒng)使用的SQL Server 2008 Enterprise就可以滿足需求。學(xué)?，F(xiàn)有

27、的硬件設(shè)備，可以使PC版綜合服務(wù)系統(tǒng)穩(wěn)定的運(yùn)行，而將要開發(fā)的這個(gè)移動(dòng)版的系統(tǒng)占用的資源會(huì)更少，整個(gè)網(wǎng)站總的大小加起來約800KB（不包含后臺(tái)數(shù)據(jù)）。所以，現(xiàn)有的硬件資源也是夠用的。3.5運(yùn)行環(huán)境要求所有支持HTML5的手機(jī)、平板等移動(dòng)設(shè)備都可以通過瀏覽器登錄移動(dòng)端綜合服務(wù)系統(tǒng)。4 總體設(shè)計(jì)4.1總體設(shè)計(jì)參照現(xiàn)有的Android 版綜合服務(wù)系統(tǒng)，以及PC版綜合服務(wù)系統(tǒng)，本系統(tǒng)對(duì)要實(shí)現(xiàn)的功能進(jìn)行了適當(dāng)?shù)膬?yōu)化。首先，登錄模塊是必不可少的，在登錄模塊中設(shè)置了用戶名和密碼的驗(yàn)證，只有當(dāng)用戶名和密碼都驗(yàn)證成功后方可進(jìn)入系統(tǒng)的主頁。在主頁上顯示了本系統(tǒng)所實(shí)現(xiàn)的全部功能。第一個(gè)功能是信息公告。在信息公告頁，同

28、學(xué)們能夠獲取到學(xué)校發(fā)布的最新的“緊急通知”和“新聞消息”。此頁面中包含了全部的校園新聞公告。系統(tǒng)省掉了原有PC版系統(tǒng)中的黨建工作和綜合信息模塊，原因是在黨建工作和綜合信息模塊下的信息更新較慢，幾乎是幾個(gè)月沒有新的消息出現(xiàn)，如果有消息直接公布到現(xiàn)有的新聞消息頁面即可。第二個(gè)頁面是課表查詢。對(duì)于大一、大二的新生，因課程較多而容易記混，保留此功能是合理的。第三個(gè)頁面是請(qǐng)假模塊。應(yīng)畢業(yè)設(shè)計(jì)老師的要求，在本系統(tǒng)中添加了請(qǐng)假模塊，該模塊主要提供兩個(gè)大的功能，功能之一：“申請(qǐng)假條”，同學(xué)們?cè)谠撃K中可以提交自己的請(qǐng)假信息。功能之二：查看“請(qǐng)假記錄”。該部分提供了查看最近十次請(qǐng)假記錄的功能。之所以未把全部的請(qǐng)

29、假信息都進(jìn)行顯示，是因?yàn)檫^去的請(qǐng)假信息對(duì)于請(qǐng)假者本人往往是沒有太多意義的。當(dāng)然，如果請(qǐng)假者想查看自己全部的請(qǐng)假信息也是可以的，登錄PC版綜合服務(wù)系統(tǒng)就可以看到了。接下來，設(shè)計(jì)了“普通話報(bào)名”和“四六級(jí)報(bào)名”功能。在普通話報(bào)名頁，設(shè)計(jì)了一個(gè)單選按鈕，只要在普通話報(bào)名的時(shí)間段，同學(xué)們進(jìn)入本系統(tǒng)中普通話報(bào)名頁選擇普通話報(bào)名選項(xiàng)并點(diǎn)擊提交按鈕即可實(shí)現(xiàn)報(bào)名。在非普通話報(bào)名時(shí)間段進(jìn)行報(bào)名是無效的，通常在開啟普通話報(bào)名功能時(shí)，系統(tǒng)管理員應(yīng)該對(duì)后臺(tái)數(shù)據(jù)庫中普通話報(bào)名列的值進(jìn)行歸0設(shè)置。同理，“四六級(jí)報(bào)名”部分也是一樣的，只不過在四六級(jí)報(bào)名模塊中，設(shè)置了兩個(gè)單選按鈕供用戶選擇。網(wǎng)站的最后一個(gè)功能是云記事功能，該

30、模塊提供了簡(jiǎn)單的記事功能，當(dāng)同學(xué)們臨時(shí)需要記錄一些文本內(nèi)容的時(shí)候可以直接記錄在云筆記中，這些內(nèi)容將會(huì)保存在后臺(tái)數(shù)據(jù)庫中，不會(huì)因?yàn)槭謾C(jī)的丟失而導(dǎo)致數(shù)據(jù)丟失。4.1.1功能模塊圖基于網(wǎng)站的總體設(shè)計(jì)，我設(shè)計(jì)了如下的功能模塊圖。借助于此圖，大家對(duì)網(wǎng)站要實(shí)現(xiàn)的功能便一目了然了。如圖4-1所示：圖4-1 系統(tǒng)功能模塊圖4.2數(shù)據(jù)庫設(shè)計(jì)在名為tute的數(shù)據(jù)庫中新建5個(gè)表：users、news、news2、course、Ask，分別用于保存學(xué)生信息、新聞公告、緊急通知、課表信息、請(qǐng)假信息，其完整的結(jié)構(gòu)如下：1) 學(xué)生表（users）該表用于存儲(chǔ)學(xué)生基本信息（學(xué)號(hào)、登錄密碼、姓名、班級(jí)、學(xué)院、性別、身份證號(hào)）以

31、及四六級(jí)報(bào)名、普通話報(bào)名、云記事等信息，其結(jié)構(gòu)如表4-1所示：以SQL Server 2008為例，生成users表的數(shù)據(jù)庫腳本代碼如下：CREATE TABLE dbo.users(user_id varchar(11) COLLATE Chinese_PRC_CI_AS NOT NULL,user_password varchar(20) COLLATE Chinese_PRC_CI_AS NOT NULL,user_name nvarchar(20) COLLATE Chinese_PRC_CI_AS NOT NULL,user_class nvarchar(20) COLLATE Ch

32、inese_PRC_CI_AS NOT NULL,user_academy nvarchar(20) COLLATE Chinese_PRC_CI_AS NULL,user_sex nvarchar(1) COLLATE Chinese_PRC_CI_AS NULL,cet tinyint NULL,com nvarchar(max) COLLATE Chinese_PRC_CI_AS NULL,chi bit NULL,ID_card varchar(18) COLLATE Chinese_PRC_CI_AS NULL,cet_done bit NOT NULL, CONSTRAINT PK

33、_users PRIMARY KEY CLUSTERED ( user_id ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,ALLOW_PAGE_LOCKS =ON)ON PRIMARY)ONPRIMARY表4-1 users（學(xué)生表）字段名描述類型是否為空是否是主鍵user_id學(xué)號(hào)varchar(11)否是user_password登錄密碼varchar(20)否否user_name姓名nvarchar(20)否否user_class班

34、級(jí)nvarchar(20)否否user_academy學(xué)院nvarchar(20)是否user_sex性別nvarchar(1)是否Cet四、六級(jí)報(bào)名tinyint是否com云記事nvarchar(max)是否chi普通話報(bào)名bit是否ID_card身份證號(hào)varchar(18)是否cet_done是否報(bào)過CETbit否否users表在數(shù)據(jù)庫中的測(cè)試數(shù)據(jù)如圖4-2所示：圖4-2 users 表中的測(cè)試數(shù)據(jù)2) 新聞公告表該表用于存儲(chǔ)新聞公告里的全部信息，其結(jié)構(gòu)如表4-2所示：以SQL Server 2008為例，生成news表的SQL語句如下：CREATE TABLE news(news_id

35、 int IDENTITY(1,1) NOT NULL,news_title nvarchar(50) NOT NULL,news_adddate smalldatetime NOT NULL,表4-2 news（新聞公告表）字段名描述類型是否為空是否為主鍵news_id新聞IDint否是，自增項(xiàng)news_title新聞標(biāo)題nvarchar(50)否否news_adddate新聞添加日期smalldatetime否否news_source新聞發(fā)布人nchar(20)否否news_content新聞內(nèi)容nvarchar(3000)否否news_source nchar(20) NOT NULL,

36、news_content nvarchar(3000) NOT NULL) ON PRIMARYnews表在數(shù)據(jù)庫中的測(cè)試數(shù)據(jù)如圖4-3所示：圖4-3 news 表中的測(cè)試數(shù)據(jù)注：緊急通知表與新聞公告表表格式一樣，僅表名不同，此處不再說明。3) 課程表該表用于存儲(chǔ)全部班級(jí)的課程信息，其表結(jié)構(gòu)如表4-3所示：表4-3 course（課程表）字段名描述類型是否為空是否為主鍵id課程號(hào)int否是，自增項(xiàng)class班級(jí)nvarchar(20)否否c1課程1nvarchar(200)否否c2課程2nvarchar(200)否否c3c25課程325nvarchar(200)否否以SQL Server 20

37、08為例，生成course表的SQL語句如下所示：CREATE TABLE course(id int IDENTITY(1,1) NOT NULL,class nvarchar(20) NOT NULL,c1 nvarchar(200) NULL,c2 nvarchar(200) NULL,、/此處省略c3-c24。c25 nvarchar(200) NULL) ON PRIMARYcourse表在數(shù)據(jù)庫中的示例數(shù)據(jù)如圖4-4所示:圖4-4 course表中的測(cè)試數(shù)據(jù)4) 請(qǐng)假表該表用于存儲(chǔ)學(xué)生請(qǐng)假信息，其表結(jié)構(gòu)如表4-4所示：表4-4 Ask （請(qǐng)假表）字段名描述類型是否為空是否為主鍵aI

38、D假條IDint否是，自增項(xiàng)aKind請(qǐng)假類型nvarchar(20)否否aStartTime請(qǐng)假開始時(shí)間datetime否否aStopTime請(qǐng)假結(jié)束時(shí)間datetime否否aTell聯(lián)系電話char(12)否否aReason請(qǐng)假事由nvarchar(200)否否aUser_id用戶登錄IDvarchar(11)否外鍵，參照users. user_idaSubmitTime假條提交時(shí)間datetime是否AuthPerson審批人nvarchar(20)是否AuthTime審批時(shí)間datetime是否AuthStep審批人類型nvarchar(50)是否AuthResult審批結(jié)果nvarc

39、har(20)是否以SQL Server 2008為例，生成Ask表的數(shù)據(jù)庫腳本代碼如下：CREATE TABLE dbo.Ask(aID int IDENTITY(1,1) NOT NULL,aKind nvarchar(20) NOT NULL,aStartTime datetime NOT NULL,aStopTime datetime NOT NULL,aTell char(12) NOT NULL,aReason nvarchar(200) NOT NULL,aUser_id varchar(11) NOT NULL,aSubmitTime datetime NOT NULL,Aut

40、hPerson nvarchar(20) NULL,AuthTime datetime NULL,AuthStep nvarchar(50) NULL,AuthResult nvarchar(20) NULL, CONSTRAINT PK_Ask PRIMARY KEY CLUSTERED (aID ASC)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON PRIMARY) ON PRIMARYGOS

41、ET ANSI_PADDING OFFGOALTER TABLE dbo.Ask WITH CHECK ADD CONSTRAINT FK_Ask_users FOREIGN KEY(aUser_id)REFERENCES dbo.users (user_id)GOALTER TABLE dbo.Ask CHECK CONSTRAINT FK_Ask_usersGOAsk表在數(shù)據(jù)庫中的示例數(shù)據(jù)如圖4-5所示:圖4-5 Ask表中的測(cè)試數(shù)據(jù)4.3輸出API設(shè)計(jì)系統(tǒng)中除通過數(shù)據(jù)庫存儲(chǔ)數(shù)據(jù)外，還需要用于數(shù)據(jù)輸出的API接口文件，以供前端頁面調(diào)用。根據(jù)系統(tǒng)的實(shí)際需求，設(shè)計(jì)了12個(gè)相對(duì)應(yīng)的API接口，說

42、明如下：1) 驗(yàn)證“用戶登錄”的URL地址為：http:/localhost:2128/NewsApi.ashx?act=login&userName=admin&userPass=admin其中，“NewsApi.ashx”為.NET中的一般處理程序，“act”為操作類型參數(shù)，該接口返回的JSON數(shù)據(jù)如下所示："Table":"Column1":12) 用于新聞公告“緊急通知”頁中列表信息的輸出的URL地址為：http:/localhost:2128/NewsApi.ashx?act=news_list該接口返回的部分JSON數(shù)據(jù)如下：

43、"Table":"news_id":5,"news_title":"關(guān)于*的*","news_adddate":"2015/5/2 0:00:00","news_source":"學(xué)校某部","news_id":4,"news_title":"緊急通知","news_adddate":"2015/5/1 0:00:00","ne

44、ws_source":"轉(zhuǎn)自氣象局"3) 用于新聞公告“緊急通知”頁詳細(xì)信息頁輸出的URL地址為：http:/localhost:2128/NewsApi.ashx?act=detail&newsid=20其中，“newsid”為用戶點(diǎn)擊的消息的“id”號(hào)，該接口返回的部分JSON數(shù)據(jù)如下："Table":"news_id":20,"news_title":"傾城之戀","news_adddate":"2014/2/15 0:00:00"

45、,"news_source":"張愛玲","news_content":"愛學(xué)習(xí)，不搞對(duì)象。愛學(xué)習(xí)，不搞對(duì)象。愛學(xué)習(xí)，不搞對(duì)象。"4) 新聞公告“信息公告”頁列表輸出的URL地址中的操作類型參數(shù)與“緊急通知”頁不同，顯示內(nèi)容的格式相同，此處不再說明。另，“信息公告”“詳細(xì)信息”頁也與“緊急通知”“詳細(xì)信息”頁輸出格式一樣，亦不再說明。5) “課表查詢”頁輸出課表信息的URL地址為：http:/localhost:2128/NewsApi.ashx?act=Course&cid=2其中，“cid”為課表“id

46、”號(hào)。該接口返回的部分JSON數(shù)據(jù)如下："Table":"id":2,"class":"計(jì)科1201·","c1":"學(xué)科教學(xué)法羅梅B205，3-18周","c2":"","c3":"","c4":"EDA技術(shù)及應(yīng)用于雅楠C203，3-17周單周","c5":"","c6":"&

47、quot;,"c7":"單片機(jī)原理與應(yīng)用谷兆麟老教114,4-18周雙周上","c8":"專業(yè)英語呂志老教501,3-18周","c9":"單片機(jī)原理與應(yīng)用谷兆麟老教114,4-18周上","c10":"EDA技術(shù)及應(yīng)用于雅楠C203，3-18周","c11":"","c12":"","c13":"","c1

48、4":"","c15":"","c16":"","c17":"","c18":"","c19":"","c20":"","c21":"教育測(cè)量與評(píng)價(jià)A喬翠芳C204,4-14周","c22":"","c23":"&quo

49、t;,"c24":"","c25":""6) “四六級(jí)報(bào)名”頁執(zhí)行數(shù)據(jù)保存的URL地址為：http:/localhost:2128/NewsApi.ashx?act=CET&userName='02210101329'&cetGrade='6'其中，“userName”為用戶的登錄“id”，“cetGrade”是報(bào)名信息對(duì)應(yīng)的后臺(tái)要修改的列。以上URL是為學(xué)號(hào)為“02210101329”的同學(xué)，報(bào)名大學(xué)英語6級(jí)。7) “普通話報(bào)名”頁執(zhí)行數(shù)據(jù)保存的URL與“四六級(jí)報(bào)名

50、”頁執(zhí)行數(shù)據(jù)保存的URL相類似，僅操作類型參數(shù)和傳入值的名稱不同（數(shù)據(jù)表中修改的列不同），此處不再說明。8) “云筆記”頁執(zhí)行數(shù)據(jù)保存的URL地址為：http:/localhost:2128/NewsApi.ashx?act=Note&userName='02210101329'&note_Com='云筆記內(nèi)容'其中，“userName”為用戶的登錄“id”，“note_Com”是要保存的筆記內(nèi)容。上述URL是給學(xué)號(hào)為“02210101329”的同學(xué)保存筆記內(nèi)容。9) “我要請(qǐng)假”頁提交請(qǐng)假信息的URL地址為：http:/localhost:21

51、28/NewsApi.ashx?act=Ask&userName='"'" + $user_id + "'" + '&CLASS=' + "'" + strC + "'" + '&startT=' + "'" + $start + "'" + '&endT=' + "'" + $end + "'&

52、quot; + '&tellC=' + "'" + $tellcode + "'" + '&REASON=' + "'" + $Reason + "'" + '&TIME=' + "'" + $time + "'"其中，操作類型參數(shù)后面跟著的是向數(shù)據(jù)表中插入一條請(qǐng)假記錄所需的參數(shù)，包括學(xué)號(hào)：“$user_id”，請(qǐng)假類型：“CLASS”等。10) “我要請(qǐng)假

53、”頁獲取用戶請(qǐng)假信息的URL地址為：http:/localhost:2128/NewsApi.ashx?act=Ask2&userName='02210101329'上述URL是獲取學(xué)號(hào)為“02210101329”的同學(xué)的請(qǐng)假信息。該接口返回的部分JSON數(shù)據(jù)如下："Table":"aID":45,"aKind":"","aStartTime":"1900/1/1 0:00:00","aStopTime":"1900/1/

54、1 0:00:00","aTell":"","aReason":"","aUser_id":"02210101329","aSubmitTime":"2015/5/21 14:07:00","AuthPerson":"","AuthTime":"","AuthStep":"","AuthResult

55、":""11) 主頁上用于顯示用戶名的URL、是否報(bào)名過四六級(jí)的URL、是否報(bào)名過普通話的URL以及用戶報(bào)名信息的URL地址較為簡(jiǎn)單，此處不再贅述。5 功能實(shí)現(xiàn)5.1開發(fā)環(huán)境操作系統(tǒng)版本：windows 7 旗艦版數(shù)據(jù)庫版本：SQL Server 2008 Enterprise開發(fā)軟件版本：Microsoft Visual studio 2010測(cè)試軟件：Google Chrome和Opera Mobile Emulator 12.15.2前臺(tái)頁面設(shè)計(jì)與實(shí)現(xiàn)5.2.1系統(tǒng)封面本系統(tǒng)可以通過移動(dòng)設(shè)備的瀏覽器查看，也能直接打包成apk。如果打包成apk，最好有一個(gè)系統(tǒng)

56、封面頁，借此對(duì)系統(tǒng)的功能進(jìn)行簡(jiǎn)單的說明，然后跳轉(zhuǎn)至登陸頁。關(guān)鍵代碼：/系統(tǒng)封面頁頁面創(chuàng)建事件function changepage() window.location.href = "Login.htm"$('#load_index').live("pagecreate", function () var id = setInterval("changepage()", 3000);)注：1) live()方法為被選元素綁定一個(gè)或多個(gè)事件，并設(shè)定當(dāng)這些事件發(fā)生時(shí)執(zhí)行的函數(shù)。2) setInterval()方法可按指定的

57、周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。下面是系統(tǒng)封面頁在Opera Mobile Emulator 12.1下的運(yùn)行效果，如圖5-1所示。在實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)功能的JavaScript代碼中，首先寫一個(gè)函數(shù)changepage()，在該函數(shù)中，設(shè)置“window”對(duì)象的“l(fā)ocation.href”的屬性值，以實(shí)現(xiàn)將當(dāng)前頁面跳轉(zhuǎn)至登陸頁的功能；其次，將當(dāng)前頁面綁定至“pagecreate”事件，并在該事件中調(diào)用setInterval()方法，該方法將每隔3秒鐘自動(dòng)執(zhí)行自定義函數(shù)changepage()，從而實(shí)現(xiàn)頁面的自動(dòng)跳轉(zhuǎn)功能。圖5-1 系統(tǒng)封面頁效果圖5.2.2用戶登陸用戶登錄頁，提供用戶名和

58、密碼的驗(yàn)證。在該頁面中添加有三個(gè)<input>標(biāo)簽，該標(biāo)簽用于獲取用戶登錄信息。<input>元素有多種類型，此處用到了text、password、button三種類型。在頁面的javascript代碼中為button按鈕添加事件，在用戶輸入的用戶名和密碼都不為空的情況下對(duì)用戶名和密碼進(jìn)行驗(yàn)證，驗(yàn)證的邏輯是：根據(jù)用戶名和密碼進(jìn)行查詢，如果獲取到的返回?cái)?shù)值大于0（為1），說明該用戶存在且用戶名、密碼驗(yàn)證通過，然后跳轉(zhuǎn)至網(wǎng)站首頁。否則，做出相應(yīng)的提示。實(shí)現(xiàn)該驗(yàn)證的javascript代碼如下所示： function UserLogin(name, pass) var $lst_login = function () var $value1 = 0 ; /用于記錄返回值，返回值大于0說