数字媒体技术基于微信平台的音乐播放器小程序的设计与实现

1、基于微信平台的音乐播放器小程序的设计与实现Design and Implementation of Music Player Applet Based on WeChat Platform13广东东软学院本科毕业设计（论文）摘 要自微信应用发布以来，依托强大的生态支撑和较高的传播速度，市场份额稳步提升。更多的应用程序开发人员选择使用微信应用程序而不是本地应用程序来发布自己的应用程序。而视频、音乐等多媒体娱乐的份额也有一定的不足。因此，在本文中，我们将使用微信Applet开发技术来开发音乐播放器。本文考察了移动互联网环境下微信营销的性质、现状和效果，介绍了当前微信公共平台的各种特点，使用微信Ap

2、plet，接下来我们使用JavaScript、HTML、CSS、Java MySQL等编程语言和相关技术，实现了一个基于微信平台的音乐层Applet。关键词：微信 小程序 音乐播放器 JAVA MYSQLAbstractSince the release of wechat apps, which rely on strong ecological support and high dissemination speed, the market share has steadily increased. More application developers choose to use wec

3、hat apps instead of native apps to publish their own applications. and the share of multimedia entertainment such as video and music is somewhat insufficient. Therefore, in this contribution we will use the Wechat Applet development technology to develop a music player. This article examines the nat

4、ure, status and effect of wechat marketing in the mobile Internet environment, introduces various features of the current wechat public platform, uses wechat applet, next we use JavaScript HTML CSS Java MySQL and other programming languages and associated technologies to implement a music layer appl

5、et based on the wechat platform.KEY WORDS: WeChat Applet Music Player JAVA MYSQL目 录第一章 绪论11.1 研究背景与意义11.2 本文主要工作11.3 论文组织结构1第二章 相关技术综述32.1 B/S结构32.2 JAVA32.3 SSM框架42.4 Ajax42.5 Bootstrap52.6 MySQL52.7 jQuery Mobile框架62.8 Web Service技术62.9 移动应用性能优化技术7第三章 需求分析93.1 系统流程分析93.2 系统功能需求分析103.3 系统非功能需求性分析10

6、3.4 系统可行性分析113.4.1 经济可行性分析113.4.2 技术可行性分析113.4.3 使用可行性分析113.4.4 功能可行性11第四章 系统设计134.1 系统总体架构134.2 设计方案134.3 系统流程设计144.3.1 登录业务流程144.3.2 注册业务流程154.3.3 系统操作流程164.3.4 信息增加流程174.3.5 信息修改流程184.3.6 信息删除流程194.4 数据库设计124.4.1 数据设计步骤124.4.2 数据库设计原则12第五章 系统功能实现205.1 管理后台205.2 用户前台21第六章 系统测试266.1 测试的目的与目标266.2 测

7、试方法266.3 测试用例266.3.1 用户登录测试266.3.2 管理员添加测试266.4 测试结论27结 论28参 考 文 献30致 谢32第一章 绪论1.1 研究背景与意义相对于原生APP来说，微信小程序的优点也非常显著，比如开发成本和使用成本低，不占用过多的存储空间和运行资源等，打开迅速，传播便捷，有利于产品的快速验证和小型应用的推广，在现在的微信小程序市场中，已经有不少的音乐播放器，如QQ音乐小程序、网易云音乐小程序、虾米音乐小程序等。但是这些应用普遍存在的一个特点是过于庞大，相当于把移动端的小程序原样迁移到了小程序中，因为用户往往无法在微信小程序留存太长时间，这样的复杂逻辑会分散

8、用户的精力，也不能起到突出重点功能的作用1。鉴于微信小程序生态中的音乐播放器处境，从根本出发，找到音乐播放器的核心功能，将其在微信小程序平台上实现。从核心功能层面的设计出发，经过生活圈子内的调研，总结出了一套微信播放器的核心功能。1.2 本文主要工作在通过一系列的的查询后，基本确立了本次设计的主要工作，开发需要系统地设计一个非常明确的政策制定流程，特别是解决问题，分析要求和功能设计，详细设计和软件评估方法，下面就是本次的主要工作。（1）基于微信平台的音乐播放器小程序设计（2）对应的文件都应该创建 .js、.json、.wxml、.wxss文件。（3）数据都是存放在Page里面的data中，通过

9、接口的数据填写到data对应的字段中，然后通过小程序的语法填充到wxml文件相对应的地方。（4）编写的小程序的音乐播放器，里面有歌曲的搜索、歌曲上下首歌的控制、歌曲榜单、排行等来列举歌曲。（5）页面的布局与美化。1.3 论文组织结构本文组织结构如下:第一章 绪论，绪论部分首先介绍了研究的背景和意义，然后分析了医疗系统的现状，最后介绍了本文的研究内容。第二章 系统相关技术概述，先是对B/S模式进行了介绍，然后阐述了java技术、AJAX、MySQL数据库等基本概念。第三章 需求分析总结了系统的需求分析，首先介绍了系统设备的用途和需求，然后对系统的功能需求和非功能需求进行了说明。第四章 系统的整体

10、设计，首先介绍系统的整体架构，然后介绍设计思想，之后对系统进行了实现。第五章 系统功能实现，运用JavaScript HTML CSS Java MYSQL等编程语言基本实现小程序。第六章 系统测试，对最后成品进行测试，展示系统运行成果。第七章 结论， 本文总结了系统的总体设计和实现，指出了系统需要进一步改进的地方。第二章 相关技术综述2.1 B/S结构根据体系结构，信息管理系统可以分为两类：客户端/服务器系统和浏览器/服务器系统。 C / S结构将应用程序分为两部分。后端服务器负责数据管理。前端客户端的任务是与用户完成相应的交互任务。 C / S结构是传统的开放模式。客户端和服务器均可使用特

11、定的软件支持。随着网络技术的发展，B / S系统对C / S系统进行了一些改进。它具有高成本和低效率的特点。在B / S结构中，浏览器为用户提供相应的接口，在前端实现事务逻辑，并在服务器端实现主事务逻辑。这意味着用户不必安装特殊软件，只需安装可以访问Internet并访问系统的客户端。与C / S模式架构相比，B / S模式架构的优点是：（1）B / S模式使客户容易在B / S模式下，无需为客户端上的每种类型的计算机安装不同的客户端应用程序。（2）B / S模式使系统开发和维护变得容易基于B / S模式的系统维护比C / S模式更方便灵活。即使企业的业务和运营机制发生变化，也无需更改现有的客

12、户端应用程序，只需更改Web服务器端的程序即可。消除许多复杂的升级和管理系统协调任务，提高企业效率。（3）B / S模式使用户操作更容易对于C / S架构，该程序针对不同客户有自己的规范，用户需要额外的培训。 B / S模式基于广泛使用的浏览器软件。任何有互联网接入的人都熟悉该操作，无需额外培训即可直接使用。（4）B / S模式适用于在互联网上发布信息。2.2 JAVAJAVA大致分为两部分。一个是负责编译的Java，另一个是负责执行的Java。尽管Java和C+非常相似，但是它们在编程过程中是以面向对象的方式进行编译的，因此可以单独使用编译的软件，也可以在Internet上使用它们。JAVA

13、的分布式，独立于体系结构的功能使存储更快，更容易创建。面向对象具有四个特征。一种是封装。这意味着您可以在定义类时实现某些功能和属性。第二个是抽象，这是一个类，可用于简单编辑，因为它将具有公共属性的类封装到一个抽象中。顾名思义，第三个是继承，这是继承人的特征。还有多相功能，可以以不同方式使用以演示可伸缩性。2.3 SSM框架SM为Spring+SpringMVC+ MyBatis的缩写，由Spring、MyBatis两个开源框架整合而成。（1）SpringSpring是一个开源框架，Spring是于2003 年兴起的一个轻量级的Java 开发框架。它是为了解决企业应用开发的复杂性而创建的。Spr

14、ing使用基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益2。（2）SpringMVCSpringMVC是Spring框架的后续产品，已经集成到SpringFabric流中。SpringMVC区分了控制器、模型对象、显示和处理程序对象的角色，使它们更易于定制。（3）MyBatisMyBatis是一个基于Java的持久层框架。iBATIS提供的持久层框架包括SQL Maps和（DAO）MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索

15、。MyBatis 使用简单的 XML或注解用于配置和原始映射，将接口和 Java 的POJOs映射成数据库中的记录3。2.4 AjaxAJAX框架的设计者是Jesse James Garrett。它的英文全称是“Asynchronous JavaScript And XML”。自AJAX诞生以来到现在，它的覆盖面得到了大幅度的提升。Ajax使后台和服务器能够实现Web页面的异步更新，而无需刷新整个页面即可通过少量的数据交换来更新页面数据。XML是AJAX框架技术实现异步数据更新的基础，同时也是该框架的核心技术。XML可以做到不阻塞用户的同时还可以编写JavaScript程序处理请求并响应服务器

16、。在Ajax框架中只需要一个网页就可以刷新全部页面内容，根本不需要加载整个网页就可以实现。它是将JavaScript技术和XML对象放在Web表单和服务器中间，JavaScript负责接收表单数据，并将请求发送到服务器4。Microsoft公司在1998年成立了一个“Outlook Web Access”设计小组，并在自己公司已有的ActiveX系统基础上开发了一个可以执行网页HTTP请求的控件。在IE内核的浏览器中得到了使用，但遗憾的是并没有得到很大范围的使用。而后，Ajax技术被谷歌公司大量运用在其名下的各类产品中，从而使得Ajax技术受到广泛的关注并被Internet应用程序的开发人员所

17、采用。JSON衍生于JavaScript对象，它是一种跨语言轻量级的数据交换格式，由Ecma国际进行语言规范定义后统一实现标准化。与XML相比，JSON对象的格式更加简洁紧凑，使得传输相同字节所需的数据流量大大减少。 JSON格式的这一优势显得非常重要。当它传输大规模数据时，可以获得双倍的性能提升。JSON格式更容易被JavaScript语言解析。它以对象的形式获得，极大地提升了处理效率，更有利于数据交换。2.5 Bootstrap该系统可能会在不同的终端设备上进行运行，所以在浏览器和各种终端设备运行时的兼容性要求极高。设计者对比分析了目前较主流的Web设计框架，认为Bootstrap框架不仅

18、预设了许多丰富的页面效果，还在布局、控件等方面也有很好的效果，极大地满足了用户对首页开发的需求。同时，Bootstrap框架也具有极强的浏览器兼容性，能够兼容市面上各种常用的浏览器。此外，升级后的Bootstrap框架还增加了十多种jQuery插件，能够确保Web页面进行良好的交互。实现一次性开发，跨设备使用，从而节约本系统的开发成本5。从项目的实际需求出发，结合各种开发技术的优势，本文最终敲定使用Bootstrap框架技术进行网页设计。其主流的前端框架技术性能见表2-1所示：表2-1常用前端开发框架对比表基础技术布局CSS板式控件特效BootstrapjQuery LESS丰富丰富丰富丰富j

19、QueryjQuery-丰富丰富YUIYUI丰富-丰富丰富prototype-少量丰富2.6 MySQLMySQL作为一个关系型数据，它保存数据还是使用的现有关系数据库的基本数据格式。不同的数据存储于不同的表中依靠建将他们关联，方便数据的检索和查询，使得数据库具有很强的灵活性。MySQL语言是最标准化的数据库访问语言。成本低、速度快、占用存储空间小以及开源等这些优点的存在使得它成立中小网站开发的青睐对象。MySQL具有下面几个主要特点：（1）充分融汇了Windows系统的优点，具有优越的设计性能；（2）支持Windows图形化管理工具，可以使用Navicat等图形化管理工具实现本地到远程数据库

20、系统的管理；（3）支持几种现有的操作系统，并为不同的编程语言提供API接口；（4）对SQL查询算法进行了一定程度的优化，极大地提高了数据检索和查询的速度。 并支持用户选择不同的数据库连接选项。2.7 jQuery Mobile框架jQuery Mobile框架以“write less, do more”作为设计的指导思想6。该框架主要包含移动终端系统的网页布局和移动Web应用程序设计所需的UI组件两部分。在此框架中，用户无需对每个设备和操作系统进行应用代码开发，直接可以使用跨平台、跨设备的HTMLS应用程序开发。采用Ajax技术可以与各种移动设备及操作系统进行异步通信，同时支持各脚本语言和形式

21、，如HTML、XML及网页动动画等。jQuery Mobile的基本功能如下：（1）灵活与简单性。使用HTML文件与多个嵌入式页面把应用程序分解为多个页面。（2）功能强化和强兼容性。jQuery Mobile的兼容性非常强大，不仅可以兼容JavaScript设备，同时还兼容常用的移动设备及JS、CSS3、HTML等脚本语言。（3）支持各种形式的输入方式。 jQuery Mobile可以支持不同类型的输入方法和事件，例如触摸屏，鼠标和光标焦点等等。（4）辅助功能。 jQuery Mobile支持可访问的Internet应用程序。2.8 Web Service技术（1）WebService介绍We

22、bService的本质就是HTTP协议。它同XML一样,具有极强的兼容性、跨语言等特点。使用WebService技术可以在不同的平台、不同类型的语言及内部协议之间实现数据交换7。( 2 ) WebService原理XML、 SOAP和WSDL共同组成了WebService技术的核心。数据的处理过程是：先把数据封装成XML格式，然后通过HTTP协议进行传输。WebService服务器使用WSDL文件描述WebService的方法、参数和返回值。此文件可用于描述外部调用的相关服务。也可以通过Web服务器访问URL地址来访问WSD文件的内容。客户端在调用WebService服务之前，必须知道WSDL

23、文件的地址。（3）WebService规范JAXM&SAAJ、JAX-WS( JAX-RPC )、JAX-RS是WebService的三种规范形式。 JAX-WS。是“Java API For XML-WebService”的首字母缩写而来。JAX-WS是JAX-RPC的演化版本，但是它并不兼容JAX-RPC。二者最大的区别是:JAX-WS不支持RPC/Encoded样式提供的WSDL。JAXM等效于Web服务的服务器，它的主要作用是定义消息发送和接收时所需要的API8。在传输附件、构建和解析SOAP包时，JAXM与SAAJ同时搭配组成API并为工作提供支持。JAX-WS与JAXM都属于SOA

24、P协议下的应用服务接口，二者相比之下，JAXM有差很强的抽象性，是面向对象的。而JAX-WS更多倾向于为SOAP的底层细节工作9。JAX-RS是Java为REST（表示状态传输）样式开发的一组Web服务规范。使用MyEclipse连接后台提供的WSDL URL,可以创建Web服务客户端。操作步骤如下：先创建一个新类用以调用WebService，然后右键单击SRC以找到Web服务客户端。2.9 移动应用性能优化技术系统是基于微信平台的移动应用程序。系统在开发中，对性能要求极高。根据系统应用的需求，会对特定应用的瓶颈采用不同的优化处理技术。该系统开发过程中用于优化移动应用程序性能的技术主要如下：（

25、1）缩短页面加载时间，减少用户端发送的HTTP请求次数。（2）实现分门别类的存储JavaScript和CSS文件，实现多个JavaScript和CSS文件打包和共享。（3）浏览器缓存的问题由HTML Web缓存技术解决。（4）采用减少和压缩页面资源的方式，提升移动应用运行速度。（5）解决链接引用加载时间过长的问题，常采用内嵌脚本资源。（6） 按照移动设备的屏幕尺寸大小，切割图像资源不仅可以减小图像尺寸，而且可以提高处理速度。第三章 需求分析3.1 系统流程分析音乐播放器系统的开发也是有对应的流程，开发之前必须要进行用户功能需求的分析，最后根据功能需求进行网站设计还有数据库相关数据的设计工作，此

26、次开发的音乐播放器系统开发流程如图3-1所示。图3-1 系统开发流程图系统开发完成之后会给用户提供登录入口，在这个界面用户输入的信息会得到验证，通过验证之后才能进去音乐播放器的访问主界面，系统登录执行流程如图3-2所示：图3-2 系统执行流程图3.2 系统功能需求分析功能需求主要针对的音乐播放器小程序音乐层Applet的功能模块设计，功能需求必须根据用户的实际需求进行设计，根据系统需求，对本文描述的信息进行分析，最重要的功能需求是创建一个完整的音乐层applet，根据具体用户的实际需求，该功能模块的功能单元也可以具体满足不同用户的具体需求。功能需求是软件系统的基本需求，只有与客户达成一致，才能

27、进行进一步的设计和开发系统非功能需求性分析系统非功能性需求分析对系统是极其重要的，可行性需求同样是不可以缺少的10。它一般包括系统的可行性、安全性、易操作性、可扩充性等需求。这些因素决定着整个就诊系统的质量，并且对于系统的功能需求有着很大影响。（1）易使用性需求系统的使用人员对计算机掌握程度有所不同，所以在系统的整个设计过程之中一定要做到界面干净整洁容易操作。（2）系统可扩展性好系统结构清晰、模块间耦合度低、配置灵活、扩展性强，保证系统管理员定期对系统进行维护和更新。（3）系统运行记录系统保存系统日志记录，日志按重要程度分别储存在数据库不同的表中11。（4）安全性需求在设计系统的过程之中，一定

28、要加强系统安全性设计。避免系统出现安全性问题。3.3 系统可行性分析3.3.1 经济可行性分析从软件来看，系统设计和实施的各种软件都可以用作原版、学习版和个人版。私人版软件投入较小，因此在经济上可以承受。由于系统的规模不是很大，本人可以承担整个项目的开发和模块测试工作。如果需要大规模的集成测试，可以寻求同事们的帮助。整个项目的硬件支出很低，因此整个课题项目在经济上是可行的。3.3.2 技术可行性分析通过研究现有系统，分析本论文的需求，开发该服务系统采用的是Jsp+MySQL+SSM框架进行开发12。从IT行业流行的数据库开发和管理软件的角度来看，该系统是基于成熟的Windows 操作系统，技术

29、十分稳定。因此使用Jsp、SSH、MySQL来完成该系统整体开发，从而说明本系统在技术方面可行。3.3.3 使用可行性分析本文设计的系统功能齐全、操作简单，并且系统配套了详细的用户使用指南。系统界面简洁而明了，层级关系清晰，人机交互非常好，所以对于使用本系统的用户在很短的时间内就可以掌握对系统熟练的使用，可以满足不同水平用户的可行性需求，故而本系统使用是可行的。3.3.4 功能可行性在对本文所描述的管理系统进行开发与设计之前，本人对用户的主要业务需求进行了详细的调研，之后对用户的功能需求起草了一份方案并进行详细的分析与设计。最终得出结论：本人设计的系统在功能上达到了客户的要求，故而在本系统的功

30、能实现方面也是可行的。第四章 系统设计4.1 系统总体架构系统的总体结构是将系统需求分析中的业务模型转换为系统的物理结构模型。系统的物理结构必须与逻辑模型相对应，并能根据逻辑模型的规则处理信息。在此基础上完成了相应的数据库设计、模块设计和安全性设计。本章详细介绍了上述内容。基于B/S（浏览器/服务器）体系结构的管理系统结构使用了已经非常成熟的B/S三层体系结构，本体结构的基础是网上的访问模式，用户通过浏览器访问该系统的信息并实现相应的功能13。系统架构图如图4-1所示。图4-1 系统整体架构图4.2 设计方案借助互联网，找到相关的本地资料，利用数据库搜索、分析和探索各种杂志和文献，深入社区开发

31、本地网络爬虫系统，与开发者交流，并与爬虫系统一线开发人员在实际工作岗位上进行沟通，获取更多的信息技术，系统采用Java语言制作，结构调整，不同功能模块独立开发，减少模块间的连接，在每个功能模块实现的基础上，构建一个灵活的接口，首先进行需求分析，分析结果建立相应的逻辑连接，确定系统的基本功能，完成相关功能的源代码，暂时完成系统，然后进行详细修改，依次关闭系统功能，最后调试系统，检查系统错误并更改它14。4.3 系统流程设计4.3.1 登录业务流程为了保证系统的安全性，要使用本系统对功能业务进行管理，必须先登陆到系统中。如图4-2所示。图 4-2 登录流程图4.3.2 注册业务流程 未经注册的用户

32、是没有账号的，不可以进行登录，但注册的管理并非是毫无章法的，也需要设置好了合理的删除、修改、添加流程，并且保证业务操作是有效和可行的。注册业务流程图如图4-3所示。图 4-3注册业务流程图4.3.3 系统操作流程 本部分的设计允许用户在常规的条件下执行合理的操作。简化复杂性的初衷是开发的目标。这与将来的实际用户体验有关。加入提供了非常繁琐的操作系统，因此，为了提高效率，还违反了使用计算机网络进行管理的初衷，因此它不如传统的操作模式好。这是我们必须考虑的问题，这是一个关键问题。系统操作流程图如图4-4所示。图 4-4 系统操作流程图4.3.4 信息增加流程如何添加数据，系统会首先自动生成一个数字

33、，必须记住该系统的数字无法更改15。 在其他相关细节等待用户完成后，系统将自动确定输入是否正确以及格式是否错误，可以在确认输入并添加数据完成后将其正确写入数据库。信息增加流程图如图4-5所示。图4-5 添加信息流程图4.3.5 信息修改流程数据写入不可避免地会出现错误。因此，我们还必须全面考虑这个问题。我们还需要考虑如何在需要修改数据时帮助用户进行合理，方便，快速的修改操作。如何修改数据，首先选择需要修改的信息选项，等待输入完成，系统会自动判断输入是否正确，格式错误，确认正确后才能正确写入数据库，修改数据即可完成。信息修改流程图如图4-6所示。图4-6 修改信息流程图4.3.6 信息删除流程信

34、息的存在分为有用和无用两类。无用的数据就像生活中的垃圾。此时，必须将其删除并删除16。在这里，我们还需要针对系统的这种操作制定合理且计划好的设计概念。因此，此数据删除过程的设计是非常必要的。对于如何删除数据，首先选择您要删除的信息的选项，系统将提示是否删除。单击“确定”后，可以在确认删除完成后正确更新数据库。信息删除流程图如图4-7所示。图4-7删除信息图4.4数据库设计数据库设计是系统开发中十分重要的一项步骤。其首要任务，就是确定该系统中使用的数据和数据结构。4.4.1数据设计步骤（1）需求分析阶段。无论在什么情况，需求分析都是数据库设计的首要步骤，也是最艰难和最浪费时间的一个步骤。并且数据

35、库的需求分析决定最终数据库构建的速度和质量。（2）概念结构设计阶段。概念结构设计是整个数据库设计的最为关键的部分，以用户需求出发，构建一个DBMS的概念模型，即E-R图模型。数据库E-R图如图4-8所示。图 4-8 数据库E-R图（3）逻辑结构设计。逻辑结构设计是将图E-R模型变成一个概念结构的关系模式，由特定的DBMS支持，然后优化，以创建一个数据表，一个主要的SQL数据库对象。这就是为什么我们必须专注于形式的发展，从一开始，努力提高数据库的性能，在线音乐数据库数据库“onlinemusicDB”由下表组成。每个表和字段的名称与相应名称的拼音首字母组合在一起。各表设计结果见下表17。每个表表

36、示数据库中相应的表，如下4-9管理员表，4-10音乐信息表，4-11用户信息表所示。表 4-9管理员表表4-10 音乐信息表表 4-11 用户信息表（4）物理设计阶段。 物理设计阶段包括选择存储在数据库中的相应数据表。（5）数据库实施阶段。数据库实现是数据库设计者根据一定的规范，使用SQL语言创建数据库，并执行相应的编码和调试过程。（6）数据库运行和维护阶段。系统运行后，必须对数据库进行不断的调试和修改，以保证数据库的正常运行。4.4.2数据库设计原则系统的数据库设计原则如下:（1） 数据遵循统一维护。（2） 在设计数据库时降低数据的繁琐程度，节省存储空间。（3） 数据的规范化和标准化。（4）

37、 保证数据整体的实用性和可行性。（5） 保证数据的安全。在整个数据库设计过程中，不仅要考虑资源的交换，还要保证数据的安全性，可以采用数据加密、证书认证、数据签名等措施，以确保数据安全。第五章 系统功能实现5.1管理后台5.1.1登录注册登录函数login首先获取session 中的值判断当前用户是否登录，若登录则返回否则连接到登录页面。判断用户名、密码和验证码是否正确，若其中任何一个存在错误则登录失败并给出用户相应的提示信息，否则登录到系统首页。部分代码展示Page(/* 页面的初始数据*/ data: username: , /账号 password: , /密码 nickName: , n

38、ame: , mobile: , message: 当前手机号已注册, isExist: false, /默认存在 , /* * 生命周期函数-监听页面加载 */ onLoad: function(options) 登录界面如图5-1所示图5-1登录界面5.1.2音乐管理后台的音乐管理可以对轮播图、歌曲、歌单、作者和播放记录进行增加修改和删除操作，音乐管理界面如图5-2所示。图5-2音乐管理5.2用户前台5.2.1推荐小程序端，选择推荐，显示推荐的热门歌曲。部分代码展示Page( data: showsearch: false, searchtext: , filterdata: , show

39、filter: false, showfilterindex: null, sortindex: 0, sortid: null, subsortindex: 0, subsortid: null, cityid: null, subcityid: null, servicelist: , scrolltop: null, imageHost: api.imageHost, authorList: , title: null, , onLoad: function () , onShow: function () var that = this; that.AuthorList(); , Au

40、thorList: function () var that = this; httpUtil.httpGet(api.AuthorList, ).then(res) = console.log(data=, JSON.stringify(res) if (res.status = 80200) that.setData( authorList: res.data ) else wx.showToast( title: this.data.fail, icon: loading, duration: 2000 ) ); ,推荐页面如图5-3所示。图5-3推荐页面5.2.2排行榜小程序端，选择排

41、行榜，显示热门歌曲的排行，让用户方便找到当今热门流行歌曲贴近潮流。排行榜页面如图5-4所示图5-4排行榜页面5.2.3歌手歌手页面可以查看歌手基本信息名字，身高，生日，以及歌手的简介以及其作品，让用户更了解歌手，让其更方便去接触。如图5-5所示。图5-5歌手页面5.2.4个人中心个人中心可以查看自己的听歌记录以及修改自己的个人信息，个人中心如图5-6所示。图5-6个人中心5.2.5音乐播放小程序端，选择播放，显示正在播放的曲子，直观了解到正在听的歌曲是什么，是哪位歌手唱的等基本信息。音乐播放如图5-7所示。图5-7音乐播放第六章 系统测试6.1测试的目的与目标在进行线上部署系统前，测试系统以找

42、出系统中的错误。通过测试，使用提交的错误报告为将来的软件改进提供标准和参考。6.2测试方法软件开发过程分为三个阶段：单元测试、集成测试、验证测试、系统测试等，单元测试又称模块测试，用于正确性测试18。目的是检测每个模块中可能的错误。集成测试通常基于一个单元测试，其中所有模块都必须按照设计要求安装在系统中。验证测试，也称为验证测试。任务是检查软件和其他功能的功能和性能是否符合用户的要求。系统测试是检查硬件、软件和操作人员整体是否不符合系统规范。此测试可能会发现系统分析和设计中的错误，例如检查安全措施是否完善，系统是否非法。19。6.3测试用例6.3.1用户登录测试用户登录需要的正确信息包括正确符

43、合规范的登录账号还有相应密码，输入数据信息都正确规范了才能进行系统访问处理。用户登录测试过程如表6-1所示:表6-1 用户登录测试表6.3.2管理员添加测试系统用户可以在活动信息界面进行管理员账户的创建的操作，如果数据格式错误，系统会给出相应提示。只有输入信息满足条件才能进行添加20。测试数据见下表6-2所示：表6-2管理员添加测试表6.4测试结论本系统的构建基本都可以达到，良好的用户界面，能够正确的处理错误信息，而且能够准确的提出错误的种类。在进行完系统的所有功能测试之后，可以得出结论：系统的功能模块和系统服务均运转正常。然后在PC端浏览器测试系统的稳定性、响应速度、兼容性等，针对这些问题再

44、进行系统的更改与生成，最后可以给用户提供一个系统。结 论通过本次系统开发研究，发现了系统的开发需要系统地设计一个非常明确的政策制定流程，特别是解决问题，分析要求和功能设计，详细设计和软件评估方法。对计算机软件开发提供了宝贵经验，拓展了计算机基础知识，具备了开发软件的业务逻辑。在最初的系统开发层面，需要熟悉系统的工作流程，并掌握合适的软件程序的基本知识。从一开始的认识到整体的充分理解，尽管整个过程中存在许多问题，但对最终结果、详细设计和最终测试感到十分的满意。虽然在这探索的过程中，也遇到了很多困难和问题，在各大网站和图书馆找寻相关知识背景的数据和需求，更进一步询问老师和同学。得到了很多专业解决方案和好的建议。最终整理出适合本项目的合适方案，包括系统设计方案、调试方案等，直到最终系统成功运行跑起来。 随着系统设计即将结束，当前正在设计开发的系统也初具规模，但是它们的各项功能并不是特别完善，尽管它付出了所有的努力，但感觉它还有一定程度的提升空间，例如小程序中的歌曲的数目，距离想做到真正拿来听歌和普及还以一定的差距，以及整体的页面布局美化做的总觉得差强人意，UI设计方面给人的互动感不强。还可以做得更好，可以学习网易云音乐之类的，多设几个榜单，目前因为歌曲有限没做出来，而且还有待开发的vip充值，歌友评价论坛等等。参 考 文 献1 刘媛春