音乐网站设计与实现论文

1、JIU JIANG UNIVERSITY毕 业 论 文 题 目 音乐网站的设计与实现 英文题目The Design and Implementation of Music Website 院 系 信息科学与技术学院 专 业 计算机科学与技术 姓 名 班级学号 4 指导教师 二一五年五月信息科学与技术学院学士学位论文摘 要网络音乐巨大的潜在市场，带动了国内在线音乐的飞速发展，像百度、腾讯、豆瓣、酷狗等公司都研发了自己的在线音乐网站。同时也有很多小型音乐网站如雨后春笋般出现。但是很多的音乐网站在很多方面的设计都不合理和安全，例如架构不合理，性能低下，而且投放了大量的广告，界面设计烂，下载收费贵，用

2、户体验差，导致整个网站系统运营质量很低。 系统阐述的是一个在线音乐网站的设计与实现。经过对现有的在线音乐网站仔细认真的分析和对比，以及自己对在线音乐网站的体验和感受，得出了本音乐网站的功能需求。根据系统需求，系统采用APACHE2.2作为服务器，Mysql数据库做数据平台，并选择PHP语言开发后台服务系统。前台主要使用HTML5，CSS3，Javascript，Ajax等技术，Ajax主要用于网页中的页面特效和异步通信。系统采用MVC架构，将系统分为数据层，视图层，业务逻辑层三层来开发与实现。这样将三层独立开发，有利于维护和效率。系统大体上分为两个模块，分别为前台用户模块和后台管理员管理模块。

3、在安全上，系统在有敏感信息的传送上都使用了单向加密，以及采用了防SQL注入技术。关键词：音乐网站，在线试听，异步通信AbstractNetwork Music huge potential market, led the rapid development of the domestic online music, like Baidu, Tencent, watercress, cool dog and other companies have developed their own online music sites. There are also many small music si

4、tes have sprung up. But many music sites in many aspects of the design are unreasonable and safety, such as unreasonable structure, poor performance, but also put a lot of advertising, bad interface design, download charges you, the user experience is poor, resulting in the quality of the entire sit

5、e system operators are low.Systematically expounded the design and implementation of an online music site. After the existing online music sites are carefully analyzed and compared, as well as its own online music site experience and feelings come to the functional requirements of the music sites. A

6、ccording to the system requirements, the system uses APACHE2.2 as a server, Mysql database platform for data and select the PHP language development background service system. Reception main use HTML5, CSS3, Javascript, Ajax and other technologies, Ajax is mainly used for special effects and asynchr

7、onous communication web page in.The system uses MVC architecture, the system is divided into data layer, view layer, business logic to the development and realization of three. This will triple the independent development is conducive to safeguarding and efficiency.System is generally divided into t

8、wo modules, each module for the front and back-office administrator user management module. In security, the system has sensitive information transmitted on the use of one-way encryption, and the use of anti-SQL injection technique.Keywords: Music Website, Online Listening, Asynchronous Communicatio

9、n目 录摘 要IAbstractII1 绪论1.1研究的背景(1)1.2 研究的意义(1)1.3 国内外研究现状(2)1.4 研究的内容(3)1.5 内容创新点(3)1.6 论文结构(4)2 需求分析2.1业务流程分析(5)2.2 系统功能需求分析(6)2.3 数据流分析(7)2.4 用例图分析(10)2.5 系统性能需求(11)2.6 系统设计方案(12)2.7 本章小结(12)3 系统总体设计3.1 系统结构设计(13)3.2 系统功能设计(13)3.3 系统数据库设计(15)3.4 本章小结(16)4 详细设计与实现4.1 系统开发环境(17)4.2 前台功能模块的详细设计与实现(18)

10、4.3 后台管理功能模块的详细设计与实现(31)4.4 网站界面的设计(40)4.5 数据库详细设计(44)4.6 本章小结(53)5 系统运行与测试5.1 测试方法简介(54)5.2 测试环境(54)5.3 功能测试(54)5.4 本章小结(58)6 总结与展望6.1 全文工作总结(59)6.2 下一步工作展望(59)致 谢(61)参考文献(62)661 绪论1.1研究的背景 随着互联网技术的高速发展和网络带宽不断的增加，在线音乐产业的发展非常的迅速。特别是最近的几年，在线音乐产业规模翻了几番。根据艾瑞网的调研结果显示，2003年中国在线音乐市场规模为1300万元，2010年达到了2.8亿元

11、，2014年更是飙升到了将近50亿元。中国在线音乐产业蒸蒸日上，潜在价值巨大，它的高速发展，改变了传统音乐的产业结构。在线音乐网站的兴起使得人们欣赏音乐的方式和载体发生了巨大的变化，突破了时间和空间的限制。在中国，传统唱片业不能满足有音乐需求的消费者。与传统音乐欣赏和交流模式相比，在线音乐网站有着非常大的优势，不仅可以满足绝大部分用户的音乐需求，还会刺激一些电子数码产品的更新换代。在线音乐网站作为音乐的网络载体，对音乐的发展起到了深远的影响，特别是在音乐的传播，欣赏，创作等方面。在线音乐网站使得音乐版权人的收入得到增加，提升音乐创作人的创作激情，有利于草根音乐人。同时，在线音乐网站加快了经典流

12、行音乐的传播，改变了我们欣赏音乐的方式。1.2 研究的意义中国在线音乐的好时代正在接近。中国传媒大学和国家音乐产业促进工作委员会联合发布的2014中国音乐产业发展报告认为，2013年中国在线音乐市场规模达43.6亿元。由此可以看出，中国在线音乐市场潜力是巨大的。在线音乐网站对音乐用户和音乐创作人带来的便利是确定的，音乐用户不再需要去买唱片和音乐播放器，以及音乐软件客户端也不需要安装，就可以享受到高品质的音乐和满足自己的音乐需要。音乐创作人可以借助在线音乐网站平台，不需要唱片公司签约合作，便可以发布自己创作的音乐，这对于部分音乐人来说是非常重要的，不但可以增加自己的收入，同时自己的创作思维会不受

13、限制因此本系统这样一个在线音乐网站的设计与实现有了很大的必要。1.3 国内外研究现状1.3.1 国外研究现状据美国唱片行业协会（RIAA）表示，在2007年只占全美音乐市场3%的在线音乐服务现如今已占到了该市场的21%。借助于美国良好的音乐版权保护和Pandora、iTunes Radio、Rhapsody、Spotify等公司的努力，美国音乐市场从2009年至今一直维持在70亿美元左右的规模。在线音乐服务达到了14亿美元，同比上升了39%。在所有的数字音乐格式中，像Spotify、Rdio和Beats Music这样的付费式订阅服务的增长速度最快，在2013年达到了6.28亿美元，同比增长5

14、7%。而像iTunes那样的提供永久数字下载服务的营收则下滑了1%，降至28亿美元。苹果iTunes平台模式使得苹果一直领跑在线音乐市场。1.3.2 国内研究现状中国音乐产业没能像欧美国家一样经历时间的洗礼，短短十几年的时间，音乐产业在成长初期就碰上了野蛮的互联网，“避风港”原则也让音乐版权一度处于架空的状态。但随着近年来的发展，音乐产业逻辑开始清晰，监管层的法律也慢慢完善，大公司和资本密集进入也让音乐版权的价值开始不断提升。2014年7月，阿里收购虾米，并成功争夺中国好声音独家音乐版权；9月，QQ音乐与杰威尔音乐、华研国际、英皇娱乐、美妙音乐、华谊兄弟音乐等唱片公司达成进驻合作协议，并在移动

15、端新增了独家版块。版权成本不断提高的同时，中国在线音乐的商业模式也在尝试一些新的改变。像腾讯、阿里、网易等，都是大部分音乐向用户免费、增值服务（比如更高的音质等）收费。增值服务收费的做法会比直接针对音乐作品收费更令用户容易接受，但这样的收入增长速度可能并不是非常明显。2013年中国数字音乐市场规模达440.7亿元，其中无线音乐市场规模达397.1亿元，在线音乐市场规模达43.6亿元。2013年数字音乐用户达4.53亿人以上。数字音乐的传播、消费、体验模式日新月异，具有巨大的市场发展潜力。中国在线音乐市场发展趋势非常良好，国内的很多音乐网站也是发展速度，比如QQ音乐，百度音乐，酷狗音乐，音悦台，

16、豆瓣音乐等，它们都提供着高品质的音乐服务。但是这当中也存在着很多的问题。比如版权问题，文化安全问题，政府管理问题等。其中版权问题是中国在线音乐产业发展道路上最大的绊脚石，亟需解决。在良好的版权保护下，在线音乐产业才能发展的更好更快，音乐人的创作动力也会得到巨大的提升。1.4 研究的内容（1）本在线音乐网站，是基于Apache2.2+Mysql5.5+Php5来开发的。Apache2.2作为系统服务器，Mysql5.5作为数据平台，使用PHP语言编写后台服务程序。（2）系统最核心的任务为注册用户提供音乐在线播放服务。（3）系统主要分为两个大模块，分别为前台用户模块和后台管理员管理模块（4）用户前

17、台模块主要为用户提供音乐在线试听，歌曲描述搜索，用户主页，歌曲分享，绑定社交网站等功能。（5）后台管理员管理模块主要为管理员提供歌曲管理，歌手管理，歌词管理，专辑管理，音乐录像带管理，会员管理，管理员管理等功能，以及集成了个人设置，天气，邮件发送，锁屏等辅助功能。1.5 内容创新点系统在做到功能全面的同时，亦要考虑系统的安全性，运行速度，稳定性等问题。本系统在设计与实现时都做出了很多创新点。主要分为以下几点：（1）在所有涉及敏感信息的传输上都使用了单向加密，并采用了防SQL注入技术和防XSS脚本攻击技术。（2）系统的开发采用三层架构，将系统分为数据层，视图层，业务逻辑层三层来开发实现，这样对于

18、后期的维护提供很大的方便。（3）系统在界面设计和交互特效上，采用HTML5，CSS3，JAVASCRIPT，AJAX等技术，使得界面大气清新，动画优美，用户体验非常好。AJAX主要用来实现系统的异步通信，静态更新。1.6 论文结构第一章：阐述本在线音乐网站系统的研究背景，意义和内容，介绍了在线音乐网站国内外研究的现状以及本系统的创新之处。第二章：系统需求分析，分析系统的功能需求，性能需求等，包括用户前台和管理员后台两个大模块，以及每个模块的子模块的功能需求，并分析了系统的数据流。第三章：阐述系统的总体设计，首先叙述了系统结构的设计，给出了系统的架构图。然后从功能方面，将整个系统分为用户前台和后

19、台管理两个模块。简单介绍了数据库的设计。第四章：详细阐述了系统前后台各个子模块的设计与实现，设计了需要用到的算法，画出了它们的程序流程图，根据前面给出的需求分析和系统设计，利用三层开发模式对系统进行开发和实现，并详细叙述了每一层的实现过程，即数据层，业务逻辑层，视图层的开发过程。阐述了系统数据库的设计，画出了系统所需的所有表结构和表的属性图，以及给出了系统的总体E-R图。第五章：描述了系统的测试，并给出了测试结果。并用图片和数据对系统的实现进行了分析和评估。第六章：对论文的工作进行总结和评价，指出了系统中存在的不足与缺陷。以及这次设计的收获与心得。最后是介绍致谢与参考文献等内容。2 需求分析需

20、求分析就是确定用户的需要，然后根据用户的需要确定软件系统的功能。需求分析是软件工程中的关键过程，只有先做好需求的分析，了解业务以后的发展趋势，做好具有拓展性的系统设计，才会给系统更大的扩展空间，从而在需求发生变化的时候可以更从容的修改。本在线音乐网站，为用户提供优质的在线音乐试听服务。普通用户注册成为会员后，除了试听高音质的音乐外，还可以收藏喜爱的歌曲和歌手专辑，分享音乐给朋友或者其他用户，搜索或过滤音乐等等。管理员可以管理网站的各种资源，如音乐，专辑信息，用户信息等。2.1业务流程分析Business Process Analysis（BPA），即业务流程分析，是对业务功能分析的进一步细化，

21、从而得到业务流程图。业务流程图（transaction flow diagram，简称TFD)，就是用一些规定的符号及连线来表示某个具体业务处理过程。业务流程图的绘制基本上按照业务的实际处理步骤和过程绘制。换句话说，就是“文本”用图形方式来反映实际业务处理过程的“流水账”。本在线音乐网站的业务流程：未注册用户进入本网站后，需要先进行注册成为本站会员，从而登录本网站，或者未注册的用户可以直接使用自己的社交网站的帐号登录，例如腾讯微博，QQ，新浪微博，人人网等，然后系统会自动记录用户的唯一标识OPENID。用户登陆后进入网站首页界面，接着便可以进行歌曲试听，歌曲搜索，修改个人信息，收藏歌曲等操作。

22、管理员登陆时，首先进入管理员登录界面，然后输入有效帐号和密码，进入到后台管理主界面。然后管理员可以对用户、歌曲、歌手、专辑等进行管理，比如修改用户信息，删除用户，添加用户，上传歌曲，添加MV（Music Video，音乐录像带），删除歌词等。此外管理员还可以修改自己的信息，进行个人的界面爱好设置，查看系统概况，查看天气。由以上的业务流程分析，从而得出系统业务流程图，如图2-1所示。图2-1 系统业务流程图2.2 系统功能需求分析2.2.1 前台功能需求（1）歌曲播放，注册用户可以使用该子模块试听最新最酷的高品质音乐。（2）歌曲搜索，用户可以通过输入歌曲名，歌手名或者一些自然语言描述来搜索自己想

23、要的音乐。搜索采用模糊和多字段搜索，从而返回较多信息。（3）个人中心，用户可以在此模块编辑个人信息，发布心情说说，设置界面风格等。此模块操作均采用Ajax异步通信，实施静态更新。（4）分享音乐，用户可以分享好的音乐给自己的朋友，但要先进行社交网络的绑定，比如腾讯QQ，新浪微博等。（5）音乐收藏，用户可以通过此模块来收藏自己喜欢的歌曲，系统会自动记录并保存。（6）排行榜模块，用户可以查看各大排行榜，并可以试听。2.2.2 后台管理功能需求管理员可以通过后台管理平台对系统的各种资源进行细致的管理，主要是歌曲，歌手，专辑，MV（Music Video，音乐录像带）等进行更新和上传。（1）管理员可以对

24、注册用户信息进行管理，可以查看用户信息，添加用户，删除用户，修改用户信息，但不能修改用户密码。（2）管理员可以管理歌曲，包括查看歌曲信息，上传歌曲，编辑歌曲信息，删除歌曲，在删除的同时将歌曲从硬盘也删除。（3）管理专辑，包括创建专辑，编辑专辑信息，删除专辑，删除专辑时不删除专辑中的歌曲。（4）管理歌手，管理员可以添加歌手，编辑歌手信息，以及删除歌手。（5）管理歌词，管理员可以上传歌曲的歌词，删除歌词，但不能编辑歌词。（6）管理员管理，拥有超级权限的管理员可以添加管理员，锁定管理员，删除管理员，修改管理员信息，但不能查看管理的密码。（7）系统概况，管理员可以通过此模块查看总的用户，歌曲，专辑，歌

25、手数量，以及服务器的资源使用情况。（8）MV管理，管理员可以查看MV的信息，上传MV，删除MV，编辑MV的信息，还可以预览MV。（9）个性设置和个人信息管理，管理员可以设置自己喜欢的界面风格，屏蔽主界面某些模块的显示，修改自己的个人信息，查看上次登录IP和时间。（10）辅助功能，管理员可以利用本系统发送邮件，查看当地天气情况。2.3 数据流分析数据流程分析主要包括对信息的流动、传递、处理、存储等的分析。数据流程分析的目的就是要发现和解决数据流通中的问题。现有的数据流程分析多是通过分层的数据流图（Data Flow Diagram，简称DFD）来实现的。数据流图在逻辑上描述系

26、统的功能，输入输出和数据存储等，是便于用户理解的系统数据流程的图形表示。通过前面对系统的业务流程分析可知整个网站系统的数据的流动情况，从而得到“ZMX|MUSIC”在线音乐网站的数据流程图，系统总体数据流图（顶层图）如图2-2所示。图2-2 系统总体数据流图（顶层图）2.3.1 系统一层数据流图根据顶层数据流图，对整个网站系统进行详细的分析描述，得到一层数据流图，如图2-3所示。图2-3 系统一层数据流图2.3.2 系统二层数据流图根据一层数据流图，对各个具体处理过程进行分析，得出部分模块的二层数据流图，如下所示。图2-4 音乐管理数据流图（第二层）图2-5 专辑管理数据流图（第二层）2.4

27、用例图分析用例图是被称为参与者的外部用户所能观察到的系统功能的模型图，呈现了一些参与者和一些用例，以及它们之间的关系，主要用于对系统、子系统或类的功能行为进行建模。通过前面对系统功能需求详细的分析，可得到本在线音乐网站的用例和参与者，从而得到系统的用例图。管理员用例图如图2-6所示。图2-6 管理员用例图会员用户用例图如2-7所示。图2-7 用户用例图2.5 系统性能需求（1）前台用户界面要求清新大气精美，对用户要有很强的吸引力。各个控件的放置位置合理，拟物按钮逼真且有文字提示。（2）网站系统运行速度要快，用户的体验感好。用户的体验感和停留在网站的时间取决于网站的运行速度。系统将采用静态页面和

28、AJAX来提升系统的运行速度。（3）网站的安全性要强，用户的敏感信息均采用Base64和MD5双重加密，力求保证用户信息的安全。2.6 系统设计方案本在线音乐网站将采用B/S架构来实现上面分析得到的功能和性能需求。B/S架构将主要的事务逻辑放在服务器端来实现，用户浏览器通过Web Server同数据库进行数据交互，这样大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本(TCO)。在系统开发上，采用三层开发模式来进行开发。数据访问层主要实现对数据库系统的访问，进行读取、保存和更新数据等操作。业务逻辑层用来实现视图层和数据访问层数据的传递和处理。视图层用来实现用户提

29、交数据的显示和接收，为用户提供交互式的界面。利用三层开发模式，将各个开发环节独立分开，利于系统的维护和开发，将不用受限与人员、时间、地点。2.7 本章小结本章主要阐述了整个系统的需求分析和开发方案。首先介绍了系统的业务流程，给出了系统业务流程图。接着说明了系统的功能需求和性能需求，功能需求主要包括前台功能需求和后台功能需求。然后简单分析了系统数据流程和用例图，并画出了系统相关数据流图和用例图。最后，分析整个系统的架构，并给出方案。3 系统总体设计系统分析设计是整个网站系统开发过程中非常重要的一步，一个详细全面的系统设计会给后续的代码编写的速度带来益处。3.1 系统结构设计“ZMX|MUSIC”

30、在线音乐网站采用三层开发设计模式，分为：用户界面层，业务逻辑层和数据访问层。用户界面层用来和用户交互，业务逻辑层负责业务的处理和各层之间的数据的传递；数据访问层负责对数据库的访问和检索。系统的结构图如图3-1所示。图3-1 系统结构图系统各层之间的调用过程如下：（1）用户通过用户界面层访问系统，向系统提交请求，界面层对请求进行初步的处理和包装，并判断是否要与业务逻辑层进行交互。（2）业务逻辑层接收来自界面层的请求，对请求进行数据处理。然后调用数据访问层来实现数据库访问，数据访问层访问数据库，将数据读出并返回给逻辑层。（3）逻辑层将处理的结果，返回给界面层。界面层加以处理呈现给用户。3.2 系统

31、功能设计3.2.1 前台用户功能设计由前面的需求分析可以得到系统的整体功能模块。系统功能模块主要分为前台用户功能模块和后台管理功能模块。前台功能模块图如图3-2所示。图3-2 前台用户功能模块图用户前台功能模块叙述：（1）音乐播放页功能：歌曲收藏，歌词查看，MV欣赏，歌曲循环播放，音量调节，歌曲切换。（2）用户主页功能：查看个人信息，修改个人信息，发布心情说说，设置界面风格。（3）歌曲搜索功能：可使用歌曲名，歌手名，专辑名，感情描述来搜索想要的歌曲。（4）用户注册与登录功能：未注册的用户可以填写用户注册表单然后提交注册成为本站会员，或者使用社交网络帐号实现登录。已注册的用户可以直接登录。（5）

32、分享音乐功能：登录用户可以分享好的音乐到自己的社交网络上，例如腾讯QQ，新浪微博等，但前提是需要绑定这些社交网络帐号。（6）绑定社交网络功能：登录用户可以绑定各大社交网络帐号，绑定完成后可以分享音乐给朋友，邀请好友来本站。3.2.2 后台管理功能设计由前面的后台管理功能需求分析，可得到后台管理功能模块图，如图3-3所示。图3-3 后台管理功能模块图后台管理模块功能叙述：（1）用户管理：查看所有用户，添加用户，编辑和删除用户。（2）歌曲管理：歌曲列表，上传歌曲，编辑和删除歌曲，试听歌曲。（3）歌手管理：歌手列表，歌手信息编辑，添加歌手。（4）专辑管理：专辑列表，添加专辑，删除专辑，查看该专辑歌曲

33、。（5）歌词管理：歌词列表，添加歌词，查看歌词，删除歌词。（6）MV管理：MV列表，MV观赏，删除MV。（7）系统维护：统计用户，歌曲，歌手，专辑，MV等总的数量，查看实时在线人数，管理歌曲标签，歌手地区等信息。（8）辅助功能：锁屏功能，邮件功能，天气功能。3.3 系统数据库设计数据库是本在线音乐网站的核心组成部分，所有的信息出来都是基于数据库来进行的，因此数据库的设计是整个系统设计过程中非常重要的。所以在性能，开放性，可靠性，稳定性，可操作性等因素考虑下，本网站系统选择MYSQL5.5作为数据库开发平台。本网站首先进行了概念结构设计，然后根据概念结构设计得出逻辑结构设计概念结构设计就是将需求

34、分析得到的系统需求抽象为信息结构的过程。E-R图是描述概念模型的有力工具，它用简单的图形方式描述世界中的数据。这种描述不涉及数据在数据库中的表示和存取方法，非常接近人的思维。逻辑结构设计就是将概念结构设计时得到的概念模型转换成逻辑模型的过程，也就是将E-R图中的实体、关系、属性转化为DBMS所支持的数据结构的过程。3.4 本章小结本章阐述了系统整体的设计。首先简单的讲述了系统的架构设计，画出了系统结构图，然后详细地说明了系统的功能设计，列出了每个子模块的功能，接着就是极为重要的数据库的设计。4 详细设计与实现详细设计就是对系统的各个功能模块详细设计的描述，给出详细设计的内容，画出设计阶段所用到

35、的相关图例，比如程序流程图、序列图等。系统实现是整个网站开发过程中不可缺少的一部分，根据前期的需求分析和设计，将网站一步一步以代码实现出来。4.1 系统开发环境本在线音乐网站采用Win7+Apache2.2+Mysql5.5+Php5的组合来进行开发，系统所有的功能都是基于此组合来实现的。之所以采用这四个软件，是因为Win7操作系统稳定快速且操作方便，其它三个软件都是开源免费又非常的稳定，因此可以搭建一个稳定，免费的在线音乐网站。本系统的前端界面是由HTML5，CSS3和JAVASCRIPT来实现，其中异步通信由AJAX来实现。首先简单介绍下这些技术的相关知识。（1）PHP，英文全称是Hype

36、rtext Preprocessor，超文本预处理器。它是一种开源的服务器端脚本语言，语言风格类似于C语言。PHP执行动态页面的速度非常的快，效率非常高，对面向对象的支持也很好，完全可以用来开发大型商业程序。（2）Mysql，是一个关系型数据库管理系统，采用标准化的SQL语言来进行数据库的访问，同时它的体积很小，执行速度快，源码开放，与PHP和APACHE搭配可以组成良好的开发环境。（3）Apache，是一种web服务器端软件，也是最流行的web服务器软件之一。它的特点就是简单、速度快、性能稳定，并可做代理服务器使用。与Nginx相比，Apache更稳定，bug少，rewrite技术更强，但是

37、性能低一些。（4）Ajax，即“Asynchronous Javascript And XML”，异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，实现网页局部刷新，异步调用等，用来增强网页特效。（5）CSS3，是CSS技术的升级版本，增加了动画属性，圆角边框，盒模型等。4.2 前台功能模块的详细设计与实现4.2.1 用户登录模块的设计与实现进入本网站首页，点击登录按钮，便会出现帐号和密码输入框，用户输入帐号和密码，然后点击提交按钮或者按下回车键，接着系统使用Javascript对用户输入的信息进行格式检查，如果格式正确则使用AJAX

38、异步提交给后台进行判断，如格式错误，则提示用户所填信息格式不对。后台接收用户的帐号和密码，并与数据库中的数据做对比，如果用户的帐号密码有效，则返回成功信息给前台AJAX，JS再将页面跳转到本网站主页，如果无效，则返回失败信息给前台AJAX，就会提示用户帐号名或者密码错误，让用户继续输入信息。另外用户也可以使用第三方社交网络帐号登录本网站，用户在网站首页点击社交网络图标，支持腾讯QQ，新浪微博，腾讯微博等，系统弹出用户授权窗口，用户输入自己第三方网络的帐号密码即可登录本网站。用户登录功能的实现是采用AJAX+PHP的方式来完成，该功能的顺序图如图4-1所示。图4-1 用户登录序列图用户登录模块的

39、程序流程图如图4-2所示。图4-2 用户登录模块程序流程图该功能的实现核心代码如下所示。/生成用户第二标识、令牌用于下次自动登录function generateToken($id,$salt,$usrName)/创建一个UsersDAO对象$userDAO = new UsersDAO();/生成一个标识$identifier = md5($salt.md5($usrName.$salt); /生成一个唯一的令牌$token = md5(uniqid(rand(),true); $timeout = time()+60*60*24*30;$userDAO->setUserIdentif

40、ierInfo($id,$identifier,$token,$timeout);return $identifier.':'.$token;用户登录功能实现的效果图如下所示。图4-3 帐号或密码错误图4-4 帐号密码有效图4-5 使用社交网络腾讯微博登录4.2.2 用户注册模块的设计与实现和登录模块一样，首先进入本网站首页，点击注册图标按钮便会出现用户注册表单。用户填写登录帐号，密码，性别，昵称等信息，然后点击注册按钮，系统会先判断用户填写的个人信息是否符合本网站要求的格式，如格式正确，则提交给后台，如果格式不对，就提醒用户填写的信息格式不正确。后台程序接收到前台传来的信息，

41、将其写入到数据库，并返回成功信息给前台。如果后台程序出现错误，则返回失败信息给前台，并附上具体的错误信息。前台收到返回的成功信息后，就将页面跳转到网站主页，如收到失败信息，则提示用户注册失败，并显示失败的原因。用户注册模块的程序流程图如图4-6所示。图4-6 用户注册模块程序流程图该功能的序列图如图4-7所示。图4-7 用户注册模块序列图该功能实现效果图如下所示。图4-8 帐号或密码格式错误图4-9 昵称被占用和注册成功4.2.3 歌曲搜索模块的设计与实现用户登录后在网站主页的搜索框中输入搜索关键字，比如歌曲名、歌手名、音乐标签等，点击提交，AJAX异步提交给系统后台进行检索，如找到了用户需要

42、的歌曲，则返回该歌曲的URL，如果该歌曲有歌词、MV等，就一并返回给前台，再由前台控制歌曲的播放，歌词的显示，MV的观看。如果没有找到用户需要的歌曲，则返回抱歉信息给用户。该模块的程序流程图如图4-10所示。图4-10 歌曲搜索模块程序流程图歌曲搜索功能的实现用到的序列图如图4-11所示。图4-11 歌曲搜索序列图该功能实现的核心代码如下。/将关键字异步提交给music_search.php$.ajax(url:'user_zmx/music_search.php',type:'post',dataType:'json',data:keyword

43、:kword ,success:function(retData,status)省略/歌曲检索语句$sql="select songs.songId from songs,songers,songtags,albums_songs languages,album,where songs.songTagId=songtags.songTagId and songs.songerid = songers.songerid and songs.lanid=languages.lanid and songs.songid=albums_songs.songid and albums_song

44、s.albumid=album.albumid and concat(songName,songerName,desc,albumName,tagContent) like '%$keyword%'"该功能实现的效果图如下所示。图4-12 歌曲搜索框图4-13 输入“夜曲”图4-14 播放夜曲4.2.4 歌曲分享模块的设计与实现本音乐网站的用户可以分享自己喜欢的音乐给朋友。用户只要点击网站主页上的分享按钮，便会呈现出分享界面，用户可以填写分享描述，然后选择一个用户所绑定的第三方社交网络图标，点击分享按钮，便可将歌曲分享到你的社交网络上。假如用户没有绑定社交网络，则不显

45、示分享页面，提示用户需要绑定社交网络。该模块的程序流程图如图4-15所示。图4-15 歌曲分享模块程序流程图该功能实现的核心代码如下所示。$params'content' = $shrCtt."4:520/share/$file.html"$ci=curl_init();curl_setopt($ci, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ci, CURLOPT_RETURNTRANSFER, 1);curl_setopt($ci, CURLOPT_CONNECTTIM

46、EOUT, 30);curl_setopt($ci, CURLOPT_TIMEOUT, 30);curl_setopt($ci, CURLOPT_POST, TRUE);curl_setopt($ci, CURLOPT_POSTFIELDS,http_build_query($params);curl_setopt($ci, CURLOPT_URL, $url);$response=curl_exec($ci);curl_close($ci);该功能实现效果如下所示。图4-16 歌曲分享界面图4-17 歌曲分享成功图4-18 点击分享中的网址出现的界面4.2.5 歌曲收藏模块的设计与实现用户登

47、录后可以收藏自己喜欢的音乐，下次登录便可以直接播放收藏的音乐。用户点击主页上的喜欢按钮，前台系统将此请求提交给后台，后台判断该用户是否已经收藏了该歌曲，如已收藏，则提示用户已收藏此歌曲，如果没有收藏，就将此歌曲写入到用户的歌曲收藏表中。歌曲收藏模块的程序流程图如图4-18所示。图4-19 歌曲收藏模块程序流程图该功能实现的核心代码如下所示。/Ajax将喜欢的歌曲提交给后台$.ajax(url: 'user_zmx/post_love_song.php',type:'post',dataType:'json',data: uid: ZMusic.S

48、ignup.userInfo.id,sid: ZMusic.Player.sid,type: p_typeZMusic.Player.loveAnimate();$("#flyLoveTip").show().animate(right: "+=180",bottom: "+=160",500,function() $(this).animate(right: leftOffest + "px",bottom: bttm + "px",600,function() $(this).animate

49、(opacity: "0",500,function() $(this).remove();)该功能的实现效果图如下所示。图4-20 歌曲收藏前界面图4-21 歌曲收藏后界面，并播放动画4.3 后台管理功能模块的详细设计与实现4.3.1 管理员登录模块的设计与实现管理员在后台登录界面输入帐号和密码，点击登录后，如果帐号或密码错误，则会返回提示信息给管理员，帐号密码有效则进入后台管理主界面。登录模块的流程图如图4-22所示。图4-22 管理员后台登录程序流程图管理员登录功能实现的核心代码如下所示。/使用Ajax异步提交帐号密码给admin_login.phpvar url =

50、 './admin_login.php'var pwd = faultylabs.MD5(pwd);var params = 'username='+email+'&password='+pwd +'&'+Math.random();xmlHttp.onreadystatechange = stateChangeLogin;xmlHttp.open('POST',url,true);xmlHttp.setRequestHeader("Content-type","app

51、lication/x-www-form-urlencoded");xmlHttpLogin.send(params);后台管理平台登入界面如图4-23所示。图4-23后台管理平台登入界面管理员敲击回车键或者点击上图中的绿色按钮，如果输入的帐号和密码有效，则出现成功界面，接着跳转到后台管理主界面，效果图如下所示。图4-24 登录成功提示界面图4-25 后台管理主界面如果管理员输入无效的帐号和密码，则提示管理员用户或密码错误，实现效果图如图4-26所示。图4-26 错误提示界面4.3.2 用户管理模块的设计此模块分为添加用户，删除用户，编辑用户信息等子模块。管理员删除用户时，系统会弹出提

52、示框，让管理员确认是否真的删除用户，如果选择“是”，则删除用户，否则取消删除。添加用户时，系统对管理员填写的用户信息进行检查，确认信息格式是否无误，如没有错误，则添加用户写进后台，否则提示管理员错误信息。同样编辑用户的信息也是如此，先检查信息格式是否正确，正确就写入后台，有错误则返回给管理员。此外，用户搜索功能模块的设计：在用户列表的上方放置一个搜索框，管理员可以输入任何字符，系统进行模糊匹配，然后显示出匹配到的用户的信息。此模块的程序流程图如图4-27所示。图4-27 用户管理模块程序流程图4.3.3 歌曲管理模块的设计与实现歌曲管理模块亦分为歌曲列表，歌曲上传，歌曲编辑和删除等子模块。歌曲

53、列表，编辑和删除的设计和用户管理模块的设计类似。歌曲上传的设计：在歌曲列表下方居中处放置一个上传按钮，点击上传按钮就弹出一个模态对话框，模态对话框中的内容就是一个表单，然后填写需要上传歌曲的各项信息。填写完成后，点击提交按钮即可上传歌曲到服务器上，当然在这之前歌曲的信息会被系统检查一遍，确认信息无误或者服务器上没有这首歌曲。另外设计了一个试听按钮，管理员点击它，便可以试听歌曲。歌曲管理模块的程序流程图如图4-28所示。图4-28 歌曲管理模块程序流程图该功能序列图如图4-29所示。图4-29 歌曲管理模块程序序列图歌曲上传功能的实现效果图如下所示，依次是上传前，上传中，上传成功。图4-30 歌

54、曲上传前点击upload按钮，开始上传。图4-31 歌曲上传中上传成功提示。图4-32 歌曲上传成功歌曲删除功能序列图如图4-33所示。图4-33 歌曲删除序列图歌曲删除效果图如下所示。图4-34 歌曲删除确认框点击OK按钮。图4-35 歌曲删除中图4-36 歌曲删除成功提示4.3.4 系统退出模块的设计系统后台管理平台的安全是非常重要的，因此系统退出模块的设计也不能疏忽。本网站系统退出模块的设计：设置一个注销超链接，管理员点击这个超链接，然后由Javascript截获用户的点击动作并阻止超链接的默认行为，接着使用AJAX请求PHP注销程序，这个PHP程序将删除SESSION对话以及重要的CO

55、OKIE，然后返回成功信息，AJAX获得返回信息后将页面跳转到管理员登录界面。退出模块的程序流程图如图4-37所示。图4-37 系统退出模块程序流程图4.4 网站界面的设计本在线音乐网站非常重视界面的设计，一个大方美观的界面能够大大的提升网站对用户的吸引力。正所谓"人靠衣装,佛靠金装"，没有友好美观的界面，功能再丰富也难以得到用户的垂青。在注重界面的美观的同时亦注重整个页面功能模块的布局，形成一个色彩搭配协调且布局清晰合理的页面观感。本在线音乐网站的前台用户登录界面采用清新绿为主色调，亮灰为辅色调来进行色彩搭配，布局方面在页面居中处放置网站Logo和标志语，然后在其正下方放

56、置两个图标按钮，一个是登录按钮，另一个是注册按钮。点击登录按钮，将网站Logo和标志语向上移动一段距离，在其下方显示社交网络图标和登录表单，图标按钮一直不动。点击注册按钮，将网站Logo和登录表单隐藏，社交网络图标向上移动，接着在其下方显示用户注册表单，图标按钮依旧不动。网站首页的设计如图4-36所示，图中的Logo是本人名字的缩写，字体用的是华康少女。图4-38 网站首页用户登录界面如图4-37所示，图中各大社交网络图标来源官网。图4-39 用户登录界面用户注册界面如图4-40所示。图4-40 用户注册界面网站主页界面的设计同样按照简洁美观的原则来设计，如图4-41所示。图4-41 网站主界面网站后台管理界面的设计，虽然网站后台不要呈现给用户，但是也不能马虎，一个布局合理、美观大气的后台管理界面亦可以使管理员感到心身愉悦，对提高管理员的工作效果也会起到很大的作用。网站后台管理员登录界面的设计如图4-42所示。图4-42 管理员登录界面后台管理平台主界面的设计如图4-43所示。图4-43 管后台管理平台主界面歌曲上传界面的设计如图4-44所示。图4-44 歌曲上传界面4.5 数据库详细设计4.5.1 数据库概念结构设计在E-R图中，用矩形表示实体，菱形表示联系，椭圆表示属性。本在线音乐网站的系统总体E-R图，如图4-45所示。图4-45 系统总体E-R图系统各个实体属性图如下