音樂網(wǎng)站的設(shè)計與實現(xiàn)論文

1、<p>　　JIU JIANG UNIVERSITY</p><p><b>　　畢 業(yè) 論 文 </b></p><p>　　題 目 音樂網(wǎng)站的設(shè)計與實現(xiàn) </p><p>　　英文題目The Design and Implementation of </p><p>　　Music Web

2、site </p><p>　　院 系 信息科學(xué)與技術(shù)學(xué)院 </p><p>　　專 業(yè) 計算機科學(xué)與技術(shù) </p><p>　　姓 名 @@@@@@@@@ </p><p>　　班級學(xué)號 @@@@@@@@@4

3、 </p><p>　　指導(dǎo)教師 @@@@@@@@@ </p><p><b>　　二Ｏ一五年五月</b></p><p><b>　　摘 要</b></p><p>　　網(wǎng)絡(luò)音樂巨大的潛在市場，帶動了國內(nèi)在線音樂的飛速發(fā)展，像百度、騰

4、訊、豆瓣、酷狗等公司都研發(fā)了自己的在線音樂網(wǎng)站。同時也有很多小型音樂網(wǎng)站如雨后春筍般出現(xiàn)。但是很多的音樂網(wǎng)站在很多方面的設(shè)計都不合理和安全，例如架構(gòu)不合理，性能低下，而且投放了大量的廣告，界面設(shè)計爛，下載收費貴，用戶體驗差，導(dǎo)致整個網(wǎng)站系統(tǒng)運營質(zhì)量很低。 </p><p>　　系統(tǒng)闡述的是一個在線音樂網(wǎng)站的設(shè)計與實現(xiàn)。經(jīng)過對現(xiàn)有的在線音樂網(wǎng)站仔細(xì)認(rèn)真的分析和對比，以及自己對在線音樂網(wǎng)站的體驗和感受，得出了本音樂網(wǎng)

5、站的功能需求。根據(jù)系統(tǒng)需求，系統(tǒng)采用APACHE2.2作為服務(wù)器，Mysql數(shù)據(jù)庫做數(shù)據(jù)平臺，并選擇PHP語言開發(fā)后臺服務(wù)系統(tǒng)。前臺主要使用HTML5，CSS3，Javascript，Ajax等技術(shù)，Ajax主要用于網(wǎng)頁中的頁面特效和異步通信。</p><p>　　系統(tǒng)采用MVC架構(gòu)，將系統(tǒng)分為數(shù)據(jù)層，視圖層，業(yè)務(wù)邏輯層三層來開發(fā)與實現(xiàn)。這樣將三層獨立開發(fā)，有利于維護(hù)和效率。</p><p&g

6、t;　　系統(tǒng)大體上分為兩個模塊，分別為前臺用戶模塊和后臺管理員管理模塊。在安全上，系統(tǒng)在有敏感信息的傳送上都使用了單向加密，以及采用了防SQL注入技術(shù)。</p><p>　　關(guān)鍵詞：音樂網(wǎng)站，在線試聽，異步通信</p><p><b>　　Abstract</b></p><p>　　Network Music huge potential m

7、arket, led the rapid development of the domestic online music, like Baidu, Tencent, watercress, cool dog and other companies have developed their own online music sites. There are also many small music sites have sprung

8、up. But many music sites in many aspects of the design are unreasonable and safety, such as unreasonable structure, poor performance, but also put a lot of advertising, bad interface design, download charges you, the use

9、r experience is poor, resultin</p><p>　　Systematically expounded the design and implementation of an online music site. After the existing online music sites are carefully analyzed and compared, as well as i

10、ts own online music site experience and feelings come to the functional requirements of the music sites. According to the system requirements, the system uses APACHE2.2 as a server, Mysql database platform for data and s

11、elect the PHP language development background service system. Reception main use HTML5, CSS3, Javascript, Ajax an</p><p>　　The system uses MVC architecture, the system is divided into data layer, view layer,

12、 business logic to the development and realization of three. This will triple the independent development is conducive to safeguarding and efficiency.</p><p>　　System is generally divided into two modules, e

13、ach module for the front and back-office administrator user management module. In security, the system has sensitive information transmitted on the use of one-way encryption, and the use of anti-SQL injection technique.&

14、lt;/p><p>　　Keywords: Music Website, Online Listening, Asynchronous Communication</p><p><b>　　目 錄</b></p><p><b>　　摘 要I</b></p><p>　　AbstractI

15、I</p><p><b>　　1 緒論</b></p><p>　　1.1研究的背景(1)</p><p>　　1.2 研究的意義(1)</p><p>　　1.3 國內(nèi)外研究現(xiàn)狀(2)</p><p>　　1.4 研究的內(nèi)容(3)</p><p>　　1.5

16、內(nèi)容創(chuàng)新點(3)</p><p>　　1.6 論文結(jié)構(gòu)(4)</p><p><b>　　2 需求分析</b></p><p>　　2.1業(yè)務(wù)流程分析(5)</p><p>　　2.2 系統(tǒng)功能需求分析(6)</p><p>　　2.3 數(shù)據(jù)流分析(7)</p><

17、p>　　2.4 用例圖分析(10)</p><p>　　2.5 系統(tǒng)性能需求(11)</p><p>　　2.6 系統(tǒng)設(shè)計方案(12)</p><p>　　2.7 本章小結(jié)(12)</p><p><b>　　3 系統(tǒng)總體設(shè)計</b></p><p>　　3.1 系統(tǒng)結(jié)構(gòu)設(shè)計(1

18、3)</p><p>　　3.2 系統(tǒng)功能設(shè)計(13)</p><p>　　3.3 系統(tǒng)數(shù)據(jù)庫設(shè)計(15)</p><p>　　3.4 本章小結(jié)(16)</p><p><b>　　4 詳細(xì)設(shè)計與實現(xiàn)</b></p><p>　　4.1 系統(tǒng)開發(fā)環(huán)境(17)</p><

19、p>　　4.2 前臺功能模塊的詳細(xì)設(shè)計與實現(xiàn)(18)</p><p>　　4.3 后臺管理功能模塊的詳細(xì)設(shè)計與實現(xiàn)(31)</p><p>　　4.4 網(wǎng)站界面的設(shè)計(40)</p><p>　　4.5 數(shù)據(jù)庫詳細(xì)設(shè)計(44)</p><p>　　4.6 本章小結(jié)(53)</p><p><b&g

20、t;　　5 系統(tǒng)運行與測試</b></p><p>　　5.1 測試方法簡介(54)</p><p>　　5.2 測試環(huán)境(54)</p><p>　　5.3 功能測試(54)</p><p>　　5.4 本章小結(jié)(58)</p><p><b>　　6 總結(jié)與展望</b>&l

21、t;/p><p>　　6.1 全文工作總結(jié)(59)</p><p>　　6.2 下一步工作展望(59)</p><p><b>　　致 謝(61)</b></p><p><b>　　參考文獻(xiàn)(62)</b></p><p><b>　　1 緒論</b

22、></p><p><b>　　1.1研究的背景 </b></p><p>　　隨著互聯(lián)網(wǎng)技術(shù)的高速發(fā)展和網(wǎng)絡(luò)帶寬不斷的增加，在線音樂產(chǎn)業(yè)的發(fā)展非常的迅速。特別是最近的幾年，在線音樂產(chǎn)業(yè)規(guī)模翻了幾番。根據(jù)艾瑞網(wǎng)的調(diào)研結(jié)果顯示，2003年中國在線音樂市場規(guī)模為1300萬元，2010年達(dá)到了2.8億元，2014年更是飆升到了將近50億元。中國在線音樂產(chǎn)業(yè)蒸蒸日上，潛

23、在價值巨大，它的高速發(fā)展，改變了傳統(tǒng)音樂的產(chǎn)業(yè)結(jié)構(gòu)。在線音樂網(wǎng)站的興起使得人們欣賞音樂的方式和載體發(fā)生了巨大的變化，突破了時間和空間的限制。</p><p>　　在中國，傳統(tǒng)唱片業(yè)不能滿足有音樂需求的消費者。與傳統(tǒng)音樂欣賞和交流模式相比，在線音樂網(wǎng)站有著非常大的優(yōu)勢，不僅可以滿足絕大部分用戶的音樂需求，還會刺激一些電子數(shù)碼產(chǎn)品的更新?lián)Q代。在線音樂網(wǎng)站作為音樂的網(wǎng)絡(luò)載體，對音樂的發(fā)展起到了深遠(yuǎn)的影響，特別是在音樂的

24、傳播，欣賞，創(chuàng)作等方面。</p><p>　　在線音樂網(wǎng)站使得音樂版權(quán)人的收入得到增加，提升音樂創(chuàng)作人的創(chuàng)作激情，有利于草根音樂人。同時，在線音樂網(wǎng)站加快了經(jīng)典流行音樂的傳播，改變了我們欣賞音樂的方式。</p><p><b>　　1.2 研究的意義</b></p><p>　　中國在線音樂的好時代正在接近。中國傳媒大學(xué)和國家音樂產(chǎn)業(yè)促進(jìn)工作委

25、員會聯(lián)合發(fā)布的《2014中國音樂產(chǎn)業(yè)發(fā)展報告》認(rèn)為，2013年中國在線音樂市場規(guī)模達(dá)43.6億元。由此可以看出，中國在線音樂市場潛力是巨大的。在線音樂網(wǎng)站對音樂用戶和音樂創(chuàng)作人帶來的便利是確定的，音樂用戶不再需要去買唱片和音樂播放器，以及音樂軟件客戶端也不需要安裝，就可以享受到高品質(zhì)的音樂和滿足自己的音樂需要。音樂創(chuàng)作人可以借助在線音樂網(wǎng)站平臺，不需要唱片公司簽約合作，便可以發(fā)布自己創(chuàng)作的音樂，這對于部分音樂人來說是非常重要的，不但可以

26、增加自己的收入，同時自己的創(chuàng)作思維會不受限制因此本系統(tǒng)這樣一個在線音樂網(wǎng)站的設(shè)計與實現(xiàn)有了很大的必要。</p><p>　　1.3 國內(nèi)外研究現(xiàn)狀</p><p>　　1.3.1 國外研究現(xiàn)狀</p><p>　　據(jù)美國唱片行業(yè)協(xié)會（RIAA）表示，在2007年只占全美音樂市場3%的在線音樂服務(wù)現(xiàn)如今已占到了該市場的21%。借助于美國良好的音樂版權(quán)保護(hù)和Pandor

27、a、iTunes Radio、Rhapsody、Spotify等公司的努力，美國音樂市場從2009年至今一直維持在70億美元左右的規(guī)模。在線音樂服務(wù)達(dá)到了14億美元，同比上升了39%。在所有的數(shù)字音樂格式中，像Spotify、Rdio和Beats Music這樣的付費式訂閱服務(wù)的增長速度最快，在2013年達(dá)到了6.28億美元，同比增長57%。而像iTunes那樣的提供永久數(shù)字下載服務(wù)的營收則下滑了1%，降至28億美元。蘋果iTunes平

28、臺模式使得蘋果一直領(lǐng)跑在線音樂市場。</p><p>　　1.3.2 國內(nèi)研究現(xiàn)狀</p><p>　　中國音樂產(chǎn)業(yè)沒能像歐美國家一樣經(jīng)歷時間的洗禮，短短十幾年的時間，音樂產(chǎn)業(yè)在成長初期就碰上了野蠻的互聯(lián)網(wǎng)，“避風(fēng)港”原則也讓音樂版權(quán)一度處于架空的狀態(tài)。但隨著近年來的發(fā)展，音樂產(chǎn)業(yè)邏輯開始清晰，監(jiān)管層的法律也慢慢完善，大公司和資本密集進(jìn)入也讓音樂版權(quán)的價值開始不斷提升。</p>

29、<p>　　2014年7月，阿里收購蝦米，并成功爭奪《中國好聲音》獨家音樂版權(quán)；9月，QQ音樂與杰威爾音樂、華研國際、英皇娛樂、美妙音樂、華誼兄弟音樂等唱片公司達(dá)成進(jìn)駐合作協(xié)議，并在移動端新增了獨家版塊。</p><p>　　版權(quán)成本不斷提高的同時，中國在線音樂的商業(yè)模式也在嘗試一些新的改變。像騰訊、阿里、網(wǎng)易等，都是大部分音樂向用戶免費、增值服務(wù)（比如更高的音質(zhì)等）收費。</p>&

30、lt;p>　　增值服務(wù)收費的做法會比直接針對音樂作品收費更令用戶容易接受，但這樣的收入增長速度可能并不是非常明顯。</p><p>　　2013年中國數(shù)字音樂市場規(guī)模達(dá)440.7億元，其中無線音樂市場規(guī)模達(dá)397.1億元，在線音樂市場規(guī)模達(dá)43.6億元。2013年數(shù)字音樂用戶達(dá)4.53億人以上。數(shù)字音樂的傳播、消費、體驗?zāi)Ｊ饺招略庐悾哂芯薮蟮氖袌霭l(fā)展?jié)摿Α?lt;/p><p>　　中國

31、在線音樂市場發(fā)展趨勢非常良好，國內(nèi)的很多音樂網(wǎng)站也是發(fā)展速度，比如QQ音樂，百度音樂，酷狗音樂，音悅臺，豆瓣音樂等，它們都提供著高品質(zhì)的音樂服務(wù)。但是這當(dāng)中也存在著很多的問題。比如版權(quán)問題，文化安全問題，政府管理問題等。其中版權(quán)問題是中國在線音樂產(chǎn)業(yè)發(fā)展道路上最大的絆腳石，亟需解決。在良好的版權(quán)保護(hù)下，在線音樂產(chǎn)業(yè)才能發(fā)展的更好更快，音樂人的創(chuàng)作動力也會得到巨大的提升。</p><p><b>　　1.

32、4 研究的內(nèi)容</b></p><p>　?。?）本在線音樂網(wǎng)站，是基于Apache2.2+Mysql5.5+Php5來開發(fā)的。Apache2.2作為系統(tǒng)服務(wù)器，Mysql5.5作為數(shù)據(jù)平臺，使用PHP語言編寫后臺服務(wù)程序。</p><p>　?。?）系統(tǒng)最核心的任務(wù)為注冊用戶提供音樂在線播放服務(wù)。</p><p>　?。?）系統(tǒng)主要分為兩個大模塊，分別

33、為前臺用戶模塊和后臺管理員管理模塊</p><p>　　（4）用戶前臺模塊主要為用戶提供音樂在線試聽，歌曲描述搜索，用戶主頁，歌曲分享，綁定社交網(wǎng)站等功能。</p><p>　?。?）后臺管理員管理模塊主要為管理員提供歌曲管理，歌手管理，歌詞管理，專輯管理，音樂錄像帶管理，會員管理，管理員管理等功能，以及集成了個人設(shè)置，天氣，郵件發(fā)送，鎖屏等輔助功能。</p><p&g

34、t;<b>　　1.5 內(nèi)容創(chuàng)新點</b></p><p>　　系統(tǒng)在做到功能全面的同時，亦要考慮系統(tǒng)的安全性，運行速度，穩(wěn)定性等問題。本系統(tǒng)在設(shè)計與實現(xiàn)時都做出了很多創(chuàng)新點。主要分為以下幾點：</p><p>　　（1）在所有涉及敏感信息的傳輸上都使用了單向加密，并采用了防SQL注入技術(shù)和防XSS腳本攻擊技術(shù)。</p><p>　　（2）系統(tǒng)

35、的開發(fā)采用三層架構(gòu)，將系統(tǒng)分為數(shù)據(jù)層，視圖層，業(yè)務(wù)邏輯層三層來開發(fā)實現(xiàn)，這樣對于后期的維護(hù)提供很大的方便。</p><p>　　（3）系統(tǒng)在界面設(shè)計和交互特效上，采用HTML5，CSS3，JAVASCRIPT，AJAX等技術(shù)，使得界面大氣清新，動畫優(yōu)美，用戶體驗非常好。AJAX主要用來實現(xiàn)系統(tǒng)的異步通信，靜態(tài)更新。</p><p><b>　　1.6 論文結(jié)構(gòu)</b>

36、</p><p>　　第一章：闡述本在線音樂網(wǎng)站系統(tǒng)的研究背景，意義和內(nèi)容，介紹了在線音樂網(wǎng)站國內(nèi)外研究的現(xiàn)狀以及本系統(tǒng)的創(chuàng)新之處。</p><p>　　第二章：系統(tǒng)需求分析，分析系統(tǒng)的功能需求，性能需求等，包括用戶前臺和管理員后臺兩個大模塊，以及每個模塊的子模塊的功能需求，并分析了系統(tǒng)的數(shù)據(jù)流。</p><p>　　第三章：闡述系統(tǒng)的總體設(shè)計，首先敘述了系統(tǒng)結(jié)構(gòu)的

37、設(shè)計，給出了系統(tǒng)的架構(gòu)圖。然后從功能方面，將整個系統(tǒng)分為用戶前臺和后臺管理兩個模塊。簡單介紹了數(shù)據(jù)庫的設(shè)計。</p><p>　　第四章：詳細(xì)闡述了系統(tǒng)前后臺各個子模塊的設(shè)計與實現(xiàn)，設(shè)計了需要用到的算法，畫出了它們的程序流程圖，根據(jù)前面給出的需求分析和系統(tǒng)設(shè)計，利用三層開發(fā)模式對系統(tǒng)進(jìn)行開發(fā)和實現(xiàn)，并詳細(xì)敘述了每一層的實現(xiàn)過程，即數(shù)據(jù)層，業(yè)務(wù)邏輯層，視圖層的開發(fā)過程。闡述了系統(tǒng)數(shù)據(jù)庫的設(shè)計，畫出了系統(tǒng)所需的所有表

38、結(jié)構(gòu)和表的屬性圖，以及給出了系統(tǒng)的總體E-R圖。</p><p>　　第五章：描述了系統(tǒng)的測試，并給出了測試結(jié)果。并用圖片和數(shù)據(jù)對系統(tǒng)的實現(xiàn)進(jìn)行了分析和評估。</p><p>　　第六章：對論文的工作進(jìn)行總結(jié)和評價，指出了系統(tǒng)中存在的不足與缺陷。以及這次設(shè)計的收獲與心得。</p><p>　　最后是介紹致謝與參考文獻(xiàn)等內(nèi)容。</p><p>

39、<b>　　2 需求分析</b></p><p>　　需求分析就是確定用戶的需要，然后根據(jù)用戶的需要確定軟件系統(tǒng)的功能。需求分析是軟件工程中的關(guān)鍵過程，只有先做好需求的分析，了解業(yè)務(wù)以后的發(fā)展趨勢，做好具有拓展性的系統(tǒng)設(shè)計，才會給系統(tǒng)更大的擴展空間，從而在需求發(fā)生變化的時候可以更從容的修改。</p><p>　　本在線音樂網(wǎng)站，為用戶提供優(yōu)質(zhì)的在線音樂試聽服務(wù)。普通

40、用戶注冊成為會員后，除了試聽高音質(zhì)的音樂外，還可以收藏喜愛的歌曲和歌手專輯，分享音樂給朋友或者其他用戶，搜索或過濾音樂等等。管理員可以管理網(wǎng)站的各種資源，如音樂，專輯信息，用戶信息等。</p><p><b>　　2.1業(yè)務(wù)流程分析</b></p><p>　　Business Process Analysis（BPA），即業(yè)務(wù)流程分析，是對業(yè)務(wù)功能分析的進(jìn)一步細(xì)化，

41、從而得到業(yè)務(wù)流程圖。業(yè)務(wù)流程圖（transaction flow diagram，簡稱TFD)，就是用一些規(guī)定的符號及連線來表示某個具體業(yè)務(wù)處理過程。業(yè)務(wù)流程圖的繪制基本上按照業(yè)務(wù)的實際處理步驟和過程繪制。換句話說，就是“文本”用圖形方式來反映實際業(yè)務(wù)處理過程的“流水賬”。</p><p>　　本在線音樂網(wǎng)站的業(yè)務(wù)流程：未注冊用戶進(jìn)入本網(wǎng)站后，需要先進(jìn)行注冊成為本站會員，從而登錄本網(wǎng)站，或者未注冊的用戶可以直接使

42、用自己的社交網(wǎng)站的帳號登錄，例如騰訊微博，QQ，新浪微博，人人網(wǎng)等，然后系統(tǒng)會自動記錄用戶的唯一標(biāo)識OPENID。用戶登陸后進(jìn)入網(wǎng)站首頁界面，接著便可以進(jìn)行歌曲試聽，歌曲搜索，修改個人信息，收藏歌曲等操作。管理員登陸時，首先進(jìn)入管理員登錄界面，然后輸入有效帳號和密碼，進(jìn)入到后臺管理主界面。然后管理員可以對用戶、歌曲、歌手、專輯等進(jìn)行管理，比如修改用戶信息，刪除用戶，添加用戶，上傳歌曲，添加MV（Music Video，音樂錄像帶），刪除

43、歌詞等。此外管理員還可以修改自己的信息，進(jìn)行個人的界面愛好設(shè)置，查看系統(tǒng)概況，查看天氣。由以上的業(yè)務(wù)流程分析，從而得出系統(tǒng)業(yè)務(wù)流程圖，如圖2-1所示。</p><p>　　圖2-1 系統(tǒng)業(yè)務(wù)流程圖</p><p>　　2.2 系統(tǒng)功能需求分析</p><p>　　2.2.1 前臺功能需求</p><p>　?。?）歌曲播放，注冊用戶可以使用該

44、子模塊試聽最新最酷的高品質(zhì)音樂。</p><p>　?。?）歌曲搜索，用戶可以通過輸入歌曲名，歌手名或者一些自然語言描述來搜索自己想要的音樂。搜索采用模糊和多字段搜索，從而返回較多信息。</p><p>　?。?）個人中心，用戶可以在此模塊編輯個人信息，發(fā)布心情說說，設(shè)置界面風(fēng)格等。此模塊操作均采用Ajax異步通信，實施靜態(tài)更新。</p><p>　　（4）分享音樂

45、，用戶可以分享好的音樂給自己的朋友，但要先進(jìn)行社交網(wǎng)絡(luò)的綁定，比如騰訊QQ，新浪微博等。</p><p>　?。?）音樂收藏，用戶可以通過此模塊來收藏自己喜歡的歌曲，系統(tǒng)會自動記錄并保存。</p><p>　?。?）排行榜模塊，用戶可以查看各大排行榜，并可以試聽。</p><p>　　2.2.2 后臺管理功能需求</p><p>　　管理員可

46、以通過后臺管理平臺對系統(tǒng)的各種資源進(jìn)行細(xì)致的管理，主要是歌曲，歌手，專輯，MV（Music Video，音樂錄像帶）等進(jìn)行更新和上傳。</p><p>　　（1）管理員可以對注冊用戶信息進(jìn)行管理，可以查看用戶信息，添加用戶，刪除用戶，修改用戶信息，但不能修改用戶密碼。</p><p>　　（2）管理員可以管理歌曲，包括查看歌曲信息，上傳歌曲，編輯歌曲信息，刪除歌曲，在刪除的同時將歌曲從硬盤

47、也刪除。</p><p>　?。?）管理專輯，包括創(chuàng)建專輯，編輯專輯信息，刪除專輯，刪除專輯時不刪除專輯中的歌曲。</p><p>　　（4）管理歌手，管理員可以添加歌手，編輯歌手信息，以及刪除歌手。</p><p>　?。?）管理歌詞，管理員可以上傳歌曲的歌詞，刪除歌詞，但不能編輯歌詞。</p><p>　?。?）管理員管理，擁有超級權(quán)限的

48、管理員可以添加管理員，鎖定管理員，刪除管理員，修改管理員信息，但不能查看管理的密碼。</p><p>　?。?）系統(tǒng)概況，管理員可以通過此模塊查看總的用戶，歌曲，專輯，歌手?jǐn)?shù)量，以及服務(wù)器的資源使用情況。</p><p>　?。?）MV管理，管理員可以查看MV的信息，上傳MV，刪除MV，編輯MV的信息，還可以預(yù)覽MV。</p><p>　?。?）個性設(shè)置和個人信息管

49、理，管理員可以設(shè)置自己喜歡的界面風(fēng)格，屏蔽主界面某些模塊的顯示，修改自己的個人信息，查看上次登錄IP和時間。</p><p>　　（10）輔助功能，管理員可以利用本系統(tǒng)發(fā)送郵件，查看當(dāng)?shù)靥鞖馇闆r。</p><p><b>　　2.3 數(shù)據(jù)流分析</b></p><p>　　數(shù)據(jù)流程分析主要包括對信息的流動、傳遞、處理、存儲等的分析。數(shù)據(jù)流程分析

50、的目的就是要發(fā)現(xiàn)和解決數(shù)據(jù)流通中的問題。現(xiàn)有的數(shù)據(jù)流程分析多是通過分層的數(shù)據(jù)流圖（Data Flow Diagram，簡稱DFD）來實現(xiàn)的。數(shù)據(jù)流圖在邏輯上描述系統(tǒng)的功能，輸入輸出和數(shù)據(jù)存儲等，是便于用戶理解的系統(tǒng)數(shù)據(jù)流程的圖形表示。</p><p>　　通過前面對系統(tǒng)的業(yè)務(wù)流程分析可知整個網(wǎng)站系統(tǒng)的數(shù)據(jù)的流動情況，從而得到“ZMX|MUSIC”在線音樂網(wǎng)站的數(shù)據(jù)流程圖，系統(tǒng)總體數(shù)據(jù)流圖（頂層

51、圖）如圖2-2所示。</p><p>　　圖2-2 系統(tǒng)總體數(shù)據(jù)流圖（頂層圖）</p><p>　　2.3.1 系統(tǒng)一層數(shù)據(jù)流圖</p><p>　　根據(jù)頂層數(shù)據(jù)流圖，對整個網(wǎng)站系統(tǒng)進(jìn)行詳細(xì)的分析描述，得到一層數(shù)據(jù)流圖，如圖2-3所示。</p><p>　　圖2-3 系統(tǒng)一層數(shù)據(jù)流圖</p><p>　　2.3.2 系

52、統(tǒng)二層數(shù)據(jù)流圖</p><p>　　根據(jù)一層數(shù)據(jù)流圖，對各個具體處理過程進(jìn)行分析，得出部分模塊的二層數(shù)據(jù)流圖，如下所示。</p><p>　　圖2-4 音樂管理數(shù)據(jù)流圖（第二層）</p><p>　　圖2-5 專輯管理數(shù)據(jù)流圖（第二層）</p><p><b>　　2.4 用例圖分析</b></p><

53、;p>　　用例圖是被稱為參與者的外部用戶所能觀察到的系統(tǒng)功能的模型圖，呈現(xiàn)了一些參與者和一些用例，以及它們之間的關(guān)系，主要用于對系統(tǒng)、子系統(tǒng)或類的功能行為進(jìn)行建模。</p><p>　　通過前面對系統(tǒng)功能需求詳細(xì)的分析，可得到本在線音樂網(wǎng)站的用例和參與者，從而得到系統(tǒng)的用例圖。管理員用例圖如圖2-6所示。</p><p>　　圖2-6 管理員用例圖</p><p&

54、gt;　　會員用戶用例圖如2-7所示。</p><p>　　圖2-7 用戶用例圖</p><p>　　2.5 系統(tǒng)性能需求</p><p>　?。?）前臺用戶界面要求清新大氣精美，對用戶要有很強的吸引力。各個控件的放置位置合理，擬物按鈕逼真且有文字提示。</p><p>　?。?）網(wǎng)站系統(tǒng)運行速度要快，用戶的體驗感好。用戶的體驗感和停留在網(wǎng)站

55、的時間取決于網(wǎng)站的運行速度。系統(tǒng)將采用靜態(tài)頁面和AJAX來提升系統(tǒng)的運行速度。</p><p>　?。?）網(wǎng)站的安全性要強，用戶的敏感信息均采用Base64和MD5雙重加密，力求保證用戶信息的安全。</p><p>　　2.6 系統(tǒng)設(shè)計方案</p><p>　　本在線音樂網(wǎng)站將采用B/S架構(gòu)來實現(xiàn)上面分析得到的功能和性能需求。B/S架構(gòu)將主要的事務(wù)邏輯放在服務(wù)器端來

56、實現(xiàn)，用戶瀏覽器通過Web Server同數(shù)據(jù)庫進(jìn)行數(shù)據(jù)交互，這樣大大簡化了客戶端電腦載荷，減輕了系統(tǒng)維護(hù)與升級的成本和工作量，降低了用戶的總體成本(TCO)。</p><p>　　在系統(tǒng)開發(fā)上，采用三層開發(fā)模式來進(jìn)行開發(fā)。數(shù)據(jù)訪問層主要實現(xiàn)對數(shù)據(jù)庫系統(tǒng)的訪問，進(jìn)行讀取、保存和更新數(shù)據(jù)等操作。業(yè)務(wù)邏輯層用來實現(xiàn)視圖層和數(shù)據(jù)訪問層數(shù)據(jù)的傳遞和處理。視圖層用來實現(xiàn)用戶提交數(shù)據(jù)的顯示和接收，為用戶提供交互式的界面。利用

57、三層開發(fā)模式，將各個開發(fā)環(huán)節(jié)獨立分開，利于系統(tǒng)的維護(hù)和開發(fā)，將不用受限與人員、時間、地點。</p><p><b>　　2.7 本章小結(jié)</b></p><p>　　本章主要闡述了整個系統(tǒng)的需求分析和開發(fā)方案。首先介紹了系統(tǒng)的業(yè)務(wù)流程，給出了系統(tǒng)業(yè)務(wù)流程圖。接著說明了系統(tǒng)的功能需求和性能需求，功能需求主要包括前臺功能需求和后臺功能需求。然后簡單分析了系統(tǒng)數(shù)據(jù)流程和用例

58、圖，并畫出了系統(tǒng)相關(guān)數(shù)據(jù)流圖和用例圖。最后，分析整個系統(tǒng)的架構(gòu)，并給出方案。</p><p><b>　　3 系統(tǒng)總體設(shè)計</b></p><p>　　系統(tǒng)分析設(shè)計是整個網(wǎng)站系統(tǒng)開發(fā)過程中非常重要的一步，一個詳細(xì)全面的系統(tǒng)設(shè)計會給后續(xù)的代碼編寫的速度帶來益處。</p><p>　　3.1 系統(tǒng)結(jié)構(gòu)設(shè)計</p><p>

59、　　“ZMX|MUSIC”在線音樂網(wǎng)站采用三層開發(fā)設(shè)計模式，分為：用戶界面層，業(yè)務(wù)邏輯層和數(shù)據(jù)訪問層。用戶界面層用來和用戶交互，業(yè)務(wù)邏輯層負(fù)責(zé)業(yè)務(wù)的處理和各層之間的數(shù)據(jù)的傳遞；數(shù)據(jù)訪問層負(fù)責(zé)對數(shù)據(jù)庫的訪問和檢索。系統(tǒng)的結(jié)構(gòu)圖如圖3-1所示。</p><p>　　圖3-1 系統(tǒng)結(jié)構(gòu)圖</p><p>　　系統(tǒng)各層之間的調(diào)用過程如下：</p><p>　　（1）用戶通過

60、用戶界面層訪問系統(tǒng)，向系統(tǒng)提交請求，界面層對請求進(jìn)行初步的處理和包裝，并判斷是否要與業(yè)務(wù)邏輯層進(jìn)行交互。</p><p>　?。?）業(yè)務(wù)邏輯層接收來自界面層的請求，對請求進(jìn)行數(shù)據(jù)處理。然后調(diào)用數(shù)據(jù)訪問層來實現(xiàn)數(shù)據(jù)庫訪問，數(shù)據(jù)訪問層訪問數(shù)據(jù)庫，將數(shù)據(jù)讀出并返回給邏輯層。</p><p>　　（3）邏輯層將處理的結(jié)果，返回給界面層。界面層加以處理呈現(xiàn)給用戶。</p><p&

61、gt;　　3.2 系統(tǒng)功能設(shè)計</p><p>　　3.2.1 前臺用戶功能設(shè)計</p><p>　　由前面的需求分析可以得到系統(tǒng)的整體功能模塊。系統(tǒng)功能模塊主要分為前臺用戶功能模塊和后臺管理功能模塊。前臺功能模塊圖如圖3-2所示。</p><p>　　圖3-2 前臺用戶功能模塊圖</p><p>　　用戶前臺功能模塊敘述：</p>

62、;<p>　?。?）音樂播放頁功能：歌曲收藏，歌詞查看，MV欣賞，歌曲循環(huán)播放，音量調(diào)節(jié)，歌曲切換。</p><p>　?。?）用戶主頁功能：查看個人信息，修改個人信息，發(fā)布心情說說，設(shè)置界面風(fēng)格。</p><p>　?。?）歌曲搜索功能：可使用歌曲名，歌手名，專輯名，感情描述來搜索想要的歌曲。</p><p>　?。?）用戶注冊與登錄功能：未注冊的用

63、戶可以填寫用戶注冊表單然后提交注冊成為本站會員，或者使用社交網(wǎng)絡(luò)帳號實現(xiàn)登錄。已注冊的用戶可以直接登錄。</p><p>　　（5）分享音樂功能：登錄用戶可以分享好的音樂到自己的社交網(wǎng)絡(luò)上，例如騰訊QQ，新浪微博等，但前提是需要綁定這些社交網(wǎng)絡(luò)帳號。</p><p>　?。?）綁定社交網(wǎng)絡(luò)功能：登錄用戶可以綁定各大社交網(wǎng)絡(luò)帳號，綁定完成后可以分享音樂給朋友，邀請好友來本站。</p&g

64、t;<p>　　3.2.2 后臺管理功能設(shè)計</p><p>　　由前面的后臺管理功能需求分析，可得到后臺管理功能模塊圖，如圖3-3所示。</p><p>　　圖3-3 后臺管理功能模塊圖</p><p>　　后臺管理模塊功能敘述：</p><p>　?。?）用戶管理：查看所有用戶，添加用戶，編輯和刪除用戶。</p>

65、<p>　　（2）歌曲管理：歌曲列表，上傳歌曲，編輯和刪除歌曲，試聽歌曲。</p><p>　?。?）歌手管理：歌手列表，歌手信息編輯，添加歌手。</p><p>　?。?）專輯管理：專輯列表，添加專輯，刪除專輯，查看該專輯歌曲。</p><p>　?。?）歌詞管理：歌詞列表，添加歌詞，查看歌詞，刪除歌詞。</p><p>　　

66、（6）MV管理：MV列表，MV觀賞，刪除MV。</p><p>　?。?）系統(tǒng)維護(hù)：統(tǒng)計用戶，歌曲，歌手，專輯，MV等總的數(shù)量，查看實時在線人數(shù)，管理歌曲標(biāo)簽，歌手地區(qū)等信息。</p><p>　?。?）輔助功能：鎖屏功能，郵件功能，天氣功能。</p><p>　　3.3 系統(tǒng)數(shù)據(jù)庫設(shè)計</p><p>　　數(shù)據(jù)庫是本在線音樂網(wǎng)站的核心組成部

67、分，所有的信息出來都是基于數(shù)據(jù)庫來進(jìn)行的，因此數(shù)據(jù)庫的設(shè)計是整個系統(tǒng)設(shè)計過程中非常重要的。所以在性能，開放性，可靠性，穩(wěn)定性，可操作性等因素考慮下，本網(wǎng)站系統(tǒng)選擇MYSQL5.5作為數(shù)據(jù)庫開發(fā)平臺。本網(wǎng)站首先進(jìn)行了概念結(jié)構(gòu)設(shè)計，然后根據(jù)概念結(jié)構(gòu)設(shè)計得出邏輯結(jié)構(gòu)設(shè)計</p><p>　　概念結(jié)構(gòu)設(shè)計就是將需求分析得到的系統(tǒng)需求抽象為信息結(jié)構(gòu)的過程。E-R圖是描述概念模型的有力工具，它用簡單的圖形方式描述世界中的數(shù)據(jù)

68、。這種描述不涉及數(shù)據(jù)在數(shù)據(jù)庫中的表示和存取方法，非常接近人的思維。</p><p>　　邏輯結(jié)構(gòu)設(shè)計就是將概念結(jié)構(gòu)設(shè)計時得到的概念模型轉(zhuǎn)換成邏輯模型的過程，也就是將E-R圖中的實體、關(guān)系、屬性轉(zhuǎn)化為DBMS所支持的數(shù)據(jù)結(jié)構(gòu)的過程。</p><p><b>　　3.4 本章小結(jié)</b></p><p>　　本章闡述了系統(tǒng)整體的設(shè)計。首先簡單的講述

69、了系統(tǒng)的架構(gòu)設(shè)計，畫出了系統(tǒng)結(jié)構(gòu)圖，然后詳細(xì)地說明了系統(tǒng)的功能設(shè)計，列出了每個子模塊的功能，接著就是極為重要的數(shù)據(jù)庫的設(shè)計。</p><p><b>　　4 詳細(xì)設(shè)計與實現(xiàn)</b></p><p>　　詳細(xì)設(shè)計就是對系統(tǒng)的各個功能模塊詳細(xì)設(shè)計的描述，給出詳細(xì)設(shè)計的內(nèi)容，畫出設(shè)計階段所用到的相關(guān)圖例，比如程序流程圖、序列圖等。系統(tǒng)實現(xiàn)是整個網(wǎng)站開發(fā)過程中不可缺少的一部分

70、，根據(jù)前期的需求分析和設(shè)計，將網(wǎng)站一步一步以代碼實現(xiàn)出來。</p><p>　　4.1 系統(tǒng)開發(fā)環(huán)境</p><p>　　本在線音樂網(wǎng)站采用Win7+Apache2.2+Mysql5.5+Php5的組合來進(jìn)行開發(fā)，系統(tǒng)所有的功能都是基于此組合來實現(xiàn)的。之所以采用這四個軟件，是因為Win7操作系統(tǒng)穩(wěn)定快速且操作方便，其它三個軟件都是開源免費又非常的穩(wěn)定，因此可以搭建一個穩(wěn)定，免費的在線音樂網(wǎng)

71、站。</p><p>　　本系統(tǒng)的前端界面是由HTML5，CSS3和JAVASCRIPT來實現(xiàn)，其中異步通信由AJAX來實現(xiàn)。首先簡單介紹下這些技術(shù)的相關(guān)知識。</p><p>　?。?）PHP，英文全稱是Hypertext Preprocessor，超文本預(yù)處理器。它是一種開源的服務(wù)器端腳本語言，語言風(fēng)格類似于C語言。PHP執(zhí)行動態(tài)頁面的速度非常的快，效率非常高，對面向?qū)ο蟮闹С忠埠芎茫?/p>

72、完全可以用來開發(fā)大型商業(yè)程序。</p><p>　?。?）Mysql，是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，采用標(biāo)準(zhǔn)化的SQL語言來進(jìn)行數(shù)據(jù)庫的訪問，同時它的體積很小，執(zhí)行速度快，源碼開放，與PHP和APACHE搭配可以組成良好的開發(fā)環(huán)境。</p><p>　?。?）Apache，是一種web服務(wù)器端軟件，也是最流行的web服務(wù)器軟件之一。它的特點就是簡單、速度快、性能穩(wěn)定，并可做代理服務(wù)器使用。與

73、Nginx相比，Apache更穩(wěn)定，bug少，rewrite技術(shù)更強，但是性能低一些。</p><p>　　（4）Ajax，即“Asynchronous Javascript And XML”，異步JavaScript和XML，是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，實現(xiàn)網(wǎng)頁局部刷新，異步調(diào)用等，用來增強網(wǎng)頁特效。</p><p>　　（5）CSS3，是

74、CSS技術(shù)的升級版本，增加了動畫屬性，圓角邊框，盒模型等。</p><p>　　4.2 前臺功能模塊的詳細(xì)設(shè)計與實現(xiàn)</p><p>　　4.2.1 用戶登錄模塊的設(shè)計與實現(xiàn)</p><p>　　進(jìn)入本網(wǎng)站首頁，點擊登錄按鈕，便會出現(xiàn)帳號和密碼輸入框，用戶輸入帳號和密碼，然后點擊提交按鈕或者按下回車鍵，接著系統(tǒng)使用Javascript對用戶輸入的信息進(jìn)行格式檢查，如

75、果格式正確則使用AJAX異步提交給后臺進(jìn)行判斷，如格式錯誤，則提示用戶所填信息格式不對。后臺接收用戶的帳號和密碼，并與數(shù)據(jù)庫中的數(shù)據(jù)做對比，如果用戶的帳號密碼有效，則返回成功信息給前臺AJAX，JS再將頁面跳轉(zhuǎn)到本網(wǎng)站主頁，如果無效，則返回失敗信息給前臺AJAX，就會提示用戶帳號名或者密碼錯誤，讓用戶繼續(xù)輸入信息。</p><p>　　另外用戶也可以使用第三方社交網(wǎng)絡(luò)帳號登錄本網(wǎng)站，用戶在網(wǎng)站首頁點擊社交網(wǎng)絡(luò)圖標(biāo)

76、，支持騰訊QQ，新浪微博，騰訊微博等，系統(tǒng)彈出用戶授權(quán)窗口，用戶輸入自己第三方網(wǎng)絡(luò)的帳號密碼即可登錄本網(wǎng)站。用戶登錄功能的實現(xiàn)是采用AJAX+PHP的方式來完成，該功能的順序圖如圖4-1所示。</p><p>　　圖4-1 用戶登錄序列圖</p><p>　　用戶登錄模塊的程序流程圖如圖4-2所示。</p><p>　　圖4-2 用戶登錄模塊程序流程圖</p&

77、gt;<p>　　該功能的實現(xiàn)核心代碼如下所示。</p><p>　　//生成用戶第二標(biāo)識、令牌用于下次自動登錄</p><p>　　function generateToken($id,$salt,$usrName){</p><p>　　//創(chuàng)建一個UsersDAO對象</p><p>　　$userDAO = new Us

78、ersDAO();</p><p><b>　　//生成一個標(biāo)識</b></p><p>　　$identifier = md5($salt.md5($usrName.$salt)); //生成一個唯一的令牌</p><p>　　$token = md5(uniqid(rand(),true)); </p><p>　　

79、$timeout = time()+60*60*24*30;</p><p>　　$userDAO->setUserIdentifierInfo($id,$identifier,$token,$timeout);</p><p>　　return $identifier.':'.$token;</p><p><b>　　}</

80、b></p><p>　　用戶登錄功能實現(xiàn)的效果圖如下所示。</p><p>　　圖4-3 帳號或密碼錯誤</p><p>　　圖4-4 帳號密碼有效</p><p>　　圖4-5 使用社交網(wǎng)絡(luò)騰訊微博登錄</p><p>　　4.2.2 用戶注冊模塊的設(shè)計與實現(xiàn)</p><p>　　和登

81、錄模塊一樣，首先進(jìn)入本網(wǎng)站首頁，點擊注冊圖標(biāo)按鈕便會出現(xiàn)用戶注冊表單。用戶填寫登錄帳號，密碼，性別，昵稱等信息，然后點擊注冊按鈕，系統(tǒng)會先判斷用戶填寫的個人信息是否符合本網(wǎng)站要求的格式，如格式正確，則提交給后臺，如果格式不對，就提醒用戶填寫的信息格式不正確。后臺程序接收到前臺傳來的信息，將其寫入到數(shù)據(jù)庫，并返回成功信息給前臺。如果后臺程序出現(xiàn)錯誤，則返回失敗信息給前臺，并附上具體的錯誤信息。前臺收到返回的成功信息后，就將頁面跳轉(zhuǎn)到網(wǎng)站主

82、頁，如收到失敗信息，則提示用戶注冊失敗，并顯示失敗的原因。用戶注冊模塊的程序流程圖如圖4-6所示。</p><p>　　圖4-6 用戶注冊模塊程序流程圖</p><p>　　該功能的序列圖如圖4-7所示。</p><p>　　圖4-7 用戶注冊模塊序列圖</p><p>　　該功能實現(xiàn)效果圖如下所示。</p><p>

83、　　圖4-8 帳號或密碼格式錯誤</p><p>　　圖4-9 昵稱被占用和注冊成功</p><p>　　4.2.3 歌曲搜索模塊的設(shè)計與實現(xiàn)</p><p>　　用戶登錄后在網(wǎng)站主頁的搜索框中輸入搜索關(guān)鍵字，比如歌曲名、歌手名、音樂標(biāo)簽等，點擊提交，AJAX異步提交給系統(tǒng)后臺進(jìn)行檢索，如找到了用戶需要的歌曲，則返回該歌曲的URL，如果該歌曲有歌詞、MV等，就一并返

84、回給前臺，再由前臺控制歌曲的播放，歌詞的顯示，MV的觀看。如果沒有找到用戶需要的歌曲，則返回抱歉信息給用戶。該模塊的程序流程圖如圖4-10所示。</p><p>　　圖4-10 歌曲搜索模塊程序流程圖</p><p>　　歌曲搜索功能的實現(xiàn)用到的序列圖如圖4-11所示。</p><p>　　圖4-11 歌曲搜索序列圖</p><p>　　該功

85、能實現(xiàn)的核心代碼如下。</p><p>　　//將關(guān)鍵字異步提交給music_search.php</p><p><b>　　$.ajax({</b></p><p>　　url:'user_zmx/music_search.php',</p><p>　　type:'post',<

86、;/p><p>　　dataType:'json',</p><p>　　data:{keyword:kword },</p><p>　　success:function(retData,status){省略…}</p><p><b>　　}</b></p><p><b&g

87、t;　　//歌曲檢索語句</b></p><p>　　$sql="select songs.songId from songs,songers,songtags,albums_songs languages,album,where songs.songTagId=songtags.songTagId and songs.songerid = songers.songerid and son

88、gs.lanid=languages.lanid and songs.songid=albums_songs.songid and albums_songs.albumid=album.albumid and concat(songName,songerName,`desc`,albumName,tagContent) like '%$keyword%';"</p><p>　　該功能實

89、現(xiàn)的效果圖如下所示。</p><p>　　圖4-12 歌曲搜索框</p><p>　　圖4-13 輸入“夜曲”</p><p>　　圖4-14 播放夜曲</p><p>　　4.2.4 歌曲分享模塊的設(shè)計與實現(xiàn)</p><p>　　本音樂網(wǎng)站的用戶可以分享自己喜歡的音樂給朋友。用戶只要點擊網(wǎng)站主頁上的分享按鈕，便會呈現(xiàn)

90、出分享界面，用戶可以填寫分享描述，然后選擇一個用戶所綁定的第三方社交網(wǎng)絡(luò)圖標(biāo)，點擊分享按鈕，便可將歌曲分享到你的社交網(wǎng)絡(luò)上。假如用戶沒有綁定社交網(wǎng)絡(luò)，則不顯示分享頁面，提示用戶需要綁定社交網(wǎng)絡(luò)。該模塊的程序流程圖如圖4-15所示。</p><p>　　圖4-15 歌曲分享模塊程序流程圖</p><p>　　該功能實現(xiàn)的核心代碼如下所示。</p><p>　　$par

91、ams['content'] = $shrCtt."http://223.82.119.64:520/share/$file.html";</p><p>　　$ci=curl_init();</p><p>　　curl_setopt($ci, CURLOPT_SSL_VERIFYPEER, FALSE); </p><p>　

92、　curl_setopt($ci, CURLOPT_RETURNTRANSFER, 1);</p><p>　　curl_setopt($ci, CURLOPT_CONNECTTIMEOUT, 30);</p><p>　　curl_setopt($ci, CURLOPT_TIMEOUT, 30);</p><p>　　curl_setopt($ci, CURLOP

93、T_POST, TRUE);</p><p>　　curl_setopt($ci, CURLOPT_POSTFIELDS,http_build_query($params));</p><p>　　curl_setopt($ci, CURLOPT_URL, $url);</p><p>　　$response=curl_exec($ci);</p>&

94、lt;p>　　curl_close($ci);</p><p>　　該功能實現(xiàn)效果如下所示。</p><p>　　圖4-16 歌曲分享界面</p><p>　　圖4-17 歌曲分享成功</p><p>　　圖4-18 點擊分享中的網(wǎng)址出現(xiàn)的界面</p><p>　　4.2.5 歌曲收藏模塊的設(shè)計與實現(xiàn)</p

95、><p>　　用戶登錄后可以收藏自己喜歡的音樂，下次登錄便可以直接播放收藏的音樂。用戶點擊主頁上的喜歡按鈕，前臺系統(tǒng)將此請求提交給后臺，后臺判斷該用戶是否已經(jīng)收藏了該歌曲，如已收藏，則提示用戶已收藏此歌曲，如果沒有收藏，就將此歌曲寫入到用戶的歌曲收藏表中。歌曲收藏模塊的程序流程圖如圖4-18所示。</p><p>　　圖4-19 歌曲收藏模塊程序流程圖</p><p>

96、　　該功能實現(xiàn)的核心代碼如下所示。</p><p>　　//Ajax將喜歡的歌曲提交給后臺</p><p><b>　　$.ajax({</b></p><p>　　url: 'user_zmx/post_love_song.php',</p><p>　　type:'post',<

97、/p><p>　　dataType:'json',</p><p><b>　　data: {</b></p><p>　　uid: ZMusic.Signup.userInfo.id,</p><p>　　sid: ZMusic.Player.sid,</p><p>　　type:

98、 p_type</p><p><b>　　}</b></p><p>　　ZMusic.Player.loveAnimate();</p><p>　　$("#flyLoveTip").show().animate({right: "+=180",bottom: "+=160"},5

99、00,function() {$(this).animate({right: leftOffest + "px",bottom: bttm + "px"},600,function() {</p><p>　　$(this).animate({opacity: "0"},500,function() {</p><p>　　$(t

100、his).remove();</p><p><b>　　})</b></p><p><b>　　})</b></p><p><b>　　})</b></p><p>　　該功能的實現(xiàn)效果圖如下所示。</p><p>　　圖4-20 歌曲收藏前界面&

101、lt;/p><p>　　圖4-21 歌曲收藏后界面，并播放動畫</p><p>　　4.3 后臺管理功能模塊的詳細(xì)設(shè)計與實現(xiàn)</p><p>　　4.3.1 管理員登錄模塊的設(shè)計與實現(xiàn)</p><p>　　管理員在后臺登錄界面輸入帳號和密碼，點擊登錄后，如果帳號或密碼錯誤，則會返回提示信息給管理員，帳號密碼有效則進(jìn)入后臺管理主界面。登錄模塊的流程

102、圖如圖4-22所示。</p><p>　　圖4-22 管理員后臺登錄程序流程圖</p><p>　　管理員登錄功能實現(xiàn)的核心代碼如下所示。</p><p>　　//使用Ajax異步提交帳號密碼給admin_login.php</p><p>　　var url = './admin_login.php';</p>

103、<p>　　var pwd = faultylabs.MD5(pwd);</p><p>　　var params = 'username='+email+'&password='+pwd +'&'+Math.random();</p><p>　　xmlHttp.onreadystatechange = stat

104、eChangeLogin;</p><p>　　xmlHttp.open('POST',url,true);xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");</p><p>　　xmlHttpLogin.send(param

105、s);</p><p>　　后臺管理平臺登入界面如圖4-23所示。</p><p>　　圖4-23后臺管理平臺登入界面</p><p>　　管理員敲擊回車鍵或者點擊上圖中的綠色按鈕，如果輸入的帳號和密碼有效，則出現(xiàn)成功界面，接著跳轉(zhuǎn)到后臺管理主界面，效果圖如下所示。</p><p>　　圖4-24 登錄成功提示界面</p>&l

106、t;p>　　圖4-25 后臺管理主界面</p><p>　　如果管理員輸入無效的帳號和密碼，則提示管理員用戶或密碼錯誤，實現(xiàn)效果圖如圖4-26所示。</p><p>　　圖4-26 錯誤提示界面</p><p>　　4.3.2 用戶管理模塊的設(shè)計</p><p>　　此模塊分為添加用戶，刪除用戶，編輯用戶信息等子模塊。管理員刪除用戶時，

107、系統(tǒng)會彈出提示框，讓管理員確認(rèn)是否真的刪除用戶，如果選擇“是”，則刪除用戶，否則取消刪除。添加用戶時，系統(tǒng)對管理員填寫的用戶信息進(jìn)行檢查，確認(rèn)信息格式是否無誤，如沒有錯誤，則添加用戶寫進(jìn)后臺，否則提示管理員錯誤信息。同樣編輯用戶的信息也是如此，先檢查信息格式是否正確，正確就寫入后臺，有錯誤則返回給管理員。</p><p>　　此外，用戶搜索功能模塊的設(shè)計：在用戶列表的上方放置一個搜索框，管理員可以輸入任何字符，系

108、統(tǒng)進(jìn)行模糊匹配，然后顯示出匹配到的用戶的信息。此模塊的程序流程圖如圖4-27所示。</p><p>　　圖4-27 用戶管理模塊程序流程圖</p><p>　　4.3.3 歌曲管理模塊的設(shè)計與實現(xiàn)</p><p>　　歌曲管理模塊亦分為歌曲列表，歌曲上傳，歌曲編輯和刪除等子模塊。歌曲列表，編輯和刪除的設(shè)計和用戶管理模塊的設(shè)計類似。歌曲上傳的設(shè)計：在歌曲列表下方居中處

109、放置一個上傳按鈕，點擊上傳按鈕就彈出一個模態(tài)對話框，模態(tài)對話框中的內(nèi)容就是一個表單，然后填寫需要上傳歌曲的各項信息。填寫完成后，點擊提交按鈕即可上傳歌曲到服務(wù)器上，當(dāng)然在這之前歌曲的信息會被系統(tǒng)檢查一遍，確認(rèn)信息無誤或者服務(wù)器上沒有這首歌曲。另外設(shè)計了一個試聽按鈕，管理員點擊它，便可以試聽歌曲。歌曲管理模塊的程序流程圖如圖4-28所示。</p><p>　　圖4-28 歌曲管理模塊程序流程圖</p>

110、<p>　　該功能序列圖如圖4-29所示。</p><p>　　圖4-29 歌曲管理模塊程序序列圖</p><p>　　歌曲上傳功能的實現(xiàn)效果圖如下所示，依次是上傳前，上傳中，上傳成功。</p><p>　　圖4-30 歌曲上傳前</p><p>　　點擊upload按鈕，開始上傳。</p><p>　　圖

111、4-31 歌曲上傳中</p><p><b>　　上傳成功提示。</b></p><p>　　圖4-32 歌曲上傳成功</p><p>　　歌曲刪除功能序列圖如圖4-33所示。</p><p>　　圖4-33 歌曲刪除序列圖</p><p>　　歌曲刪除效果圖如下所示。</p>&l

112、t;p>　　圖4-34 歌曲刪除確認(rèn)框</p><p><b>　　點擊OK按鈕。</b></p><p>　　圖4-35 歌曲刪除中</p><p>　　圖4-36 歌曲刪除成功提示</p><p>　　4.3.4 系統(tǒng)退出模塊的設(shè)計</p><p>　　系統(tǒng)后臺管理平臺的安全是非常重要的

113、，因此系統(tǒng)退出模塊的設(shè)計也不能疏忽。本網(wǎng)站系統(tǒng)退出模塊的設(shè)計：設(shè)置一個注銷超鏈接，管理員點擊這個超鏈接，然后由Javascript截獲用戶的點擊動作并阻止超鏈接的默認(rèn)行為，接著使用AJAX請求PHP注銷程序，這個PHP程序?qū)h除SESSION對話以及重要的COOKIE，然后返回成功信息，AJAX獲得返回信息后將頁面跳轉(zhuǎn)到管理員登錄界面。退出模塊的程序流程圖如圖4-37所示。</p><p>　　圖4-37 系統(tǒng)退

114、出模塊程序流程圖</p><p>　　4.4 網(wǎng)站界面的設(shè)計</p><p>　　本在線音樂網(wǎng)站非常重視界面的設(shè)計，一個大方美觀的界面能夠大大的提升網(wǎng)站對用戶的吸引力。正所謂"人靠衣裝,佛靠金裝"，沒有友好美觀的界面，功能再豐富也難以得到用戶的垂青。在注重界面的美觀的同時亦注重整個頁面功能模塊的布局，形成一個色彩搭配協(xié)調(diào)且布局清晰合理的頁面觀感。</p>

115、<p>　　本在線音樂網(wǎng)站的前臺用戶登錄界面采用清新綠為主色調(diào)，亮灰為輔色調(diào)來進(jìn)行色彩搭配，布局方面在頁面居中處放置網(wǎng)站Logo和標(biāo)志語，然后在其正下方放置兩個圖標(biāo)按鈕，一個是登錄按鈕，另一個是注冊按鈕。點擊登錄按鈕，將網(wǎng)站Logo和標(biāo)志語向上移動一段距離，在其下方顯示社交網(wǎng)絡(luò)圖標(biāo)和登錄表單，圖標(biāo)按鈕一直不動。點擊注冊按鈕，將網(wǎng)站Logo和登錄表單隱藏，社交網(wǎng)絡(luò)圖標(biāo)向上移動，接著在其下方顯示用戶注冊表單，圖標(biāo)按鈕依舊不動。&l