基于springboot vue的音乐播放系统设计与实现

博主介绍：专注于Java（springboot ssm 等开发框架） vue .net php phython node.js uniapp 微信小程序等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1500+毕设题目方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
更多项目地址介绍翰文编程-CSDN博客

4　系统设计

4.1系统概要设计

本音乐网站与分享平台选择B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式。适合在互联网上进行操作，只要用户能连网，任何时间、任何地点都可以进行系统的操作使用。系统工作原理图如图4-1所示：

图4-1 系统工作原理图

4.2系统结构设计

整个系统是由多个功能模块组合而成的，要将所有的功能模块都一一列举出来，然后进行逐个的功能设计，使得每一个模块都有相对应的功能设计，然后进行系统整体的设计。

本音乐网站与分享平台结构图如图4-2所示。

图4-2 系统功能结构图

4.3系统顺序图设计

4.3.1登录模块顺序图

登录模块主要满足了管理员以及用户的权限登录，登录模块顺序图如图4-3所示。

图4-3 登录顺序图

4.3.2添加信息模块顺序图

管理员以及用户登录后均可进行添加信息操作，添加信息模块顺序图如图4-4所示。

图4-4 添加信息顺序图

4.4数据库设计

一个好的数据库可以关系到程序开发的优劣，数据库设计离不开表结构的设计，还有表与表之间的联系，以及系统开发需要设计的数据表内容等信息。在进行数据库设计期间，要结合实际情况来对数据库进行针对性的开发设计[12]。

4.4.1数据库E-R图设计

本音乐网站与分享平台采用的是MYSQL数据库，数据存储快，因为音乐网站与分享平台，主要的就是对信息的管理，信息内容比较多，这就需要好好的设计一个好的数据库，分类要清楚，不能添加信息的时候，造成信息太过混乱，设计好的数据库首先就需要先把各个实体之间的关系表达明确，系统的E-R图如下图所示：

1、用户管理实体图如图4-5所示：

图4-5 用户管理实体图

2、音乐翻唱管理实体图如图4-6所示：

图4-6 音乐翻唱管理实体图

3、在线听歌管理实体图如图4-7所示：

图4-7 在线听歌管理实体图

4.4.2数据库表设计

将数据库概念设计的E-R图转换为关系数据库。在关系数据库中，数据关系由数据表组成，但是表的结构表现在表的字段上。

allusers表:

序号	字段名称	字段类型	大小	允许为空	最大长度	备注
1	id	Int	4		10
2	username		150		255
3	pwd		150		255
4	cx		150		255
5	addtime	DateTime	8		19

yinlefanchang表:

序号	字段名称	字段类型	大小	允许为空	最大长度	备注
1	id	Int	4		10
2	addtime		150		255
3	bianhao		150		255
4	gequmingcheng	DateTime	8		255
5	yuanchang		150		255
6	biaoqian	DateTime	8		255
7	yinpin		150		255
8	tupian	DateTime	8		255
9	fanchangyuanyin		150		255
10	yonghuming	DateTime	8		255
11	gequjieshao		150		255

yinlezixun表:

序号	字段名称	字段类型	大小	允许为空	最大长度	备注
1	id	Int	4		10
2	addtime		150		255
3	biaoti		150		255
4	zixunleixing	DateTime	8		255
5	tupian		150		255
6	zhaiyao	DateTime	8		255
7	xiangqing		150		255

yonghu表:

序号	字段名称	字段类型	大小	允许为空	最大长度	备注
1	id	Int	4		10
2	addtime		150		255
4	yonghuming		150		255
5	mima		150		255
6	xingming	DateTime	8		255
7	nianling	shangpinleixing	DateTime	8	255
8	xingbie				255
9	shouji	DateTime			255
10	youxiang	DateTime			255
11	shenfenzheng	DateTime			255

Zaixiantingge表:

序号	字段名称	字段类型	大小	允许为空	最大长度	备注
1	id	Int	4		10
2	addtime		150		255
4	bianhao		150		255
5	gequmingcheng		150		255
6	biaoqian	DateTime	8		255
7	yuanchang	DateTime			255
8	zuoqu				255
9	zuoci	shangpinleixing	DateTime	8	255
10	yinle	shangpinleixing	DateTime	8	255
11	shipin			8	255
12	tupian			8	255
13	gequjianjie			8	255

第5章系统详细设计

5.1前台首页功能模块

音乐网站与分享平台，在系统首页可以查看首页、音乐资讯、音乐翻唱、在线听歌、留言反馈、个人中心、后台管理、客服等内容，如图5-1所示。

图5-1系统功能界面图

图5-2登录、用户注册界面图

在线听歌，在在线听歌页面通过填写编号、歌曲名称、标签、原唱、作曲、作词、音乐、视频等信息进行点我收藏，如图5-3所示。在音乐翻唱页面通过填写编号、歌曲名称、原唱、标签、音频、图片、翻唱原因、用户名等信息进行点我收藏操作，如图5-4所示。

图5-3在线听歌界面图

图5-4音乐翻唱界面图

5.2管理员功能模块

管理员登录，通过填写注册时输入的用户名、密码、角色进行登录，如图5-5所示。

图5-5管理员登录界面图

管理员登录进入音乐网站与分享平台可以查看首页、个人中心、用户管理、音乐资讯管理、音乐翻唱管理、在线听歌管理、留言板管理、系统管理等信息。

个人信息，在个人信息页面中可以通过填写用户名等内容进行修改、添加，如图5-6所示。还可以根据需要对用户管理进行添加，修改或删除等详细操作，如图5-7所示。

图5-6个人信息界面图

图5-7用户管理界面图

音乐资讯管理，在音乐资讯管理页面中可以填写标题、资讯类型、图片、摘要

等信息，并可根据需要对已有音乐资讯管理进行修改或删除等操作，如图5-8所示。

图5-8音乐资讯管理界面图

主要代码

package com.controller;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;

import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;

import com.entity.DiscussyinlezixunEntity;
import com.entity.view.DiscussyinlezixunView;

import com.service.DiscussyinlezixunService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MPUtil;
import com.utils.CommonUtil;


/**
 * 音乐资讯评论表
 * 后端接口
 * @author 
 * @email 
 * @date 2021-01-11 11:34:28
 */
@RestController
@RequestMapping("/discussyinlezixun")
public class DiscussyinlezixunController {
    @Autowired
    private DiscussyinlezixunService discussyinlezixunService;
    


    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,DiscussyinlezixunEntity discussyinlezixun, HttpServletRequest request){
        EntityWrapper<DiscussyinlezixunEntity> ew = new EntityWrapper<DiscussyinlezixunEntity>();
		PageUtils page = discussyinlezixunService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, discussyinlezixun), params), params));

        return R.ok().put("data", page);
    }
    
    /**
     * 前端列表
     */
	@IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,DiscussyinlezixunEntity discussyinlezixun, HttpServletRequest request){
        EntityWrapper<DiscussyinlezixunEntity> ew = new EntityWrapper<DiscussyinlezixunEntity>();
		PageUtils page = discussyinlezixunService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, discussyinlezixun), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( DiscussyinlezixunEntity discussyinlezixun){
       	EntityWrapper<DiscussyinlezixunEntity> ew = new EntityWrapper<DiscussyinlezixunEntity>();
      	ew.allEq(MPUtil.allEQMapPre( discussyinlezixun, "discussyinlezixun")); 
        return R.ok().put("data", discussyinlezixunService.selectListView(ew));
    }

	 /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(DiscussyinlezixunEntity discussyinlezixun){
        EntityWrapper< DiscussyinlezixunEntity> ew = new EntityWrapper< DiscussyinlezixunEntity>();
 		ew.allEq(MPUtil.allEQMapPre( discussyinlezixun, "discussyinlezixun")); 
		DiscussyinlezixunView discussyinlezixunView =  discussyinlezixunService.selectView(ew);
		return R.ok("查询音乐资讯评论表成功").put("data", discussyinlezixunView);
    }
	
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        DiscussyinlezixunEntity discussyinlezixun = discussyinlezixunService.selectById(id);
        return R.ok().put("data", discussyinlezixun);
    }

    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        DiscussyinlezixunEntity discussyinlezixun = discussyinlezixunService.selectById(id);
        return R.ok().put("data", discussyinlezixun);
    }
    



    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody DiscussyinlezixunEntity discussyinlezixun, HttpServletRequest request){
    	discussyinlezixun.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(discussyinlezixun);
        discussyinlezixunService.insert(discussyinlezixun);
        return R.ok();
    }
    
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody DiscussyinlezixunEntity discussyinlezixun, HttpServletRequest request){
    	discussyinlezixun.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
    	//ValidatorUtils.validateEntity(discussyinlezixun);
        discussyinlezixunService.insert(discussyinlezixun);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody DiscussyinlezixunEntity discussyinlezixun, HttpServletRequest request){
        //ValidatorUtils.validateEntity(discussyinlezixun);
        discussyinlezixunService.updateById(discussyinlezixun);//全部更新
        return R.ok();
    }
    

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        discussyinlezixunService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    
    /**
     * 提醒接口
     */
	@RequestMapping("/remind/{columnName}/{type}")
	public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
						 @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
		map.put("column", columnName);
		map.put("type", type);
		
		if(type.equals("2")) {
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
			Calendar c = Calendar.getInstance();
			Date remindStartDate = null;
			Date remindEndDate = null;
			if(map.get("remindstart")!=null) {
				Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
				c.setTime(new Date()); 
				c.add(Calendar.DAY_OF_MONTH,remindStart);
				remindStartDate = c.getTime();
				map.put("remindstart", sdf.format(remindStartDate));
			}
			if(map.get("remindend")!=null) {
				Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
				c.setTime(new Date());
				c.add(Calendar.DAY_OF_MONTH,remindEnd);
				remindEndDate = c.getTime();
				map.put("remindend", sdf.format(remindEndDate));
			}
		}
		
		Wrapper<DiscussyinlezixunEntity> wrapper = new EntityWrapper<DiscussyinlezixunEntity>();
		if(map.get("remindstart")!=null) {
			wrapper.ge(columnName, map.get("remindstart"));
		}
		if(map.get("remindend")!=null) {
			wrapper.le(columnName, map.get("remindend"));
		}


		int count = discussyinlezixunService.selectCount(wrapper);
		return R.ok().put("count", count);
	}
	


}

音乐翻唱管理，在音乐翻唱管理页面中可以填写编号、歌曲名称、原唱、标签、音频、图片、翻唱原因、用户名等信息，并可根据需要对已有音乐翻唱管理进行修改或删除等详细操作，如图5-9所示。