—page3—1引言背景隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，在線娛樂方式層出不窮，得到了廣大網(wǎng)民的喜愛。按照CNNIC于2018年6月發(fā)布的《中國互聯(lián)網(wǎng)絡(luò)發(fā)展狀況統(tǒng)計報告》，在線音樂的用戶規(guī)模已達5.55億，比去年底增長673萬，占全體網(wǎng)民人數(shù)的69.2%。這表明在線音樂是滿足廣大網(wǎng)民在線娛樂需求的主要方式之一。如今，人們對音樂的需求不再是簡單地“聽”，通過“唱”特別是在KTV“唱”越來越成為人們重要的娛樂方式之一。1.2研究意義本系統(tǒng)從人們對K歌的需求出發(fā)，通過卡拉OK點歌系統(tǒng)，把卡拉OK與互聯(lián)結(jié)合實現(xiàn)在線K歌，使那些距離KTV較遠的人不用考慮出門時的天氣、交通狀況等因素，使那些空閑時間較少而又想通過唱歌來娛樂放松的人能足不出戶就享受唱歌，使那些唱得不太好的人只要通過聯(lián)網(wǎng)就能練習K歌從而提高唱歌水平，極大地提高了人們K歌的便利性。1.3研究目標針對卡拉OK歌唱廳的現(xiàn)實需要，設(shè)計并實現(xiàn)一個基于Web的點歌系統(tǒng)?；谲浖こ趟枷?要實現(xiàn)以下目標：采用人機交互方式，實現(xiàn)按照歌手、歌名、數(shù)字、拼音、類別等方式點歌。1.4可行性分析1、技術(shù)可行性：本系統(tǒng)的設(shè)計與實現(xiàn)，所需要的相應(yīng)技術(shù)大多學(xué)習過，涉及的相關(guān)知識也并沒有很深入，碰到的問題大多數(shù)通過查閱資料、詢問同學(xué)和請教老師就能解決。因此，在技術(shù)實現(xiàn)上基本沒有問題。2、市場可行性：隨著科技不斷發(fā)展進步，人們生活水平不斷提高，休閑娛樂方式也變得越來越多樣化。唱歌越來越成為人們娛樂放松的一種休閑方式，而傳統(tǒng)卡拉OK要求必須去專門的KTV才能享受這種娛樂，缺乏便捷性、靈活性。而本文的卡拉OK點歌系統(tǒng)能大大提升人們想唱就唱的便捷性，讓人們足不出戶就能體驗KTV。3、操作可行性：隨著IT行業(yè)的炙手可熱，計算機應(yīng)用也被充分接受，越來越多人能熟悉如何操作電腦。對客戶來說，網(wǎng)站界面簡潔大方，操作簡單易于上手；對管理者來說，網(wǎng)站能輕松完成對數(shù)據(jù)的增刪改查，穩(wěn)定性強。2開發(fā)環(huán)境2.1開發(fā)工具介紹2.1.1VisualStudio2012VisualStudio（簡稱VS）是微軟推出的集成開發(fā)環(huán)境，可用來編輯、調(diào)試并生成代碼，然后發(fā)布應(yīng)用。對于Web開發(fā)，VS2012全面支持HTML5和CSS3，提供了全新模板、設(shè)計工具、測試調(diào)試工具以及在ASP.NET中的優(yōu)勢。特別是ASP.NET網(wǎng)站管理工具，能讓開發(fā)者快速地對用戶、角色、訪問規(guī)則進行管理。2.1.2EnterpriseArchitectEnterpriseArchitect（簡稱EA）是一款計算機輔助軟件工程CASE工具，能高效地用于管理項目、業(yè)務(wù)需求分析，提供了仿真、數(shù)據(jù)庫建模、業(yè)務(wù)流程建模、自動化、調(diào)試和可視化等功能，具有可擴展的建模環(huán)境、可使用性好、上手很容易，并且可以快速掌握UML等優(yōu)點。它的運行速度非常快、具有可擴展性、能處理非常巨大的模型并且支持多個并行用戶等優(yōu)點。2.2相關(guān)理論介紹2.2.1三層架構(gòu)三層架構(gòu)是指將應(yīng)用開發(fā)分為展示層（UI）、業(yè)務(wù)邏輯層（BLL）、數(shù)據(jù)訪問層（DAL）。UI層是與用戶交互的界面，用于接受用戶輸入的數(shù)據(jù)和顯示用戶需要的數(shù)據(jù)。BLL層是UI層和DAL層的中介，用于實現(xiàn)業(yè)務(wù)邏輯。DAL層用于實現(xiàn)對數(shù)據(jù)庫的操作，為UI層和BLL層提供服務(wù)。采用三層架構(gòu)可以實現(xiàn)任何一層的變動都不影響到其他層，能降低各層之間的依賴性，更容易適應(yīng)需求的變化。2.2.2面向?qū)ο笤O(shè)計方法面向?qū)ο蟪绦蛟O(shè)計是程序設(shè)計的新思維，它既吸收了結(jié)構(gòu)化程序設(shè)計的一切優(yōu)點，又考慮了現(xiàn)實世界與面向?qū)ο罂臻g的映射關(guān)系，它將數(shù)據(jù)以及對數(shù)據(jù)的操作放在一起，作為一個相互依存、不可分割的整體。面向?qū)ο蟮幕靖拍睿夯?、對象、消息、方法?；愂菍ο蟮某橄蠹懊枋?，是具有相似屬性和相同操作的多個對象的相似特性的描述；對象是組成世界的一個獨立單元，它有自己的靜態(tài)屬性和動態(tài)行為或方法；消息是面向?qū)ο笙到y(tǒng)中的對象向另一個對象發(fā)出的實現(xiàn)某個功能的請求，對象實現(xiàn)該請求則被稱為消息響應(yīng)。對象之間只能通過消息來聯(lián)系；當對象接收到發(fā)發(fā)往自己的消息時，就調(diào)用有關(guān)的函數(shù)，執(zhí)行對應(yīng)的操作。方法就是對象所能執(zhí)行的操作。3需求分析3.1功能性需求分析3.1.1角色定義1、用戶用戶是擁有客戶賬號并且能登陸進卡拉OK點歌系統(tǒng)的人。這個角色主要參與客戶端的搜索資源庫中的歌曲、進行歌曲點播等功能。2、管理員管理者是指在系統(tǒng)中通過管理端登錄界面登陸的管理人員。這個角色主要參與管理端的歌曲管理、歌星管理等功能。3、數(shù)據(jù)庫數(shù)據(jù)庫是一個與系統(tǒng)發(fā)生交互的外部系統(tǒng)，負責響應(yīng)系統(tǒng)使用者對數(shù)據(jù)的查找、添加、更改和刪除等請求。3.1.2系統(tǒng)用例圖本系統(tǒng)主要由兩部分組成：一個是客戶界面子系統(tǒng)，一個是管理界面子系統(tǒng)?？蛻舳俗酉到y(tǒng)的功能主要是指客戶通過登錄卡拉OK點歌系統(tǒng)，再進行操作的功能，即點歌功能。管理端子系統(tǒng)的功能主要是指管理者通過登錄卡拉OK點歌網(wǎng)站后臺對客戶、歌曲等進行操作的功能，即管理功能。系統(tǒng)的主要用例如下圖所示:圖3-1主系統(tǒng)用例圖3.1.3用戶端界面客戶登錄點歌系統(tǒng)之后，通過按歌名、歌手搜索等方式搜索歌曲，選擇點播歌曲完成歌曲點播?？蛻艋顒訄D如下圖所示:圖3-2客戶系統(tǒng)的用例圖客戶系統(tǒng)的這些用例描述如下：登錄：客戶在點播歌曲之前必須登錄到網(wǎng)站，如果沒有登錄將不能使用網(wǎng)站的歌曲點播功能。搜索歌曲：客戶登錄之后，可以按歌曲的名稱、首字母、類型、字數(shù)、歌手名等方式搜索歌曲。點播歌曲：客戶搜索到歌曲之后，可以通過單擊“點播”按鈕實現(xiàn)點播。注銷：客戶可以退出當前登錄狀態(tài)。2、搜索歌曲客戶通過點歌系統(tǒng)搜索到心儀的歌曲。用例描述：搜索歌曲；執(zhí)行者：客戶；前置條件：客戶已經(jīng)登錄；后置條件：搜索到滿意的歌曲后可以進行歌曲點播；基本路徑：a）登錄后，點擊“在線點歌”；b）通過按歌手名字、歌手所屬地區(qū)，歌曲類型、曲稱、首字母、歌名字數(shù)等方式搜索歌曲。圖3-3搜索歌曲用例圖3、已點歌曲客戶可以通過“已點”界面來查看已經(jīng)點播的歌曲。用例描述：客戶管理歌曲；執(zhí)行者：客戶；前置條件：用戶已經(jīng)點播歌曲；后置條件：用戶可以查看已點歌曲的名稱、刪除已點歌曲等；基本路徑：客戶對搜索到的歌曲進行點播；在“已點”界面查看已點歌曲，可以查看或刪除已點歌曲。圖3-4已點歌曲用例圖3.1.4管理端界面管理員登錄系統(tǒng)后，可以對系統(tǒng)的歌星、歌曲信息進行管理。管理員活動圖如下圖所示：圖3-5管理端用例圖管理端的這些用例描述如下：登錄：管理員只有登錄之后才能執(zhí)行其管理功能歌手信息：管理員可以對歌手信息進行增添、刪除、修正、查找等操作；歌曲信息：管理員可以對歌曲信息進行增添、刪除、修正、查找等操作；注銷：管理員可以退出當前登錄狀態(tài)。。1、歌手管理管理員可以對歌手進行管理。用例描述：歌手信息管理；執(zhí)行者：管理員；前置條件：管理員已登錄；后置條件：無基本路徑：進入歌手管理的界面；選擇“添加”，按提示輸入歌手信息，可以添加歌手信息；選擇“更新”，可以查看、編輯歌手的姓名、姓名拼音、所屬地區(qū)、歌曲語種等信息。選擇“刪除”，可以刪除列表里顯示的歌手。圖3-6歌手管理用例圖2、歌曲管理管理員能夠管理系統(tǒng)中現(xiàn)有的歌曲。用例描述：管理歌曲數(shù)據(jù)；執(zhí)行者：管理員；前置條件：管理員已登錄；后置條件：無基本路徑：進入歌曲管理的界面；選擇“添加”，可以按提示輸入信息，提交后可以添加歌曲信息；選擇“更新”，可以查看數(shù)據(jù)庫中已有的歌曲信息，修改歌曲的名稱、拼音、語種、風格、存儲路徑等信息。選擇“刪除”，可以刪除列表里顯示的歌曲。圖3-7歌曲管理用例圖3.2非功能性需求分析非功能性需求是指客戶活動必須達到的一些要求，其中有系統(tǒng)可靠性、可維護性、易用性、安全性等要求。3.2.1易用性需求易用性需求指系統(tǒng)使用者在操作過程中容易理解、容易操作等方面的需求。本系統(tǒng)的易用性需求要求界面及界面風格一致，輸入信息后會提示輸入數(shù)據(jù)是否規(guī)范或明顯提示輸入的數(shù)據(jù)無效，能提示兩次輸入密碼是否相同，修改信息之后必須要有“修改成功”等提醒語句。3.2.2安全性需求在安全性上，網(wǎng)站一定要保護好客戶的賬號信息和個人信息。本系統(tǒng)要求用戶只有在登錄后，才能訪問在其權(quán)限內(nèi)的數(shù)據(jù)和進行相應(yīng)權(quán)限內(nèi)的操作，同時網(wǎng)站設(shè)置了身份驗證登錄超時時間，超過這個時間就會強制下線，必須重新登陸才能繼續(xù)訪問網(wǎng)站，保證了賬號的安全性，降低了被他人進行盜號和獲取個人信息風險。4系統(tǒng)設(shè)計4.1系統(tǒng)體系結(jié)構(gòu)設(shè)計通過問卷調(diào)查，對點歌系統(tǒng)需求進行研究，將本系統(tǒng)的功能定義如下：圖4-1系統(tǒng)功能結(jié)構(gòu)圖系統(tǒng)具體功能描述如下：客戶模塊的主要功能：按歌手點歌：用戶可以按歌手來點歌；按歌名點歌：用戶可以按歌曲名稱來搜索點歌；（3）按歌名拼音、首字母點歌：用戶能夠通過歌名的全拼、首字母進行點歌；按語種點歌：用戶能夠根據(jù)語種來點歌；按字數(shù)點歌：用戶按照歌名字數(shù)來點歌；（6）切歌：用戶能夠切換到下一首歌。管理員模塊的主要功能：（7）歌曲管理：管理員能夠增添、更新、刪除歌曲信息；（8）歌手管理：管理員能夠?qū)Ω枋值男畔⑦M行增添、更新、刪除。4.2系統(tǒng)數(shù)據(jù)庫設(shè)計4.2.1實體關(guān)系圖圖4-2系統(tǒng)E-R圖4.2.2數(shù)據(jù)庫設(shè)計通過進行需求分析以及系統(tǒng)功能的模塊設(shè)計，對數(shù)據(jù)庫中的各個數(shù)據(jù)表的詳細設(shè)計如下：歌曲表歌曲表是用來記錄歌曲基本信息的，包含歌曲ID（主鍵）、歌名、歌手ID、歌名拼音、首字母、字數(shù)、語種ID、類別ID、文件路徑等字段。其中，歌手ID鏈接到歌手信息表，語種ID鏈接到歌曲語種分類表，類別ID鏈接到歌曲類別分類表。如下表4-1所示：表4-1歌曲信息表序號字段名數(shù)據(jù)類型約束條件允許空值備注1SonNumint主鍵否歌曲ID2SonNamevarchar(100)否歌曲名3SinNumint外鍵歌手ID4SonPininvarchar(MAX)否歌名拼音5SonAcronymvarchar(50)否首字母6NumberOfWordsint否歌名字數(shù)7LangNumint外鍵語種ID8ClassNumint外鍵類別ID9SrcPathvarchar(MAX))否歌曲路徑歌手表歌手表用來記錄歌手信息，包括歌手ID（主鍵）、歌手名字、姓名拼音與首字母、頭像路徑、身份ID、區(qū)域ID、類別ID等字段。其中，身份ID鏈接到歌手身份表，地區(qū)ID鏈接到歌手所屬地區(qū)表，類別ID鏈接到歌曲風格類別表。如下表4-2所示：表4-2歌手信息表序號字段名數(shù)據(jù)類型約束條件允許空值備注1SinNumint主鍵否歌手ID2SinNamevarchar(50)否歌手名字3SinPininvarchar(100)姓名拼音4SinFirstvarchar(50)姓名首字母5Headvarchar(100)頭像路徑6IdentityNumint外鍵身份ID7AreaNumint外鍵地區(qū)ID8ClassNumint外鍵類別ID歌手地區(qū)表歌手地區(qū)表用來記錄歌手所屬地區(qū)信息，包括地區(qū)ID（主鍵）、區(qū)域類別等字段。其中，地區(qū)一般分為大陸、港臺、歐美、日韓及其他。如下表4-3所示：表4-3歌手地區(qū)表序號字段名數(shù)據(jù)類型約束條件允許空值備注1AreaNumint主鍵否地區(qū)ID2AreaClassvarchar(50)否地區(qū)類別歌曲類型表歌曲類型表用來記錄歌曲所屬類型信息，包括類型ID（主鍵）、名稱等字段。其中，歌曲類型一般分為流行、搖滾、嘻哈、電子、民謠、民歌等。如下表4-4所示：表4-4歌曲類型表序號字段名數(shù)據(jù)類型約束條件允許空值備注1ClassNumint主鍵否類型ID2ClassNamevarchar(50)否類型名稱歌曲語種表歌曲語種表包括語種ID（主鍵）、類別等字段，具體可分為華語、英語、粵語、日語、韓語及其他語種。如下表4-5所示：表4-5語種分類表序號字段名數(shù)據(jù)類型約束條件允許空值備注1LangNumint主鍵否語種ID2LangTypevarchar(50)否語種類別歌手身份表歌手身份表包括身份ID（主鍵）、類別等字段，歌手身份可分為男歌手、女歌手、樂團或組合等。如下表4-6所示：表4-6歌手身份分類表序號字段名數(shù)據(jù)類型約束條件允許空值備注1IdentityNumint主鍵否身份ID2IdentityTypevarchar(50)否身份類別已點歌曲表已點歌曲表包括已點歌曲ID（主鍵）、客戶名、歌曲ID等字段。用戶找到歌后點播歌曲，后臺會將當前客戶名稱、歌曲的ID寫進已點歌曲表。如下表4-7所示：表4-7已點歌曲表序號字段名數(shù)據(jù)類型約束條件允許空值備注1SelectedNumint主鍵否已點ID2UserNamenvarchar(256)否客戶名3SonNumint外鍵歌曲ID5系統(tǒng)詳細實現(xiàn)過程5.1系統(tǒng)目錄結(jié)構(gòu)本系統(tǒng)目錄下有Admin,App_Code,CSS_JS,image,Songs,UserControls等文件夾，分別存放管理員頁面代碼、LinqtoSql類代碼、樣式與JS文件、系統(tǒng)圖片、系統(tǒng)歌曲文件、用戶控件。目錄下的其他ASPX文件為用戶點歌所用的頁面文件。具體見下圖：圖5-1目錄結(jié)構(gòu)圖5.2連接數(shù)據(jù)庫通過在文件web.config中增加connectionStrings來連接數(shù)據(jù)庫，引用SqlServerHelper類實現(xiàn)更加方便的數(shù)據(jù)訪問。相應(yīng)的代碼如下：<<connectionStrings><addname="KTVdb"connectionString="DataSource=.;InitialCatalog=KTVdb;PersistSecurityInfo=True;UserID=sa;Password=123456"providerName="System.Data.SqlClient"/><addname="SqlServerHelper"connectionString="DataSource=.;InitialCatalog=KTVdb;IntegratedSecurity=True"/></connectionStrings>5.3前臺點歌5.3.1前臺框架搭建客戶登錄之后進入前臺頁面，該頁面使用了<iframe>標簽把點歌頁面和播放頁面嵌套在前臺頁面中，客戶每次點擊只會更新相應(yīng)的嵌套頁面，而不會更新整個前臺界面。前臺界面還含有主頁、已點、切歌、注銷等按鈕。效果如下圖：圖5-2前臺點歌界面圖具體代碼如下：<<divstyle="float:left;width:600px;height:600px;margin-left:50px"><iframesrc="song_atinterface.aspx"style="border-style:none;height:580px;width:600px;"id="f1"runat="server"></iframe><%--點歌頁面--%></div><divstyle="width:700px;height:600px;float:right;"><iframesrc="mv2.aspx"style="border-style:none;width:674px;height:580px;"id="f2"runat="server"></iframe><%--播放頁面--%></div>5.3.2搜索歌曲客戶可以選擇按照歌名、首字母、字數(shù)、歌手姓名、歌手身份等方式搜索歌曲。1、歌手點歌登錄前臺頁面后，單擊“歌手點歌”區(qū)域進入歌手點歌界面。按歌手搜索提供了來兩種搜歌方式：一是在輸入框內(nèi)直接輸入歌手的名字，進行模糊查找；二是根據(jù)歌手身份點擊相應(yīng)按鈕來搜索。歌手點歌界面效果如下圖：圖5-3按歌手點歌界面后臺通過用戶點擊按鈕來獲取查找關(guān)鍵字，再重定向到相應(yīng)的歌手搜索結(jié)果頁面。后臺代碼如下：protectedvoidBtSearch_Click(objectsender,EventArgse){Response.Redirect("~/singer_name.aspx?SingerNameText="+TBSearch.Text);}protectedvoidButton2_Click(objectsender,EventArgse){Response.Redirect("~/singer_area.aspx?AreaNum=1&IdentityNum=1");}protectedvoidButton3_Click(objectsender,EventArgse){Response.Redirect("~/singer_area.aspx?AreaNum=1&IdentityNum=2");}//對歌手身份類別（男、女、組合）、地區(qū)（內(nèi)地、港臺、歐美、日韓、其他）、排列組合，共有15種組合如果直接搜索歌手名字，查找姓“陳”的歌手(見下圖左側(cè))點擊相應(yīng)的歌手名字，即可查看到歌手所唱的歌曲，例如點擊“陳奕迅”，效果如下圖右側(cè)：圖5-4按歌手名字搜索效果圖點擊歌手名字查詢歌曲，其后臺代碼：protectedvoidPage_Load(objectsender,EventArgse){SingerNameText=Request.QueryString["SingerNameText"];LinqDataSource1.Where="SingerName.Contains(\""+SingerNameText+"\")";}如果按歌手身份搜索，例如搜索“內(nèi)地女星”，點擊歌手名字即可查詢到該歌手的搜索歌曲，效果與上一種相似。效果如下圖：圖5-5按歌手身份搜索效果圖后臺代碼：publicpartialclasssinger_area:System.Web.UI.Page{publicinttmp1;publicinttmp2;protectedvoidPage_Load(objectsender,EventArgse){tmp1=int.Parse(Request.QueryString["areaNum"]);tmp2=int.Parse(Request.QueryString["idenNum"]);LinqDataSource1.Where="areaNum="+tmp1+"&&"+"idenNum="+tmp2;}2、歌名點歌登錄前臺頁面后，單擊“歌名點歌”區(qū)域進入歌名點歌界面?？梢栽谳斎肟蛑休斎敫杳M行查找，也可以直接點播下方推薦的歌曲。效果圖如下：圖5-6按歌名搜索界面例如，通過搜索框搜索“淘汰”，效果如下圖：圖5-7按歌名搜索效果圖后臺獲取到搜索關(guān)鍵字后，重定向到搜索結(jié)果界面，后臺代碼：protectedvoidButton1_Click(objectsender,EventArgse){Response.Redirect("song_name_result.aspx?SongName="+TextBox1.Text);}3、字母點歌登錄前臺頁面后，單擊“拼音點歌”區(qū)域進入拼音點歌界面?？梢暂斎敫杳娜椿蚴鬃帜高M行搜索，點歌界面效果如下：圖5-8按歌名首字母搜索點擊“全拼”或“首字母”按鈕時，后臺會根據(jù)獲取輸入框的關(guān)鍵字，再重定向到相應(yīng)的搜索結(jié)果頁面，后臺代碼如下：protectedprotectedvoidButton1_Click(objectsender,EventArgse){Response.Redirect("song_piny_all.aspx?pinyin="+TextBox1.Text);}protectedvoidButton2_Click(objectsender,EventArgse){Response.Redirect("song_piny_first.aspx?acronym="+TextBox1.Text);}protectedvoidButton3_Click(objectsender,EventArgse)//字母A{TextBox1.Text=TextBox1.Text+Button3.Text;}//其余的按鈕點擊事件代碼以此類推，都是把當前的text值加到textbox的值后面輸入歌曲的全拼，例如搜索“TAOTAI”，效果如下圖：圖5-9按歌名拼音搜索單擊“點播”，后臺會把當前的用戶名、歌曲的ID寫入數(shù)據(jù)庫的已點歌曲表。后臺代碼：protectedvoidGridView1_SelectedIndexChanged(objectsender,EventArgse){DataClassesDataContextdb=newDataClassesDataContext();Selectedtmp=newSelected();tmp.UserName=Page.User.Identity.Name;tmp.SongNum=int.Parse(GridView1.SelectedValue.ToString());db.Selected.InsertOnSubmit(tmp);db.SubmitChanges();}輸入歌曲的拼音首字母，例如搜索“TT”，效果如下圖：圖5-10按首字母搜索“點播”按鈕的后臺代碼與上一部分完全一樣。4、字數(shù)點歌登錄前臺頁面后，單擊“字數(shù)點歌”區(qū)域進入字數(shù)點歌界面。輸入歌名字數(shù)后，單擊“確定”進行搜索，也可以單擊輸入框?qū)⑤斿e的數(shù)字刪除，重新輸入。界面效果如下：圖5-11字數(shù)點歌界面效果圖每次輸入一個數(shù)字，后臺就會把數(shù)字作為字符串附加到textbox的字符串的后面，后臺代碼如下：protectedvoidButton1_Click(objectsender,EventArgse){TextBox1.Text=TextBox1.Text+Button1.Text;}protectedvoidButton2_Click(objectsender,EventArgse){TextBox1.Text=TextBox1.Text+Button2.Text;}//后面的按鈕點擊事件以此類推，都是把當前按鈕的text值加到輸入框的text值之后protectedvoidButton11_Click(objectsender,EventArgse){Response.Redirect("song_number_result.aspx?zishu="+TextBox1.Text);}例如，輸入“5”進行搜索，效果如下圖：圖5-12字數(shù)點歌界面效果圖“點播”功能的后臺代碼：publicpublicintnum;protectedvoidPage_Load(objectsender,EventArgse){num=int.Parse(Request.QueryString["zishu"]);LinqDataSource1.Where="NumberOfWords="+num;}protectedvoidGridView1_SelectedIndexChanged(objectsender,EventArgse){DataClassesDataContextdb=newDataClassesDataContext();Selectedtmp=newSelected();tmp.UserName=Page.User.Identity.Name;tmp.SongNum=int.Parse(GridView1.SelectedValue.ToString());db.Selected.InsertOnSubmit(tmp);db.SubmitChanges();}}5、按語種點歌登錄前臺頁面后，單擊“語種點歌”區(qū)域進入語種點歌界面。單擊相應(yīng)的語種，即可查看該語種的所有歌曲。界面效果如下：圖5-13按語種搜索界面效果圖單擊某個語種按鈕，頁面會重定向到某個語種搜索結(jié)果頁面，其后臺代碼如下：protectedvoidButton1_Click(objectsender,EventArgse){Response.Redirect("~/song_language_result.aspx?LangNum=1");}protectedvoidButton2_Click(objectsender,EventArgse){Response.Redirect("~/song_language_result.aspx?LangNum=2");}//類似的可知，語種編號共有6個，還有4個按鈕事件后臺代碼：例如，點擊“英語”，搜索效果如下圖：圖5-14按語種搜索結(jié)果圖單擊“點播”按鈕即可點歌，其后臺代碼如下：publicintlan_num;protectedvoidPage_Load(objectsender,EventArgse){lan_num=int.Parse(Request.QueryString["LangNum"]);LinqDataSource1.Where="LangNum="+lan_num;}protectedvoidGridView1_SelectedIndexChanged(objectsender,EventArgse){DataClassesDataContextdb=newDataClassesDataContext();Selectedtmpt=newSelected();tmpt.UserName=Page.User.Identity.Name;tmpt.SongNum=int.Parse(GridView1.SelectedValue.ToString());db.Selected.InsertOnSubmit(tmpt);db.SubmitChanges();}6、按歌曲類型點歌登錄到前臺頁面后，單擊“分類點歌”區(qū)域進入分類點歌界面。單擊相應(yīng)的歌曲類別，即可查看該類別的所有歌曲。界面效果如下：圖5-15按歌曲類型效果圖點擊某個分類按鈕后，頁面會跳轉(zhuǎn)到該分類對應(yīng)的搜索結(jié)果頁，其后臺代碼：protectedvoidButton1_Click(objectsender,EventArgse){Response.Redirect("~/song_class_result.aspx?class=1");}protectedvoidButton2_Click(objectsender,EventArgse){Response.Redirect("~/song_class_result.aspx?class=2");}//類似的，可以寫出剩下的4種歌曲類型例如，點擊“搖滾”按鈕，效果如下圖：圖5-16按歌曲類型效果圖后臺代碼：publicinttypeNum;protectedvoidPage_Load(objectsender,EventArgse){typeNum=int.Parse(Request.QueryString["class"]);LinqDataSource1.Where="ClassNum="+typeNum;}protectedvoidGridView1_SelectedIndexChanged(objectsender,EventArgse){DataClassesDataContextdb=newDataClassesDataContext();Selectedtmp=newSelected();tmp.UserName=Page.User.Identity.Name;tmp.SongNum=int.Parse(GridView1.SelectedValue.ToString());db.Selected.InsertOnSubmit(tmp);db.SubmitChanges();}5.3.2已點歌曲客戶登錄之后，點擊下方“已點”按鈕可以查看已經(jīng)點播的歌曲列表。單擊編號對應(yīng)的“查看”可以查看歌曲名稱，單擊“刪除”可以將該歌曲從播放列表中去除。效果如下圖：圖5-17按歌曲分類搜索單擊“已點”按鈕，后臺會根據(jù)當前用戶名進行查找，把該用戶點播、但未播放的所有歌曲列出來。后臺代碼如下：protectedvoidPage_Load(objectsender,EventArgse){LinqDataSource1.Where="UserName=\""+Page.User.Identity.Name+"\"";}protectedvoidGridView1_SelectedIndexChanged(objectsender,EventArgse){LinqDataSource2.Where="SongNum="+int.Parse(GridView1.SelectedRow.Cells[0].Text);DetailsView1.Visible=true;}5.3.3切歌客戶登錄之后，單擊“切歌”按鈕可以馬上播放下一首已點歌曲。其效果如下圖：圖5-18切歌效果圖protectedprotectedvoidButton1_Click(objectsender,EventArgse){DataClassesDataContextdb=newDataClassesDataContext();vartmp1=fromrindb.Selectedwherer.UserName==Page.User.Identity.Nameselectr;if(tmp1.FirstOrDefault()==null){Response.Redirect("~/mv2.aspx");}else{db.Selected.DeleteOnSubmit(tmp1.FirstOrDefault());db.SubmitChanges();Response.Redirect("~/mv2.aspx");}}protectedvoidPage_Load(objectsender,EventArgse){DataClassesDataContextdb=newDataClassesDataContext();vartmp1=fromrindb.Selectedwherer.UserName==age.User.Identity.Nameselectr.SongNum;vartmp2=tmp1.FirstOrDefault();vartmp3=fromsindb.Songswheres.SongNum==tmp2selects.Source;source.Src=tmp3.FirstOrDefault();}protectedvoidswitch_Click(objectsender,ImageClickEventArgse){DataClassesDataContextdb=newDataClassesDataContext();vartmp1=fromrindb.Selectedwherer.UserName==Page.User.Identity.Nameselectr;if(tmp1.FirstOrDefault()==null){Response.Redirect("~/mv2.aspx");}else{db.Selected.DeleteOnSubmit(tmp1.FirstOrDefault());db.SubmitChanges();}}5.4后臺管理5.4.1后臺框架搭建管理員登錄之后到達后臺管理界面，該界面使用了管理員頁面母版，母版的左上側(cè)使用了用戶控件來顯示登錄者的名字。左下側(cè)使用了TreeView控件對管理員的管理功能進行導(dǎo)航，右側(cè)是在后臺管理頁面中的添加了輸入框和按鈕來實現(xiàn)相應(yīng)的功能。效果如下圖：圖5-19后臺管理界面圖管理員母版頁使用的TreeView控件具體代碼如下所示：<<asp:TreeNodeExpanded="True"Text="歌曲管理"Value="歌曲信息管理"SelectAction="None"><asp:TreeNodeText="添加"Value="添加"NavigateUrl="~/Admin/AddSongs.aspx"></asp:TreeNode><asp:TreeNodeText="更新"Value="更新"NavigateUrl="~/Admin/UpdateSongs.aspx"></asp:TreeNode><asp:TreeNodeText="刪除"Value="刪除"NavigateUrl="~/Admin/DeleteSongs.aspx"></asp:TreeNode></asp:TreeNode><asp:TreeNodeExpanded="True"Text="歌手管理"Value="歌手信息管理"SelectAction="None"><asp:TreeNodeText="添加"Value="添加"NavigateUrl="~/Admin/AddSingers.aspx"></asp:TreeNode><asp:TreeNodeText="更新"Value="更新"NavigateUrl="~/Admin/UpdateSingers.aspx"></asp:TreeNode><asp:TreeNodeText="刪除"Value="刪除"NavigateUrl="~/Admin/DeleteSingers.aspx"></asp:TreeNode></asp:TreeNode>5.4.2歌手管理管理員能夠?qū)Ω枋中畔⑦M行增添、刪除、改正、搜索。1、添加歌手點擊管理員頁面左側(cè)的“添加”按鈕，會跳出添加歌手的表格，根據(jù)要求填入歌手名字、名字拼音、名字首字母、選擇頭像文件、歌手身份、地區(qū)、歌曲分類，最后提交即可。效果如下圖：圖5-20添加歌手圖添加歌手的后臺代碼：protectedvoidBtSubmit_Click(objectsender,EventArgse){DataClassesDataContextdb=newDataClassesDataContext();Singerstmpt=newSingers();tmpt.SingerName=SingerName.Text;tmpt.SingerPinin=SingerPinin.Text;tmpt.SingerAcronym=SingerAcronym.Text;stringuppath="";stringfileFullname=this.Head.FileName;stringdataName=DateTime.Now.ToString("yyyyMMddhhmmss");stringfileName=fileFullname.Substring(fileFullname.LastIndexOf("\\")+1);stringtype=fileFullname.Substring(fileFullname.LastIndexOf(".")+1);if(type=="jpg"||type=="gif"||type=="JPG"||type=="png"){this.Head.SaveAs(Server.MapPath("~/images/歌手頭像圖片/")+"\\"+dataName+"."+type);uppath=uppath="~/images/歌手頭像圖片/"+dataName+"."+type;}tmpt.Head=uppath;tmpt.IdentityNum=int.Parse(IdentityNum.SelectedValue);tmpt.AreaNum=int.Parse(AreaNum.SelectedValue);tmpt.ClassNum=int.Parse(ClassNum.SelectedValue);db.Singers.InsertOnSubmit(tmpt);db.SubmitChanges();Response.Redirect("~/Admin/behindManage.aspx");}2、刪除歌手點擊管理員頁面左側(cè)歌手管理下的“刪除”按鈕，右側(cè)會顯示出所有歌手的信息，點擊歌手對應(yīng)的“刪除”按鈕即可刪除該歌手信息。效果如下圖:圖5-21刪除歌手圖代碼:<<asp:GridViewID="GV1"runat="server"AllowPaging="True"AllowSorting="True"AutoGenerateColumns="False"BorderStyle="None"DataKeyNames="SinNum"DataSourceID="LinqDataSource1"><Columns><asp:BoundFieldDataField="SinNum"HeaderText="歌星ID"InsertVisible="False"ReadOnly="True"SortExpression="SinNum"/><asp:BoundFieldDataField="SinName"HeaderText="姓名"SortExpression="SinName"/><asp:BoundFieldDataField="SinPiny"HeaderText="姓名拼音"SortExpression="SinPiny"/><asp:BoundFieldDataField="SinAcronym"HeaderText="姓名首字母"SortExpression="SinAcronym"/><asp:BoundFieldDataField="Head"HeaderText="頭像路徑"SortExpression="Head"/><asp:BoundFieldDataField="IdentityNum"HeaderText="身份ID"SortExpression="IdentityNum"/><asp:BoundFieldDataField="AreaNum"HeaderText="地區(qū)ID"SortExpression="AreaNum"/><asp:BoundFieldDataField="ClassNum"HeaderText="分類ID"SortExpression="ClassNum"/><asp:CommandFieldHeaderText="操作"ShowDeleteButton="True"ButtonType="Button"/></Columns></asp:GridView>3、更新歌手信息點擊管理員頁面左側(cè)歌手管理下的“更新”按鈕，右側(cè)會顯示出所有歌手，單擊“編輯”按鈕即可進入到改正歌手的信息的狀態(tài)，改正之后點擊“更新”即可提交修改。效果如下圖：圖5-22更新歌手信息圖4、查找歌星在管理員界面，或者取消“添加歌星”后，可以看到查找歌星搜索框?？梢詫Ω栊堑拿诌M行模糊搜索。輸入“李”進行搜索，接著可以對搜索結(jié)果進行“刪除”或“更新”操作，效果如下圖：圖5-23管理歌曲圖后臺代碼：publicpublicpartialclassAdmin_SingerSearch:System.Web.UI.Page{publicstringtmpt;protectedvoidPage_Load(objectsender,EventArgse){tmpt=Request.QueryString["SinSearchText"];LinqDataSource1.Where="SinName.Contains(\""+tmpt+"\")";}5.4.3歌曲管理管理員可以增加、刪除、改正、搜索歌曲信息。示例如下：1、添加歌曲進入添加歌曲界面后，根據(jù)要求輸入歌名、歌手ID、歌曲路徑、歌曲拼音、歌曲首字母、字數(shù)、語種、歌曲分類，最后選擇提交即可。效果圖如下：圖5-24添加歌曲信息圖添加歌曲的后臺代碼：protectedprotectedvoidBtSubmit_Click(objectsender,EventArgse){DataClassesDataContextdb=newDataClassesDataContext();Songstmpt=newSongs();tmpt.SongName=SongName.Text;tmpt.SingerNum=int.Parse(SingerNum.Text);stringuppath="";stringFullname=this.FileUpload1.FileName;stringdataName=DateTime.Now.ToString("yyyyMMddhhmmss");stringfileName=fileFullname.Substring(Fullname.LastIndexOf("\\")+1);stringtype=fileFullname.Substring(Fullname.LastIndexOf(".")+1);if(type=="mp4"||type=="mkv"){this.FileUpload1.SaveAs(Server.MapPath("~/Songs/")+"\\"+dataName+"."+type);uppath="~/Songs/"+dataName+"."+type;}tmpt.Source=uppath;tmpt.SongPinin=SongPinin.Text;tmpt.SongAcronym=SongAcronym.Text;tmpt.NumberOfWords=int.Parse(NumberOfWords.Text);tmpt.LangNum=int.Parse(RadioButtonList1.SelectedValue);tmpt.ClassNum=int.Parse(RadioButtonList2.SelectedValue);db.Songs.InsertOnSubmit(tmpt);db.SubmitChanges();Response.Redirect("~/Admin/behindManage.aspx");}2、刪除歌曲點擊“刪除”按鈕，右側(cè)表格中會顯示出所有的歌曲信息，找到目標的歌曲后，單擊“刪除”操作即可刪去該歌曲。效果圖如下：圖5-25刪除歌曲效果圖代碼：<<asp:GridViewID="GridView1"runat="server"AllowPaging="True"AllowSorting="True"AutoGenerateColumns="False"BackColor="White"BorderColor="#CC9966"BorderStyle="None"DataKeyNames="SongNum"DataSourceID="LinqDataSource1"Font-Names="微軟雅黑"Font-Size="Medium"HorizontalAlign="Center"><Columns><asp:BoundFieldDataField="SongNum"HeaderText="歌曲ID"InsertVisible="False"ReadOnly="True"SortExpression="SongNum"/><asp:BoundFieldDataField="SongName"HeaderText="歌名"SortExpression="SongName"/><asp:BoundFieldDataField="SingerNum"HeaderText="歌星ID"SortExpressionSortExpression="SingerNum"/><asp:BoundFieldDataField="Source"HeaderText="路徑"SortExpression="Source"/><asp:BoundFieldDataField="SongPiny"HeaderText="拼音"SortExpression="SongPiny"/><asp:BoundFieldDataField="SongAcronym"HeaderText="首字母"SortExpression="SongAcronym"/><asp:BoundFieldDataField="NumberOfWords"HeaderText="歌曲字數(shù)"SortExpression="NumberOfWords"/><asp:BoundFieldDataField="LangNum"HeaderText="語種ID"SortExpression="LangNum"/><asp:BoundFieldDataField="ClassNum"HeaderText="分類ID"SortExpression="ClassNum"/><asp:CommandFieldButtonType="Button"HeaderText="操作"ShowDeleteButton="True"/></Columns></asp:GridView>3、更新歌曲點擊左側(cè)“更新”按鈕，右側(cè)表格中會顯示出所有的歌曲信息，找到要刪除的歌曲后，點擊“刪除”操作，即可刪除歌曲。效果圖如下：圖5-26更新歌曲信息圖代碼：<<asp:GridViewID="GridView1"runat="server"AllowPaging="True"AllowSorting="True"AutoGenerateColumns="False"BackColor="White"BorderColor="#CC9966"BorderStyle="None"DataKeyNames="SongNum"DataSourceID="LinqDataSource1"Font-Names="微軟雅黑"Font-Size="Medium"><Columns><asp:BoundFieldDataField="SonNum"HeaderText="歌曲ID"InsertVisible="False"ReadOnly="True"SortExpression="SonNum"/>