计算机毕业设计 378的音乐网站-付费管理系统vue前端 毕设

第5章系统详细设计

一、技术路线：

开发语言：Java

前端技术：JavaScript、VUE.js（2.X）、css3

数据库：MySQL 5.7

数据库管理工具：Navicat或sqlyog

开发工具：IDEA或Ecplise

二、项目介绍：

https://www.bilibili.com/video/BV1mw41187fn/

三、运行截图：

3.1管理员功能模块

登陆，管理员输入个人的账号、密码、角色登录系统，这时候系统的数据库就会在进行查找相关的信息，如果我们输入的账号、密码不正确，数据库就会提示出错误的信息提示，同时会提示管理员重新输入自己的账号、密码，直到账号密码输入成功后，会提登录成功的信息。网站管理员登录效果图如图3-1所示：

图3-1管理员登录首页界面图

管理员进入到界面，通过界面的任务大厅，登录成功后进入到系统可以进行查看首页、个人中心、用户管理、音乐标签管理、音乐库管理、付费音乐管理、订单中心管理、付费音频管理、系统管理等功能模块，进行相对应操作，如图3-2所示。

图3-2首页界面图

个人中心，管理员对个人中心进行操作填写原密码、新密码、确认密码并进行添加、删除、修改以及查看，如图3-3所示。

图3-3个人中心界面图

用户管理，管理员对用户管理进行用户名、密码、姓名、年龄、性别、手机、邮箱等等添加、删除、修改以及查看等操作。如图3-4所示。

图3-4用户管理界面图

音乐库管理，通过内容列表获取编号、歌名、音乐标签、图片、演唱者、作曲、作词、音乐视频、音乐等信息可进行详情、修改、删除或查看操作。如图3-5所示

图3-5音乐库管理界面图

付费音乐管理，通过内容列表可以获取编号、歌名、音乐标签、图片、演唱者、作曲、作词、音乐视频、价格、试听片段等信息可进行详情、修改、删除或查看操作，如图3-6所示。

图3-6付费音乐管理界面图

订单中心管理，通过内容列表可以获取歌曲名称、歌曲类型、封面、歌手、语音、专辑、下载数量、发行方、版权方等信息可进行查看详情、修改、删除或查看等操作，如图3-7所示。

图3-7订单中心管理界面图

系统管理:管理员通过系统管理页面查看在线客服、轮播图、音乐资讯进行上传图片、客服回复、发布资讯进行添加、删除、修改以及查看并对整个系统进行维护等操作。如图3-8所示。

图3-8系统管理界面图

图3-8系统管理界面图

3.2前台功能模块

前台首页浏览，通过内容列表可以获取网站首页、音乐库、音乐资讯、个人中心、后台管理、在线客服等信息操作内容，如图3-9所示。

图3-9前台首页界面图

用户注册/登陆，通过填写用户名、密码、姓名、年龄、性别、手机、邮箱等信息，输入完成后选择注册，注册成功后跳到登录界面填写用户号、密码即可进入音乐网站 的设计，如图3-10所示。

图3-10用户注册/登陆界面图

音乐库，通过内容列表可以查看点赞、评论等操作，如图3-11所示。

图3-11音乐库界面图

付费音乐管理，通过内容列表可以查看编号、歌名、音乐标签、图片、演唱者、作曲、作词、音乐视频、价格、试听片段等可以进行点赞、评论、购买等操作，如图3-12所示。

图3-12付费音乐管理界面图

个人中心，通过内容列表可以获取用户名、密码、姓名、年龄、性别、手机、邮箱等信息可进行增、删、改或查看等操作，如图3-13所示。

图3-13个人中心界面图

3.3用户功能模块

用户登录， 用户通过输入用户号，密码，角色等信息进行系统登录，如图3-14所示。

图3-14用户登录界面图

用户首页：用户进入首页页面可以查看首页、个人中心、订单中心管理、付费音乐管理、我的收藏管理等信息，如图3-15所示。

图3-15用户首页界面图

个人信息，用户对个人信息进行填写用户名、密码、姓名、年龄、性别、手机、邮箱并进行添加以及查看个人信息等进行添加、删除、修改操作。效果如下图所示3-16所示

图3-16个人中心界面图

订单中心管理，在订单中心管理页面可以查看编号、歌名、音乐标签、演唱者、价格、用户名、是否支付、审核回复、审核、支付以及查看详情。效果如下图所示3-17所示

图3-17订单中心管理界面图

我的收藏管理，在收藏管理页面可以查看收藏名称、收藏图片等等内容，并进行添加，修改，删除或查看等操作。效果如下图所示3-18所示

。

图3-18我的收藏管理界面图