基于JavaWeb技术的音乐网站的设计与实现——毕业论文

本科毕业设计题 目 基于JavaWeb技术的音乐网站的 设计与实现 专 业 软件工程 作者姓名 学 号 单 位 计算机学院 指导教师 年 月 教务处编聊城大学本科毕业设计目 录第一章 前 言11.1 课题研究背景与意义11.2 音乐网站的研究现状21.3 本论文的结构和主要工作2第二章 系统环境概述22.1 开发工具和服务器介绍2 2.1.1 MySQL介绍2 2.1.2 MyEclipse开发平台3 2.2 开发技术介绍3 2.2.1 Java编程语言简介3 2.2.2 Jsp技术3 2.2.3 MVC分层结构4 第三章 详细设计63.1 性能分析63.2 功能分析63.3 系统架构63.4 系统功能设计7 3.4.1 前台功能设计7 3.4.1 后台功能设计73.5 数据库设计7 第四章 系统实现84.1 用户注册84.2 首页104.3 音乐盒104.4 播放列表11第五章 系统测试175.1 测试用例和测试结果17 5.1.1 测试用例17 5.1.2 测试结果17第六章 总结17参考文献19致 谢201摘要 当今社会，已经成为互联时代。随着互联网的快速发展，网络已渗入人们的生活，并成为信息传播的一大媒介，可以说网络资源的获取已逐步改变了人们以往的生活方式，网络已经成为人们日常工作，休闲的主要工具之一。音乐网站也应运而生，为广大音乐爱好者提供了一个音乐交流的平台，增加了对音乐的了解。 音乐网站系统以jsp作为页面载体，以Mysql作为后台数据库，在Windows环境下使用MyEclipse开发工具进行开发。网页界面结构设计以实用性出发，具有易于操作、简洁、方便等特点。前台主要实现了用户的登录注册，音乐的试听等；后台主要用于对数据库的管理，对注册过的用户进行删除，添加用户等功能。关键词：JSP；Mysql数据库；音乐网站Abstract Nowadays society have become a internet times. And during the development of the internet ,the network has been infiltrated peoples lives,the network has become a major media in the dissemination of information,you can say network resources has been gradually changed peoples lifestyle,the network has become one of the tools for peoples daily work,relaxation.The music website also came into being,it provides a platform for the vast number of music lovers to have a communication,to increase the understanding of music. The jsp page as the carrier of the music website system,using Mysql as background database,using the MyEclipse development tools under Windows environment for development.The structural of the web interface to practicality,with easy to operate,simple and convenient features.Front achieved a major user of land registration ,audition song and so on;background is mainly used to manage the database,to the registered user to delete,add users,and other functions.Key words : JSP ; The Mysql database ; Music Website3基于JavaWeb的音乐网站的设计与实现第一章 前言 1.1 课题研究背景与意义 随着Internet的快速发展，人们已经进入信息时代，web已经对商业、工业、银行、财政、教育、娱乐和信息产业及人们的工作、生活产生了深远的影响。许多传统的信息和数据库系统正在被移植到互联网上，人们获得信息的来源已经不再只是报纸、电视、广播等传统媒体，一个新的信息传输媒体逐渐被人所青睐。范围广泛的、复杂的分布式应用正在web环境中出现。音乐网站作为一个新时代传媒的产物，早已超过了国界，使听音乐变得如此便捷，它摒弃了传统音乐媒体的不足，正在快速向前发展。 流行音乐之所以被称为“流行”的原因之一，是它有着传播的时效性。绝大部分流行歌曲可以一夜成名，但是从人们的脑子里消失得也很快，从前极力抢购的唱片可能不久之后就被束之高阁，人们追逐的永远是不同于以往的“新”星。但是互联网的出现，一方面因为传播速度提高而加剧了这种时效性，另一方面却又利用其无限的网络胸怀使这些流行音乐具有了一定的持久性。如果这两方面正是人们所需要的，那么，这些都应当归功于音乐网站。 作为音乐网站的网络载体，音乐网站在创作、传播、欣赏方式等方面对流行音乐的发展都产生了前所未有的影响，体现了重大意义。而本课题的研究意义就在于构造一个网络音乐视听和下载的平台，是人们在纷繁的网络中也能找到一个休憩的天地。 1.2 音乐网站的研究现状 由于计算机技术的进步，计算机为时空自由、资源共享、系统开发、便于协作提供了支撑。但是，目前大量的国内网络音乐系统只停留在网络单一的水平上，并没有实现同台的个人化服务。目前很少系统能实现这种网络音乐库的功能，而且，一些网站只实现在线实时试听，并没有实现下载功能，没有切实满足用户的需求；一些音乐网站不能为用户提供方便的分类的检索系统；单一的音乐网站只是线性的，不支持相近歌曲的查询，找歌只能靠输入和分类查找实现，不便于相关性和方便性的查询；网络缺乏个人化服务，不能对每个用户实现个性功能。网友每次进入网站试听歌曲，只能每次重复查找，不能记录网友的喜好，收藏用户所喜爱的网页，浪费了用户的时间和网络资源，给用户带来不便。 由上可见，音乐网站的好与坏，严重影响了上网时间和对一个音乐系统的影响力，同时也影响了系统使用的效率。只有达到上述要求，在线音乐网站才能真正满足用户需求，更好的发展。因此，在线音乐网站是一个很有必要的娱乐系统，并且有很大的发展空间。 1.3 本论文的结构和主要工作 本论文共有七章，分别介绍了所研究课题音乐网站的研究背景与现状、其所需要的系统工具、详细设计以及该课题所实现的功能和测试结果。本论文的主要工作是详细介绍音乐网站的开发过程以及结果。 第二章 系统环境概述 2.1 开发工具和服务器介绍 2.1.1 MySQL介绍 MySQL是一个多用户、多线程的SQL数据库，是一个客户机/服务器结构的应用，它由一个服务器守护程序和很多不同的客户程序和库组成。SQL结构化查询语言是目前使用最广的并且是标准的数据库语言。SQL语言使得存储查询更新信息变的更加容易，我们可以直接使用SQL从网站上查询信息。My SQL的快速性和灵活性使网站的信息管理变得更加简单。数据库与客户端之间的接口可以使用CGI进行通信。My SQL 是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。2.1.2 MyEclipse开发平台 MyEclipse，是基于Eclipse开发的功能强大的企业级集成开发环境，主要用于Java、Java EE以及移动应用的开发。My Eclipse提供了对UML、Ajax、Web、Web Services、J2EE、JSP、 XML、 Struts、 JSF、 Java Persistence、 EJB、扩展数据库以及各种应用服务器的集成支持。My Eclipse也全面支持各种主流的第三方框架，让你能够快速高效地进行开发工作。此外，My Eclipse还全面支持各种基于Eclipse平台的插件，允许你自由定制或扩展个性化功能。在结构上，My Eclipse可以分为7中特征分别是：Java EE模型、WEB开发工具、EJB开发工具、应用程序服务器的连接器、Java EE项目部署服务、数据库服务、My Eclipse整合帮助。以上每一种的类别，在Eclipse中都有相应的功能部件，并通过一系列的插件来实现它们。 2.2 开发技术介绍 2.2.1 Java编程语言简介 Java具有类似于C+语言的形式和感觉，但它要比C+语言更易于使用，而且在编程时彻底采用了一种以对象为导向的方式。使用Java编写的应用程序，既可以在一台单独的电脑上运行，也可以被分布在一个网络的服务器端和客户端运行。另外，Java还可以被用来编写容量很小的应用程序模块或者applet，做为网页的一部分使用。applet可使网页使用者和网页之间进行交互式操作。Java是Sun微系统公司在1995年推出的，推出之后马上给互联网的交互式应用带来了新面貌。目前，最常用的两种互联网浏览器软件中都包括一个Java虚拟机。几乎所有的操作系统中都增添了Java编译程序。 Java语言是面向对象的，只支持类之间的单继承，但支持接口之间的多继承并支持类与接口之间的实现机制（关键字为implements）。 Java语言是分布式的。支持Internet应用的开发，在基本的Java应用编程接口中有一个网络应用编程接口Java API（Application Programming Interface），它提供了用于网络应用编程的类库。 Java语言是健壮的。Java的强类型机制、异常处理、废料的自动收集等是Java程序健壮性的重要保证。Java的安全检查机制使得Java更具健壮性。 Java语言是安全的，是体系结构中立的，是可移植的。 Java语言是解释型的。在运行时，Java平台中的Java解释对这些字节码进行解释执行，执行过程中需要的类在连接阶段被载入到运行环境中。 此外，Java语言还是高性能的、多线程的、动态的。 2.2.2 Jsp技术 JSP（全称Java Server Pages）是由Sun Micro systems公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求，而动态生成HTML、XML或其他格式文档的Web网页的技术标准。JSP技术是以Java语言作为脚本语言的，JSP网页为整个服务器端的Java库单元提供了一个接口来服务于HTTP的应用程序。JSP使Java代码和特定的预定义动作可以嵌入到静态页面中。JSP 技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访 问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计的显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。 2.2.3 MVC分层结构 MVC全名是ModelViewController，是模型(model)视图(view)控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。 MVC是一个设计模式，它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件:模型、视图、控制器。它们各自处理自己的任务。 视图就是由HTML元素组成的界面，在新式的Web应用程序中，HTML依旧在视图中扮演着重要的角色，但一些新的技术已层出不穷，它们包括Adobe Flash和象XHTML，XML/XSL，WML等一些标识语言和Web services. MVC好处是它能为应用程序处理很多不同的视图。在视图中其实没有真正的处理发生，不管这些数据是联机存储的还是一个雇员列表，作为视图来讲，它只是作为一种输出数据并允许用户操纵的方式。 模型表示企业数据和业务规则。在MVC的三个部件中，模型拥有最多的处理任务。例如它可能用象EJBs和ColdFusion Components这样的构件对象来处理数据库，被模型返回的数据是中立的，就是说模型与数据格式无关，这样一个模型能为多个视图提供数据，由于应用于模型的代码只需写一次就可以被多个视图重用，所以增加了代码的重复性。 控制器接受用户的输入并调用模型和视图去完成用户的需求，所以当单击Web页面中的超链接和发送HTML表单时，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。 优点：1.耦合性低 视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码，同样，一个应用的业务流程或者业务规则的改变只需要改动MVC的模型层即可。因为模型与控制器和视图相分离，所以很容易改变应用程序的数据层和业务规则。模型是自包含的，并且与控制器和视图相分离，所以很容易改变应用程序的数据层和业务规则。如果把数据库从MySQL移植到Oracle，或者改变基于RDBMS数据源到LDAP，只需改变模型即可。一旦正确的实现了模型，不管数据来自数据库或是LDAP服务器，视图将会正确的显示它们。由于运用MVC的应用程序的三个部件是相互独立，改变其中一个不会影响其它两个，所以依据这种设计思想能构造良好的松耦合的构件。 2.重用性高 随着技术的不断进步，现在需要用越来越多的方式来访问应用程序。MVC模式允许使用各种不同样式的视图来访问同一个服务器端的代码，因为多个视图能共享一个模型，它包括任何WEB(HTTP)浏览器或者无线浏览器(wap)，比如，用户可以通过电脑也可通过手机来订购某样产品，虽然订购的方式不一样，但处理订购产品的方式是一样的。由于模型返回的数据没有进行格式化，所以同样的构件能被不同的界面使用。例如，很多数据可能用HTML来表示，但是也有可能用WAP来表示，而这些表示所需要的命令是改变视图层的实现方式，而控制层和模型层无需做任何改变。由于已经将数据和业务规则从表示层分开，所以可以最大化的重用代码了。模型也有状态管理和数据持久性处理的功能，例如，基于会话的购物车和电子商务过程也能被Flash网站或者无线联网的应用程序所重用。 3.生命周期成本低 4.部署快 5.可维护性高 6.有利于软件工程化管理 由于不同的层各司其职，每一层不同的应用具有某些相同的特征，有利于通过工程化、工具化管理程序代码。控制器也提供了一个好处，就是可以使用控制器来联接不同的模型和视图去完成用户的需求，这样控制器可以为构造应用程序提供强有力的手段。给定一些可重用的模型和视图，控制器可以根据用户的需求选择模型进行处理，然后选择视图将处理结果显示给用户。缺点：1.没有明确的定义 2.不适合小型，中等规模的应用程序 3.增加系统结构和实现的复杂性 4.视图与控制器间的过于紧密的连接 5.视图对模型数据的低效率访问 6.一般高级的界面工具或构造器不支持模式 第三章 详细设计 3.1 性能分析 音乐网站可以说是音乐的专场，在这里人们可以搜索其他用户上传的并且自己喜欢的音乐，也可进行音乐的下载，这样能使其他用户更加深刻的了解其他用户对这首歌的感想。从而让人们在本音乐网站中能够更快找到自己喜欢的音乐，既省时又省事还省力。 3.2 功能分析 本音乐网站系统主要有两部分组成：前台管理模块和后台管理模可以查看音乐、上传音乐，还可以将自己喜欢的音乐添加到音乐盒。而管理员登录后，不仅可以管理音乐，还可以查看用户的信息，对用户进行一系列的操作等。对于未注册的用户可以浏览网站的主页以及浏览歌曲信息。 3.3 系统架构 音乐网站分前台管理和后台管理两大模块。并根据两大模块的功能，设计出了网站的总体架构模型：(附图如下) 其中，前台管理模块分为：首页、音乐盒、注册、登录 后台管理模块分为：音乐管理、用户管理 3.4 系统功能设计 3.4.1 前台功能设计 （1）首页：在这里简单展示网站的内容，未注册的普通用户可进行浏览。 （2）注册：普通用户可以注册，注册成功后可享受本网站的所有信息资料，也可以下载音乐，并且可以将喜欢的音乐添加到音乐盒。 （3）音乐盒：在这里用户可以对网站里的音乐进行试听，并将自己喜欢的音乐添加到音乐盒中。 （4）登录：已注册的用户可直接选择本模块进行登录享受所有功能。 3.4.2 后台功能设计 （1）用户管理：管理员通过登陆后可对已注册的用户进行修改和删除。同时可查看用户信息。 （2）音乐管理：可以增加音乐，对一些不满意的音乐也可以进行删除，查看音乐的相关信息。 3.5 数据库设计 音乐网站系统是提供给用户音乐信息，并对音乐信息进行管理的系统，数据库是该系统的核心和基础，并将系统中的信息按照特定的模型组织起来，使系统可以方便的获取所需信息。同样，数据库设计更是整个系统应用的根基，是软件设计的起点，起着决定性的质变作用。 （1）user表：专门存储在本网站注册的用户，方便用户的下次登录。包括用户编号（id）、用户名（username）、用户密码（pwd）、用户性别（sex）。 （2）music表：专门存储用户上传的音乐。包括音乐编号（id）、歌曲名（musicname）、作者（writername）、歌曲类别（kind）、歌曲文件（mfile）。 （3）list表：用来存储用户的播放列表。包括歌曲编号（id）、歌曲名（i_name）、作者（w_name）。 （4）message表：用来存储用户评论。包括编号（id）、评论（message）。第4章 系统实现 整个音乐网站的设计丰富多彩，功能界面模块清晰，使得用户在体验过程中更快的了解本网站的内容和功能，借此来提高用户对于音乐网站的喜爱 4.1 用户注册 用户可以在本网站注册、填写相关的信息。并且注册成功后可浏览本网站的所有音乐信息。 如图4.1 该功能实现代码如下： 用户在注册后会提交到一个用于添加到数据库的servlet中，以便后台管理员进行对用户的修改等操作。注册首页     登录Hi,欢迎注册，尽享更多优惠服务您所提供的资料不会做其他用途，请安心填写!设置昵称:设置密码：请再次输入密码：性别：男 女     function save() var id_pwd=document.getElementById(pwd).value; var id_repwd=document.getElementById(repwd).value; if(id_pwd=id_repwd) document.getElementById(regform).submit(); else document.getElementById(msg).innerHTML=密码不一致; return; 4.2 首页 用户在首页可以进行歌曲的搜索，可以进行登录、注册，并且未注册的用户还可以直接在本页进行浏览。 如图4.2 4.3 音乐盒该功能主要是实现已注册的用户将自己喜欢的音乐上传到音乐网站的功能，并且可对其他用户上传的音乐进行试听以及评论。如图4.3实现评论功能代码如下：/将用户所填评论提交到数据库中String message=request.getParameter(message); Connection conn = jdbcTools.getConn(); String sql = insert into message(message)values(?); PreparedStatement ps=conn.prepareStatement(sql); ps.setString(1, message); int i=ps.executeUpdate(); if(i0) response.sendRedirect(./f/ShowMsgServlet); else response.sendRedirect(link/message.jsp); 同时还可以通过定义一个ShowMsgServlet.java进行数据库查询并在页面显示出来方便用户查看。 4.4 播放列表如图4.4实现播放的主要代码如下：该代码通过object标签包含音频对象，通过embed标签来定义嵌入的歌词和音频对象。var scrollt=0;var tflag=0;/存放时间和歌词的数组的下标var lytext=new Array();/放存汉字的歌词var lytime=new Array();/存放时间var delay=10;var line=0;var scrollh=0;function getLy()/取得歌词var ly=00:0021个人.00:10制作:小黑.00:20歌手:游鸿明.02:0200:24没想到是你.00:29看着，想着，说着失去.02:1200:35想结束关系，又觉得可惜.02:2000:44你红着双眼，试着，做着，想着改变. 02:3000:54但激情沉淀，结局更明显.02:4101:04我看过温柔凋萎.02:4601:09也听过诺言. 02:4801:11似玻璃破碎.02:5001:14我看过情人憔悴.02:5601:19就好像刺猬为分离流泪. 03:0001:23伤心人负心人.03:0301:26天下人痴情人.03:0501:28只要是被伤心的人喝一杯. 01:33自已人爱别人.01:36什么人狠心人.01:38不要再等,喝醉的灵魂.03:4601:45music. 02:06谈著想著说著失去.03:10自已人爱别人.03:12什么人狠心人.03:15不要再等.03:18喝醉的灵魂. 03:5603:23多情人无心人.03:5903:25无情人多伤人.04:0103:28只要是被伤心的人喝一杯. 04:0603:32有心人无缘人.04:0803:34有缘人断肠人.04:1103:37何必再问新人换旧人. 04:20music again.return ly;function show(t)/显示歌词var div1=document.getElementById(lyr);/取得层document.getElementById(lyr).innerHTML= ;/每次调用清空以前的一次if(tlytimelytime.length-1)/先舍弃数组的最后一个for(var k=0;klytext.length;k+)if(lytimek=t&tlytimek+1)scrollh=k*25;/让当前的滚动条的顶部改变一行的高度div1.innerHTML+=+lytextk+;else if(tlytimelytime.length-1)/数组的最后一个要舍弃div1.innerHTML+=lytextk+;else/加上数组的最后一个for(var j=0;jlytext.length-1;j+)div1.innerHTML+=lytextj+;div1.innerHTML+=+lytextlytext.length-1+;function scrollBar()/设置滚动条的滚动if(document.getElementById(lyr).scrollTop=scrollh+50)document.getElementById(lyr).scrollTop-=1;window.setTimeout(scrollBar(),delay);function getReady()/在显示歌词前做好准备工作var ly=getLy();/得到歌词/alert(ly);var arrly=ly.split(.);/转化成数组for(var i=0;iarrly.length;i+)sToArray(arrlyi);sortAr();/*for(var j=0;jlytext.length;j+)document.getElementById(lyr).innerHTML+=lytimej+lytextj+;*/scrollBar();function sToArray(str)/解析如“02:0200:24没想到是你”的字符串前放入数组var left=0;/的个数var leftAr=new Array();for(var k=0;kstr.length;k+)if(str.charAt(k)=)leftArleft=k;left+;if(left!=0)for(var i=0;ileftAr.length;i+)lytexttflag=str.substring(str.lastIndexOf()+1);/放歌词lytimetflag=conSeconds(str.substring(leftAri+1,leftAri+6);/放时间tflag+;/alert(str.substring(leftAr0+1,leftAr0+6);function sortAr()/按时间重新排序时间和歌词的数组var temp=null;var temp1=null;for(var k=0;klytime.length;k+)for(var j=0;jlytimej+1)temp=lytimej;temp1=lytextj;lytimej=lytimej+1;lytextj=lytextj+1;lytimej+1=temp;lytextj+1=temp1;function conSeconds(t)/把形如：01：25的时间转化成秒；var m=t.substring(0,t.indexOf(:);var s=t.substring(t.indexOf(:)+1);s=parseInt(s.replace(/b(0+)/gi,);if(isNaN(s)s=0;var totalt=parseInt(m)*60+s;/alert(parseInt(s.replace(/b(0+)/gi,);if(isNaN(totalt)return 0;return totalt;function getSeconds()/得到当前播放器播放位置的时间var t=getPosition();t=t.toString();/数字转换成字符串var s=t.substring(0,t.lastIndexOf(.);/得到当前的秒/alert(s);return s;function getPosition()/返回当前播放的时间位置var mm=document.getElementById(MediaPlayer1);/var mmt=;/alert(mmt);return mm.CurrentPosition;function mPlay()/开始播放var ms=parseInt(getSeconds();if(isNaN(ms)show(0);elseshow(ms);window.setTimeout(mPlay(),100)window.setTimeout(mPlay(),100)function test()/测试使用，alert(lytimelytime.length-1);歌词加载中 第五章 系统测试 5.1 测试用例和测试结果 5.1.1 测试用例 1.通过用户名：cc 密码：22进行登录 2.登陆后进行歌曲上传，试听歌曲，进入评论区留言 3.搜索歌曲名：aa，并将歌曲加入到播放列表 5.1.2 测试结果 1.登录成功 2.上传成功，留言成功 3.搜索成功，加入播放列表成功第六章 总结毕业设计即将结束，在老师和同学的帮助下，我顺利的完成了音乐网站的设计，在这段时间里，虽然遇到了很多难题和挑战，但也在解决他们的过程中提高了自己的能力，并且锻炼了自己的实际操作能力。这也是对我们大学四年所学知识的一个综合的训练及考核，是对所学知识的应用能力和大学所学理论知识对实践技能相结合的全面的检验。并对我们如何根据要做的课题对现有的资料进行理解和运用的能力的考核。真正做到了理论联系实际，把以前所学的知识综合贯通进行实践，并在实践中不断学习和自我完善。 从刚确定毕业设计课题以来，我首先是查找一些相关的书籍及资料，然后分析设计，并根据实际情况拟定设计方案，从而达到优化方案。在研究系统设计时，我写了系统概要，这就省