音樂網站設計與實現(xiàn)論文

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

2、戶體驗差，導致整個網站系統(tǒng)運營質量很低。 系統(tǒng)闡述的是一個在線音樂網站的設計與實現(xiàn)。經過對現(xiàn)有的在線音樂網站仔細認真的分析和對比，以及自己對在線音樂網站的體驗和感受，得出了本音樂網站的功能需求。根據系統(tǒng)需求，系統(tǒng)采用APACHE2.2作為服務器，Mysql數據庫做數據平臺，并選擇PHP語言開發(fā)后臺服務系統(tǒng)。前臺主要使用HTML5，CSS3，Javascript，Ajax等技術，Ajax主要用于網頁中的頁面特效和異步通信。系統(tǒng)采用MVC架構，將系統(tǒng)分為數據層，視圖層，業(yè)務邏輯層三層來開發(fā)與實現(xiàn)。這樣將三層獨立開發(fā)，有利于維護和效率。系統(tǒng)大體上分為兩個模塊，分別為前臺用戶模塊和后臺管理員管理模塊。

3、在安全上，系統(tǒng)在有敏感信息的傳送上都使用了單向加密，以及采用了防SQL注入技術。關鍵詞：音樂網站，在線試聽，異步通信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 國內外研究現(xiàn)狀(2)1.4 研究的內容(3)1.5 內容創(chuàng)新點(3)1.6 論文結構(4)2 需求分析2.1業(yè)務流程分析(5)2.2 系統(tǒng)功能需求分析(6)2.3 數據流分析(7)2.4 用例圖分析(10)2.5 系統(tǒng)性能需求(11)2.6 系統(tǒng)設計方案(12)2.7 本章小結(12)3 系統(tǒng)總體設計3.1 系統(tǒng)結構設計(13)3.2 系統(tǒng)功能設計(13)3.3 系統(tǒng)數據庫設計(15)3.4 本章小結(16)4 詳細設計與實現(xiàn)4.1 系統(tǒng)開發(fā)環(huán)境(17)4.2 前臺功能模塊的詳細設計與實現(xiàn)(18)

10、4.3 后臺管理功能模塊的詳細設計與實現(xiàn)(31)4.4 網站界面的設計(40)4.5 數據庫詳細設計(44)4.6 本章小結(53)5 系統(tǒng)運行與測試5.1 測試方法簡介(54)5.2 測試環(huán)境(54)5.3 功能測試(54)5.4 本章小結(58)6 總結與展望6.1 全文工作總結(59)6.2 下一步工作展望(59)致 謝(61)參考文獻(62)661 緒論1.1研究的背景 隨著互聯(lián)網技術的高速發(fā)展和網絡帶寬不斷的增加，在線音樂產業(yè)的發(fā)展非常的迅速。特別是最近的幾年，在線音樂產業(yè)規(guī)模翻了幾番。根據艾瑞網的調研結果顯示，2003年中國在線音樂市場規(guī)模為1300萬元，2010年達到了2.8億元

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

12、行音樂的傳播，改變了我們欣賞音樂的方式。1.2 研究的意義中國在線音樂的好時代正在接近。中國傳媒大學和國家音樂產業(yè)促進工作委員會聯(lián)合發(fā)布的2014中國音樂產業(yè)發(fā)展報告認為，2013年中國在線音樂市場規(guī)模達43.6億元。由此可以看出，中國在線音樂市場潛力是巨大的。在線音樂網站對音樂用戶和音樂創(chuàng)作人帶來的便利是確定的，音樂用戶不再需要去買唱片和音樂播放器，以及音樂軟件客戶端也不需要安裝，就可以享受到高品質的音樂和滿足自己的音樂需要。音樂創(chuàng)作人可以借助在線音樂網站平臺，不需要唱片公司簽約合作，便可以發(fā)布自己創(chuàng)作的音樂，這對于部分音樂人來說是非常重要的，不但可以增加自己的收入，同時自己的創(chuàng)作思維會不受

13、限制因此本系統(tǒng)這樣一個在線音樂網站的設計與實現(xiàn)有了很大的必要。1.3 國內外研究現(xiàn)狀1.3.1 國外研究現(xiàn)狀據美國唱片行業(yè)協(xié)會（RIAA）表示，在2007年只占全美音樂市場3%的在線音樂服務現(xiàn)如今已占到了該市場的21%。借助于美國良好的音樂版權保護和Pandora、iTunes Radio、Rhapsody、Spotify等公司的努力，美國音樂市場從2009年至今一直維持在70億美元左右的規(guī)模。在線音樂服務達到了14億美元，同比上升了39%。在所有的數字音樂格式中，像Spotify、Rdio和Beats Music這樣的付費式訂閱服務的增長速度最快，在2013年達到了6.28億美元，同比增長5

14、7%。而像iTunes那樣的提供永久數字下載服務的營收則下滑了1%，降至28億美元。蘋果iTunes平臺模式使得蘋果一直領跑在線音樂市場。1.3.2 國內研究現(xiàn)狀中國音樂產業(yè)沒能像歐美國家一樣經歷時間的洗禮，短短十幾年的時間，音樂產業(yè)在成長初期就碰上了野蠻的互聯(lián)網，“避風港”原則也讓音樂版權一度處于架空的狀態(tài)。但隨著近年來的發(fā)展，音樂產業(yè)邏輯開始清晰，監(jiān)管層的法律也慢慢完善，大公司和資本密集進入也讓音樂版權的價值開始不斷提升。2014年7月，阿里收購蝦米，并成功爭奪中國好聲音獨家音樂版權；9月，QQ音樂與杰威爾音樂、華研國際、英皇娛樂、美妙音樂、華誼兄弟音樂等唱片公司達成進駐合作協(xié)議，并在移動

15、端新增了獨家版塊。版權成本不斷提高的同時，中國在線音樂的商業(yè)模式也在嘗試一些新的改變。像騰訊、阿里、網易等，都是大部分音樂向用戶免費、增值服務（比如更高的音質等）收費。增值服務收費的做法會比直接針對音樂作品收費更令用戶容易接受，但這樣的收入增長速度可能并不是非常明顯。2013年中國數字音樂市場規(guī)模達440.7億元，其中無線音樂市場規(guī)模達397.1億元，在線音樂市場規(guī)模達43.6億元。2013年數字音樂用戶達4.53億人以上。數字音樂的傳播、消費、體驗模式日新月異，具有巨大的市場發(fā)展?jié)摿?。中國在線音樂市場發(fā)展趨勢非常良好，國內的很多音樂網站也是發(fā)展速度，比如QQ音樂，百度音樂，酷狗音樂，音悅臺，

16、豆瓣音樂等，它們都提供著高品質的音樂服務。但是這當中也存在著很多的問題。比如版權問題，文化安全問題，政府管理問題等。其中版權問題是中國在線音樂產業(yè)發(fā)展道路上最大的絆腳石，亟需解決。在良好的版權保護下，在線音樂產業(yè)才能發(fā)展的更好更快，音樂人的創(chuàng)作動力也會得到巨大的提升。1.4 研究的內容（1）本在線音樂網站，是基于Apache2.2+Mysql5.5+Php5來開發(fā)的。Apache2.2作為系統(tǒng)服務器，Mysql5.5作為數據平臺，使用PHP語言編寫后臺服務程序。（2）系統(tǒng)最核心的任務為注冊用戶提供音樂在線播放服務。（3）系統(tǒng)主要分為兩個大模塊，分別為前臺用戶模塊和后臺管理員管理模塊（4）用戶前

17、臺模塊主要為用戶提供音樂在線試聽，歌曲描述搜索，用戶主頁，歌曲分享，綁定社交網站等功能。（5）后臺管理員管理模塊主要為管理員提供歌曲管理，歌手管理，歌詞管理，專輯管理，音樂錄像帶管理，會員管理，管理員管理等功能，以及集成了個人設置，天氣，郵件發(fā)送，鎖屏等輔助功能。1.5 內容創(chuàng)新點系統(tǒng)在做到功能全面的同時，亦要考慮系統(tǒng)的安全性，運行速度，穩(wěn)定性等問題。本系統(tǒng)在設計與實現(xiàn)時都做出了很多創(chuàng)新點。主要分為以下幾點：（1）在所有涉及敏感信息的傳輸上都使用了單向加密，并采用了防SQL注入技術和防XSS腳本攻擊技術。（2）系統(tǒng)的開發(fā)采用三層架構，將系統(tǒng)分為數據層，視圖層，業(yè)務邏輯層三層來開發(fā)實現(xiàn)，這樣對于

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

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

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

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

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

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

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

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

26、統(tǒng)的功能，輸入輸出和數據存儲等，是便于用戶理解的系統(tǒng)數據流程的圖形表示。通過前面對系統(tǒng)的業(yè)務流程分析可知整個網站系統(tǒng)的數據的流動情況，從而得到“ZMX|MUSIC”在線音樂網站的數據流程圖，系統(tǒng)總體數據流圖（頂層圖）如圖2-2所示。圖2-2 系統(tǒng)總體數據流圖（頂層圖）2.3.1 系統(tǒng)一層數據流圖根據頂層數據流圖，對整個網站系統(tǒng)進行詳細的分析描述，得到一層數據流圖，如圖2-3所示。圖2-3 系統(tǒng)一層數據流圖2.3.2 系統(tǒng)二層數據流圖根據一層數據流圖，對各個具體處理過程進行分析，得出部分模塊的二層數據流圖，如下所示。圖2-4 音樂管理數據流圖（第二層）圖2-5 專輯管理數據流圖（第二層）2.4

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

28、AJAX來提升系統(tǒng)的運行速度。（3）網站的安全性要強，用戶的敏感信息均采用Base64和MD5雙重加密，力求保證用戶信息的安全。2.6 系統(tǒng)設計方案本在線音樂網站將采用B/S架構來實現(xiàn)上面分析得到的功能和性能需求。B/S架構將主要的事務邏輯放在服務器端來實現(xiàn)，用戶瀏覽器通過Web Server同數據庫進行數據交互，這樣大大簡化了客戶端電腦載荷，減輕了系統(tǒng)維護與升級的成本和工作量，降低了用戶的總體成本(TCO)。在系統(tǒng)開發(fā)上，采用三層開發(fā)模式來進行開發(fā)。數據訪問層主要實現(xiàn)對數據庫系統(tǒng)的訪問，進行讀取、保存和更新數據等操作。業(yè)務邏輯層用來實現(xiàn)視圖層和數據訪問層數據的傳遞和處理。視圖層用來實現(xiàn)用戶提

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

30、在線音樂網站采用三層開發(fā)設計模式，分為：用戶界面層，業(yè)務邏輯層和數據訪問層。用戶界面層用來和用戶交互，業(yè)務邏輯層負責業(yè)務的處理和各層之間的數據的傳遞；數據訪問層負責對數據庫的訪問和檢索。系統(tǒng)的結構圖如圖3-1所示。圖3-1 系統(tǒng)結構圖系統(tǒng)各層之間的調用過程如下：（1）用戶通過用戶界面層訪問系統(tǒng)，向系統(tǒng)提交請求，界面層對請求進行初步的處理和包裝，并判斷是否要與業(yè)務邏輯層進行交互。（2）業(yè)務邏輯層接收來自界面層的請求，對請求進行數據處理。然后調用數據訪問層來實現(xiàn)數據庫訪問，數據訪問層訪問數據庫，將數據讀出并返回給邏輯層。（3）邏輯層將處理的結果，返回給界面層。界面層加以處理呈現(xiàn)給用戶。3.2 系統(tǒng)

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

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

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

34、分析得到的系統(tǒng)需求抽象為信息結構的過程。E-R圖是描述概念模型的有力工具，它用簡單的圖形方式描述世界中的數據。這種描述不涉及數據在數據庫中的表示和存取方法，非常接近人的思維。邏輯結構設計就是將概念結構設計時得到的概念模型轉換成邏輯模型的過程，也就是將E-R圖中的實體、關系、屬性轉化為DBMS所支持的數據結構的過程。3.4 本章小結本章闡述了系統(tǒng)整體的設計。首先簡單的講述了系統(tǒng)的架構設計，畫出了系統(tǒng)結構圖，然后詳細地說明了系統(tǒng)的功能設計，列出了每個子模塊的功能，接著就是極為重要的數據庫的設計。4 詳細設計與實現(xiàn)詳細設計就是對系統(tǒng)的各個功能模塊詳細設計的描述，給出詳細設計的內容，畫出設計階段所用到

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

36、rtext Preprocessor，超文本預處理器。它是一種開源的服務器端腳本語言，語言風格類似于C語言。PHP執(zhí)行動態(tài)頁面的速度非常的快，效率非常高，對面向對象的支持也很好，完全可以用來開發(fā)大型商業(yè)程序。（2）Mysql，是一個關系型數據庫管理系統(tǒng)，采用標準化的SQL語言來進行數據庫的訪問，同時它的體積很小，執(zhí)行速度快，源碼開放，與PHP和APACHE搭配可以組成良好的開發(fā)環(huán)境。（3）Apache，是一種web服務器端軟件，也是最流行的web服務器軟件之一。它的特點就是簡單、速度快、性能穩(wěn)定，并可做代理服務器使用。與Nginx相比，Apache更穩(wěn)定，bug少，rewrite技術更強，但是

37、性能低一些。（4）Ajax，即“Asynchronous Javascript And XML”，異步JavaScript和XML，是一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術，通過在后臺與服務器進行少量數據交換，實現(xiàn)網頁局部刷新，異步調用等，用來增強網頁特效。（5）CSS3，是CSS技術的升級版本，增加了動畫屬性，圓角邊框，盒模型等。4.2 前臺功能模塊的詳細設計與實現(xiàn)4.2.1 用戶登錄模塊的設計與實現(xiàn)進入本網站首頁，點擊登錄按鈕，便會出現(xiàn)帳號和密碼輸入框，用戶輸入帳號和密碼，然后點擊提交按鈕或者按下回車鍵，接著系統(tǒng)使用Javascript對用戶輸入的信息進行格式檢查，如果格式正確則使用AJAX

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

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

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

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

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

43、:kword ,success:function(retData,status)省略/歌曲檢索語句$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%'"該功能實現(xiàn)的效果圖如下所示。圖4-12 歌曲搜索框圖4-13 輸入“夜曲”圖4-14 播放夜曲4.2.4 歌曲分享模塊的設計與實現(xiàn)本音樂網站的用戶可以分享自己喜歡的音樂給朋友。用戶只要點擊網站主頁上的分享按鈕，便會呈現(xiàn)出分享界面，用戶可以填寫分享描述，然后選擇一個用戶所綁定的第三方社交網絡圖標，點擊分享按鈕，便可將歌曲分享到你的社交網絡上。假如用戶沒有綁定社交網絡，則不顯

45、示分享頁面，提示用戶需要綁定社交網絡。該模塊的程序流程圖如圖4-15所示。圖4-15 歌曲分享模塊程序流程圖該功能實現(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);該功能實現(xiàn)效果如下所示。圖4-16 歌曲分享界面圖4-17 歌曲分享成功圖4-18 點擊分享中的網址出現(xiàn)的界面4.2.5 歌曲收藏模塊的設計與實現(xiàn)用戶登

47、錄后可以收藏自己喜歡的音樂，下次登錄便可以直接播放收藏的音樂。用戶點擊主頁上的喜歡按鈕，前臺系統(tǒng)將此請求提交給后臺，后臺判斷該用戶是否已經收藏了該歌曲，如已收藏，則提示用戶已收藏此歌曲，如果沒有收藏，就將此歌曲寫入到用戶的歌曲收藏表中。歌曲收藏模塊的程序流程圖如圖4-18所示。圖4-19 歌曲收藏模塊程序流程圖該功能實現(xiàn)的核心代碼如下所示。/Ajax將喜歡的歌曲提交給后臺$.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();)該功能的實現(xiàn)效果圖如下所示。圖4-20 歌曲收藏前界面圖4-21 歌曲收藏后界面，并播放動畫4.3 后臺管理功能模塊的詳細設計與實現(xiàn)4.3.1 管理員登錄模塊的設計與實現(xiàn)管理員在后臺登錄界面輸入帳號和密碼，點擊登錄后，如果帳號或密碼錯誤，則會返回提示信息給管理員，帳號密碼有效則進入后臺管理主界面。登錄模塊的流程圖如圖4-22所示。圖4-22 管理員后臺登錄程序流程圖管理員登錄功能實現(xiàn)的核心代碼如下所示。/使用Ajax異步提交帳號密碼給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);后臺管理平臺登入界面如圖4-23所示。圖4-23后臺管理平臺登入界面管理員敲擊回車鍵或者點擊上圖中的綠色按鈕，如果輸入的帳號和密碼有效，則出現(xiàn)成功界面，接著跳轉到后臺管理主界面，效果圖如下所示。圖4-24 登錄成功提示界面圖4-25 后臺管理主界面如果管理員輸入無效的帳號和密碼，則提示管理員用戶或密碼錯誤，實現(xiàn)效果圖如圖4-26所示。圖4-26 錯誤提示界面4.3.2 用戶管理模塊的設計此模塊分為添加用戶，刪除用戶，編輯用戶信息等子模塊。管理員刪除用戶時，系統(tǒng)會彈出提

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

53、列表，編輯和刪除的設計和用戶管理模塊的設計類似。歌曲上傳的設計：在歌曲列表下方居中處放置一個上傳按鈕，點擊上傳按鈕就彈出一個模態(tài)對話框，模態(tài)對話框中的內容就是一個表單，然后填寫需要上傳歌曲的各項信息。填寫完成后，點擊提交按鈕即可上傳歌曲到服務器上，當然在這之前歌曲的信息會被系統(tǒng)檢查一遍，確認信息無誤或者服務器上沒有這首歌曲。另外設計了一個試聽按鈕，管理員點擊它，便可以試聽歌曲。歌曲管理模塊的程序流程圖如圖4-28所示。圖4-28 歌曲管理模塊程序流程圖該功能序列圖如圖4-29所示。圖4-29 歌曲管理模塊程序序列圖歌曲上傳功能的實現(xiàn)效果圖如下所示，依次是上傳前，上傳中，上傳成功。圖4-30 歌

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

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

56、置兩個圖標按鈕，一個是登錄按鈕，另一個是注冊按鈕。點擊登錄按鈕，將網站Logo和標志語向上移動一段距離，在其下方顯示社交網絡圖標和登錄表單，圖標按鈕一直不動。點擊注冊按鈕，將網站Logo和登錄表單隱藏，社交網絡圖標向上移動，接著在其下方顯示用戶注冊表單，圖標按鈕依舊不動。網站首頁的設計如圖4-36所示，圖中的Logo是本人名字的縮寫，字體用的是華康少女。圖4-38 網站首頁用戶登錄界面如圖4-37所示，圖中各大社交網絡圖標來源官網。圖4-39 用戶登錄界面用戶注冊界面如圖4-40所示。圖4-40 用戶注冊界面網站主頁界面的設計同樣按照簡潔美觀的原則來設計，如圖4-41所示。圖4-41 網站主界面網站后臺管理界面的設計，雖然網站后臺不要呈現(xiàn)給用戶，但是也不能馬虎，一個布局合理、美觀大氣的后臺管理界面亦可以使管理員感到心身愉悅，對提高管理員的工作效果也會起到很大的作用。網站后臺管理員登錄界面的設計如圖4-42所示。圖4-42 管理員登錄界面后臺管理平臺主界面的設計如圖4-43所示。圖4-43 管后臺管理平臺主界面歌曲上傳界面的設計如圖4-44所示。圖4-44 歌曲上傳界面4.5 數據庫詳細設計4.5.1 數據庫概念結構設計在E-R圖中，用矩形表示實體，菱形表示聯(lián)系，橢圓表示屬性。本在線音樂網站的系統(tǒng)總體E-R圖，如圖4-45所示。圖4-45 系統(tǒng)總體E-R圖系統(tǒng)各個實體屬性圖如下