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

1、JIU JIANG UNIVERSITY畢 業(yè) 論 文 題 目 音樂(lè)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 英文題目The Design and Implementation of Music Website 院 系 信息科學(xué)與技術(shù)學(xué)院 專(zhuān) 業(yè) 計(jì)算機(jī)科學(xué)與技術(shù) 姓 名 班級(jí)學(xué)號(hào) 4 指導(dǎo)教師 二一五年五月信息科學(xué)與技術(shù)學(xué)院學(xué)士學(xué)位論文摘 要網(wǎng)絡(luò)音樂(lè)巨大的潛在市場(chǎng)，帶動(dòng)了國(guó)內(nèi)在線音樂(lè)的飛速發(fā)展，像百度、騰訊、豆瓣、酷狗等公司都研發(fā)了自己的在線音樂(lè)網(wǎng)站。同時(shí)也有很多小型音樂(lè)網(wǎng)站如雨后春筍般出現(xiàn)。但是很多的音樂(lè)網(wǎng)站在很多方面的設(shè)計(jì)都不合理和安全，例如架構(gòu)不合理，性能低下，而且投放了大量的廣告，界面設(shè)計(jì)爛，下載收費(fèi)貴，用

2、戶(hù)體驗(yàn)差，導(dǎo)致整個(gè)網(wǎng)站系統(tǒng)運(yùn)營(yíng)質(zhì)量很低。 系統(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)站的功能需求。根據(jù)系統(tǒng)需求，系統(tǒng)采用APACHE2.2作為服務(wù)器，Mysql數(shù)據(jù)庫(kù)做數(shù)據(jù)平臺(tái)，并選擇PHP語(yǔ)言開(kāi)發(fā)后臺(tái)服務(wù)系統(tǒng)。前臺(tái)主要使用HTML5，CSS3，Javascript，Ajax等技術(shù)，Ajax主要用于網(wǎng)頁(yè)中的頁(yè)面特效和異步通信。系統(tǒng)采用MVC架構(gòu)，將系統(tǒng)分為數(shù)據(jù)層，視圖層，業(yè)務(wù)邏輯層三層來(lái)開(kāi)發(fā)與實(shí)現(xiàn)。這樣將三層獨(dú)立開(kāi)發(fā)，有利于維護(hù)和效率。系統(tǒng)大體上分為兩個(gè)模塊，分別為前臺(tái)用戶(hù)模塊和后臺(tái)管理員管理模塊。

3、在安全上，系統(tǒng)在有敏感信息的傳送上都使用了單向加密，以及采用了防SQL注入技術(shù)。關(guān)鍵詞：音樂(lè)網(wǎng)站，在線試聽(tīng)，異步通信AbstractNetwork Music huge potential market, 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 si

4、tes have sprung 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 user experience is poor, resulting in the quality of the entire sit

5、e system operators are low.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 its own online music site experience and feelings come to the functional requirements of the music sites. A

6、ccording to the system requirements, the system uses APACHE2.2 as a server, Mysql database platform for data and select the PHP language development background service system. Reception main use HTML5, CSS3, Javascript, Ajax and other technologies, Ajax is mainly used for special effects and asynchr

7、onous communication web page in.The system uses MVC architecture, the system is divided into data layer, view layer, business logic to the development and realization of three. This will triple the independent development is conducive to safeguarding and efficiency.System is generally divided into t

8、wo modules, each 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.Keywords: Music Website, Online Listening, Asynchronous Communicatio

9、n目 錄摘 要IAbstractII1 緒論1.1研究的背景(1)1.2 研究的意義(1)1.3 國(guó)內(nèi)外研究現(xiàn)狀(2)1.4 研究的內(nèi)容(3)1.5 內(nèi)容創(chuàng)新點(diǎn)(3)1.6 論文結(jié)構(gòu)(4)2 需求分析2.1業(yè)務(wù)流程分析(5)2.2 系統(tǒng)功能需求分析(6)2.3 數(shù)據(jù)流分析(7)2.4 用例圖分析(10)2.5 系統(tǒng)性能需求(11)2.6 系統(tǒng)設(shè)計(jì)方案(12)2.7 本章小結(jié)(12)3 系統(tǒng)總體設(shè)計(jì)3.1 系統(tǒng)結(jié)構(gòu)設(shè)計(jì)(13)3.2 系統(tǒng)功能設(shè)計(jì)(13)3.3 系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)(15)3.4 本章小結(jié)(16)4 詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)4.1 系統(tǒng)開(kāi)發(fā)環(huán)境(17)4.2 前臺(tái)功能模塊的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)(18)

10、4.3 后臺(tái)管理功能模塊的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)(31)4.4 網(wǎng)站界面的設(shè)計(jì)(40)4.5 數(shù)據(jù)庫(kù)詳細(xì)設(shè)計(jì)(44)4.6 本章小結(jié)(53)5 系統(tǒng)運(yùn)行與測(cè)試5.1 測(cè)試方法簡(jiǎn)介(54)5.2 測(cè)試環(huán)境(54)5.3 功能測(cè)試(54)5.4 本章小結(jié)(58)6 總結(jié)與展望6.1 全文工作總結(jié)(59)6.2 下一步工作展望(59)致 謝(61)參考文獻(xiàn)(62)661 緒論1.1研究的背景 隨著互聯(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億元

11、，2014年更是飆升到了將近50億元。中國(guó)在線音樂(lè)產(chǎn)業(yè)蒸蒸日上，潛在價(jià)值巨大，它的高速發(fā)展，改變了傳統(tǒng)音樂(lè)的產(chǎn)業(yè)結(jié)構(gòu)。在線音樂(lè)網(wǎng)站的興起使得人們欣賞音樂(lè)的方式和載體發(fā)生了巨大的變化，突破了時(shí)間和空間的限制。在中國(guó)，傳統(tǒng)唱片業(yè)不能滿(mǎn)足有音樂(lè)需求的消費(fèi)者。與傳統(tǒng)音樂(lè)欣賞和交流模式相比，在線音樂(lè)網(wǎng)站有著非常大的優(yōu)勢(shì)，不僅可以滿(mǎn)足絕大部分用戶(hù)的音樂(lè)需求，還會(huì)刺激一些電子數(shù)碼產(chǎn)品的更新?lián)Q代。在線音樂(lè)網(wǎng)站作為音樂(lè)的網(wǎng)絡(luò)載體，對(duì)音樂(lè)的發(fā)展起到了深遠(yuǎn)的影響，特別是在音樂(lè)的傳播，欣賞，創(chuàng)作等方面。在線音樂(lè)網(wǎng)站使得音樂(lè)版權(quán)人的收入得到增加，提升音樂(lè)創(chuàng)作人的創(chuàng)作激情，有利于草根音樂(lè)人。同時(shí)，在線音樂(lè)網(wǎng)站加快了經(jīng)典流

12、行音樂(lè)的傳播，改變了我們欣賞音樂(lè)的方式。1.2 研究的意義中國(guó)在線音樂(lè)的好時(shí)代正在接近。中國(guó)傳媒大學(xué)和國(guó)家音樂(lè)產(chǎn)業(yè)促進(jìn)工作委員會(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è)用戶(hù)和音樂(lè)創(chuàng)作人帶來(lái)的便利是確定的，音樂(lè)用戶(hù)不再需要去買(mǎi)唱片和音樂(lè)播放器，以及音樂(lè)軟件客戶(hù)端也不需要安裝，就可以享受到高品質(zhì)的音樂(lè)和滿(mǎn)足自己的音樂(lè)需要。音樂(lè)創(chuàng)作人可以借助在線音樂(lè)網(wǎng)站平臺(tái)，不需要唱片公司簽約合作，便可以發(fā)布自己創(chuàng)作的音樂(lè)，這對(duì)于部分音樂(lè)人來(lái)說(shuō)是非常重要的，不但可以增加自己的收入，同時(shí)自己的創(chuàng)作思維會(huì)不受

13、限制因此本系統(tǒng)這樣一個(gè)在線音樂(lè)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)有了很大的必要。1.3 國(guó)內(nèi)外研究現(xiàn)狀1.3.1 國(guó)外研究現(xiàn)狀據(jù)美國(guó)唱片行業(yè)協(xié)會(huì)（RIAA）表示，在2007年只占全美音樂(lè)市場(chǎng)3%的在線音樂(lè)服務(wù)現(xiàn)如今已占到了該市場(chǎng)的21%。借助于美國(guó)良好的音樂(lè)版權(quán)保護(hù)和Pandora、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)5

14、7%。而像iTunes那樣的提供永久數(shù)字下載服務(wù)的營(yíng)收則下滑了1%，降至28億美元。蘋(píng)果iTunes平臺(tái)模式使得蘋(píng)果一直領(lǐng)跑在線音樂(lè)市場(chǎng)。1.3.2 國(guó)內(nèi)研究現(xiàn)狀中國(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è)邏輯開(kāi)始清晰，監(jiān)管層的法律也慢慢完善，大公司和資本密集進(jìn)入也讓音樂(lè)版權(quán)的價(jià)值開(kāi)始不斷提升。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)

15、端新增了獨(dú)家版塊。版權(quán)成本不斷提高的同時(shí)，中國(guó)在線音樂(lè)的商業(yè)模式也在嘗試一些新的改變。像騰訊、阿里、網(wǎng)易等，都是大部分音樂(lè)向用戶(hù)免費(fèi)、增值服務(wù)（比如更高的音質(zhì)等）收費(fèi)。增值服務(wù)收費(fèi)的做法會(huì)比直接針對(duì)音樂(lè)作品收費(fèi)更令用戶(hù)容易接受，但這樣的收入增長(zhǎng)速度可能并不是非常明顯。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è)用戶(hù)達(dá)4.53億人以上。數(shù)字音樂(lè)的傳播、消費(fèi)、體驗(yàn)?zāi)Ｊ饺招略庐悾哂芯薮蟮氖袌?chǎng)發(fā)展?jié)摿?。中?guó)在線音樂(lè)市場(chǎng)發(fā)展趨勢(shì)非常良好，國(guó)內(nèi)的很多音樂(lè)網(wǎng)站也是發(fā)展速度，比如QQ音樂(lè)，百度音樂(lè)，酷狗音樂(lè)，音悅臺(tái)，

16、豆瓣音樂(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ì)得到巨大的提升。1.4 研究的內(nèi)容（1）本在線音樂(lè)網(wǎng)站，是基于Apache2.2+Mysql5.5+Php5來(lái)開(kāi)發(fā)的。Apache2.2作為系統(tǒng)服務(wù)器，Mysql5.5作為數(shù)據(jù)平臺(tái)，使用PHP語(yǔ)言編寫(xiě)后臺(tái)服務(wù)程序。（2）系統(tǒng)最核心的任務(wù)為注冊(cè)用戶(hù)提供音樂(lè)在線播放服務(wù)。（3）系統(tǒng)主要分為兩個(gè)大模塊，分別為前臺(tái)用戶(hù)模塊和后臺(tái)管理員管理模塊（4）用戶(hù)前

17、臺(tái)模塊主要為用戶(hù)提供音樂(lè)在線試聽(tīng)，歌曲描述搜索，用戶(hù)主頁(yè)，歌曲分享，綁定社交網(wǎng)站等功能。（5）后臺(tái)管理員管理模塊主要為管理員提供歌曲管理，歌手管理，歌詞管理，專(zhuān)輯管理，音樂(lè)錄像帶管理，會(huì)員管理，管理員管理等功能，以及集成了個(gè)人設(shè)置，天氣，郵件發(fā)送，鎖屏等輔助功能。1.5 內(nèi)容創(chuàng)新點(diǎn)系統(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)：（1）在所有涉及敏感信息的傳輸上都使用了單向加密，并采用了防SQL注入技術(shù)和防XSS腳本攻擊技術(shù)。（2）系統(tǒng)的開(kāi)發(fā)采用三層架構(gòu)，將系統(tǒng)分為數(shù)據(jù)層，視圖層，業(yè)務(wù)邏輯層三層來(lái)開(kāi)發(fā)實(shí)現(xiàn)，這樣對(duì)于

18、后期的維護(hù)提供很大的方便。（3）系統(tǒng)在界面設(shè)計(jì)和交互特效上，采用HTML5，CSS3，JAVASCRIPT，AJAX等技術(shù)，使得界面大氣清新，動(dòng)畫(huà)優(yōu)美，用戶(hù)體驗(yàn)非常好。AJAX主要用來(lái)實(shí)現(xiàn)系統(tǒng)的異步通信，靜態(tài)更新。1.6 論文結(jié)構(gòu)第一章：闡述本在線音樂(lè)網(wǎng)站系統(tǒng)的研究背景，意義和內(nèi)容，介紹了在線音樂(lè)網(wǎng)站國(guó)內(nèi)外研究的現(xiàn)狀以及本系統(tǒng)的創(chuàng)新之處。第二章：系統(tǒng)需求分析，分析系統(tǒng)的功能需求，性能需求等，包括用戶(hù)前臺(tái)和管理員后臺(tái)兩個(gè)大模塊，以及每個(gè)模塊的子模塊的功能需求，并分析了系統(tǒng)的數(shù)據(jù)流。第三章：闡述系統(tǒng)的總體設(shè)計(jì)，首先敘述了系統(tǒng)結(jié)構(gòu)的設(shè)計(jì)，給出了系統(tǒng)的架構(gòu)圖。然后從功能方面，將整個(gè)系統(tǒng)分為用戶(hù)前臺(tái)和后

19、臺(tái)管理兩個(gè)模塊。簡(jiǎn)單介紹了數(shù)據(jù)庫(kù)的設(shè)計(jì)。第四章：詳細(xì)闡述了系統(tǒng)前后臺(tái)各個(gè)子模塊的設(shè)計(jì)與實(shí)現(xiàn)，設(shè)計(jì)了需要用到的算法，畫(huà)出了它們的程序流程圖，根據(jù)前面給出的需求分析和系統(tǒng)設(shè)計(jì)，利用三層開(kāi)發(fā)模式對(duì)系統(tǒng)進(jìn)行開(kāi)發(fā)和實(shí)現(xiàn)，并詳細(xì)敘述了每一層的實(shí)現(xiàn)過(guò)程，即數(shù)據(jù)層，業(yè)務(wù)邏輯層，視圖層的開(kāi)發(fā)過(guò)程。闡述了系統(tǒng)數(shù)據(jù)庫(kù)的設(shè)計(jì)，畫(huà)出了系統(tǒng)所需的所有表結(jié)構(gòu)和表的屬性圖，以及給出了系統(tǒng)的總體E-R圖。第五章：描述了系統(tǒng)的測(cè)試，并給出了測(cè)試結(jié)果。并用圖片和數(shù)據(jù)對(duì)系統(tǒng)的實(shí)現(xiàn)進(jìn)行了分析和評(píng)估。第六章：對(duì)論文的工作進(jìn)行總結(jié)和評(píng)價(jià)，指出了系統(tǒng)中存在的不足與缺陷。以及這次設(shè)計(jì)的收獲與心得。最后是介紹致謝與參考文獻(xiàn)等內(nèi)容。2 需求分析需

20、求分析就是確定用戶(hù)的需要，然后根據(jù)用戶(hù)的需要確定軟件系統(tǒng)的功能。需求分析是軟件工程中的關(guān)鍵過(guò)程，只有先做好需求的分析，了解業(yè)務(wù)以后的發(fā)展趨勢(shì)，做好具有拓展性的系統(tǒng)設(shè)計(jì)，才會(huì)給系統(tǒng)更大的擴(kuò)展空間，從而在需求發(fā)生變化的時(shí)候可以更從容的修改。本在線音樂(lè)網(wǎng)站，為用戶(hù)提供優(yōu)質(zhì)的在線音樂(lè)試聽(tīng)服務(wù)。普通用戶(hù)注冊(cè)成為會(huì)員后，除了試聽(tīng)高音質(zhì)的音樂(lè)外，還可以收藏喜愛(ài)的歌曲和歌手專(zhuān)輯，分享音樂(lè)給朋友或者其他用戶(hù)，搜索或過(guò)濾音樂(lè)等等。管理員可以管理網(wǎng)站的各種資源，如音樂(lè)，專(zhuān)輯信息，用戶(hù)信息等。2.1業(yè)務(wù)流程分析Business Process Analysis（BPA），即業(yè)務(wù)流程分析，是對(duì)業(yè)務(wù)功能分析的進(jìn)一步細(xì)化，

21、從而得到業(yè)務(wù)流程圖。業(yè)務(wù)流程圖（transaction flow diagram，簡(jiǎn)稱(chēng)TFD)，就是用一些規(guī)定的符號(hào)及連線來(lái)表示某個(gè)具體業(yè)務(wù)處理過(guò)程。業(yè)務(wù)流程圖的繪制基本上按照業(yè)務(wù)的實(shí)際處理步驟和過(guò)程繪制。換句話(huà)說(shuō)，就是“文本”用圖形方式來(lái)反映實(shí)際業(yè)務(wù)處理過(guò)程的“流水賬”。本在線音樂(lè)網(wǎng)站的業(yè)務(wù)流程：未注冊(cè)用戶(hù)進(jìn)入本網(wǎng)站后，需要先進(jìn)行注冊(cè)成為本站會(huì)員，從而登錄本網(wǎng)站，或者未注冊(cè)的用戶(hù)可以直接使用自己的社交網(wǎng)站的帳號(hào)登錄，例如騰訊微博，QQ，新浪微博，人人網(wǎng)等，然后系統(tǒng)會(huì)自動(dòng)記錄用戶(hù)的唯一標(biāo)識(shí)OPENID。用戶(hù)登陸后進(jìn)入網(wǎng)站首頁(yè)界面，接著便可以進(jìn)行歌曲試聽(tīng)，歌曲搜索，修改個(gè)人信息，收藏歌曲等操作。

22、管理員登陸時(shí)，首先進(jìn)入管理員登錄界面，然后輸入有效帳號(hào)和密碼，進(jìn)入到后臺(tái)管理主界面。然后管理員可以對(duì)用戶(hù)、歌曲、歌手、專(zhuān)輯等進(jìn)行管理，比如修改用戶(hù)信息，刪除用戶(hù)，添加用戶(hù)，上傳歌曲，添加MV（Music Video，音樂(lè)錄像帶），刪除歌詞等。此外管理員還可以修改自己的信息，進(jìn)行個(gè)人的界面愛(ài)好設(shè)置，查看系統(tǒng)概況，查看天氣。由以上的業(yè)務(wù)流程分析，從而得出系統(tǒng)業(yè)務(wù)流程圖，如圖2-1所示。圖2-1 系統(tǒng)業(yè)務(wù)流程圖2.2 系統(tǒng)功能需求分析2.2.1 前臺(tái)功能需求（1）歌曲播放，注冊(cè)用戶(hù)可以使用該子模塊試聽(tīng)最新最酷的高品質(zhì)音樂(lè)。（2）歌曲搜索，用戶(hù)可以通過(guò)輸入歌曲名，歌手名或者一些自然語(yǔ)言描述來(lái)搜索自己想

23、要的音樂(lè)。搜索采用模糊和多字段搜索，從而返回較多信息。（3）個(gè)人中心，用戶(hù)可以在此模塊編輯個(gè)人信息，發(fā)布心情說(shuō)說(shuō)，設(shè)置界面風(fēng)格等。此模塊操作均采用Ajax異步通信，實(shí)施靜態(tài)更新。（4）分享音樂(lè)，用戶(hù)可以分享好的音樂(lè)給自己的朋友，但要先進(jìn)行社交網(wǎng)絡(luò)的綁定，比如騰訊QQ，新浪微博等。（5）音樂(lè)收藏，用戶(hù)可以通過(guò)此模塊來(lái)收藏自己喜歡的歌曲，系統(tǒng)會(huì)自動(dòng)記錄并保存。（6）排行榜模塊，用戶(hù)可以查看各大排行榜，并可以試聽(tīng)。2.2.2 后臺(tái)管理功能需求管理員可以通過(guò)后臺(tái)管理平臺(tái)對(duì)系統(tǒng)的各種資源進(jìn)行細(xì)致的管理，主要是歌曲，歌手，專(zhuān)輯，MV（Music Video，音樂(lè)錄像帶）等進(jìn)行更新和上傳。（1）管理員可以對(duì)

24、注冊(cè)用戶(hù)信息進(jìn)行管理，可以查看用戶(hù)信息，添加用戶(hù)，刪除用戶(hù)，修改用戶(hù)信息，但不能修改用戶(hù)密碼。（2）管理員可以管理歌曲，包括查看歌曲信息，上傳歌曲，編輯歌曲信息，刪除歌曲，在刪除的同時(shí)將歌曲從硬盤(pán)也刪除。（3）管理專(zhuān)輯，包括創(chuàng)建專(zhuān)輯，編輯專(zhuān)輯信息，刪除專(zhuān)輯，刪除專(zhuān)輯時(shí)不刪除專(zhuān)輯中的歌曲。（4）管理歌手，管理員可以添加歌手，編輯歌手信息，以及刪除歌手。（5）管理歌詞，管理員可以上傳歌曲的歌詞，刪除歌詞，但不能編輯歌詞。（6）管理員管理，擁有超級(jí)權(quán)限的管理員可以添加管理員，鎖定管理員，刪除管理員，修改管理員信息，但不能查看管理的密碼。（7）系統(tǒng)概況，管理員可以通過(guò)此模塊查看總的用戶(hù)，歌曲，專(zhuān)輯，歌

25、手?jǐn)?shù)量，以及服務(wù)器的資源使用情況。（8）MV管理，管理員可以查看MV的信息，上傳MV，刪除MV，編輯MV的信息，還可以預(yù)覽MV。（9）個(gè)性設(shè)置和個(gè)人信息管理，管理員可以設(shè)置自己喜歡的界面風(fēng)格，屏蔽主界面某些模塊的顯示，修改自己的個(gè)人信息，查看上次登錄IP和時(shí)間。（10）輔助功能，管理員可以利用本系統(tǒng)發(fā)送郵件，查看當(dāng)?shù)靥鞖馇闆r。2.3 數(shù)據(jù)流分析數(shù)據(jù)流程分析主要包括對(duì)信息的流動(dòng)、傳遞、處理、存儲(chǔ)等的分析。數(shù)據(jù)流程分析的目的就是要發(fā)現(xiàn)和解決數(shù)據(jù)流通中的問(wèn)題?，F(xiàn)有的數(shù)據(jù)流程分析多是通過(guò)分層的數(shù)據(jù)流圖（Data Flow Diagram，簡(jiǎn)稱(chēng)DFD）來(lái)實(shí)現(xiàn)的。數(shù)據(jù)流圖在邏輯上描述系

26、統(tǒng)的功能，輸入輸出和數(shù)據(jù)存儲(chǔ)等，是便于用戶(hù)理解的系統(tǒng)數(shù)據(jù)流程的圖形表示。通過(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ù)流圖（頂層圖）如圖2-2所示。圖2-2 系統(tǒng)總體數(shù)據(jù)流圖（頂層圖）2.3.1 系統(tǒng)一層數(shù)據(jù)流圖根據(jù)頂層數(shù)據(jù)流圖，對(duì)整個(gè)網(wǎng)站系統(tǒng)進(jìn)行詳細(xì)的分析描述，得到一層數(shù)據(jù)流圖，如圖2-3所示。圖2-3 系統(tǒng)一層數(shù)據(jù)流圖2.3.2 系統(tǒng)二層數(shù)據(jù)流圖根據(jù)一層數(shù)據(jù)流圖，對(duì)各個(gè)具體處理過(guò)程進(jìn)行分析，得出部分模塊的二層數(shù)據(jù)流圖，如下所示。圖2-4 音樂(lè)管理數(shù)據(jù)流圖（第二層）圖2-5 專(zhuān)輯管理數(shù)據(jù)流圖（第二層）2.4

27、用例圖分析用例圖是被稱(chēng)為參與者的外部用戶(hù)所能觀察到的系統(tǒng)功能的模型圖，呈現(xiàn)了一些參與者和一些用例，以及它們之間的關(guān)系，主要用于對(duì)系統(tǒng)、子系統(tǒng)或類(lèi)的功能行為進(jìn)行建模。通過(guò)前面對(duì)系統(tǒng)功能需求詳細(xì)的分析，可得到本在線音樂(lè)網(wǎng)站的用例和參與者，從而得到系統(tǒng)的用例圖。管理員用例圖如圖2-6所示。圖2-6 管理員用例圖會(huì)員用戶(hù)用例圖如2-7所示。圖2-7 用戶(hù)用例圖2.5 系統(tǒng)性能需求（1）前臺(tái)用戶(hù)界面要求清新大氣精美，對(duì)用戶(hù)要有很強(qiáng)的吸引力。各個(gè)控件的放置位置合理，擬物按鈕逼真且有文字提示。（2）網(wǎng)站系統(tǒng)運(yùn)行速度要快，用戶(hù)的體驗(yàn)感好。用戶(hù)的體驗(yàn)感和停留在網(wǎng)站的時(shí)間取決于網(wǎng)站的運(yùn)行速度。系統(tǒng)將采用靜態(tài)頁(yè)面和

28、AJAX來(lái)提升系統(tǒng)的運(yùn)行速度。（3）網(wǎng)站的安全性要強(qiáng)，用戶(hù)的敏感信息均采用Base64和MD5雙重加密，力求保證用戶(hù)信息的安全。2.6 系統(tǒng)設(shè)計(jì)方案本在線音樂(lè)網(wǎng)站將采用B/S架構(gòu)來(lái)實(shí)現(xiàn)上面分析得到的功能和性能需求。B/S架構(gòu)將主要的事務(wù)邏輯放在服務(wù)器端來(lái)實(shí)現(xiàn)，用戶(hù)瀏覽器通過(guò)Web Server同數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)交互，這樣大大簡(jiǎn)化了客戶(hù)端電腦載荷，減輕了系統(tǒng)維護(hù)與升級(jí)的成本和工作量，降低了用戶(hù)的總體成本(TCO)。在系統(tǒng)開(kāi)發(fā)上，采用三層開(kāi)發(fā)模式來(lái)進(jìn)行開(kāi)發(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)用戶(hù)提

29、交數(shù)據(jù)的顯示和接收，為用戶(hù)提供交互式的界面。利用三層開(kāi)發(fā)模式，將各個(gè)開(kāi)發(fā)環(huán)節(jié)獨(dú)立分開(kāi)，利于系統(tǒng)的維護(hù)和開(kāi)發(fā)，將不用受限與人員、時(shí)間、地點(diǎn)。2.7 本章小結(jié)本章主要闡述了整個(gè)系統(tǒng)的需求分析和開(kāi)發(fā)方案。首先介紹了系統(tǒng)的業(yè)務(wù)流程，給出了系統(tǒng)業(yè)務(wù)流程圖。接著說(shuō)明了系統(tǒng)的功能需求和性能需求，功能需求主要包括前臺(tái)功能需求和后臺(tái)功能需求。然后簡(jiǎn)單分析了系統(tǒng)數(shù)據(jù)流程和用例圖，并畫(huà)出了系統(tǒng)相關(guān)數(shù)據(jù)流圖和用例圖。最后，分析整個(gè)系統(tǒng)的架構(gòu)，并給出方案。3 系統(tǒng)總體設(shè)計(jì)系統(tǒng)分析設(shè)計(jì)是整個(gè)網(wǎng)站系統(tǒng)開(kāi)發(fā)過(guò)程中非常重要的一步，一個(gè)詳細(xì)全面的系統(tǒng)設(shè)計(jì)會(huì)給后續(xù)的代碼編寫(xiě)的速度帶來(lái)益處。3.1 系統(tǒng)結(jié)構(gòu)設(shè)計(jì)“ZMX|MUSIC”

30、在線音樂(lè)網(wǎng)站采用三層開(kāi)發(fā)設(shè)計(jì)模式，分為：用戶(hù)界面層，業(yè)務(wù)邏輯層和數(shù)據(jù)訪問(wèn)層。用戶(hù)界面層用來(lái)和用戶(hù)交互，業(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所示。圖3-1 系統(tǒng)結(jié)構(gòu)圖系統(tǒng)各層之間的調(diào)用過(guò)程如下：（1）用戶(hù)通過(guò)用戶(hù)界面層訪問(wèn)系統(tǒng)，向系統(tǒng)提交請(qǐng)求，界面層對(duì)請(qǐng)求進(jìn)行初步的處理和包裝，并判斷是否要與業(yè)務(wù)邏輯層進(jìn)行交互。（2）業(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ù)讀出并返回給邏輯層。（3）邏輯層將處理的結(jié)果，返回給界面層。界面層加以處理呈現(xiàn)給用戶(hù)。3.2 系統(tǒng)

31、功能設(shè)計(jì)3.2.1 前臺(tái)用戶(hù)功能設(shè)計(jì)由前面的需求分析可以得到系統(tǒng)的整體功能模塊。系統(tǒng)功能模塊主要分為前臺(tái)用戶(hù)功能模塊和后臺(tái)管理功能模塊。前臺(tái)功能模塊圖如圖3-2所示。圖3-2 前臺(tái)用戶(hù)功能模塊圖用戶(hù)前臺(tái)功能模塊敘述：（1）音樂(lè)播放頁(yè)功能：歌曲收藏，歌詞查看，MV欣賞，歌曲循環(huán)播放，音量調(diào)節(jié)，歌曲切換。（2）用戶(hù)主頁(yè)功能：查看個(gè)人信息，修改個(gè)人信息，發(fā)布心情說(shuō)說(shuō)，設(shè)置界面風(fēng)格。（3）歌曲搜索功能：可使用歌曲名，歌手名，專(zhuān)輯名，感情描述來(lái)搜索想要的歌曲。（4）用戶(hù)注冊(cè)與登錄功能：未注冊(cè)的用戶(hù)可以填寫(xiě)用戶(hù)注冊(cè)表單然后提交注冊(cè)成為本站會(huì)員，或者使用社交網(wǎng)絡(luò)帳號(hào)實(shí)現(xiàn)登錄。已注冊(cè)的用戶(hù)可以直接登錄。（5）

32、分享音樂(lè)功能：登錄用戶(hù)可以分享好的音樂(lè)到自己的社交網(wǎng)絡(luò)上，例如騰訊QQ，新浪微博等，但前提是需要綁定這些社交網(wǎng)絡(luò)帳號(hào)。（6）綁定社交網(wǎng)絡(luò)功能：登錄用戶(hù)可以綁定各大社交網(wǎng)絡(luò)帳號(hào)，綁定完成后可以分享音樂(lè)給朋友，邀請(qǐng)好友來(lái)本站。3.2.2 后臺(tái)管理功能設(shè)計(jì)由前面的后臺(tái)管理功能需求分析，可得到后臺(tái)管理功能模塊圖，如圖3-3所示。圖3-3 后臺(tái)管理功能模塊圖后臺(tái)管理模塊功能敘述：（1）用戶(hù)管理：查看所有用戶(hù)，添加用戶(hù)，編輯和刪除用戶(hù)。（2）歌曲管理：歌曲列表，上傳歌曲，編輯和刪除歌曲，試聽(tīng)歌曲。（3）歌手管理：歌手列表，歌手信息編輯，添加歌手。（4）專(zhuān)輯管理：專(zhuān)輯列表，添加專(zhuān)輯，刪除專(zhuān)輯，查看該專(zhuān)輯歌曲

33、。（5）歌詞管理：歌詞列表，添加歌詞，查看歌詞，刪除歌詞。（6）MV管理：MV列表，MV觀賞，刪除MV。（7）系統(tǒng)維護(hù)：統(tǒng)計(jì)用戶(hù)，歌曲，歌手，專(zhuān)輯，MV等總的數(shù)量，查看實(shí)時(shí)在線人數(shù)，管理歌曲標(biāo)簽，歌手地區(qū)等信息。（8）輔助功能：鎖屏功能，郵件功能，天氣功能。3.3 系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)數(shù)據(jù)庫(kù)是本在線音樂(lè)網(wǎng)站的核心組成部分，所有的信息出來(lái)都是基于數(shù)據(jù)庫(kù)來(lái)進(jìn)行的，因此數(shù)據(jù)庫(kù)的設(shè)計(jì)是整個(gè)系統(tǒng)設(shè)計(jì)過(guò)程中非常重要的。所以在性能，開(kāi)放性，可靠性，穩(wěn)定性，可操作性等因素考慮下，本網(wǎng)站系統(tǒng)選擇MYSQL5.5作為數(shù)據(jù)庫(kù)開(kāi)發(fā)平臺(tái)。本網(wǎng)站首先進(jìn)行了概念結(jié)構(gòu)設(shè)計(jì)，然后根據(jù)概念結(jié)構(gòu)設(shè)計(jì)得出邏輯結(jié)構(gòu)設(shè)計(jì)概念結(jié)構(gòu)設(shè)計(jì)就是將需求

34、分析得到的系統(tǒng)需求抽象為信息結(jié)構(gòu)的過(guò)程。E-R圖是描述概念模型的有力工具，它用簡(jiǎn)單的圖形方式描述世界中的數(shù)據(jù)。這種描述不涉及數(shù)據(jù)在數(shù)據(jù)庫(kù)中的表示和存取方法，非常接近人的思維。邏輯結(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ò)程。3.4 本章小結(jié)本章闡述了系統(tǒng)整體的設(shè)計(jì)。首先簡(jiǎn)單的講述了系統(tǒng)的架構(gòu)設(shè)計(jì)，畫(huà)出了系統(tǒng)結(jié)構(gòu)圖，然后詳細(xì)地說(shuō)明了系統(tǒng)的功能設(shè)計(jì)，列出了每個(gè)子模塊的功能，接著就是極為重要的數(shù)據(jù)庫(kù)的設(shè)計(jì)。4 詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)詳細(xì)設(shè)計(jì)就是對(duì)系統(tǒng)的各個(gè)功能模塊詳細(xì)設(shè)計(jì)的描述，給出詳細(xì)設(shè)計(jì)的內(nèi)容，畫(huà)出設(shè)計(jì)階段所用到

35、的相關(guān)圖例，比如程序流程圖、序列圖等。系統(tǒng)實(shí)現(xiàn)是整個(gè)網(wǎng)站開(kāi)發(fā)過(guò)程中不可缺少的一部分，根據(jù)前期的需求分析和設(shè)計(jì)，將網(wǎng)站一步一步以代碼實(shí)現(xiàn)出來(lái)。4.1 系統(tǒng)開(kāi)發(fā)環(huán)境本在線音樂(lè)網(wǎng)站采用Win7+Apache2.2+Mysql5.5+Php5的組合來(lái)進(jìn)行開(kāi)發(fā)，系統(tǒng)所有的功能都是基于此組合來(lái)實(shí)現(xiàn)的。之所以采用這四個(gè)軟件，是因?yàn)閃in7操作系統(tǒng)穩(wěn)定快速且操作方便，其它三個(gè)軟件都是開(kāi)源免費(fèi)又非常的穩(wěn)定，因此可以搭建一個(gè)穩(wěn)定，免費(fèi)的在線音樂(lè)網(wǎng)站。本系統(tǒng)的前端界面是由HTML5，CSS3和JAVASCRIPT來(lái)實(shí)現(xiàn)，其中異步通信由AJAX來(lái)實(shí)現(xiàn)。首先簡(jiǎn)單介紹下這些技術(shù)的相關(guān)知識(shí)。（1）PHP，英文全稱(chēng)是Hype

36、rtext Preprocessor，超文本預(yù)處理器。它是一種開(kāi)源的服務(wù)器端腳本語(yǔ)言，語(yǔ)言風(fēng)格類(lèi)似于C語(yǔ)言。PHP執(zhí)行動(dòng)態(tài)頁(yè)面的速度非常的快，效率非常高，對(duì)面向?qū)ο蟮闹С忠埠芎茫耆梢杂脕?lái)開(kāi)發(fā)大型商業(yè)程序。（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í)行速度快，源碼開(kāi)放，與PHP和APACHE搭配可以組成良好的開(kāi)發(fā)環(huán)境。（3）Apache，是一種web服務(wù)器端軟件，也是最流行的web服務(wù)器軟件之一。它的特點(diǎn)就是簡(jiǎn)單、速度快、性能穩(wěn)定，并可做代理服務(wù)器使用。與Nginx相比，Apache更穩(wěn)定，bug少，rewrite技術(shù)更強(qiáng)，但是

37、性能低一些。（4）Ajax，即“Asynchronous Javascript And XML”，異步JavaScript和XML，是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(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è)特效。（5）CSS3，是CSS技術(shù)的升級(jí)版本，增加了動(dòng)畫(huà)屬性，圓角邊框，盒模型等。4.2 前臺(tái)功能模塊的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)4.2.1 用戶(hù)登錄模塊的設(shè)計(jì)與實(shí)現(xiàn)進(jìn)入本網(wǎng)站首頁(yè)，點(diǎn)擊登錄按鈕，便會(huì)出現(xiàn)帳號(hào)和密碼輸入框，用戶(hù)輸入帳號(hào)和密碼，然后點(diǎn)擊提交按鈕或者按下回車(chē)鍵，接著系統(tǒng)使用Javascript對(duì)用戶(hù)輸入的信息進(jìn)行格式檢查，如果格式正確則使用AJAX

38、異步提交給后臺(tái)進(jìn)行判斷，如格式錯(cuò)誤，則提示用戶(hù)所填信息格式不對(duì)。后臺(tái)接收用戶(hù)的帳號(hào)和密碼，并與數(shù)據(jù)庫(kù)中的數(shù)據(jù)做對(duì)比，如果用戶(hù)的帳號(hào)密碼有效，則返回成功信息給前臺(tái)AJAX，JS再將頁(yè)面跳轉(zhuǎn)到本網(wǎng)站主頁(yè)，如果無(wú)效，則返回失敗信息給前臺(tái)AJAX，就會(huì)提示用戶(hù)帳號(hào)名或者密碼錯(cuò)誤，讓用戶(hù)繼續(xù)輸入信息。另外用戶(hù)也可以使用第三方社交網(wǎng)絡(luò)帳號(hào)登錄本網(wǎng)站，用戶(hù)在網(wǎng)站首頁(yè)點(diǎn)擊社交網(wǎng)絡(luò)圖標(biāo)，支持騰訊QQ，新浪微博，騰訊微博等，系統(tǒng)彈出用戶(hù)授權(quán)窗口，用戶(hù)輸入自己第三方網(wǎng)絡(luò)的帳號(hào)密碼即可登錄本網(wǎng)站。用戶(hù)登錄功能的實(shí)現(xiàn)是采用AJAX+PHP的方式來(lái)完成，該功能的順序圖如圖4-1所示。圖4-1 用戶(hù)登錄序列圖用戶(hù)登錄模塊的

39、程序流程圖如圖4-2所示。圖4-2 用戶(hù)登錄模塊程序流程圖該功能的實(shí)現(xiàn)核心代碼如下所示。/生成用戶(hù)第二標(biāo)識(shí)、令牌用于下次自動(dòng)登錄function generateToken($id,$salt,$usrName)/創(chuàng)建一個(gè)UsersDAO對(duì)象$userDAO = new UsersDAO();/生成一個(gè)標(biāo)識(shí)$identifier = md5($salt.md5($usrName.$salt); /生成一個(gè)唯一的令牌$token = md5(uniqid(rand(),true); $timeout = time()+60*60*24*30;$userDAO->setUserIdentif

40、ierInfo($id,$identifier,$token,$timeout);return $identifier.':'.$token;用戶(hù)登錄功能實(shí)現(xiàn)的效果圖如下所示。圖4-3 帳號(hào)或密碼錯(cuò)誤圖4-4 帳號(hào)密碼有效圖4-5 使用社交網(wǎng)絡(luò)騰訊微博登錄4.2.2 用戶(hù)注冊(cè)模塊的設(shè)計(jì)與實(shí)現(xiàn)和登錄模塊一樣，首先進(jìn)入本網(wǎng)站首頁(yè)，點(diǎn)擊注冊(cè)圖標(biāo)按鈕便會(huì)出現(xiàn)用戶(hù)注冊(cè)表單。用戶(hù)填寫(xiě)登錄帳號(hào)，密碼，性別，昵稱(chēng)等信息，然后點(diǎn)擊注冊(cè)按鈕，系統(tǒng)會(huì)先判斷用戶(hù)填寫(xiě)的個(gè)人信息是否符合本網(wǎng)站要求的格式，如格式正確，則提交給后臺(tái)，如果格式不對(duì)，就提醒用戶(hù)填寫(xiě)的信息格式不正確。后臺(tái)程序接收到前臺(tái)傳來(lái)的信息，

41、將其寫(xiě)入到數(shù)據(jù)庫(kù)，并返回成功信息給前臺(tái)。如果后臺(tái)程序出現(xiàn)錯(cuò)誤，則返回失敗信息給前臺(tái)，并附上具體的錯(cuò)誤信息。前臺(tái)收到返回的成功信息后，就將頁(yè)面跳轉(zhuǎn)到網(wǎng)站主頁(yè)，如收到失敗信息，則提示用戶(hù)注冊(cè)失敗，并顯示失敗的原因。用戶(hù)注冊(cè)模塊的程序流程圖如圖4-6所示。圖4-6 用戶(hù)注冊(cè)模塊程序流程圖該功能的序列圖如圖4-7所示。圖4-7 用戶(hù)注冊(cè)模塊序列圖該功能實(shí)現(xiàn)效果圖如下所示。圖4-8 帳號(hào)或密碼格式錯(cuò)誤圖4-9 昵稱(chēng)被占用和注冊(cè)成功4.2.3 歌曲搜索模塊的設(shè)計(jì)與實(shí)現(xiàn)用戶(hù)登錄后在網(wǎng)站主頁(yè)的搜索框中輸入搜索關(guān)鍵字，比如歌曲名、歌手名、音樂(lè)標(biāo)簽等，點(diǎn)擊提交，AJAX異步提交給系統(tǒng)后臺(tái)進(jìn)行檢索，如找到了用戶(hù)需要

42、的歌曲，則返回該歌曲的URL，如果該歌曲有歌詞、MV等，就一并返回給前臺(tái)，再由前臺(tái)控制歌曲的播放，歌詞的顯示，MV的觀看。如果沒(méi)有找到用戶(hù)需要的歌曲，則返回抱歉信息給用戶(hù)。該模塊的程序流程圖如圖4-10所示。圖4-10 歌曲搜索模塊程序流程圖歌曲搜索功能的實(shí)現(xiàn)用到的序列圖如圖4-11所示。圖4-11 歌曲搜索序列圖該功能實(shí)現(xiàn)的核心代碼如下。/將關(guān)鍵字異步提交給music_search.php$.ajax(url:'user_zmx/music_search.php',type:'post',dataType:'json',data:keyword

43、:kword ,success:function(retData,status)省略/歌曲檢索語(yǔ)句$sql="select songs.songId from songs,songers,songtags,albums_songs languages,album,where songs.songTagId=songtags.songTagId and songs.songerid = songers.songerid and songs.lanid=languages.lanid and songs.songid=albums_songs.songid and albums_song

44、s.albumid=album.albumid and concat(songName,songerName,desc,albumName,tagContent) like '%$keyword%'"該功能實(shí)現(xiàn)的效果圖如下所示。圖4-12 歌曲搜索框圖4-13 輸入“夜曲”圖4-14 播放夜曲4.2.4 歌曲分享模塊的設(shè)計(jì)與實(shí)現(xiàn)本音樂(lè)網(wǎng)站的用戶(hù)可以分享自己喜歡的音樂(lè)給朋友。用戶(hù)只要點(diǎn)擊網(wǎng)站主頁(yè)上的分享按鈕，便會(huì)呈現(xiàn)出分享界面，用戶(hù)可以填寫(xiě)分享描述，然后選擇一個(gè)用戶(hù)所綁定的第三方社交網(wǎng)絡(luò)圖標(biāo)，點(diǎn)擊分享按鈕，便可將歌曲分享到你的社交網(wǎng)絡(luò)上。假如用戶(hù)沒(méi)有綁定社交網(wǎng)絡(luò)，則不顯

45、示分享頁(yè)面，提示用戶(hù)需要綁定社交網(wǎng)絡(luò)。該模塊的程序流程圖如圖4-15所示。圖4-15 歌曲分享模塊程序流程圖該功能實(shí)現(xiàn)的核心代碼如下所示。$params'content' = $shrCtt."4:520/share/$file.html"$ci=curl_init();curl_setopt($ci, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ci, CURLOPT_RETURNTRANSFER, 1);curl_setopt($ci, CURLOPT_CONNECTTIM

46、EOUT, 30);curl_setopt($ci, CURLOPT_TIMEOUT, 30);curl_setopt($ci, CURLOPT_POST, TRUE);curl_setopt($ci, CURLOPT_POSTFIELDS,http_build_query($params);curl_setopt($ci, CURLOPT_URL, $url);$response=curl_exec($ci);curl_close($ci);該功能實(shí)現(xiàn)效果如下所示。圖4-16 歌曲分享界面圖4-17 歌曲分享成功圖4-18 點(diǎn)擊分享中的網(wǎng)址出現(xiàn)的界面4.2.5 歌曲收藏模塊的設(shè)計(jì)與實(shí)現(xiàn)用戶(hù)登

47、錄后可以收藏自己喜歡的音樂(lè)，下次登錄便可以直接播放收藏的音樂(lè)。用戶(hù)點(diǎn)擊主頁(yè)上的喜歡按鈕，前臺(tái)系統(tǒng)將此請(qǐng)求提交給后臺(tái)，后臺(tái)判斷該用戶(hù)是否已經(jīng)收藏了該歌曲，如已收藏，則提示用戶(hù)已收藏此歌曲，如果沒(méi)有收藏，就將此歌曲寫(xiě)入到用戶(hù)的歌曲收藏表中。歌曲收藏模塊的程序流程圖如圖4-18所示。圖4-19 歌曲收藏模塊程序流程圖該功能實(shí)現(xiàn)的核心代碼如下所示。/Ajax將喜歡的歌曲提交給后臺(tái)$.ajax(url: 'user_zmx/post_love_song.php',type:'post',dataType:'json',data: uid: ZMusic.S

48、ignup.userInfo.id,sid: ZMusic.Player.sid,type: p_typeZMusic.Player.loveAnimate();$("#flyLoveTip").show().animate(right: "+=180",bottom: "+=160",500,function() $(this).animate(right: leftOffest + "px",bottom: bttm + "px",600,function() $(this).animate

49、(opacity: "0",500,function() $(this).remove();)該功能的實(shí)現(xiàn)效果圖如下所示。圖4-20 歌曲收藏前界面圖4-21 歌曲收藏后界面，并播放動(dòng)畫(huà)4.3 后臺(tái)管理功能模塊的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)4.3.1 管理員登錄模塊的設(shè)計(jì)與實(shí)現(xiàn)管理員在后臺(tái)登錄界面輸入帳號(hào)和密碼，點(diǎn)擊登錄后，如果帳號(hào)或密碼錯(cuò)誤，則會(huì)返回提示信息給管理員，帳號(hào)密碼有效則進(jìn)入后臺(tái)管理主界面。登錄模塊的流程圖如圖4-22所示。圖4-22 管理員后臺(tái)登錄程序流程圖管理員登錄功能實(shí)現(xiàn)的核心代碼如下所示。/使用Ajax異步提交帳號(hào)密碼給admin_login.phpvar url =

50、 './admin_login.php'var pwd = faultylabs.MD5(pwd);var params = 'username='+email+'&password='+pwd +'&'+Math.random();xmlHttp.onreadystatechange = stateChangeLogin;xmlHttp.open('POST',url,true);xmlHttp.setRequestHeader("Content-type","app

51、lication/x-www-form-urlencoded");xmlHttpLogin.send(params);后臺(tái)管理平臺(tái)登入界面如圖4-23所示。圖4-23后臺(tái)管理平臺(tái)登入界面管理員敲擊回車(chē)鍵或者點(diǎn)擊上圖中的綠色按鈕，如果輸入的帳號(hào)和密碼有效，則出現(xiàn)成功界面，接著跳轉(zhuǎn)到后臺(tái)管理主界面，效果圖如下所示。圖4-24 登錄成功提示界面圖4-25 后臺(tái)管理主界面如果管理員輸入無(wú)效的帳號(hào)和密碼，則提示管理員用戶(hù)或密碼錯(cuò)誤，實(shí)現(xiàn)效果圖如圖4-26所示。圖4-26 錯(cuò)誤提示界面4.3.2 用戶(hù)管理模塊的設(shè)計(jì)此模塊分為添加用戶(hù)，刪除用戶(hù)，編輯用戶(hù)信息等子模塊。管理員刪除用戶(hù)時(shí)，系統(tǒng)會(huì)彈出提

52、示框，讓管理員確認(rèn)是否真的刪除用戶(hù)，如果選擇“是”，則刪除用戶(hù)，否則取消刪除。添加用戶(hù)時(shí)，系統(tǒng)對(duì)管理員填寫(xiě)的用戶(hù)信息進(jìn)行檢查，確認(rèn)信息格式是否無(wú)誤，如沒(méi)有錯(cuò)誤，則添加用戶(hù)寫(xiě)進(jìn)后臺(tái)，否則提示管理員錯(cuò)誤信息。同樣編輯用戶(hù)的信息也是如此，先檢查信息格式是否正確，正確就寫(xiě)入后臺(tái)，有錯(cuò)誤則返回給管理員。此外，用戶(hù)搜索功能模塊的設(shè)計(jì)：在用戶(hù)列表的上方放置一個(gè)搜索框，管理員可以輸入任何字符，系統(tǒng)進(jìn)行模糊匹配，然后顯示出匹配到的用戶(hù)的信息。此模塊的程序流程圖如圖4-27所示。圖4-27 用戶(hù)管理模塊程序流程圖4.3.3 歌曲管理模塊的設(shè)計(jì)與實(shí)現(xiàn)歌曲管理模塊亦分為歌曲列表，歌曲上傳，歌曲編輯和刪除等子模塊。歌曲

53、列表，編輯和刪除的設(shè)計(jì)和用戶(hù)管理模塊的設(shè)計(jì)類(lèi)似。歌曲上傳的設(shè)計(jì)：在歌曲列表下方居中處放置一個(gè)上傳按鈕，點(diǎn)擊上傳按鈕就彈出一個(gè)模態(tài)對(duì)話(huà)框，模態(tài)對(duì)話(huà)框中的內(nèi)容就是一個(gè)表單，然后填寫(xiě)需要上傳歌曲的各項(xiàng)信息。填寫(xiě)完成后，點(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所示。圖4-28 歌曲管理模塊程序流程圖該功能序列圖如圖4-29所示。圖4-29 歌曲管理模塊程序序列圖歌曲上傳功能的實(shí)現(xiàn)效果圖如下所示，依次是上傳前，上傳中，上傳成功。圖4-30 歌

54、曲上傳前點(diǎn)擊upload按鈕，開(kāi)始上傳。圖4-31 歌曲上傳中上傳成功提示。圖4-32 歌曲上傳成功歌曲刪除功能序列圖如圖4-33所示。圖4-33 歌曲刪除序列圖歌曲刪除效果圖如下所示。圖4-34 歌曲刪除確認(rèn)框點(diǎn)擊OK按鈕。圖4-35 歌曲刪除中圖4-36 歌曲刪除成功提示4.3.4 系統(tǒng)退出模塊的設(shè)計(jì)系統(tǒng)后臺(tái)管理平臺(tái)的安全是非常重要的，因此系統(tǒng)退出模塊的設(shè)計(jì)也不能疏忽。本網(wǎng)站系統(tǒng)退出模塊的設(shè)計(jì)：設(shè)置一個(gè)注銷(xiāo)超鏈接，管理員點(diǎn)擊這個(gè)超鏈接，然后由Javascript截獲用戶(hù)的點(diǎn)擊動(dòng)作并阻止超鏈接的默認(rèn)行為，接著使用AJAX請(qǐng)求PHP注銷(xiāo)程序，這個(gè)PHP程序?qū)h除SESSION對(duì)話(huà)以及重要的CO

55、OKIE，然后返回成功信息，AJAX獲得返回信息后將頁(yè)面跳轉(zhuǎn)到管理員登錄界面。退出模塊的程序流程圖如圖4-37所示。圖4-37 系統(tǒng)退出模塊程序流程圖4.4 網(wǎng)站界面的設(shè)計(jì)本在線音樂(lè)網(wǎng)站非常重視界面的設(shè)計(jì)，一個(gè)大方美觀的界面能夠大大的提升網(wǎng)站對(duì)用戶(hù)的吸引力。正所謂"人靠衣裝,佛靠金裝"，沒(méi)有友好美觀的界面，功能再豐富也難以得到用戶(hù)的垂青。在注重界面的美觀的同時(shí)亦注重整個(gè)頁(yè)面功能模塊的布局，形成一個(gè)色彩搭配協(xié)調(diào)且布局清晰合理的頁(yè)面觀感。本在線音樂(lè)網(wǎng)站的前臺(tái)用戶(hù)登錄界面采用清新綠為主色調(diào)，亮灰為輔色調(diào)來(lái)進(jìn)行色彩搭配，布局方面在頁(yè)面居中處放置網(wǎng)站Logo和標(biāo)志語(yǔ)，然后在其正下方放

56、置兩個(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)，接著在其下方顯示用戶(hù)注冊(cè)表單，圖標(biāo)按鈕依舊不動(dòng)。網(wǎng)站首頁(yè)的設(shè)計(jì)如圖4-36所示，圖中的Logo是本人名字的縮寫(xiě)，字體用的是華康少女。圖4-38 網(wǎng)站首頁(yè)用戶(hù)登錄界面如圖4-37所示，圖中各大社交網(wǎng)絡(luò)圖標(biāo)來(lái)源官網(wǎng)。圖4-39 用戶(hù)登錄界面用戶(hù)注冊(cè)界面如圖4-40所示。圖4-40 用戶(hù)注冊(cè)界面網(wǎng)站主頁(yè)界面的設(shè)計(jì)同樣按照簡(jiǎn)潔美觀的原則來(lái)設(shè)計(jì)，如圖4-41所示。圖4-41 網(wǎng)站主界面網(wǎng)站后臺(tái)管理界面的設(shè)計(jì)，雖然網(wǎng)站后臺(tái)不要呈現(xiàn)給用戶(hù)，但是也不能馬虎，一個(gè)布局合理、美觀大氣的后臺(tái)管理界面亦可以使管理員感到心身愉悅，對(duì)提高管理員的工作效果也會(huì)起到很大的作用。網(wǎng)站后臺(tái)管理員登錄界面的設(shè)計(jì)如圖4-42所示。圖4-42 管理員登錄界面后臺(tái)管理平臺(tái)主界面的設(shè)計(jì)如圖4-43所示。圖4-43 管后臺(tái)管理平臺(tái)主界面歌曲上傳界面的設(shè)計(jì)如圖4-44所示。圖4-44 歌曲上傳界面4.5 數(shù)據(jù)庫(kù)詳細(xì)設(shè)計(jì)4.5.1 數(shù)據(jù)庫(kù)概念結(jié)構(gòu)設(shè)計(jì)在E-R圖中，用矩形表示實(shí)體，菱形表示聯(lián)系，橢圓表示屬性。本在線音樂(lè)網(wǎng)站的系統(tǒng)總體E-R圖，如圖4-45所示。圖4-45 系統(tǒng)總體E-R圖系統(tǒng)各個(gè)實(shí)體屬性圖如下