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

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

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

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

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

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

6、t;　　系統(tǒng)大體上分為兩個(gè)模塊，分別為前臺(tái)用戶模塊和后臺(tái)管理員管理模塊。在安全上，系統(tǒng)在有敏感信息的傳送上都使用了單向加密，以及采用了防SQL注入技術(shù)。</p><p>　　關(guān)鍵詞：音樂(lè)網(wǎng)站，在線試聽(tī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 國(guó)內(nèi)外研究現(xiàn)狀(2)</p><p>　　1.4 研究的內(nèi)容(3)</p><p>　　1.5

16、內(nèi)容創(chuàng)新點(diǎn)(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è)計(jì)方案(12)</p><p>　　2.7 本章小結(jié)(12)</p><p><b>　　3 系統(tǒng)總體設(shè)計(jì)</b></p><p>　　3.1 系統(tǒng)結(jié)構(gòu)設(shè)計(jì)(1

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

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

20、t;　　5 系統(tǒng)運(yùn)行與測(cè)試</b></p><p>　　5.1 測(cè)試方法簡(jiǎn)介(54)</p><p>　　5.2 測(cè)試環(huán)境(54)</p><p>　　5.3 功能測(cè)試(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ò)帶寬不斷的增加，在線音樂(lè)產(chǎn)業(yè)的發(fā)展非常的迅速。特別是最近的幾年，在線音樂(lè)產(chǎn)業(yè)規(guī)模翻了幾番。根據(jù)艾瑞網(wǎng)的調(diào)研結(jié)果顯示，2003年中國(guó)在線音樂(lè)市場(chǎng)規(guī)模為1300萬(wàn)元，2010年達(dá)到了2.8億元，2014年更是飆升到了將近50億元。中國(guó)在線音樂(lè)產(chǎn)業(yè)蒸蒸日上，潛

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

43、歌詞等。此外管理員還可以修改自己的信息，進(jìn)行個(gè)人的界面愛(ài)好設(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 前臺(tái)功能需求</p><p>　?。?）歌曲播放，注冊(cè)用戶可以使用該

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

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

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

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

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

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

50、的目的就是要發(fā)現(xiàn)和解決數(shù)據(jù)流通中的問(wèn)題。現(xiàn)有的數(shù)據(jù)流程分析多是通過(guò)分層的數(shù)據(jù)流圖（Data Flow Diagram，簡(jiǎn)稱DFD）來(lái)實(shí)現(xiàn)的。數(shù)據(jù)流圖在邏輯上描述系統(tǒng)的功能，輸入輸出和數(shù)據(jù)存儲(chǔ)等，是便于用戶理解的系統(tǒng)數(shù)據(jù)流程的圖形表示。</p><p>　　通過(guò)前面對(duì)系統(tǒng)的業(yè)務(wù)流程分析可知整個(gè)網(wǎng)站系統(tǒng)的數(shù)據(jù)的流動(dòng)情況，從而得到“ZMX|MUSIC”在線音樂(lè)網(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ù)流圖，對(duì)整個(gè)網(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ù)流圖，對(duì)各個(gè)具體處理過(guò)程進(jìn)行分析，得出部分模塊的二層數(shù)據(jù)流圖，如下所示。</p><p>　　圖2-4 音樂(lè)管理數(shù)據(jù)流圖（第二層）</p><p>　　圖2-5 專輯管理數(shù)據(jù)流圖（第二層）</p><p><b>　　2.4 用例圖分析</b></p><

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

78、ersDAO();</p><p><b>　　//生成一個(gè)標(biāo)識(shí)</b></p><p>　　$identifier = md5($salt.md5($usrName.$salt)); //生成一個(gè)唯一的令牌</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>　　用戶登錄功能實(shí)現(xiàn)的效果圖如下所示。</p><p>　　圖4-3 帳號(hào)或密碼錯(cuò)誤</p><p>　　圖4-4 帳號(hào)密碼有效</p><p>　　圖4-5 使用社交網(wǎng)絡(luò)騰訊微博登錄</p><p>　　4.2.2 用戶注冊(cè)模塊的設(shè)計(jì)與實(shí)現(xiàn)</p><p>　　和登

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

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

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

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

85、能實(shí)現(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;　　//歌曲檢索語(yǔ)句</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>　　該功能實(shí)

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

90、出分享界面，用戶可以填寫分享描述，然后選擇一個(gè)用戶所綁定的第三方社交網(wǎng)絡(luò)圖標(biāo)，點(diǎn)擊分享按鈕，便可將歌曲分享到你的社交網(wǎng)絡(luò)上。假如用戶沒(méi)有綁定社交網(wǎng)絡(luò)，則不顯示分享頁(yè)面，提示用戶需要綁定社交網(wǎng)絡(luò)。該模塊的程序流程圖如圖4-15所示。</p><p>　　圖4-15 歌曲分享模塊程序流程圖</p><p>　　該功能實(shí)現(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>　　該功能實(shí)現(xiàn)效果如下所示。</p><p>　　圖4-16 歌曲分享界面</p><p>　　圖4-17 歌曲分享成功</p><p>　　圖4-18 點(diǎn)擊分享中的網(wǎng)址出現(xiàn)的界面</p><p>　　4.2.5 歌曲收藏模塊的設(shè)計(jì)與實(shí)現(xiàn)</p

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

96、　　該功能實(shí)現(xiàn)的核心代碼如下所示。</p><p>　　//Ajax將喜歡的歌曲提交給后臺(tái)</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>　　該功能的實(shí)現(xiàn)效果圖如下所示。</p><p>　　圖4-20 歌曲收藏前界面&

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

102、圖如圖4-22所示。</p><p>　　圖4-22 管理員后臺(tái)登錄程序流程圖</p><p>　　管理員登錄功能實(shí)現(xiàn)的核心代碼如下所示。</p><p>　　//使用Ajax異步提交帳號(hào)密碼給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>　　后臺(tái)管理平臺(tái)登入界面如圖4-23所示。</p><p>　　圖4-23后臺(tái)管理平臺(tái)登入界面</p><p>　　管理員敲擊回車鍵或者點(diǎn)擊上圖中的綠色按鈕，如果輸入的帳號(hào)和密碼有效，則出現(xiàn)成功界面，接著跳轉(zhuǎn)到后臺(tái)管理主界面，效果圖如下所示。</p><p>　　圖4-24 登錄成功提示界面</p>&l

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

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

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

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

110、<p>　　該功能序列圖如圖4-29所示。</p><p>　　圖4-29 歌曲管理模塊程序序列圖</p><p>　　歌曲上傳功能的實(shí)現(xiàn)效果圖如下所示，依次是上傳前，上傳中，上傳成功。</p><p>　　圖4-30 歌曲上傳前</p><p>　　點(diǎn)擊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>　　點(diǎn)擊OK按鈕。</b></p><p>　　圖4-35 歌曲刪除中</p><p>　　圖4-36 歌曲刪除成功提示</p><p>　　4.3.4 系統(tǒng)退出模塊的設(shè)計(jì)</p><p>　　系統(tǒng)后臺(tái)管理平臺(tái)的安全是非常重要的

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

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

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