基于微信小程序的音乐播放器设计

水深无声 2024-04-01 12:37 7阅读 0赞

目 录  
1绪论 1  
1.1选题背景及意义 1  
1.2发展现状 1  
1.2.1什么是微信小程序 1  
1.2.2小程序市场的现状 4  
1.3研究主要内容 4  
2系统技术 5  
2.1 Java语言 5  
2.2 SSM框架 6  
2.3 Vue.js框架 7  
2.4 Eclipse开发工具 8  
2.5数据库 9  
2.6系统开发环境概述 10  
3系统分析 12  
3.1 功能需求（用例图分析） 12  
3.1.1 网络音乐播放器的基本控制需求 12  
3.1.2 播放清单列表管理需求 14  
3.1.3 播放友好性需求 16  
3.1.4 网络音乐播放器扩展卡需求 17  
3.1.5 功能需求(时序图)分析 18  
3.2 系统结构图和流程图 19  
3.3 系统性能需求 21  
4系统设计 22  
4.1 系统模块总体设计 22  
4.1.1 音乐播放器的结构 22  
4.1.2 音乐播放器的流程 23  
4.2 数据库设计 24  
4.2.1 数据字典 25  
4.2.2 数据库E-R图 25  
4.2.3 数据表的设计 26  
5系统实现 30  
5.1 小程序首页界面设计 30  
5.2 主要模块功能设计 31  
5.2.1 用户注册管理模块 31  
5.2.2 我的音乐在线播放模块 32  
5.2.3 收藏与下载模块 34  
5.2.4 歌曲、歌手的分类与点播次数衡量的排行榜 37  
5.3 后台管理设计 40  
6系统测试 42  
5.1系统的总体概述 42  
5.2测试项目名称及测试内容 42  
5.3测试结果 42  
7总结与展望 43  
参考文献 44  
致 谢 45  
4系统设计  
4.1 系统模块总体设计  
本阶段设计的基本目标是解决系统如何实现问题，也叫做概要设计，本阶段主要任务是划分出系统的物理元素及设计软件的结构，完成软件定义时期的任务之后就应该对系统进行总体设计，即根据系统分析产生的分析结果来确定这个系统由哪些系统和模块组成，这些系统和模块又如何有机地结合在一起，每个模块的功能如何实现。系统设计的目标是使系统实现拥有所要求的功能，同时，力争达到高效率、高可靠性、可修改性，并且容易掌握和使用。  
在线音乐点播平台是一个典型的音乐网站，网站分为前台和后台2个大的模块，每个模块都有自己的权限功能。网站前台显示了曲目分类、歌手分类、专辑、播放列表和歌词动态滚动等。网站提供了用户注册功能，注册了的用户可以登录网站，实现普通用户没有的功能，如对音乐的收藏功能。后台管理员对前台涉及到的所有信息进行管理。开发这样的一个网站实现了一般音乐网站的所有功能，本站的特色就在于前台分为2种角色可以具备不同的权限功能 。  
4.1.1 音乐播放器的结构  
根据网站的角色对网站角色分为3种类型，一种是未注册用户，一种是网站用户，以及网站的后台管理员。  
未注册的用户功能权限如下：  
实现全选歌曲播放：对选择的音乐进行在线播放。  
查看音乐排行榜：可以查看系统对用户点击数的统计进行排行的排行榜。  
歌手名首字母搜索：对歌手进行分类，根据歌手名首字母信息快速定位歌手以方便查找该歌手的所有歌曲。  
注册的用户除了未注册的功能之外还具有以下两种权限：  
歌曲收藏：用户登录网站之后可以对自己喜欢的歌曲进行收藏，方便下次登录时查找。  
歌曲下载：用户登录网站之后可以下载自己喜欢的歌曲在用户本地电脑上。  
管理员权限：  
添加删除歌曲和专辑：对歌曲信息进行添加，修改和删除等操作。  
用户信息管理：对网站前台注册了的用户进行查看和删除等操作。  
密码管理：修改管理员密码。  
退出后台管理：管理员在后台可以退出管理，这样就清除缓存中的管理员账号和密码，如果需要再进入后台需重新登录。  
![在这里插入图片描述][b70215a0a38848dba538b79ff70bcb48.png]

系统功能结构图如图4.1所示。  
图4.1 系统功能结构图  
4.1.2 音乐播放器的流程  
打开网站首先展示的是本程序的首页，首页中包含了用户注册与登录，以及管理员推荐的部分排行榜，导航则显示歌手、排行榜、分类、MV、专辑、我的音乐等选项，当用户点击歌曲时将跳转播放模块，播放页面内包含对当前歌曲的一些播放操作、播放列表、歌词显示、用户收藏模块以及歌曲下载模块等，系统流程图如图4.2所示。

{
        
      "pages": [
        "page/component/home/index",
        "page/component/user/index",
        "page/component/playlist/index",
        "page/component/mv/index",
        "page/component/playing/index",
        "page/component/login/index",
        "page/component/fm/index",
        "page/component/toplist/index",
        "page/component/recommend/index",
        "page/component/search/index",
        "page/component/album/index",
        "page/component/artist/index",
        "page/component/recsongs/index",
        "page/component/record/index",
        "page/component/me/index",
        "page/component/cloud/index",
        "page/component/program/index",
         "page/component/djradio/index",
         "page/component/simi/index",
         "page/component/new/index"
      ],
      "window": {
        
        "navigationBarTextStyle": "#fff",
        "navigationBarTitleText": "Music",
        "navigationBarTextStyle": "black",
        "backgroundColor": "#fbfcfd",
        "navigationBarBackgroundColor": "#BB2C08"
      },
      "tabBar": {
        
        "color": "#aaa",
        "selectedColor": "#fff",
        "borderStyle": "black",
        "backgroundColor": "#212121",
        "list": [
          {
        
            "pagePath": "page/component/home/index",
            "iconPath": "image/cm2_btm_icn_discovery.png",
            "selectedIconPath": "image/cm2_btm_icn_discovery_prs.png",
            "text": "发现音乐"
          },
          {
        
            "pagePath": "page/component/me/index",
            "iconPath": "image/cm2_btm_icn_music.png",
            "selectedIconPath": "image/cm2_btm_icn_music_prs.png",
            "text": "我的音乐"
          }
        ]
      },
      "networkTimeout": {
        
        "request": 10000,
        "connectSocket": 10000,
        "uploadFile": 10000,
        "downloadFile": 10000
      },
      "debug": true
    }

![在这里插入图片描述][c0f1582e472a423abab357faa5595be5.png_pic_center]  
![在这里插入图片描述][4930ed60c79f48619b7e0d34e9759034.png_pic_center]  
![在这里插入图片描述][abb807ff8fba4d6fa91c113e9ce75b6d.png_pic_center]  
![在这里插入图片描述][aaede5b519d24450a4444b139e79d6b4.png_pic_center]  
![在这里插入图片描述][61240c811ba34dc684e451baf4727601.png_pic_center]  
![在这里插入图片描述][65292c61d6884e3591a106fd62948389.png_pic_center]  
![在这里插入图片描述][921d97addea14ac492bd4e67dd739b19.png_pic_center]  
![在这里插入图片描述][30171270d28646d4828a808287c2219d.png_pic_center]  
![在这里插入图片描述][a83fba1c6f7c4200bb48e9a854f32035.png_pic_center]  
![在这里插入图片描述][2eac3a61f12143729dd93c9b5fb55953.png_pic_center]  
![在这里插入图片描述][8144ab1cc5ae48c38c6ba3062e8383a7.png_pic_center]  
![在这里插入图片描述][60c7a85173af41afa5b2667f90d421ac.png_pic_center]  
![在这里插入图片描述][3a0df5eaeb26474aabca376a8ff65fd2.png_pic_center]  
![在这里插入图片描述][ca80aae081824772a680897bf3ad9e04.png_pic_center]  
![在这里插入图片描述][2981a8af31734c35a1a44f6e93d49386.png_pic_center]  
![在这里插入图片描述][73aba68243db4cbb990ccce6cec518d2.png_pic_center]  
![在这里插入图片描述][bf2d821e321a4578991bbd267d317bd2.png_pic_center]  
![在这里插入图片描述][4a6ddb93aa0b471d8c28b6bda6daa2ba.png_pic_center]  
![在这里插入图片描述][8ce1a8e4ae314aa2aab62add785a6747.png_pic_center]  
![在这里插入图片描述][f9c7fd068131432893adace701408e6f.png_pic_center]

[b70215a0a38848dba538b79ff70bcb48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ee75678e720049bc801800bc1979c573.png
[c0f1582e472a423abab357faa5595be5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0be9b93429b94a39a30ee0b535ac346d.png
[4930ed60c79f48619b7e0d34e9759034.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a77e8597de09463bbdd063f06255c6c3.png
[abb807ff8fba4d6fa91c113e9ce75b6d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/323ef6aa4ffb421f85d0564918bdfba2.png
[aaede5b519d24450a4444b139e79d6b4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/aa7e0563b42246bd96f54e02d60d12b4.png
[61240c811ba34dc684e451baf4727601.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cb5f550c0748410cb6ed0aa01b7a69f5.png
[65292c61d6884e3591a106fd62948389.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/65dadafee1e847f3a70a900c11b36dc6.png
[921d97addea14ac492bd4e67dd739b19.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3963e48313434a98a5cc2dbdf6243b70.png
[30171270d28646d4828a808287c2219d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3399f796efe84eaca4058975cfd2ac9b.png
[a83fba1c6f7c4200bb48e9a854f32035.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/61576f0c035041bf9bb5e7e77376e350.png
[2eac3a61f12143729dd93c9b5fb55953.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3d26c9697b7d44439bd458399844c1cf.png
[8144ab1cc5ae48c38c6ba3062e8383a7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4d7f61df47504230b54a96bdfc9eaa64.png
[60c7a85173af41afa5b2667f90d421ac.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3ffdc9a4c6a24de29b55882d3368e5f6.png
[3a0df5eaeb26474aabca376a8ff65fd2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b532ea60bcbf4e02804b3e6eb2794cea.png
[ca80aae081824772a680897bf3ad9e04.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0e298b1459bf4ab7ad92ec263833295a.png
[2981a8af31734c35a1a44f6e93d49386.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/acde57e1ed274d39bce4c12caeb06ac8.png
[73aba68243db4cbb990ccce6cec518d2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3f60b21e6d7f49589f1b7a6625083d4e.png
[bf2d821e321a4578991bbd267d317bd2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8def5114b80a46b1984f3b30735455a0.png
[4a6ddb93aa0b471d8c28b6bda6daa2ba.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7e60d139ccaf4604a72bf67ec4d788d1.png
[8ce1a8e4ae314aa2aab62add785a6747.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/78d5b5b1d5f6471d9228a43d15ea33ff.png
[f9c7fd068131432893adace701408e6f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/90a93d2751834798a4baa879fedcbdef.png