基于web在线音乐网站的设计与实现Word文档下载推荐.docx

1、This article mainly discusses the development process of online music website, system structure, system function design of the site to do a more comprehensive description of the integrated use of knowledge in this system, web interface to the JS page as the carrier, background database using Mysql,

2、starting from the practical, make the page has the characteristics of easy operation, simple page.Key words: music website; The JS; The database1 绪论1.1 课题研究背景随着互联网在中国的发展，当今中国已经进入了信息时代，很多传统的信息传播都已经落后，网络成为了人们高效获取信息的必备选择，作为一个方便、快捷的信息传递方式被人们所青睐。而Web技术可以提供一个可以突破时空局限、交流各种信息的互动平台，让使用者不管在什么地方，只要有网络的存在，就能够共享

3、人们的集体智慧。为了满足人们对美好生活的向往，为我们的生活增添色彩，在线音乐网站应运而生，满足人们对各种音乐追求。在线音乐网站具有互动性、实时性、数字化早已成为人们娱乐的浪潮，通过网上查询信息、试听、下载CD的交易已成为一种时尚。因此，在线音乐网站的建设具有更加重要的意义，它提供更加便捷的交互式分享免费音乐，使人们能在线欣赏不同风格、不同国家的歌曲，实现资源共享。1.2 课题研究现状分析中国互联网络信息中心（CNNIC）在京发布第41次中国互联网络发展状况统计报告，截止2017年12月，我国网民规模达到7.72亿，普及率达到55.8%，超过全球水平（51.7%）4.1个百分点，在中国网民规模继

4、续保持稳点增长，互联网模式不断创新、线上线下服务融合加速以及公共服务线上化步伐加快，这表明，网络已成为一个主要的媒体，信息传输网络已涉及到每一个我们生活的角落，同时网络资源的获取已逐步改变人们以往的生活方式，随着全面建成小康社会的目标的实现，互联网也在逐渐普及，网民数量的增加，音乐网站在中国异军突起。人们通过互联网聆听喜欢的音乐，让人们闲暇之余进行休闲娱乐。1.3 课题研究目的本网站设计的目的是通过音乐网站提供人们搜索音乐，欣赏音乐，以及发表个人的想法，从而给个人带来方便，用户可以在浏览过程中，实现和本网站的信息交互，提供良好的用户体验。2 技术介绍2.1 HTML介绍HTML（Hyertex

5、tMarkulaguage），中文全名为超文本标记语言，是有W3C组织建立，现在已经发展到HTML5版本。HTML的工作原理：由W3C制定一套显示网页的标准，当打开一个网页，HTML代码会被浏览器解析成可视化界面，然后显示在浏览器上。纯HTML的网页界面很明显满足不了时代的发展，HTML常常使用div+css控制界面的样式、形状，这样提高了代码的使用率，减轻开发人员的负担，但是这样的网页是完全静止的，无法跟用户形成互动，所以需要加入JavaScript脚本语言实现动态网页，才能跟用户互动。本系统的前台大部分是采用HTML融合div+CSS的界面设计。2.2 Apache介绍Apache HTT

6、P Server（简称Apache），它是Apache软件基金会的开源web服务器，它可以在大多数计算机操作系统中运行。由于它的多个平台和安全性，它是最流行的Web服务器软件之一。它是快速、可靠的，并且可以通过简单的API扩展编译成Perl/Python和其他解释器到服务器。Apache web服务器,用你自己的语言的功能是接受用户的请求,如我们登录一个网站、浏览器发送请求到web服务器,Apache接受请求和访问数据,然后返回给用户，也就是说，就是你将网站放在上面架设好，外界就可以访问了。从功能上来说，有以下基本功能：基本网页、个人主页、虚拟主机、网页认证。2.3 MySQL介绍MySQL是

7、一种开放源代码的关系型数据库管理系统，因为它所具有的速度、可靠性、适应性而备受广大开发者使用。设计一个完整的数据库的过程需要经历数据库的建立、数据库的设计、数据库的组建、对数据库的调试和测试过程。数据库开发技术和软件系统开发是完全不同的。数据库的开发过程是一个综合了许多学科的技术，是一个研究和分析软件系统的数据结构和各种关系的过程。因此，数据库开发是一项非常重要的技术。数据库开发最重要的方面是研究数据库是否能够高效运行。在数据库的设计过程中，开发数据库是一套数据库设计规范。一般数据库的设计要求必须达到第三范式的标准。让数据库中的数据具有良好的结构，并在增加数据库数据的过程中产生非常少的冗余数据

8、。这个过程是为了确保设计的数据库是完整的、安全的和高效的，通过合理和出色地设计数据库表、视图、触发器和其他基本的数据库组件。3 架构设计本音乐网站由两部分组成，分别为前台管理模块和后台管理模块。用户在登录后可以看到最新上传的音乐，还可以搜索自己喜欢的音乐，查看添加评论。管理员登录后，可以查看用户上传的音乐，还可以对用户以及自己上传的音乐进行管理，对音乐进行增加和删除。3.1 系统功能模块设计图3-1 系统功能模块图3.1.1 前台功能模块描述：（1）注册、登录页面：游客通过填写相关的注册信息，完成注册后登录帐号和密码，以到达浏览网站的信息资料。（2）首页页面：在这里用户可以对本网站的信息进行浏

9、览，以及试听本网站的音乐和搜索自己想听的音乐。（3）音乐盒：用户在此模块可以进行试听音乐、留言评论以及把该音乐添加到收藏夹。3.1.2 后台功能模块描述：（1）登录页面：用来管理员登录管理网站。（2）用户管理：可以对注册过的用户进行删除。（3）音乐管理：对一些不合法的、不雅的音乐进行删除，也可以上传音乐。3.2 系统用例分析系统用例图用能直观表示网站用户和系统的交互过程，用例图能清楚的表示网站系统中的相应的功能。图3-2 用户用例图图3-3 管理员用例图3.3 系统功能流程图流程图用来表示以用户和管理员身份登录网站后对网站功能的应用。3.3.1 用户功能流程图会员身份通过注册、登录音乐网站，经

10、过数据库身份验证，验证成功后页面跳转到音乐网站主页，此时可以使用该网站为用户提供的功能，具体流程如下图所示：图3-4 用户操作流程图3.3.2 管理员功能流程图以管理员身份通过登录音乐网站后台，进入到功能页面，可以对会员用户以及音乐进行管理，具体流程如下图所示：图3-5 管理员操作流程图3.4 数据库设计在网站系统的设计中，数据库的设计占着重中之重的作用，关系着用户信息、音乐信息的存取。网站要做到动态显示，数据库就必须做到完善，一个好的数据库的创立也方便了后期对网站进行管理。3.4.1 数据库设计概述数据库旨在满足用户的需求，在使用者所提供的应用程序环境中，构造出最适合使用者操作的数据库模式，

11、并建立了数据库。为数据库应用程序开发人员提供了计算机信息交流的关键信息存储机制，也就是，作为数据库管理系统，系统软件和相关硬件系统来使用，该用户的要求将被计算机翻译成对应的数据结构，数据库结构容易实现为新进程的用户需求。而用于特定的应用环境数据库设计和提供一种数据模型，并确定了数据库存储结构的物理设计和访问方法，将用户的需求在数据库中用数据结构体现出来，在通过创建主键外键，增加表之间的约束关联，使整个数据库串联起来，用户的需求就能通过数据库得到相应的回应。数据库设计总的E-R图如下所示：图3-6 系统E-R图3.4.2 数据库表根据网站需求，创建了音乐信息表、音乐分类表、评论表、用户信息表、管

12、理员信息数据库结构表，具体结构如下所示：图3-7 tp_albumart（音乐信息表）图3-8 tp_cate（音乐分类表）图3-9 tp_comment（评论表）图3-10 tp_member（用户信息表）图3-11 tp_user（管理员信息表）4 网站系统实现在21世纪，越来越多网站的横空出世，给我们带来了不同的体验，而最终能被消费者所认可的还是简洁的界面、功能齐全的网站，所以本网站界面采用了相对简单的界面给用户一种简洁的体验感。本网站利用JS代码编辑前端网页，实现UI设计，系统采用PHP+MYSQL实现，采用了ThinkPHP框架，使用html5自带的audio实现了音乐的播放，网页布

13、局中的页面跳转按钮能实现跳转，通过PHPStudy启动Apache服务器，利用Navicat for MySQL建立数据库表，创建表主键，完成数据库与前端网页的连接，形成动态的网页。4.1 网站首页首页为我们展示了音乐大厅界面，顶部为用户提供了搜索框，通过用户在输入框里面输入要搜索的内容，将内容传递到后台与数据的字段值相匹配，如有相似的结果，则返回至前端，展示给用户，为用户提供更加快捷的搜寻音乐，右上方为登录注册按钮，用户可以通过点击进入到登录界面和注册界面，首页中心很直观的展示了最新上传的音乐，方便用户收听到实时更新的音乐，首页最下面为用户提供的是音乐分类模块，具体效果图如下图所示：图4-1

14、 网站首页4.2 用户模块4.2.1 用户注册、登录游客通过注册功能注册成为了一名会员，即可使用会员的相关功能。会员一旦注册成功，在后台数据库里面就存储了会员的相关信息。当下次会员在登录系统时，就能方便快捷的使用系统了。用户注册页面提供了用户名、密码以及重复密码三个必填框，用户填写完毕，点击注册后，如果该用户名已被占用，则会返回到注册页面，重新注册，如果此用户名没有被占用，则会跳转到登录界面，用户登录刚刚注册的帐号则可跳转到网页首页,具体效果如下图所示：图4-2 用户注册、登录4.2.2 音乐试听当在首页点击一首歌曲时，页面便会跳转到音乐试听界面，该页面为用户展示了歌曲基本信息，如：专辑图片、

15、演唱者、歌曲名、语种以及播放进度，还提供了添加收藏和参与评论功能模块，添加收藏后在该页面右边显示收藏列表，参与评论后评论内容会在页面下方显示。具体效果如图4-3所示：图4-3 音乐试听4.2.3 个人中心个人中心主页面展示的是自己的收藏音乐，左边栏目提供了查看歌曲列表、添加歌曲、专辑列表、收藏列表等模块，点击右上角头像下拉选项会有网站首页、更改资料、更改密码、注销功能按钮。页面如图5.6所示：图4-4 个人中心4.2.4 添加歌曲添加歌曲界面要求用户上传mp3格式的音乐，填写上传歌曲的音乐类别、歌曲名、专辑、歌曲标签以及勾选评论开关、下载开关，上传音乐海报专辑图以及海报名和图片描述。效果图如下

16、图所示：图4-5 添加歌曲4.2.5 修改资料该模块为用户提供了修改昵称和电子邮箱，但用户名不能修改。效果如下图所示：图4-6 修改资料4.2.6 更改密码用户通过填写原密码、新密码和确认密码完成密码更改，当原始密码不正确和新密码、确认密码不一致时，密码更改失败，页面跳转到个人中心页面；当原始密码正确，新密码和确认密码一致时，密码更改成功，页面跳转到用户登录页面。具体效果图如下图所示：图4-7 更改密码4.3 管理员模块4.3.1 后台首页管理员管理系统，是通过权限控制来实现的，在系统的构建过程中，将权限分配给管理员。由于管理员帐号的特殊性，管理员帐号不能随意修改信息，所以帐号只有退出。通过登

17、录管理员帐号后跳转到后台首页，在快捷菜单有后台首页、添加歌曲、会员管理；菜单管理有音乐管理和数据管理；具体效果如下所示：图4-8 后台首页4.3.2 会员管理点击会员管理可以查看会员名称，注册时间，可以启用禁用状态。通过搜索栏可以查找相应的会员，管理员可以对不合法的会员启用禁用。具体效果如下图所示：图4-9 会员管理4.3.3 音乐管理管理员可以查看上传的音乐，通过搜索栏搜索音乐，如音乐基本信息有误，可以对音乐基本信息进行编辑，同时也能对不合法的音乐进行删除。由于用户模块已经对添加歌曲模块进行了展示，所以在后台管理员模块就不在展示，系统里面，添加音乐 采用的是本地音乐上传。将本地音乐上传至云端

18、，以后这首音乐就属于自己的版权来了。技术方面 采用了ThinkPHP的upload这个类，这个类专门处理文件的上传操作。我们将信息传递给系统，系统处理以后，就存储到数据库。这样添加音乐就成功了。具体效果如图所示：图4-10 音乐管理4.3.4 数据管理数据管理有两个选项：专辑管理和榜单管理。专辑管理中可以看到首页页面展示的音乐中的专辑名、歌手以及添加时间，同时可以对专辑进行编辑和删除，修改专辑名称和添加新的专辑；图4-11 音乐管理榜单管理有添加榜单栏目和已经有了的榜单名称，管理员可以输入新的榜单名称，将信息传递给后台，系统后台将信息存储，展示到首页页面，可以对榜单进行编辑、添加和删除。图4-

19、12 榜单管理总结毕业论文就要告一段落了，这次毕业论文的撰写最大的难度还是在于书本知识与实际操作的结合，在早期没有对论文有个具体的规划，造成了时间花去很多，但是论文还是搞的一头雾水，在后面论文项目需求分析的出炉，慢慢的论文的基本结构框架就出来了，经过一系列的工作，项目网站的基本框架建立，到网站前端网页的设计，到后面的数据库设计与实现，再到连接数据库，理论与实际相结合的模式，不仅让我重温了本科专业知识，还收获许多程序设计的经验。通过这次论文设计，也培养了我独立自主的能力，但由于欠缺对网站建立的经验，网站系统还是不够完善，主要体现在以下方面：1.在UI前端网页排版设计中，缺乏画画功底，色彩的搭配以及排版还存在着不足，要努力补缺这方面的知识。2.系统功能还不够全面，虽说目前网站系统已经实现了很多功能，但面对广大的用户，系统的功能还应该不断提高，需要和广大的用户以及时代的发展联系起来，才能得到更多用户的肯定，这才是本网站设计的意义所在。