【正文】 ic varchar2 100 圖片名 否 info varchar2 200 簡(jiǎn)介 否 fav_num number default 喜愛(ài)數(shù)量 否 status number default 狀態(tài) 否 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 17 表名： song， 在該表中保存了 音樂(lè) 的基本 信息，數(shù)據(jù)表結(jié)構(gòu)如表 所示 表 音樂(lè) 表 字段名稱 數(shù)據(jù)類型 字段長(zhǎng)度 備注 是否為空 song_id number default 音樂(lè) 編號(hào) 否 song_name varchar2 40 音樂(lè)名 否 album_id number default 所屬專輯 編號(hào) 否 vol_id number default 所屬專題 編號(hào) 否 artist varchar2 40 藝術(shù)家 否 filePath varchar2 50 文件地址 否 info varchar2 200 介紹 否 fav_num number default 喜愛(ài)數(shù)量 否 status number default 狀態(tài) 否 表名： mment， 在該表中保存了 評(píng)論 的基本 信息，數(shù)據(jù)表結(jié)構(gòu)如表 所示 表 評(píng)論 表 字段名稱 數(shù)據(jù)類型 字段長(zhǎng)度 備注 是否為空 ment_id number default 評(píng)論 編號(hào) 否 user_id number default 用戶 編號(hào) 否 m varchar2 400 圖片名 否 m_time date default 評(píng)論時(shí)間 否 m_id number default 被評(píng)論的具體 編號(hào) 否 type_id number default 類型 編號(hào) 否 status number default 狀態(tài) 否 字段名稱 數(shù)據(jù)類型 字段長(zhǎng)度 備注 是否為空 fav_num number default 喜愛(ài)數(shù)量 否 status number default 狀態(tài) 否 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 18 表名： fav_list ， 在該表中保存了 收藏 的基本 信息，數(shù)據(jù)表結(jié)構(gòu)如表 所示 表 收藏 表 字段名稱 數(shù)據(jù)類型 字段長(zhǎng)度 備注 是否為空 fav_list_id number default 收藏 編號(hào) 否 user_id number default 用戶 編號(hào) 否 type_id number default 類型 編號(hào) 否 selected_id number default 選擇的 編號(hào) 否 status number default 狀態(tài) 否 上傳音樂(lè)列表 ,在該表中 保存了 用戶 上傳 的 音樂(lè)的基本 信息，數(shù)據(jù)表結(jié)構(gòu)如表 所示 表 用戶 上傳音樂(lè)表 字段名稱 數(shù)據(jù)類型 字段長(zhǎng)度 備注 是否為空 user_song_id number default 音樂(lè) 編號(hào) 否 user_id number default 用戶 編號(hào) 否 song_name varchar2 40 音樂(lè)名稱 否 song_url varchar2 40 音樂(lè) 地址 否 click_num number default 點(diǎn)擊 數(shù)量 否 fav_num number default 收藏 數(shù)量 否 status number default 狀態(tài) 否 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 19 4 音樂(lè)網(wǎng)站 實(shí)現(xiàn) 本章節(jié)主要介紹 本 音樂(lè)網(wǎng)站 的 具體代碼實(shí)現(xiàn)，并 粘貼 部分 關(guān)鍵代碼。 用戶注冊(cè) /登錄模塊 用戶注冊(cè) /登錄 使用了 ajax 異步刷新的方式， 用戶 輸入用戶名和密碼 后 ， 點(diǎn)擊 注冊(cè)或登錄按鈕， 會(huì) 向 servlet 提交數(shù)據(jù)，同時(shí)返回相應(yīng)的數(shù)據(jù)，根據(jù)返回的數(shù)據(jù)， 顯示 在頁(yè)面上相應(yīng)的 提示 文字。amp。amp。 相關(guān) 類圖如圖 用戶 上傳音樂(lè)類圖所示。 if(文件名 ==已有 文件名 amp。用戶 ID==此文件 用戶 IDamp。狀態(tài) ==正常 ){ 提示已經(jīng) 上傳過(guò) }else if(格式 不正確 ){ 提示 文件格式不正確 } 驗(yàn)證 文件 格式 if(文件 格式正確 ){ 路徑存入 數(shù)據(jù)庫(kù) 提示 添加成功 }else if(格式 不正確 ){ 提示 文件格式不正確 } 音樂(lè) 播放模塊 音樂(lè) 播放器采用 HTML5 的 audio 標(biāo)簽 ， CSS3 初始化播放器 界面，采用 Json 傳遞歌曲信息，實(shí)現(xiàn)播放列表。 Jsp 頁(yè)面中有一 msg，為 EL 表達(dá)式，用來(lái)取提示信息。管理員 在進(jìn)行 專題 增加 時(shí) ，會(huì)對(duì)增加的數(shù)據(jù)進(jìn)行驗(yàn)證，首先前臺(tái)驗(yàn)證非空，后臺(tái)繼續(xù)驗(yàn)證是否已存在 相同 的專題， 修改 或刪除時(shí)，前臺(tái)會(huì)進(jìn)行判斷 ，此專題是否 已經(jīng) 刪除，若 已刪除 ，則提示已刪除，若為刪除，則提示是否刪除，或進(jìn)入詳細(xì) 頁(yè) 面。 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 22 圖 專題 類圖 偽代碼 ： 操作 前驗(yàn)證： if(已登錄 ){ 可 進(jìn)行操作 }else if(未登錄 ){ 提示 未登錄 跳轉(zhuǎn)至登錄 界面 } 操作 驗(yàn)證： 增加 ： 管理員 輸入相應(yīng)信息 前臺(tái) 非空驗(yàn)證 后臺(tái) 驗(yàn)證 if(驗(yàn)證 通過(guò) ){ 提示 添加成功 }else{ 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 23 提示 添加失敗 } 修改 ： 點(diǎn)擊 修改按鈕 前臺(tái)驗(yàn)證 狀態(tài) if(狀態(tài) ==已刪除 ){ 提示 已刪除 }else if(狀態(tài) ==正常 ){ 跳轉(zhuǎn) 到詳細(xì)頁(yè)面 } 修改 完成點(diǎn)擊提交按鈕 前臺(tái) 驗(yàn)證非空 提示 是否修改 if(是 ){ 修改 數(shù)據(jù)庫(kù)信息 提示 修改成功 }else{ 無(wú) 任何操作 } 刪除 ： 點(diǎn)擊 刪除按鈕 前臺(tái) 驗(yàn)證狀態(tài) if(狀態(tài) ==已刪除 ){ 提示 已刪除 }else if(狀態(tài) ==正常 ){ 提示是否 刪除 If(是 ){ 修改 數(shù)據(jù)庫(kù) ， 狀態(tài)修改為 刪除 提示 刪除成功 }else{ 無(wú) 任何操作 } } 添加 評(píng)論模塊 用戶 進(jìn)入本網(wǎng)站時(shí)，身份默認(rèn)為游客，可以 對(duì) 專題，專輯，單曲 添加 自己的評(píng)論，評(píng)論一旦添加成，則不可刪除，只能由管 理員刪除。頁(yè)面 在 加載時(shí)便會(huì)判斷 session 中的用戶信息，來(lái)決定 是否 顯示刪除按鈕。 相關(guān) 類圖如圖 評(píng)論 類圖所示。amp。 用例列表 表 用例 列表 編號(hào) 用例編號(hào) 用例名稱 執(zhí)行者 備注 1 US0 用戶登錄 用戶 2 US1 用戶注冊(cè) 用戶 3 US2 用戶 上傳音樂(lè) 用戶 4 US3 管理員登錄 管理員 5 US4 管理員操作前驗(yàn)證 管理員 6 US5 點(diǎn)擊播放 用戶 用戶登錄 表 用戶登錄測(cè)試用例表 用例編號(hào) US0 用例名稱 用戶登錄 執(zhí)行者 用戶 用例描述 用戶進(jìn)行 登錄，對(duì)運(yùn)行結(jié)果進(jìn)行闡述 測(cè)試目的 測(cè)試系統(tǒng)的安全性，確保用戶能夠正確 登錄 前置條件 用戶點(diǎn)擊注冊(cè) /登錄 按鈕 后置條件 1. 登錄成功，進(jìn)入首頁(yè) 2. 登錄驗(yàn)證不通過(guò)，提示錯(cuò)誤信息 基本事件流 1. 用戶輸入用戶名、密碼 2. 點(diǎn)擊登錄按鈕進(jìn)行登錄 3. 登錄成功進(jìn)入首頁(yè) 其他事件流 無(wú) 異常處理 系統(tǒng)顯示一個(gè)錯(cuò)誤消息 登錄 時(shí)， 前臺(tái)進(jìn)行 非空驗(yàn)證，轉(zhuǎn)入后臺(tái)，進(jìn)行數(shù)據(jù)庫(kù) 交互 驗(yàn)證如圖 用戶登錄 圖所示： 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 26 圖 用戶登錄 圖 用戶注冊(cè) 表 用戶注冊(cè)測(cè)試用例表 用例編號(hào) US1 用例名稱 用戶注冊(cè) 執(zhí)行者 用戶 用例描述 用戶輸入 數(shù)據(jù)，驗(yàn)證 是否 可 注冊(cè) 測(cè)試目的 測(cè)試系統(tǒng) 正確性， 確保 用戶可以正確注冊(cè) 前置條件 用戶點(diǎn)擊注冊(cè) 按鈕 后置條件 1. 注冊(cè)成功，提示注冊(cè) 成功 2. 注冊(cè)失敗，提示錯(cuò)誤信息 基本事件流 1. 用戶輸入用戶名、密碼、 重復(fù)密碼 和郵箱 2. 點(diǎn)擊注冊(cè)按鈕進(jìn)行注冊(cè) 3. 注冊(cè)成功提示注冊(cè)成功 其他事件流 無(wú) 異常處理 系統(tǒng)顯示一個(gè)錯(cuò)誤消息 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 27 點(diǎn)擊注冊(cè) 按鈕，會(huì) 跳轉(zhuǎn) 到注冊(cè)頁(yè)面，用戶輸入用戶名 、 密碼 、 重復(fù)密碼 和 郵箱， 如 已有此用戶則提示 用戶名不可用。 圖 未登錄錯(cuò)誤 圖 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 30 點(diǎn)擊播放 表 點(diǎn)擊播放測(cè)試用例表 用例編號(hào) US5 用例名稱 點(diǎn)擊 播放 執(zhí)行 者 用戶 用例描述 用戶點(diǎn)擊音樂(lè) 播放 測(cè)試目的 測(cè)試點(diǎn)擊 可以播放音樂(lè) 前置條件 數(shù)據(jù)庫(kù)有 數(shù)據(jù) 后置條件 1. 點(diǎn)擊播放 ，播放 基本事件流 1. 頁(yè)面顯示 音樂(lè)數(shù)據(jù)，點(diǎn)擊音樂(lè) 2. 音樂(lè)播放 其他事件流 1. 未找到 音樂(lè)文件 2. 無(wú)法 播放 異常處理 系統(tǒng)顯示一個(gè)錯(cuò)誤消息 用戶點(diǎn)擊 音樂(lè)播放如圖 播放 音樂(lè)界面圖所示 ： 圖 播放音樂(lè) 界面圖 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 31 6 結(jié)束語(yǔ) 經(jīng)過(guò) 4 個(gè) 多月漫長(zhǎng) 的 時(shí)間，終于完 成 了基于 HTML5 的 音樂(lè)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)，回想當(dāng)初 自己 從有想法，有感覺(jué)到自己一步步實(shí)現(xiàn)，做出成品 的 網(wǎng)站，這種成就感真的讓我非常激動(dòng)。通過(guò)此次 畢業(yè)設(shè)計(jì)的實(shí)際操作，讓我更加了解一個(gè)網(wǎng)站的設(shè)計(jì)與編碼是怎樣實(shí)現(xiàn)的，怎樣實(shí)現(xiàn)前臺(tái)與后臺(tái)的交互，數(shù)據(jù)是怎樣傳遞的，異步刷新 是 怎樣的一種東西， HTML5 到底 有多強(qiáng)大，只有親身體驗(yàn)過(guò)，才能真正明白其中的道理，和用法。用戶訪問(wèn)量 過(guò)多， 一直是網(wǎng)站 的大問(wèn)題，同時(shí)接納的人數(shù)太多，必將導(dǎo)致網(wǎng)站的癱瘓，這已是屢見(jiàn)不鮮的問(wèn)題了。本人認(rèn)為 用戶交互是否好是一個(gè)音樂(lè)網(wǎng)站的 重中之重 ，用戶進(jìn)入網(wǎng)站首先感受到 的 是放松 ， 喜歡界面的設(shè)計(jì)才能繼續(xù)訪問(wèn)。 還有用戶定位的問(wèn)題， 這個(gè)網(wǎng)站 到底是給誰(shuí) 用 的，在最初設(shè)計(jì)時(shí)就應(yīng)該明確。 最后 ，本音樂(lè)網(wǎng)站的不足之處： 沒(méi)能 實(shí)現(xiàn)歌詞同步顯示， 用戶 的交互體驗(yàn)還有待提高。 經(jīng)過(guò) 這四年的大學(xué)時(shí)光， 讓我 成長(zhǎng)了太多太多，首先要感謝 教授 給我 知識(shí) 的 所有 老師， 給予 我?guī)椭?，支持的同學(xué)們。 其次要 感謝 張玉 老師對(duì)于我前期項(xiàng)目題目的指導(dǎo)，還有于林平老師，在薛云霄 老師病了后能夠指導(dǎo)我完成最后的設(shè)計(jì)，于林平老師能夠在 最后 的階段沒(méi)那么多的壓力， 真心感謝三 位老師 ， 付出了這么 多 。 謝謝 大家。 我 會(huì) 牢牢記住老師對(duì)我的關(guān)懷，向前行進(jìn) ， 永不言敗。 煙臺(tái)大學(xué)畢業(yè)論文（設(shè)計(jì)） 34 附錄 創(chuàng)建播放列表 JS var playList = []。 for(var i=0。i++){ var artist = $(items[i]).find(39。).text()。.musicName39。 var musicAlbum = $(items[i]).find(39。).text()。.musicURL39。 var avatarURL = $(items[i]).find(39。).attr(src)。 (obj)。 增加 音樂(lè) servlet private Song doupload(HttpServletRequest request){ //獲取提交的數(shù)據(jù)，封裝到 song中。 try{ DiskFileItemFactory factory = new DiskFileItemFactory()。 ListFileItem list = (request)。 String value = (UTF8)。 } if((artist)){ (value)。 } (((albumId)))。 String savefilename = makeFileName(filename)。 InputStream in = ()。 int len = 0。 while((len=(buffer))0){ (buffer,0,len)。 ()。 (savefilename)。 }catch (Exception e) { throw new RuntimeException(e)。 return ().toString() + e