基于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-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所示。

图5-9音乐翻唱管理界面图

大家点赞、收藏、关注、评论啦 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者

相关推荐
喝旺仔la19 分钟前
Django后台接口开发
后端·python·django
程序员阿鹏19 分钟前
详解:模板设计模式
java·开发语言·jvm·后端·设计模式·eclipse·1024程序员节
码不停T36 分钟前
乾坤项目学习总结
vue.js·qiankun·乾坤
weixin_3784102440 分钟前
java springboot项目如何计算经纬度在围栏内以及坐标点距离
java·开发语言·spring boot
2401_858120261 小时前
SpringBoot框架:闲一品交易平台的创新驱动
数据库·spring boot·oracle
customer081 小时前
【开源免费】基于SpringBoot+Vue.J影城管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源
jason_yang1 小时前
vue3复习-源码-迷你版vite
vue.js·vite
叫我阿笑就好了1 小时前
Json库和文件操作
后端·json·restful
尘浮生2 小时前
Java项目实战II基于微信小程序的计算机实验室排课与查询系统(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·mysql·微信小程序·小程序
掘金酱2 小时前
【🎁 请领取打卡礼】掘金 AI 刷题功能再次升级,AI 编程助手带你领取打卡能量包!
前端·后端·求职