卡拉OK点歌系统的设计与实现

—page3—1引言背景随着互联网技术的快速发展，在线娱乐方式层出不穷，得到了广大网民的喜爱。按照CNNIC于2018年6月发布的《中国互联网络发展状况统计报告》，在线音乐的用户规模已达5.55亿，比去年底增长673万，占全体网民人数的69.2%。这表明在线音乐是满足广大网民在线娱乐需求的主要方式之一。如今，人们对音乐的需求不再是简单地“听”，通过“唱”特别是在KTV“唱”越来越成为人们重要的娱乐方式之一。1.2研究意义本系统从人们对K歌的需求出发，通过卡拉OK点歌系统，把卡拉OK与互联结合实现在线K歌，使那些距离KTV较远的人不用考虑出门时的天气、交通状况等因素，使那些空闲时间较少而又想通过唱歌来娱乐放松的人能足不出户就享受唱歌，使那些唱得不太好的人只要通过联网就能练习K歌从而提高唱歌水平，极大地提高了人们K歌的便利性。1.3研究目标针对卡拉OK歌唱厅的现实需要，设计并实现一个基于Web的点歌系统。基于软件工程思想,要实现以下目标：采用人机交互方式，实现按照歌手、歌名、数字、拼音、类别等方式点歌。1.4可行性分析1、技术可行性：本系统的设计与实现，所需要的相应技术大多学习过，涉及的相关知识也并没有很深入，碰到的问题大多数通过查阅资料、询问同学和请教老师就能解决。因此，在技术实现上基本没有问题。2、市场可行性：随着科技不断发展进步，人们生活水平不断提高，休闲娱乐方式也变得越来越多样化。唱歌越来越成为人们娱乐放松的一种休闲方式，而传统卡拉OK要求必须去专门的KTV才能享受这种娱乐，缺乏便捷性、灵活性。而本文的卡拉OK点歌系统能大大提升人们想唱就唱的便捷性，让人们足不出户就能体验KTV。3、操作可行性：随着IT行业的炙手可热，计算机应用也被充分接受，越来越多人能熟悉如何操作电脑。对客户来说，网站界面简洁大方，操作简单易于上手；对管理者来说，网站能轻松完成对数据的增删改查，稳定性强。2开发环境2.1开发工具介绍2.1.1VisualStudio2012VisualStudio（简称VS）是微软推出的集成开发环境，可用来编辑、调试并生成代码，然后发布应用。对于Web开发，VS2012全面支持HTML5和CSS3，提供了全新模板、设计工具、测试调试工具以及在ASP.NET中的优势。特别是ASP.NET网站管理工具，能让开发者快速地对用户、角色、访问规则进行管理。2.1.2EnterpriseArchitectEnterpriseArchitect（简称EA）是一款计算机辅助软件工程CASE工具，能高效地用于管理项目、业务需求分析，提供了仿真、数据库建模、业务流程建模、自动化、调试和可视化等功能，具有可扩展的建模环境、可使用性好、上手很容易，并且可以快速掌握UML等优点。它的运行速度非常快、具有可扩展性、能处理非常巨大的模型并且支持多个并行用户等优点。2.2相关理论介绍2.2.1三层架构三层架构是指将应用开发分为展示层（UI）、业务逻辑层（BLL）、数据访问层（DAL）。UI层是与用户交互的界面，用于接受用户输入的数据和显示用户需要的数据。BLL层是UI层和DAL层的中介，用于实现业务逻辑。DAL层用于实现对数据库的操作，为UI层和BLL层提供服务。采用三层架构可以实现任何一层的变动都不影响到其他层，能降低各层之间的依赖性，更容易适应需求的变化。2.2.2面向对象设计方法面向对象程序设计是程序设计的新思维，它既吸收了结构化程序设计的一切优点，又考虑了现实世界与面向对象空间的映射关系，它将数据以及对数据的操作放在一起，作为一个相互依存、不可分割的整体。面向对象的基本概念：基类、对象、消息、方法。基类是对象的抽象及描述，是具有相似属性和相同操作的多个对象的相似特性的描述；对象是组成世界的一个独立单元，它有自己的静态属性和动态行为或方法；消息是面向对象系统中的对象向另一个对象发出的实现某个功能的请求，对象实现该请求则被称为消息响应。对象之间只能通过消息来联系；当对象接收到发发往自己的消息时，就调用有关的函数，执行对应的操作。方法就是对象所能执行的操作。3需求分析3.1功能性需求分析3.1.1角色定义1、用户用户是拥有客户账号并且能登陆进卡拉OK点歌系统的人。这个角色主要参与客户端的搜索资源库中的歌曲、进行歌曲点播等功能。2、管理员管理者是指在系统中通过管理端登录界面登陆的管理人员。这个角色主要参与管理端的歌曲管理、歌星管理等功能。3、数据库数据库是一个与系统发生交互的外部系统，负责响应系统使用者对数据的查找、添加、更改和删除等请求。3.1.2系统用例图本系统主要由两部分组成：一个是客户界面子系统，一个是管理界面子系统。客户端子系统的功能主要是指客户通过登录卡拉OK点歌系统，再进行操作的功能，即点歌功能。管理端子系统的功能主要是指管理者通过登录卡拉OK点歌网站后台对客户、歌曲等进行操作的功能，即管理功能。系统的主要用例如下图所示:图3-1主系统用例图3.1.3用户端界面客户登录点歌系统之后，通过按歌名、歌手搜索等方式搜索歌曲，选择点播歌曲完成歌曲点播。客户活动图如下图所示:图3-2客户系统的用例图客户系统的这些用例描述如下：登录：客户在点播歌曲之前必须登录到网站，如果没有登录将不能使用网站的歌曲点播功能。搜索歌曲：客户登录之后，可以按歌曲的名称、首字母、类型、字数、歌手名等方式搜索歌曲。点播歌曲：客户搜索到歌曲之后，可以通过单击“点播”按钮实现点播。注销：客户可以退出当前登录状态。2、搜索歌曲客户通过点歌系统搜索到心仪的歌曲。用例描述：搜索歌曲；执行者：客户；前置条件：客户已经登录；后置条件：搜索到满意的歌曲后可以进行歌曲点播；基本路径：a）登录后，点击“在线点歌”；b）通过按歌手名字、歌手所属地区，歌曲类型、曲称、首字母、歌名字数等方式搜索歌曲。图3-3搜索歌曲用例图3、已点歌曲客户可以通过“已点”界面来查看已经点播的歌曲。用例描述：客户管理歌曲；执行者：客户；前置条件：用户已经点播歌曲；后置条件：用户可以查看已点歌曲的名称、删除已点歌曲等；基本路径：客户对搜索到的歌曲进行点播；在“已点”界面查看已点歌曲，可以查看或删除已点歌曲。图3-4已点歌曲用例图3.1.4管理端界面管理员登录系统后，可以对系统的歌星、歌曲信息进行管理。管理员活动图如下图所示：图3-5管理端用例图管理端的这些用例描述如下：登录：管理员只有登录之后才能执行其管理功能歌手信息：管理员可以对歌手信息进行增添、删除、修正、查找等操作；歌曲信息：管理员可以对歌曲信息进行增添、删除、修正、查找等操作；注销：管理员可以退出当前登录状态。。1、歌手管理管理员可以对歌手进行管理。用例描述：歌手信息管理；执行者：管理员；前置条件：管理员已登录；后置条件：无基本路径：进入歌手管理的界面；选择“添加”，按提示输入歌手信息，可以添加歌手信息；选择“更新”，可以查看、编辑歌手的姓名、姓名拼音、所属地区、歌曲语种等信息。选择“删除”，可以删除列表里显示的歌手。图3-6歌手管理用例图2、歌曲管理管理员能够管理系统中现有的歌曲。用例描述：管理歌曲数据；执行者：管理员；前置条件：管理员已登录；后置条件：无基本路径：进入歌曲管理的界面；选择“添加”，可以按提示输入信息，提交后可以添加歌曲信息；选择“更新”，可以查看数据库中已有的歌曲信息，修改歌曲的名称、拼音、语种、风格、存储路径等信息。选择“删除”，可以删除列表里显示的歌曲。图3-7歌曲管理用例图3.2非功能性需求分析非功能性需求是指客户活动必须达到的一些要求，其中有系统可靠性、可维护性、易用性、安全性等要求。3.2.1易用性需求易用性需求指系统使用者在操作过程中容易理解、容易操作等方面的需求。本系统的易用性需求要求界面及界面风格一致，输入信息后会提示输入数据是否规范或明显提示输入的数据无效，能提示两次输入密码是否相同，修改信息之后必须要有“修改成功”等提醒语句。3.2.2安全性需求在安全性上，网站一定要保护好客户的账号信息和个人信息。本系统要求用户只有在登录后，才能访问在其权限内的数据和进行相应权限内的操作，同时网站设置了身份验证登录超时时间，超过这个时间就会强制下线，必须重新登陆才能继续访问网站，保证了账号的安全性，降低了被他人进行盗号和获取个人信息风险。4系统设计4.1系统体系结构设计通过问卷调查，对点歌系统需求进行研究，将本系统的功能定义如下：图4-1系统功能结构图系统具体功能描述如下：客户模块的主要功能：按歌手点歌：用户可以按歌手来点歌；按歌名点歌：用户可以按歌曲名称来搜索点歌；（3）按歌名拼音、首字母点歌：用户能够通过歌名的全拼、首字母进行点歌；按语种点歌：用户能够根据语种来点歌；按字数点歌：用户按照歌名字数来点歌；（6）切歌：用户能够切换到下一首歌。管理员模块的主要功能：（7）歌曲管理：管理员能够增添、更新、删除歌曲信息；（8）歌手管理：管理员能够对歌手的信息进行增添、更新、删除。4.2系统数据库设计4.2.1实体关系图图4-2系统E-R图4.2.2数据库设计通过进行需求分析以及系统功能的模块设计，对数据库中的各个数据表的详细设计如下：歌曲表歌曲表是用来记录歌曲基本信息的，包含歌曲ID（主键）、歌名、歌手ID、歌名拼音、首字母、字数、语种ID、类别ID、文件路径等字段。其中，歌手ID链接到歌手信息表，语种ID链接到歌曲语种分类表，类别ID链接到歌曲类别分类表。如下表4-1所示：表4-1歌曲信息表序号字段名数据类型约束条件允许空值备注1SonNumint主键否歌曲ID2SonNamevarchar(100)否歌曲名3SinNumint外键歌手ID4SonPininvarchar(MAX)否歌名拼音5SonAcronymvarchar(50)否首字母6NumberOfWordsint否歌名字数7LangNumint外键语种ID8ClassNumint外键类别ID9SrcPathvarchar(MAX))否歌曲路径歌手表歌手表用来记录歌手信息，包括歌手ID（主键）、歌手名字、姓名拼音与首字母、头像路径、身份ID、区域ID、类别ID等字段。其中，身份ID链接到歌手身份表，地区ID链接到歌手所属地区表，类别ID链接到歌曲风格类别表。如下表4-2所示：表4-2歌手信息表序号字段名数据类型约束条件允许空值备注1SinNumint主键否歌手ID2SinNamevarchar(50)否歌手名字3SinPininvarchar(100)姓名拼音4SinFirstvarchar(50)姓名首字母5Headvarchar(100)头像路径6IdentityNumint外键身份ID7AreaNumint外键地区ID8ClassNumint外键类别ID歌手地区表歌手地区表用来记录歌手所属地区信息，包括地区ID（主键）、区域类别等字段。其中，地区一般分为大陆、港台、欧美、日韩及其他。如下表4-3所示：表4-3歌手地区表序号字段名数据类型约束条件允许空值备注1AreaNumint主键否地区ID2AreaClassvarchar(50)否地区类别歌曲类型表歌曲类型表用来记录歌曲所属类型信息，包括类型ID（主键）、名称等字段。其中，歌曲类型一般分为流行、摇滚、嘻哈、电子、民谣、民歌等。如下表4-4所示：表4-4歌曲类型表序号字段名数据类型约束条件允许空值备注1ClassNumint主键否类型ID2ClassNamevarchar(50)否类型名称歌曲语种表歌曲语种表包括语种ID（主键）、类别等字段，具体可分为华语、英语、粤语、日语、韩语及其他语种。如下表4-5所示：表4-5语种分类表序号字段名数据类型约束条件允许空值备注1LangNumint主键否语种ID2LangTypevarchar(50)否语种类别歌手身份表歌手身份表包括身份ID（主键）、类别等字段，歌手身份可分为男歌手、女歌手、乐团或组合等。如下表4-6所示：表4-6歌手身份分类表序号字段名数据类型约束条件允许空值备注1IdentityNumint主键否身份ID2IdentityTypevarchar(50)否身份类别已点歌曲表已点歌曲表包括已点歌曲ID（主键）、客户名、歌曲ID等字段。用户找到歌后点播歌曲，后台会将当前客户名称、歌曲的ID写进已点歌曲表。如下表4-7所示：表4-7已点歌曲表序号字段名数据类型约束条件允许空值备注1SelectedNumint主键否已点ID2UserNamenvarchar(256)否客户名3SonNumint外键歌曲ID5系统详细实现过程5.1系统目录结构本系统目录下有Admin,App_Code,CSS_JS,image,Songs,UserControls等文件夹，分别存放管理员页面代码、LinqtoSql类代码、样式与JS文件、系统图片、系统歌曲文件、用户控件。目录下的其他ASPX文件为用户点歌所用的页面文件。具体见下图：图5-1目录结构图5.2连接数据库通过在文件web.config中增加connectionStrings来连接数据库，引用SqlServerHelper类实现更加方便的数据访问。相应的代码如下：<<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>标签把点歌页面和播放页面嵌套在前台页面中，客户每次点击只会更新相应的嵌套页面，而不会更新整个前台界面。前台界面还含有主页、已点、切歌、注销等按钮。效果如下图：图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搜索歌曲客户可以选择按照歌名、首字母、字数、歌手姓名、歌手身份等方式搜索歌曲。1、歌手点歌登录前台页面后，单击“歌手点歌”区域进入歌手点歌界面。按歌手搜索提供了来两种搜歌方式：一是在输入框内直接输入歌手的名字，进行模糊查找；二是根据歌手身份点击相应按钮来搜索。歌手点歌界面效果如下图：图5-3按歌手点歌界面后台通过用户点击按钮来获取查找关键字，再重定向到相应的歌手搜索结果页面。后台代码如下：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");}//对歌手身份类别（男、女、组合）、地区（内地、港台、欧美、日韩、其他）、排列组合，共有15种组合如果直接搜索歌手名字，查找姓“陈”的歌手(见下图左侧)点击相应的歌手名字，即可查看到歌手所唱的歌曲，例如点击“陈奕迅”，效果如下图右侧：图5-4按歌手名字搜索效果图点击歌手名字查询歌曲，其后台代码：protectedvoidPage_Load(objectsender,EventArgse){SingerNameText=Request.QueryString["SingerNameText"];LinqDataSource1.Where="SingerName.Contains(\""+SingerNameText+"\")";}如果按歌手身份搜索，例如搜索“内地女星”，点击歌手名字即可查询到该歌手的搜索歌曲，效果与上一种相似。效果如下图：图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、歌名点歌登录前台页面后，单击“歌名点歌”区域进入歌名点歌界面。可以在输入框中输入歌名进行查找，也可以直接点播下方推荐的歌曲。效果图如下：图5-6按歌名搜索界面例如，通过搜索框搜索“淘汰”，效果如下图：图5-7按歌名搜索效果图后台获取到搜索关键字后，重定向到搜索结果界面，后台代码：protectedvoidButton1_Click(objectsender,EventArgse){Response.Redirect("song_name_result.aspx?SongName="+TextBox1.Text);}3、字母点歌登录前台页面后，单击“拼音点歌”区域进入拼音点歌界面。可以输入歌名的全拼或首字母进行搜索，点歌界面效果如下：图5-8按歌名首字母搜索点击“全拼”或“首字母”按钮时，后台会根据获取输入框的关键字，再重定向到相应的搜索结果页面，后台代码如下：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写入数据库的已点歌曲表。后台代码：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、字数点歌登录前台页面后，单击“字数点歌”区域进入字数点歌界面。输入歌名字数后，单击“确定”进行搜索，也可以单击输入框将输错的数字删除，重新输入。界面效果如下：图5-11字数点歌界面效果图每次输入一个数字，后台就会把数字作为字符串附加到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字数点歌界面效果图“点播”功能的后台代码：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、按语种点歌登录前台页面后，单击“语种点歌”区域进入语种点歌界面。单击相应的语种，即可查看该语种的所有歌曲。界面效果如下：图5-13按语种搜索界面效果图单击某个语种按钮，页面会重定向到某个语种搜索结果页面，其后台代码如下：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按语种搜索结果图单击“点播”按钮即可点歌，其后台代码如下：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、按歌曲类型点歌登录到前台页面后，单击“分类点歌”区域进入分类点歌界面。单击相应的歌曲类别，即可查看该类别的所有歌曲。界面效果如下：图5-15按歌曲类型效果图点击某个分类按钮后，页面会跳转到该分类对应的搜索结果页，其后台代码：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已点歌曲客户登录之后，点击下方“已点”按钮可以查看已经点播的歌曲列表。单击编号对应的“查看”可以查看歌曲名称，单击“删除”可以将该歌曲从播放列表中去除。效果如下图：图5-17按歌曲分类搜索单击“已点”按钮，后台会根据当前用户名进行查找，把该用户点播、但未播放的所有歌曲列出来。后台代码如下：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后台框架搭建管理员登录之后到达后台管理界面，该界面使用了管理员页面母版，母版的左上侧使用了用户控件来显示登录者的名字。左下侧使用了TreeView控件对管理员的管理功能进行导航，右侧是在后台管理页面中的添加了输入框和按钮来实现相应的功能。效果如下图：图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歌手管理管理员能够对歌手信息进行增添、删除、改正、搜索。1、添加歌手点击管理员页面左侧的“添加”按钮，会跳出添加歌手的表格，根据要求填入歌手名字、名字拼音、名字首字母、选择头像文件、歌手身份、地区、歌曲分类，最后提交即可。效果如下图：图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、删除歌手点击管理员页面左侧歌手管理下的“删除”按钮，右侧会显示出所有歌手的信息，点击歌手对应的“删除”按钮即可删除该歌手信息。效果如下图:图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="地区ID"SortExpression="AreaNum"/><asp:BoundFieldDataField="ClassNum"HeaderText="分类ID"SortExpression="ClassNum"/><asp:CommandFieldHeaderText="操作"ShowDeleteButton="True"ButtonType="Button"/></Columns></asp:GridView>3、更新歌手信息点击管理员页面左侧歌手管理下的“更新”按钮，右侧会显示出所有歌手，单击“编辑”按钮即可进入到改正歌手的信息的状态，改正之后点击“更新”即可提交修改。效果如下图：图5-22更新歌手信息图4、查找歌星在管理员界面，或者取消“添加歌星”后，可以看到查找歌星搜索框。可以对歌星的名字进行模糊搜索。输入“李”进行搜索，接着可以对搜索结果进行“删除”或“更新”操作，效果如下图：图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、添加歌曲进入添加歌曲界面后，根据要求输入歌名、歌手ID、歌曲路径、歌曲拼音、歌曲首字母、字数、语种、歌曲分类，最后选择提交即可。效果图如下：图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、删除歌曲点击“删除”按钮，右侧表格中会显示出所有的歌曲信息，找到目标的歌曲后，单击“删除”操作即可删去该歌曲。效果图如下：图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="歌曲字数"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、更新歌曲点击左侧“更新”按钮，右侧表格中会显示出所有的歌曲信息，找到要删除的歌曲后，点击“删除”操作，即可删除歌曲。效果图如下：图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"/>