基于ASP.NET 的在線音樂網站設計

李志偉

（蘇州高等職業技術學校 江蘇 蘇州 215000）

0 引言

網絡虛擬類型的音樂網站，使用軟件程序批量采集其他站點的歌曲，提供了在線播放功能，此模式較獨立服務器類型的網站，在管理和維護上具有省時省事、減少開支的優點。 2016 年，曾韡［1］研究了一種在線音樂試聽交流網站的設計與實現。 強調了網絡的快速、高效和便捷特性，該網絡的音樂網站更能讓大眾所接受。 2022 年，吳波等［2］設計并實現了基于虛擬用戶環境（virtual?user environment，Vue）的音樂網站。 該網站以Vue 為前端框架，利用數據庫連接（Java database connectivity，JDBC）關系型數據庫管理系統（my structured query language，MySQL）來實現，滿足了用戶在線享受音樂的需求。 本文基于ASP.NET 技術，采用瀏覽器／服務器（browser／server，B／S）架構的思想，設計研究一種免費、易用的音樂分享網站。

1 關鍵技術

ASP.NET 又稱ASP ＋，它是一個開源、跨平臺、高性能、輕量級的Web 應用構建框架。 通過超文本標記語言（hypertext markup language， HTML ）、 層疊樣式表（cascading style sheets，CSS）、JavaScript（網頁腳本語言）以及服務器腳本來構建網頁和網站［3］。 ASP.NET 允許網頁的標記內容與后臺代碼獨立（或分離）開來，提高了程序的可讀性和可維性，使得編程更容易。 網站設計采用了基于B／S 的三層架構，此開發模型由上層的用戶界面（user interface，UI）表現層和中層的業務邏輯層（business logic layer，BLL）以及下層的數據訪問層（data access layer，DAL）組成。 工作時的邏輯業務由服務器來完成，瀏覽器結合腳本完成前端功能，較客戶／服務器模式（client／server，C／S）具有操作簡單、運行穩定、維護容易等特性。邏輯業務和數據業務獨立運行的特點，更有利于后期的維護和管理［4］。 用HTML 語言編寫的文件由瀏覽器解釋執行，在HTML 的頁面上可以嵌套腳本語言編寫程序段，如JavaScript。 而CSS 是層疊樣式表，定義了如何顯示HTML元素， 它通常儲存在樣式表中。 網頁腳本語言（JavaScript，JS）是嵌入在HTML 中的腳本語言，用來向HTML 頁面添加交互行為，由瀏覽器解釋執行代碼，具有不進行預編譯的特點。 開發選擇Microsoft SQL Server 作為數據庫管理系統，實現對數據信息的增、刪、改、查等操作。 除此之外，音樂分享網站的設計使用Visual Studio 2019 作為開發工具，C＃語言編程。 具有實現簡單、運行快捷、運行環境要求低，在大多數的瀏覽器也都可以直接運行等優勢。

2 功能需求與數據庫設計

音樂網站的主界面是用戶登錄網站后直接面對的主界面。 在此頁面上可以看到歌曲的分類顯示和熱度排行。用戶可以通過主動搜索、排行榜、收藏等方式選擇自己喜歡的歌曲播放。 點擊相應的歌曲鏈接，可跳轉至播放該歌曲的頁面，支持單曲播放、歌曲列表和歌詞與歌曲同步的效果。 歌曲跟隨著音樂的發展而不斷更新，在頁面管理功能中，可以通過添加功能將新的歌曲收藏起來。 同時，刪除和分類也是需要考慮的問題。 設計時賦予管理員添加、刪除和修改的權限。 除此之外，也需要考慮對用戶的注冊登錄功能、分享功能、搜索功能、個人主頁等功能的需求設計。

數據庫設計是網站開發中非常重要的環節。 表的數量不能太多，邏輯層級盡量簡單明了。 在線音樂系統的核心是播放歌曲，因此，歌曲信息的數據庫表必不可少。 表中存放有歌手名、歌曲名、存放位置等信息。 系統中包含的實體有歌曲、用戶和管理員。 用戶信息表user＿table，記錄了用戶的信息。 如表1 所示。

表1 用戶信息表user＿table

歌曲表用來存放本網站提供的所有音樂的相關信息，如表2 所示。

表2 歌曲表musicInfo＿table

管理員表用來存放本后臺管理的登錄信息，如表3所示。

表3 管理員表Admin＿table

3 設計實現

按結構化程序設計的思想，在完成需求分析、系統分析和設計等環節后可以進入實現階段。 步驟大致分為：前期準備，網站設計平臺的安裝、搭建與調試，程序的編寫與調試，數據信息系統的調試，數據庫與文件的建立，網站系統轉換，運行、驗收與維護。 為讓用戶有更舒適的體驗，設計時，把頁面上無法全部實現功能信息連接到它的下一級或下下一級頁面。 在二級頁面上提供上一頁、下一頁等導航按鈕。 設計的欄目有個人信息、登錄注冊、歌曲試聽、歌手推薦、搜索等欄目，主頁上有欄目的導航鏈接。 為了增加美觀可以添加logo 圖片，在導航條上分別提供各自的文字鏈接，下面是主頁的內容，版面設計選擇典型模式，最右邊版面設計為登錄入口，推薦歌手等信息。

（1）登錄注冊頁面實現：設計登錄注冊頁面是為了讓用戶使用本地數據的存儲功能。 輸入網址地址如http：／ ／10.108.123.56／后（該網站為系統內容測試地址），進入在線音樂網站注冊登錄界面。 初始注冊需要使用手機號作為用戶名，通過驗證短信的驗證碼進行認證。 用戶填寫完注冊所需的個人信息后，點擊保存按鈕完成注冊，隨后，用戶可對網名進行修改、添加備注。 在登錄窗口，用戶輸入用戶名和密碼后，信息傳送至數據庫中查詢是否存在該用戶，如果存在，且對比用戶名、密碼均正確，返回身份驗證成功，跳轉至登錄成功的頁面。 在登錄過程中，程序為用戶分配一個session，session 存儲著驗證身份的信息。 值得注意的是，手機號、郵箱、密碼、用戶名等信息的判斷可以通過正則表達式來判斷是否符合要求。 可通過具體代碼來判定。

（2）界面首頁設計實現：主界面顯示了幾大板塊的內容，如按歌手名、時間維度、排行情況等選擇性分類的音樂分類導航；按歌手專輯進行的專輯導航欄；按歌名、時間種類等綜合呈現的歌曲列表導航；主動搜索欄、熱歌、新發布等推薦導航，歌曲排名導航。 當用戶點歌的時候會跳到歌單頁面，同時在底部會播放音樂；當點擊歌手時，會跳轉到歌手頁面，顯示歌手信息。 如代碼musicName，navMsg：［］，loginMsg：［］，menuList：［］分別對應著音樂名稱、左側導航欄、右側導航欄和用戶下拉菜單項［5］。

（3）在線聽音樂設計實現：點擊歌曲名稱即可實現在線音樂播放，可將Windows 自帶的播放器內嵌到網頁上面實現，用戶點擊歌曲會發送該歌曲的播放請求，此時成功獲得歌曲的路徑后加入播放器，便可聽到聲音，再次點擊會暫定播放。 切換播放狀態的圖標可通過isPlay（val）方法來實現，播放時間的開始和結束可通過curTime（）來控制，自動播放下一首歌曲可通過autoNext（ ） 來完成。togglePaly（）控制著音樂的播放和暫停。 在程序編寫中，根據百分比推算出對應的播放時間，如代碼this.changeTime（newPercent），在播放的過程中，也支持拖拽操作，mousedown（ ）、mouseup（ ）和mousemove（ ）分別控制著拖拽的開始、結束和拖拽中。 方法prev（）、next（）和topaly（rul）分別實現上一首歌曲、下一首歌曲和當前選中播放的歌曲。 而程序中params. append（‘type’，0）中的“0”代表著歌曲，此參數修改為“1”，則表示歌單。 針對前面要對歌曲進行收藏，則通過代碼this. notify（‘收藏成功’.‘success’）來實現［6］。 在線聽音樂（為方便查找本音樂網站，起名為“圖圖音樂網”），如圖1 所示。

圖1 在線聽音樂

（4）搜索功能設計：搜索部分通過歌手和歌曲名稱搜索，歌手和歌曲的數據來源于數據庫，如果在搜索中不能找到相應歌手或者相應歌曲，會彈出此歌手或者歌曲不存在的警告。 當輸入歌曲“少年”的時候會顯示歌曲的詳細信息：藝人和專輯。 在導航欄的搜索框里輸入歌手的名字，會顯示數據庫中所有關于歌手的歌單，例如搜索查詢歌手“劉德華”，會顯示他的所有歌曲，如果沒有，則會判斷彈出警告“沒有此歌手”。 在代碼實現過程中，搜索歌曲成功則通過return｛albumDatas：［］｝，this. getsearchList（）來得到歌曲。 如果返回失敗則通過this.notify（暫無該歌曲內容、warning）。

（5）后臺管理模塊設計：管理員可對網站進行綜合管理。 首先在主頁面后臺管理首頁，登錄判定是否為管理員，驗證身份后，可通過本地瀏覽功能把音樂上傳至網站上；其次對歌曲的參數進行修改，刪除更換指定音樂。 數據庫的增刪改查部分核心代碼如下。

SqlConnection con ＝ new SqlConnection （ ＂ server ＝DESKTOP － 9FCSCD4； database ＝db ＿ music； Trusted ＿Connection ＝SSPI；＂）； ／ ／創建SqlConnection 對象

SqlConnection con ＝createCon（）； ／ ／創建數據庫連接

con.Open（）； ／ ／打開數據庫連接

SqlCommand com ＝new SqlCommand（sql， con）；

／ ／創建SqlCommand 對象

int i ＝ com. ExecuteNonQuery（）； ／ ／獲取ExecuteNonQuery 方法返回的值

SqlDataReader sdr ＝ com. ExecuteReader（）；

／ ／獲取ExecuteReader 方法返回的對象

string str ＝sdr［0］.ToString（）； ／ ／獲取查詢的指定列值

con.Close（）； ／ ／關閉數據庫連接

（6）測試模塊設計：系統測試是保障設計的幾大功能正常使用，以及各模塊之間的邏輯業務合理規范。 測試用例既包含“合理的條件”又包含“不合理的條件”。 在遵循測試原則前提下，使用黑盒測試技術和白盒測試技術等技術手段進行測試驗收。 測試的環境包含瀏覽器、操作系統、內存等情況。 黑盒測試的方法可用于前端測試，如用戶的注冊、登錄、網站搜索、播放下載歌曲、收藏歌曲等功能性業務。 需要給出測試條件，預測輸出結果與實際輸出結果的對比情況，從而判定測試結果是否滿足目標需求。除此之外，安全性測試也是必不可少的。 主要的測試用例如表4 所示。

表4 在線音樂網站測試用例

4 結語

綜上所述，本文設計的基于ASP. NET 的在線音樂分享網站，使用C＃語言開發，結合ASP.NET 技術、B／S 三層架構及SQL Server 數據等技術，實現了音樂網站的界面設計、歌手和歌詞設計、排行榜和個人主頁的設計。 設計效果基本滿足了音樂網站的目標需求，對關鍵技術的研究和使用具有一定意義。