版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第3章总体设计3.1总体设计概述总体设计的意思就是为是系统应该如何去实现。总体设计主要是通过需求分析所得到的结论,站在开发人员的角度分析系统需要去完成怎样的功能,来设计自己的开发计划。。总体设计要根据系统的结构分模块设计,分析每个模块的功能与作用,以及这些模块相互之间的联系和相互之间的调用过程。模块与模块之间具有相互独立性,开发者可以在编码时对每一个模块做单独的设计、编写、测试和修改,这样可以提升系统开发的容若率,降低错误在模块与模块调用之间传播,出了错误也能及时改正。3.2系统总体模块设计3.2.1系统总体功能本系统划分为前后台两个部分,共是九个功能模块,分别是前端部分的四大功能模块:账号操作、歌曲播放、歌曲操作、查看推荐以及后端部分的五大功能模块:用户管理、歌曲管理、歌手管理、歌单管理、轮播图管理。这些模块具有以下的功能:(1)账号操作模块前台账号:前台账号为登录小程序的账号。用户在注册账号时小程序会获取该微信用户的头像,指示用户输入注册的账号密码。注册成功后,跳转到登录页面,用户输入成功注册的账号密码并通过账号验证后跳转到小程序主页面,若未注册账号或账号密码不匹配,系统将提示重新输入。小程序登录成功后,才可以进行该小程序中与账号绑定的相关操作,否则用户只是游客模式状态访问。后台账号:该模块没有注册账号功能,后台数据管理网站的超级管理员账号提前写入后台数据库中,登录时将登录信息与后台数据库中的相关信息匹配即可。首位超级管理员登录后,可以在网页端用户管理处添加新的超级管理员来协作管理后台数据。歌曲播放及操作模块播放歌曲:用户可点击歌曲名称或封面来将歌曲加载到播放器中进行播放。在歌曲播放时,会生成播放列表。在该列表内歌曲播放可分为随机播放、单曲循环、列表循环三种播放方式。搜索歌曲:用户可通过搜索功能来查询歌曲,既可以通过搜索歌曲名称来查询歌曲,也可以通过搜索歌手名称来查询歌曲。歌曲下载:用户在播放某一曲目时,可以将此曲目下载到本地。收藏歌曲:用户登录后可以通过点击收藏来将自己喜欢的音乐加入自己的歌曲收藏中。评论歌曲:用户登录后可以对歌曲进行评论。播放记录:用户在登陆后播放的歌曲,都会自动保存到最近播放记录中。用户可以查看此记录。(3)查看推荐模块歌单推荐:系统可根据用户收藏的歌曲通过相关的推荐算法为用户推荐可能喜欢的歌曲,并将这些歌曲生成一个推荐歌单在用户登录后主页显示。(4)查看歌手主页模块查看单曲:用户可以查看歌手演唱的歌曲。查看专辑:用户可以查看歌手收录歌曲下的专辑。(5)搜索功能模块搜索歌手:用户可以输入关键字来搜索匹配的歌手。搜索专辑:用户可以输入关键字来搜索匹配的专辑。搜索歌曲:用户可以输入关键字来搜索匹配的歌曲。(6)用户管理模块查看用户列表:超级管理员可以查看中已经注册小程序的账号信息和后台网站管理员的账号信息。添加用户:管理员可以通过输入账号密码等基本信息的方式来给后台管理网站添加新用户。修改用户信息:管理员可以对用户信息进行修改。注销用户:管理员可以对用户账号进行删除。(7)歌手及歌曲管理模块添加歌手:管理员可以在后台添加歌手信息,包括歌手的头像、姓名以及姓名首字母。在管理员添加歌曲之前,必须先添加对应的歌手。添加歌曲:管理员可以为曲库添加歌曲,填写歌曲的名字、所属歌手、专辑信息、歌曲封面。修改歌曲信息:管理员可以对歌曲的各项信息进行修改。删除歌曲:管理员可以对曲库中的歌曲进行删除。(8)歌单及轮播图管理模块添加歌单:管理员在后台新增歌单,在添加歌单时,添加歌单的名称分类及歌单封面。在歌单添加完成后,管理员可以向歌单里增删乐库中的所有歌曲。修改歌单信息:管理员可以对歌单的各项信息进行修改,包括歌单中的歌曲。添加轮播图:管理员可以给小程序首页添加轮播图,并添加点击轮播图后跳转到对应歌曲的地址。修改轮播图信息:管理员可以定期更新轮播图。(9)搜索功能模块搜索歌曲:用户可以输入关键字来搜索用户想要查询的歌曲。搜索歌手:用户可以输入关键字来搜索用户想要查询的歌手。3.2.2核心功能模块的设计3.2.2.1注册登录功能注册登录模块是用户在使用小程序端的功能操作。注册模块是用户在使用一些受限功能(如评论,收藏,查看播放记录等)时候需要调用的模块,注册时自动获取该微信账户的头像,用户只需输入账户名和密码即可完成注册。注册成功后小程序会自动跳转到登录页面,用户输入注册完成的账户名和密码。当该账户名在数据库中不存在时,小程序端会提示“该用户不存在”;若该账户存在但账户名和密码不匹配,则小程序端提示“密码错误”。故只有该用户存在并且账户名和密码匹配才可成功登录小程序。3.2.2.2后台管理功能后台管理模块是网页端超级管理员对后台所有数据库的管理,超级管理员登录后,选择点击左侧的歌手管理、轮播图管理、音乐库管理、注册用户管理、歌单管理,会跳转到对应的数据管理页面。该页面会分页展示数据库中该项全部数据,后台管理功能包括对数据的添加、删除、修改、查询功能。特殊的,对歌曲有专门的七日播放量统计功能。增加功能,超级管理员点击添加,系统会弹出添加歌曲的弹窗让管理员填写添加数据的各项信息:歌曲包括歌曲名称、歌手、歌曲时长、歌曲链接、歌曲封面和专辑名称;歌手包括歌手姓名、歌手图片和歌手姓名首字母;轮播图包括轮播图内容和页面跳转地址;注册用户包括昵称、头像、密码和用户名;歌单包括歌单名和歌单封面。删除功能,在每条数据的右侧有一个红色的删除按钮,当管理员点击删除时,系统会再次弹出是否删除的询问窗口,若点击确定则成功删除,若点击取消则取消删除。修改功能,在每条数据的右侧有一个白色的修改按钮,当管理员点击修改时,系统会弹出修改音乐的弹窗,添加歌曲时的各项数据都可以修改。查询功能,查询功能包括全字匹配查询和模糊查询,只要输入想要查询的内容中的其中一个字,数据库中带此字的数据信息都会分页展示出来。若数据库中未能匹配该字信息,则显示无此查询结果。播放量功能,在每条歌曲数据的右侧有一个白色的播放量按钮,管理员点击后可以查看该歌曲的七日播放量统计。3.2.2.3歌曲操作功能歌曲操作模块是用户在小程序端对歌曲的播放、下载、收藏等情况下时调用的模块。该模块主要为歌曲播放、播放模式切换、上下切歌、歌曲下载、歌曲分享五个部分。在用户使用小程序时,点击在主页歌单内的歌曲或者点击搜索歌曲后,都会跳转到正在播放页面播放点击的歌曲。点击暂停按钮,歌曲暂停播放;再次点击,歌曲继续播放。在点击歌曲时会生成播放列表,上下切歌就按照正在播放歌曲在此列表的位置进行上下转移。不同的播放模式和播放列表决定了歌曲的播放顺序。该小程序共有三种播放模式,不同的播放模式对应不同的标识。用户点击下载标识,即可将此歌曲下载到本地。点击分享标识可以将此歌曲发送给用户的微信好友。3.2.2.4评论功能评论模块是用户在评论歌曲时调用的模块,该模块主要分为发表评论。在歌曲进行播放时,用户可以左滑进入歌曲评论页面,用户可以看到其他用户对此歌曲的评论,也可以自己对该首歌曲进行评论。如果评论内容为空,则系统会提示“评论内容不得为空”,当用户将评论内容填写完毕点击发表时,用户对歌曲评论成功。3.2.2.5收藏功能收藏模块是用户收藏歌曲时所调用的模块,且系统的收藏功能主要分为歌曲收藏。用户在成功登录后点击歌曲收藏时标识时,会将此歌曲加入到私人收藏歌单,若歌单中已经存在此歌曲,收藏标识将被填充,再次点击则取消收藏。若用户未登录点击收藏标识,则跳转到用户登录界面。3.2.2.6搜索功能搜索模块是用户在搜索歌曲,专辑,歌单,歌手等情况下调用的模块,本系统采用模糊查询的方式,可以通过关键字来搜索歌曲,专辑,歌手,歌单和用户。进行搜索时,输入关键字,点击搜索,即可显示出所有与该关键字相符的数据,搜索结果为歌手和歌曲两种结果,若搜索结果为歌手,则用户点击后跳转到对应歌手主页;若搜索结果为歌曲,则用户点击后跳转到对应歌曲的播放页面。搜索模块记录用户的搜索历史,也可以删除搜索历史。3.2.2.7推荐功能推荐模块主要是系统为用户进行个性化推荐歌曲的模块。在歌曲推荐模块,一定量的用户在收藏了一定量的歌曲后,根据基于用户的协同过滤算法会给用户在主页展示一个推荐歌单,推荐歌单内的数据为最终的推荐结果。3.3本章小结本章介绍了总体设计需要完成的任务,之后将音乐播放微信小程序结构化,详细介绍了音乐播放微信小程序中各模块的功能和具体设计,以及核心模块的功能和设计。第4章详细设计详细设计阶段是针对音乐播放微信小程序,按照总体设计时的思路进行分块设计和数据库设计,其中数据库设计要包括数据库的概念设计和逻辑设计,对数据库中所有表结构和字段进行说明,同时对数据库表中的实体的属性以及各实体间的练习做出说明,对数据库的设计要完整且丰富,才能尽可能的实现总体设计中的所有内容。详细设计也被人称为过程设计,在总体设计阶段,已经确定了系统的总体结构,设计了系统中每个组成模块的功能和模块间的联系,明白了设计该系统需要“做什么”。详细设计就是要回答“怎么做”的问题,要在需求分析和总体设计的基础上,设计如何实现这个系统,对系统中的每个模块给出详细的过程性描述,应该用详细设计的表达来表示这些描述。4.1开发技术介绍本系统主要由两个部分组成,移动端的音乐播放小程序,基于Web的乐库管理网站组成,使用B/S架构管理后台乐库等数据,前端技术使用Layui技术,后台框架选择Springboot和Mybatis,前端播放页面使用微信小程序进行开发。Springboot是由Pivotal团队设计的开发框架,其目的是Spring应用的搭建及开发过程,其特点是:分层、开源、轻量。此框架应用了特定的配置方式,从而令开发人员不再需要定义样板化的配置。它不是Spring的替代品,而是对Spring很好的封装。其采用JavaConfig的方式对Spring进行配置,并且提供了大量注解,极大的提供了工作效率,使编码变得简单。微信小程序是可以在微信中直接运行的应用业务。在微信公众平台中,其提供一个简单高效的应用开发框架和配套的组件及API,可以帮助开发人员开发出可以运行在微信中的服务,这种服务通常被称为微信小程序。微信小程序不需要用户单独安装,用户需要使用时,可以通过在微信中搜索小程序名称找到其打开使用或者通过微信扫一扫功能扫描小程序二维码打开使用。除此之外,用户还可以通过点击其他微信好友分享的小程序链接打开使用。4.2数据库设计4.2.1E-R图介绍E-R图,也称为实体-联系图,提供了表示实体类型、属性还有联系的方法,用来描述现实世界的概念模型。ER图有以下四个成分:矩形框:表示实体,在矩形框内写入实体名;菱形框:表示联系,在菱形框内写入联系名;椭圆形框:表示实体的属性或联系的属性,将属性名写入椭圆形框中。对于主属性名,则在其名称下方划一下划线;连线:实体与联系之间、实体与属性之间、联系与属性之间用直线相连,并在直线上标注联系的类型。实体-联系数据模型中的联系型,存在3种一般性约束:一对一约束(联系)、一对多约束(联系)和多对多约束(联系)。一对一联系,在两个实体连线方向各写1;一对多联系,要在1的一方写1,多的一方写N;多对多的联系,要在两个实体连线的方向分别写N、M。4.2.2数据库的创建在MySQL中创建数据库和数据表,根据设计要求,为数据库取名为weixin_music,划分出来的实体和实体所含的属性如下:管理员实体:管理员编号、用户名、密码、邮箱、手机号、性别、角色;用户实体:用户编号、用户名称、账号、密码、用户头像;歌曲实体:歌曲编号、歌曲名、对应歌手、歌曲获取地址、专辑名称、专辑封面;歌手实体:歌手编号、歌手名、歌手头像、歌手、歌手姓名首字母;歌单实体:歌单编号、歌单名、歌单封面;轮播图实体:轮播图编号、轮播图、轮播图跳转地址;评论实体:评论编号、评论内容、评论用户编号、评论时间、评论歌曲编号播放记录实体:播放记录编号、歌曲编号、播放时间、对应用户编号收藏记录实体:收藏编号、歌曲编号、收藏时间、对应用户编号4.2.2实体间的联系用户实体、歌曲实体之间的实体关系是一个用户可以播放和收藏多首歌曲,同时一个用户可以被推荐多首歌曲,且一首歌曲也可以被多个用户播放和收藏,也可以被推荐给多个用户,是多对多的关系,如E-R图5-1所示:图5-1用户实体与歌曲实体E-R图用户实体、评论实体之间的实体关系是一个用户可以对多首歌曲评论,也可以对一首歌曲进行多次评论是多对多的关系,用E-R图表示如图5-2所示:图5-2用户实体与评论实体E-R图用户实体、播放记录实体之间的实体关系是用户在登录以后,对歌曲进行播放后才会有播放记录,所以是一对一的关系,用E-R图表示如图5-3所示:图5-3用户与播放记录E-R图用户实体、收藏记录实体之间的实体关系是用户在登录以后,对歌曲进行收藏后才会有收藏记录,所以是一对一的关系,用E-R图表示如图5-4所示:歌手实体、歌曲实体之间的关系是一个歌手演唱多首歌曲,不同的歌手可以演唱不同的歌曲,但歌手只能演唱自己发行的歌曲,所以是一对多的关系,用E-R图表示如图5-5所示:图5-4用户实体与收藏记录E-R图图5-5歌手实体与歌曲实体E-R图歌单实体、歌曲实体之间的关系是一个歌单可以收录多首歌曲,每一首歌单都可以收录乐库中的任何一首歌曲,所以歌单实体和歌曲实体是多对多的关系,用E-R图表示如图5-6所示:图5-6歌单实体与歌曲实体E-R图管理员实体和用户实体之间的关系是,管理员可以对用户进行增加、删除修改操作,而管理员只有一个,所以是一对多的关系,用E-R图表示如图5-7所示:管理员实体和歌曲实体之间的关系是,管理员可以对歌曲进行增加、删除修改操作,而管理员只有一个,所以是一对多的关系,用E-R图表示如图5-8所示:管理员实体和歌单实体之间的关系是,管理员可以对歌单进行增加、删除修改操作,而管理员只有一个,所以是一对多的关系,用E-R图表示如图5-9所示:图5-7管理员实体与用户实体E-R图图5-8管理员实体与歌曲实体E-R图图5-9管理员实体与歌单实体E-R图管理员实体和评论实体之间的关系是,管理员可以对评论进行增加、删除修改操作,而管理员只有一个,所以是一对多的关系,用E-R图表示如图5-10所示:图5-10管理员实体与评论实体E-R图管理员实体和轮播图实体之间的关系是,管理员可以对轮播图进行增加、删除修改操作,而管理员只有一个,所以是一对多的关系,用E-R图表示如图5-11所示:管理员实体和歌手实体之间的关系是,管理员可以对歌手进行增加、删除修改操作,而管理员只有一个,所以是一对多的关系,用E-R图表示如图5-12所示:图5-11管理员实体与轮播图实体E-R图图5-12管理员实体与歌手实体E-R图歌曲实体和评论实体之间的关系是,一首歌含有多个用户的评论内容,所以是一对多的关系,用E-R图5-13表示:图5-13歌曲实体与评论实体E-R图轮播图实体和歌曲实体的关系是,用户可以在主页点击轮播图跳转到对应的歌曲播放页面,所以是1对1的关系,用E-R图5-14表示:图5-14轮播图实体与歌曲实体E-R图综上所述,系统所有实体之间的关系用E-R图5-14表示:图5-14整体E-R图4.2.3数据库表的创建将上述概念设计转化成数据库的逻辑结构,将每个关系都转化为数据库中的表格数据,根据需求,设计出如下表格:4.2.3.1用户表用户表(register_user):该表用来存储小程序端注册成功用户的用户编号、用户昵称、头像地址、密码、用户名,用于用户进行登录操作。表5-1用户表(register_user)字段名描述类型长度允许空值主键/外键user_id用户编号bigint20否主键name用户昵称varchar20否pic头像地址varchar50否password密码int20否user_name用户名varchar20否用户表register_user中,共有五个字段来存储小程序端注册用户信息。(1)user_id:user_id字段代表用户的注册编号,是register_user表的主键,故不允许为空。(2)name:name字段代表用户昵称,用户登录后会在个人主页显示,用户在评论歌曲时,每条评论也会显示评论用户的昵称。(3)pic:pic字段代表用户头像,用于存放用户的头像地址,在用户登录系统后显示头像用,该操作会直接获取用户的微信头像,一般不为空。(4)password:password字段代表用户密码,登录的时要验证用户名和密码是否匹配,用户名和密码都对了之后才能登录小程序,对系统进行操作。该字段的最长长度设置为20。(5)user_name:user_name字段代表用户名,登录的时候要验证用户名和密码是否正确,一般用户名为英文和数字组成,该字段的最长长度设置为20。4.2..3.2管理员表管理员表(sys_user):该表用来存储后台管理数据网站管理员的用户编号、账号、密码,用于用户进行登录操作。表5-2超级管理员表(sys_user)字段名描述类型长度允许空值主键/外键user_id管理员编号bigint20否主键account管理员账号varchar20否password密码varchar20否管理员表sys_user中,共有三个字段来存储后台管理员信息。(1)user_id:user_id字段代表管理员的编号,是sys_user表的主键,故不允许为空。(2)account:account字段代表管理员账号,登录的时候要验证用户名和密码是否正确,一般长度为20。(3)password:assword字段代表用户密码,登录的时要验证用户名和密码是否匹配,用户名和密码都对了之后才能登录后台管理系统,对系统进行操作。该字段的最长长度设置为20。4.2..3.3轮播图表轮播图表(pic):该表用来存储小程序主页的轮播图信息,包括轮播图编号、图内容、以及点击后跳转音乐播放地址。表5-3轮播图表(pic)字段名描述类型长度允许空值主键/外键pic_id轮播图编号bigint20否主键url图片存放地址varchar50否music_url音乐播放地址varchar50否轮播图表pic中,共有三个字段来存储轮播图信息。(1)pic_id:pic_id字段代表轮播图的编号,是pic表的主键,故不允许为空。(2)url:url代表轮播图存放的地址,不能为空,由于上传之后会生成一长串字符串,故长度设为50。(3)music_url:music_url代表用户点击轮播图后跳转的地址,长度为50。4.2..3.4歌手表歌手表(singer):该表用来存储后所有歌手信息,包括歌手编号、歌手名、歌手图片地址、歌手姓名首字母。表5-4歌手表(singer)字段名描述类型长度允许空值主键/外键singer_id歌手编号bigint20否主键name歌手名varchar20否pic歌手图片地址varchar50否findex姓名首字母varchar5否歌手表singer中,共有四个字段来存储歌手信息。(1)singer_id:singer_id字段代表歌手编号,是singer表的主键,故不允许为空。(2)name:name字段代表歌手名。(3)pic:pic字段代表歌手头像,在歌手查询处小窗显示,在歌手主页当主页背景显示,长度为50。(4)findex:findex字段为歌手名首字母,在歌手页按首字母从A-Z排序,方便用户查找。4.2.3.5歌曲表歌曲表(song):该表用来存储后所有歌曲信息,包括歌曲编号、歌曲名、歌手名、播放地址、专辑封面、专辑名称、播放时长。表5-5歌曲表(song)字段名描述类型长度允许空值主键/外键song_id歌曲编号bigint20否主键name歌手名varchar20否singer_id歌手编号bigint20否外键url歌手头像varchar50否pic专辑封面varchar50否mark专辑名称varchar20否duration播放市场varchar10否歌手表song中,共有七个字段来存储歌手信息。(1)song_id:song_id字段代表歌曲编号,是song表的主键,故不允许为空。(2)name:name字段代表歌曲名。(3)singer_id:singer_id字段代表歌手,该字段为外键,是singer表中的主键。(4)url:url字段为歌曲获取地址,歌曲的播放、下载都需要获取此地址,故不能为空,大小为50。(5)pic:pic字段为该歌曲对应专辑的图片地址,在歌曲播放页面显示。(6)mark:mark字段为歌曲所在的专辑名称。(7)duration:duration字段为歌曲的播放时长,用于播放页面的进度条显示。4.2.3.6歌单表歌单表(song_sheet):该表用来存储后所有歌单信息,包括歌单编号、歌单名、歌单封面。表5-6歌单表(song_sheet)字段名描述类型长度允许空值主键/外键sheet_id歌单编号bigint20否主键name歌单名varchar20否pic歌单封面varchar50否歌单表song_sheet中,共有三个字段来存储歌单信息。(1)sheet_id:sheet_id字段代表歌单编号,是sheet表的主键,故不允许为空。(2)name:name字段代表歌单名。(3)pic:pic字段代表歌单封面图片存放地址,用于图片获取。该图片会在歌单遍历时小窗显示,在点击歌单详情时作背景图,字段大小为50。4.2.3.7评论表评论表(comment):该表用来存储后所有歌曲的评论信息,包括评论编号、评论内容、评论时间、评论人、音乐。表5-8评论表(comment)字段名描述类型长度允许空值主键/外键comment_id评论编号bigint20否主键context评论内容varchar255否user_id评论人bigint20否外键time评论时间datetime否song_id歌曲bigint20否外键评论表comment中,共有五个字段来存储歌单信息。(1)comment_id:comment_id字段代表评论编号,是comment表的主键,故不允许为空。(2)context:context字段为评论的具体内容,因为评论有长有短,所以长度设置了255。(3)user_id:user_id字段代表评论人,该字段为外键,是register_user表中的主键。(4)time:time字段为该评论的发表时间,采用时间戳形式。(5)song_id:song_id字段为该条评论所对应的歌曲,为该表外键,是song表的主键。4.2.3.8播放记录表播放记录表(song_played):该表用来存储后所有用户播放记录的信息,包括记录编号、歌曲、播放时间、播放用户。表5-8播放记录表(song_played)字段名描述类型长度允许空值主键/外键played_id记录编号bigint20否主键time播放时间datetime否user_id播放用户bigint20否外键song_id歌曲bigint20否外键播放记录表song_played中,共有四个字段来存储播放记录信息。(1)played_id:played_id字段代表播放记录编号,是song_played表的主键,故不允许为空。(2)time:time字段为改条记录时间。(3)user_id:user_id字段代表播放用户,该字段为外键,是register_user表中的主键。(4)song_id:song_id字段为该记录的播放歌曲。4.2.3.9收藏记录表收藏记录表(song_collection):该表用来存储后所有用户收藏歌曲记录的信息,包括记录编号、歌曲、播放时间、收藏用户。表5-9收藏记录表(song_collection)字段名描述类型长度允许空值主键/外键collection_id记录编号bigint20否主键time收藏时间datetime否user_id收藏用户bigint20否外键song_id收藏歌曲bigint20否外键播放记录表song_collection中,共有四个字段来存储收藏记录信息。(1)collection_id:collection_id字段代表收藏记录编号,是song_collection表的主键,故不允许为空。(2)time:time字段为改条记录时间。(3)user_id:user_id字段代表收藏用户,该字段为外键,是register_user表中的主键。(4)song_id:song_id字段为该记录的收藏歌曲。4.2.3.10歌单-歌曲关联记录表歌单-歌曲关联记录(sheet_list):该表用来存储每个歌单中所包含的具体歌曲信息,包括记录编号、歌单编号、歌曲编号。表5-10歌单-歌曲关联记录表(sheet_list)字段名描述类型长度允许空值主键/外键list_id关联记录编号bigint20否主键sheet_id歌单编号bigint20否外键song_id歌曲编号bigint20否外键歌单歌曲关联表(sheet_list)中,共有三个字段来存储歌单歌曲关联信息。(1)list_id:list_id字段代表关联记录的编号,是sheet_list表的主键,故不允许为空。(2)sheet_id:sheet_id代表歌单编号,用来表示有关联记录的具体歌单,为song_sheet表的主键,该字段为外键。(3)song_id:song_id代表歌曲编号,用来表示歌单中存储的具体歌曲,为song表的主键,该字段为外键。4.3数据库接口设计定义完上述的数据库表后,需要为数据库的访问提供统一接口,经过设计一共设计了九个访问数据库接口,分别是:RegisterUserService访问register_user表;SongService访问song表;SingerServcie访问singer表;SongSheetService访问song_sheet表;CommentService访问comment表;PicService访问pic表;SongPlayedService访问song_played表;SongCollection访问song_collection表;SheetListService访问sheet_list表。各接口继承了mybatis-plus技术的IService<T>接口,泛型T在此为各接口传递数据的参数型实体类,例如RegisterUserService使用的参数型实体类为RegisterUserParam。每个实体类中的所有属性对应其数据库表中的各项字段,每个接口都继承了IService<T>接口实现类中的方法。每个接口都定义了增加、删除、更新、分页查询等方法,在接口实现类中,通过调用自身继承父类的方法来实现各函数的内部逻辑。增加、删除、更新函数的返回值类型为void,add()函数用于小程序端注册用户或后台管理员添加注册用户数据。delete()函数用于后台管理员删除注册用户数据。update()函数用于后台管理员个更新注册用户数据。查询函数的返回值为各个接口传递数据的结果型实体类,例如在RegsiterUserService中,查询函数的返回值类型为RegisterUserResult。findBySpec()为查询单条数据;findListBySpec()为查询列表数据。最后是分页查询函数findPageBySpec(),该函数的作用是将在数据库查到的全部数据分页展示到前台网站。返回值类型为LayuiPageInfo,该类型是对Layui中table标签分页展示结果的封装。在获取分页结果过程中,再次用到了mybatis-plus的接口IPage。获取分页结果方法createPageInfo()在LayuiPageFactory中,该方法中IPage接口通过创建匿名内部类的方法调用接口中的getTotal()、getPages()、getRecords()方法,将分页查询数据封装到LayuiPageinfo数据类型中。综上所述,以RegisterUserService为例,该过程的类图如下图5-15所示。图5-13以RegisterUserService为例的类图表示4.4核心功能模块的设计4.4.1系统总体功能设计根据总体设计中对系统功能模块的划分,可得出系统共分共是九个功能模块,前端部分有:账号操作、歌曲播放、歌曲操作、查看推荐以及后端部分:用户管理、歌曲管理、歌手管理、歌单管理、轮播图管理。根据划分出的功能模块可以得出系统主要的功能模块图,系统功能模块图如下图5-14所示:图5-14系统功能模块图4.4.2注册登录功能设计该系统登录分为前台小程序端登录和后台web端管理员登录,小程序端用户登录需注册账号。对于该模块的设计大致如下:管理员登录:管理员的账号密码提前写在数据库表sys_user中,在网页端输入账号密码并提交表单后,后台LoginController类用GET方法获取到数据。并通过调用shiro安全框架下的UsernamePasswordToken类中的同名方法进行用户名密码匹配的过程,若输入的用户名密码与数据库事先存入的相符,则成功登录跳转到管理主页面。小程序用户注册:小程序用户在登录前需要进行注册,注册时小程序跳转到register.wxml填写表单数据,填写完成后点击注册按钮触发subReg事件,当用户在注册时填写不规范时,subReg事件中使用showToast弹窗组件令用户注意填写规范。注册成功后,将数据打包通过request请求发送到后台ApiController中,ApiController中registerUser()方法接收数据并封装到RegisterUserParam的对象中,通过调用registerService接口继承的BaseService中的查询方法,若数据库中没有该用户名存在,则注册成功。小程序用户登录:注册成功后或点击登录时,小程序跳转到login.wxml页面,输入账号密码点击提交后触发bindGetUserInfo事件,该事件将数据通过requset发送到ApiController中,通过loginAPP()接收数据并查询数据库是否匹配,若匹配成功,则登录成功。系统注册登录功能流程图如图5-15所示。4.4.3后台管理功能设计后台管理模块功能就是对数据库信息的增删改查操作,设计流程是通过提交html表单到对应的controller层中,controller层通过GET方式接收数据后封装到对应的参数型实体类对象中。调用service层的方法,对数据进行增删改查操作。该模块设计运用了mybatis-plus技术,所以相同的操作方法基本一直,而对歌曲有专门的七日播放量统计功能,所以就对歌曲操作为例进行设计描述。增加功能,管理员点击添加跳转到song_add.html,该页面为提交增加歌曲信息的表单数据到songController中对应路径为/addItem的addItem()方法中,表单数据封装在SongParam的对象中,通过调用songService的add()方法完成添加。删除功能,管理员选中数据点击删除,将本条数据发送到songController类对应路径为/delete的delete()方法中,通过调用songService层的delete()函数完成删除。修改功能,管理员选中数据点击更新,填写更新表单,将更新后的数据发送到songController类对应路径为/editItem的editItem()方法中,通过songService层的update()函数完成替换。查询功能,当管理员点击乐库管理时,会调用songController类中的list()函数,该函数调用songService层的findPageBySpec()函数,将后台数据库的数据分页封装在LayuiPageInfo类型数据对象中,使用layui的table标签在前端展示。图5-15注册登录功能流程图4.4.4歌曲播放功能设计歌曲播放功能模块主要包括选择歌曲播放、上下切歌、播放模式切换的功能。歌曲播放主要依靠在app.js中设计的初始为空的songlist[]常量。对该模块功能以来与wx.getBackgroundAudioPlayer()组件。其中具体的功能设计如下:歌曲播放的设计分为两类。第一类是通过歌单、歌手主页、记录中选择播放歌曲,第二类是通过搜索结果播放歌曲。第一类是获取歌曲列表。当点击歌单、播放记录或歌手主页时,各page中的js文件会想后台发送请求,获取到的结果赋值给songlist[]中。以系统歌单为例,当用户点击进入歌单主页后,toplist.js向后台ApiController发送/getMusicList请求进入getMusicList()方法,参数为sheet_id。在此方法中通过sheet_id再次查询sheet_list表,获取当前sheet_id对应下的歌曲全部信息。并将结果返回。在toplist.js中得到结果后,通过setData将songlist[]的值改变,即可得到该歌单的播放队列。第二类是获取单首歌曲。在search.js设计selectSong()触发事件,当在搜索页面搜索歌曲时,会触发search.js中的searchAction()事件,该事件向后台ApiController发送请求,调用searchMusic方法,查询歌曲并将返回结果封装到song中。点击该歌曲会触发selectSong()事件,再将song的值赋值给songlist[],即可跳转到歌曲播放页面。上下切歌的实现是通过给当前播放歌曲设置currentIndex,在player.js中设计一个getNextIndex()的方法,参数设置为boolean类型的nextFlag。当用户点击下一首标识时,触发next()事件,事件中调用getNextIndex()方法,nextFlag为true。当用户点击上一首标识时,触发pre()事件,事件中调用getNextIndex()方法,nextFlag为false。4.4.5歌曲操作功能设计歌曲操作功能模块包括对歌曲的收藏、评论、分享、下载功能。该部分的设计过程如下:歌曲收藏:app.js中定义user_id和isLogin两个常量来记录用户的登录状态,user_id初始为空,isLogin初始为false。当用户点击收藏标识时,若用户未登录,则user_id和isLogin均为初始状态,则跳转到登录界面。用户登录成功后,user_id赋值成用户名,isLogin置为true。在player.js中设置favorite变量,若favorite为false,则标识该歌曲未被收藏。此时用户点击收藏标识,触发favorite()事件,将userId和songId作为参数向后台ApiController类发送请求,调用favorite()方法,在方法中调用CollectionService中add()方法,将歌曲ID和用户ID填入song_collection表中。歌曲评论:player.js定义context常量来表示评论内容,用户在评论完成点击发表后,触发saveComment()事件,事件将context和user_id作为参数向服务器发送request请求,调用ApiController类saveComment()方法,saveComment调用CommentService中的add()方法,将各项数据填入comment表中。歌曲下载:用户点击下载标识后,触发player.js中的download()事件,利用FileSystemManager组件工具下载。通过向后台发送请求得到歌曲路径信息和歌曲名,保存到微信USER_DATA_PATH文件目录下,文件名为{{songName}}.mp3。歌曲播放和歌曲操作流程图如图5-16所示:图5-16歌曲功能流程图4.4.6搜索功能设计搜索模块是用户在搜索歌曲,歌手时调用的模块,功能主要有模糊查询、历史记录、清楚历史记录、点击搜索歌手、点击搜索歌曲。以上功能设计如下:模糊查询:在搜索框input输入关键字后,点击搜索,触发searchAction()事件,在searchAction()中利用利用event.currentTarget.dataset.txt将文本框数据传入keyword变量中,通过发送请求调用后台ApiController类中的查询方法,将歌手查询结果放入局部变量singers[]中,将歌曲查询结果放入songs[]中,在前台遍历展示singers[]和songs[]即可。当搜索结果为歌曲为,触发selectmusic()事件,跳转到歌曲播放页面;为歌手时,触发goSinger()事件,跳转到歌手主页。历史记录:player.js获取到keyword后,将其赋值给historySearch,利用wx.getStorageSync()将historySearch存储。在前台遍历即可得到所有搜索记录。在点击删除历史记录时,通过调用wx.removeStorageSync()即可实现对历史记录的删除。搜索功能的操作流程图如图5-17所示:图5-17搜索功能流程图4.4.7歌手展示功能设计歌手展示功能模块为将数据库中所有歌手的首字母按照从A~Z的顺序进行排序,具体设计如下:在singer.js中,通过调用后台ApiController类获取数据库中所有歌手的实体存入singerList中,通过比较每个歌手的姓名首字母的的大小获取一个有序表map,在前台对map遍历即可。4.4.8推荐功能设计推荐功能利用基于用户的协同过滤算法给用户推荐歌曲,该算法思想为根据所有用户对歌曲的偏好,发现与当前用户偏好相似的“邻居”用户群,即计算“K邻居”。然后基于这K个邻居的历史偏好信息,为当前用户进行推荐,该算法原理如图5-18所示,假设用户A收藏了歌曲A、歌曲C,用户B收藏了歌曲B,用户C收藏了歌曲A、歌曲C、歌曲D;从这些用户收藏记录中,我们可以发现用户A和用户C的歌曲收藏偏好是比较相似的,同时用户C还收藏了歌曲D,那么我们可以推断用户A可能也喜欢歌曲D,因此可以将歌曲D推荐给用户A[21]。图5-18基于用户协同过滤推荐原理图基于用户的协同过滤算法主要包括两个步骤:(1)找到和用户偏好相似的用户集合。(2)找到这个集合中的用户喜欢的,且用户没有收藏的歌曲推荐给用户。该过程具体设计流程如下:在用户登录后点击获取推荐歌单时,触发index.js中的getRecommendData()事件,该事件发送请求到ApiController调用getRecommend()方法,该方法通过调用CollectionService层的selectList()方法获取此user_id的收藏记录,并通过收藏记录的song_id查询出所有与此user_id收藏过相同歌曲的user_id,再通过这些user_id查询这些用户的收藏记录,将所有的收藏记录输出到dataModel.txt文件中。最后以dataModel.txt为数据模型model,通过调用ApacheMahout协同过滤算法下的用户相似度算法EuclideanDistanceSimilarity()获取用户相似度user,再调用NearestNUserNeighborhood()方法计算用户紧邻neighbor,最后调用GenericUserBasedRecommender()方法,参数为model,user,neighbor得到推荐结果。4.5本章小结本章是对具有推荐功能的音乐播放微信小程序的详细设计部分的介绍。本章介绍了微信小程序的相关特性和Springboot框架的体系结构和功能优点,然后依次介绍了毕设项目的数据库的设计、数据库的接口设计以及核心功能模块的设计,这些设计为接下来的系统实现和测试打下了良好的基础。第6章系统实现与测试第5章系统实现与测试5.1系统实现用户和系统的交互是建立在用户界面上的,因为用户无法看到代码,所以只能通过系统提供的用户界面来和系统进行交互,因此用户界面是十分重要的。用户可以通过用户界面向系统传递信息,同时也可以接收系统的反馈。具有推荐系统的音乐播放微信小程序的音乐数据是需要合理的界面来展现的,良好的界面设计可以简化用户操作并带给用户良好的体验感。5.1.1注册登录功能的实现小程序端用户登录需要注册,注册时小程序自动获取微信用户的头像,填写用户名和密码,点击注册按钮注册成功。登录时,用户填写已注册完的用户名和密码,点击登录按钮登录。效果如下图6-1所示:图6-1小程序端用户注册登录网页端管理员账号无需注册,为事先加入数据库中的数据,输入账号和密码即可完成登录。效果如下图6-2所示:图6-2网页端端管理员登录5.1.2主界面的实现管理员成功登陆后,自动跳转到网页端的主页。系统主页导航栏对应后台管理选项。包括乐库管理、歌手管理、歌单管理、用户管理、轮播图管理。点击导航栏会分页显示数据库中数据,并显示操作选项。效果图如6-3所示:图6-3管理员系统主界面用户成功登录后,跳转到小程序端的主页。主页包含三部分:轮播图、搜索栏、推荐歌单、系统歌单。底部的tabBar对应跳转到不同的功能页面。效果图如图6-4所示:图6-4小程序端主界面5.1.3歌曲播放功能的实现小程序触发歌曲播放的方式有六种方式:点击主页的轮播图触发、点击歌单内歌曲名触发、点击搜索歌曲结果、在歌手主页点击歌曲名触发、在播放记录中点击歌曲名触发、在收藏列表中点击歌曲名触发。以上事件触发歌曲播放后,会跳转到tabBar的正在播放界面。界面静态显示歌曲信息以及歌曲操作表示,以唱片形式将歌曲封面旋转动态显示。效果图如下图6-5所示:图6-5小程序音乐播放界面5.1.4评论功能的实现在歌曲播放界面右滑显示用户对当前播放歌曲的评论,评论记录评论内容、评论事件和评论者,上下滑动可翻阅所有评论。用户若想评论此歌曲,需在文本框“请输入回复”中填写想要评论的内容,点击发送即可。效果图如下图6-6所示:图6-6评论功能实现效果5.1.5搜索功能的实现搜索功能用于帮助用户快速查找到想要获得的内容。小程序的搜索功能提供歌曲搜索、歌手搜索。该搜索功能有模糊查询的功能,当用户输入关键字时,系统会匹配关键字查找,若匹配的结果为歌曲,则以歌曲-歌手的形式显示;若匹配结果为歌手,则以歌手头像头像-歌手名结果显示。效果图如图6-7所示:图6-7搜索功能实现效果5.1.6歌手展示功能的实现为了方便用户查询歌手,提高查询效率。歌手展示功能模块提供了按照歌手的姓名首字母顺序从A~Z排序的功能,并且只给出数据库中已有歌手的姓名首字母,当用户点击某个字母时,小程序会定位到选择字母的位置。效果如图6-8所示:图6-8歌手展示功能实现效果5.1.7推荐功能的实现推荐功能的实现,是使用基于用户的协同过滤算法,对用户的收藏歌单进行分析统计,为用户推荐歌曲,推荐结果在小程序主页显示。效果如下图6-9所示:图6-9推荐功能实现效果5.2程序测试对于系统的测试主要采用白盒测试,而且是分模块进行的,会对各个模块的入口和出口数据进行严格的检查。采用白盒测试,方便测试人员掌握系统的内部结构和处理过程,并且可以随时修改内部程序,使得对系统的测试工作变得十分便利。因此测试人员可以通过检查程序逻辑并得出相应测试数据来检查系统各模块能否正常的运行。5.2.1本系统测试具有推荐功能的音乐播放微信小程序主要有账号操作、歌曲播放、歌曲操作、用户管理、歌曲管理、歌手管理、歌单管理、轮播图管理,这八个功能模块都分别包含许多功能,根据以上介绍的测试原则,将使用测试用例文档分别对本系统进行测试。由于本系统各功能模块内包含的小功能过多,就不一一列举测试,仅选择几个具有代表性功能的来进行测试,测试用例如下。用户登录的测试用例,如表6-1所示。表6-1用户登录的测试用例用例描述前提条件用例步骤期待结果实际结果用户登录页面用户名和密码都存在且匹配输入用户名和密码不报错,成功登录与期待结果相同用户登录页面用户名和密码都存在但不匹配输入用户名和密码报错,登录失败与期待结果相同用户登录页面用户名不存在输入用户名和密码报错,登录失败与期待结果相同用户登录页面用户名或密码有一项为空输入用户名和密码报错,登录失败与预期结果相同表6-1用户登录测试用例,实际结果与期待结果相同,用户登录功能通过测试。(2)歌曲播放的测试用例,如表6-2所示:表6-2歌曲播放的测试用例用例描述前提条件用例步骤期待结果实际结果小程序主界面轮播图有跳转播放的点击事件点击轮播图不报错,成功播放与期待结果相同小程序主界面轮播图没有跳转播放的点击事件点击轮播图报错,未获取到歌曲地址与期待结果相同歌单详情页面歌单中有该歌曲地址点击歌曲名不报错,播放成功与期待结果相同歌单详情页面歌单中没有该歌曲地址点击歌曲名报错,播放失败与预期结果相同(3)搜索功能的测试用例,如表6-3所示:表6-3搜索功能的测试用例用例描述前提条件用例步骤期待结果实际结果搜索页面数据库中有符合关键字的歌手和歌曲输入关键字不报错,搜索成功与期待结果相同搜索页面数据库中只有符合关键字的歌手输入关键字不报错,搜索成功与期待结果相同搜索页面数据库中只有符合关键字的歌曲输入关键字不报错,搜索成功与期待结果相同搜索页面数据库中没有符合关键字的歌曲和歌手输入关键字报错,搜索失败与预期结果相同搜索页面历史搜索记录中有数据点击删除历史记录不报错,删除成功与预期结果相同搜索页面历史搜索记录中没有数据点击删除历史记录报错,未获取到数据与预期结果相同(4)收藏功能的测试用例,如表6-4所示:表6-4收藏功能的测试用例用例描述前提条件用例步骤期待结果实际结果歌曲播放界面用户未登录点击收藏不报错,跳转到登录页面与期待结果相同歌曲播放界面用户已登录且此歌曲未在收藏列表点击收藏不报错,成功收藏与期待结果相同歌曲播放界面用户已登录且此歌曲在收藏列表点击收藏不报错,取消收藏与期待结果相同(5)评论功能的测试用例,如表6-5所示:表6-5评论功能的测试用例用例描述前提条件用例步骤期待结果实际结果歌曲评论页面用户未登录点击发表评论不报错,跳转到登录页面与期待结果相同歌曲评论页面用户已登录但评论内容为空点击发表评论报错,发表失败与期待结果相同歌曲评论页面用户已登录且评论内容不为空点击发表评论不报错,发表成功与期待结果相同(6)推荐功能的测试用例,如表6-6所示:表6-6评论功能的测试用例用例描述前提条件用例步骤期待结果实际结果小程序主界面用户未登录查看推荐页面不报错,跳转到登录页面与期待结果相同小程序主界面用户已登录但未收藏歌曲查看推荐页面不报错,没有推荐结果与期待结果相同小程序主界面用户已登录且进行收藏歌曲操作查看推荐页面不报错,成功获取推荐结果与期待结果相同5.3本章小结本章节主要介绍了系统主要的功能模块是如何实现的以及实现的效果是怎样的,其中介绍功能模块时描述了功能模块实现的流程以及实现的主要代码,对于实现的效果则用系统实际运行时的截图来展示。后面的部分介绍了对系统的测试,其中包括使用的测试方法,测试方法的优势以及测试得出的结果。结论本文详细论述了具有推荐功能的音乐播放器微信小程序的设计与实现,按照软件工程的设计流程,从需求分析到总体设计再到详细设计再到系统的具体实现逐步进行介绍。本文的主要工作成果分为如下几个方面:(1)通过实际考察以及对网上已有的音乐播放器使用和调研,了解了音乐播放小程序的基本功能模块(2)从需求分析中明确的功能着手,划分出系统的功能模块,完成系统总体设计。并且设计出各个模块内的大体流程,分析系统实体关系、细
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 五下《倒数》教学设计
- 青少年皮肤化妆技巧
- 公司规章制度和基本制度
- 分子印迹技术应用
- 2025-2030细胞培养肉产业化监管框架与消费者认知度调查报告
- 2025-2030线控转向系统安全标准与产业化进程分析
- 2025-2030系列产品用户画像构建与产品定位优化报告
- 2025-2030突尼斯轻工业市场现状供需分析及投资发展策略报告
- 2025-2030硼酸锂聚合物改性新材料发展趋势分析
- 2025-2030相变材料在温控智能玻璃中的稳定性提升路径
- 心力衰竭药物治疗的经济评估与成本效益分析
- 道路绿化养护投标方案(技术方案)
- QA出货检验日报表
- 校服采购投标方案
- 中外建筑史课件
- 三年级小学英语阅读理解
- 母婴保健-助产技术理论考核试题题库及答案
- dd5e人物卡可填充格式角色卡夜版
- 海克斯康机器操作说明书
- GB/T 6003.1-1997金属丝编织网试验筛
- GB/T 24207-2009洗油酚含量的测定方法
评论
0/150
提交评论