ssm606基于vue的音乐播放器的设计与实现+vue

前言：👩‍💻 计算机行业的同仁们，大家好！作为专注于Java领域多年的开发者，我非常理解实践案例的重要性。以下是一些我认为有助于提升你们技能的资源：

👩‍💻 SpringBoot的精选案例推介！🔥
👩‍💻 想要把握小程序开发的精髓？这里有你需要的优选案例！🚀

点开文末链接，即可获取这些精品案例的源码。分享知识，共同进步！👇👇
📚 掌握这些案例，让你的编程之路更加顺畅。立即查看详情和获取源码！

希望这些资料能帮助你们在技术旅程中更进一步！🌟

项目名

 ssm606基于vue的音乐播放器的设计与实现+vue
技术栈

 
SSM+Vue+MySQL+Maven

一、-环境介绍

1.1 运行环境

 
开发语言：Java
数据库：MySQL
系统架构：B/S
后端：SSM(MyBatis)
前端：Vue
工具：IDEA，JDK1.8，Maven

二、小演员招募小程序-系统介绍

 
2.1 项目介绍

        当下，如果还依然使用纸质文档来记录并且管理相关信息，可能会出现很多问题，比如原始文件的丢失，因为采用纸质文档，很容易受潮或者怕火，不容易备份，需要花费大量的人员和资金来管理用纸质文档存储的信息，最重要的是数据出现问题寻找起来很麻烦，并且修改也困难，如果还这样操作会造成很大的资源浪费和经济损失。所以，对于本课题研究的音乐信息的管理就需要有一款软件来代替手工操作，因此音乐播放器就应运而生。

音乐播放器运用的工具包括Eclipse，Tomcat以及Navicat等。该系统可以实现音乐信息管理，论坛信息管理，公告信息管理，音乐留言管理，音乐收藏管理，用户管理等功能。

音乐播放器就是采用目前最流行的互联网应用思维，让信息处理变得更加高效，并且处理结果更加的符合预期，只要是关于数据管理方面，不管是添加还是修改，以及数据维护甚至是数据迁移，都可以达到更快更安全的要求。

关键词：音乐播放器；音乐信息；音乐留言；音乐收藏

2.2 功能模块

 

三、ssm606基于vue的音乐播放器的设计与实现+vue-系统展示

 
3.1部分功能图文展示

四、ssm606基于vue的音乐播放器的设计与实现+vue-部分代码设计

 
4.1.部分代码如下：

package com.controller;

import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.*;
import java.lang.reflect.InvocationTargetException;

import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;

/**
 * 音乐信息
 * 后端接口
 * @author
 * @email
*/
@RestController
@Controller
@RequestMapping("/gequ")
public class GequController {
    private static final Logger logger = LoggerFactory.getLogger(GequController.class);

    @Autowired
    private GequService gequService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;

    //级联表service

    @Autowired
    private YonghuService yonghuService;


    /**
    * 后端列表
    */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永不会进入");
        else if("用户".equals(role))
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = gequService.queryPage(params);

        //字典表数据转换
        List<GequView> list =(List<GequView>)page.getList();
        for(GequView c:list){
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(c, request);
        }
        return R.ok().put("data", page);
    }

    /**
    * 后端详情
    */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        GequEntity gequ = gequService.selectById(id);
        if(gequ !=null){
            //entity转view
            GequView view = new GequView();
            BeanUtils.copyProperties( gequ , view );//把实体数据重构到view中

            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody GequEntity gequ, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,gequ:{}",this.getClass().getName(),gequ.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");

        Wrapper<GequEntity> queryWrapper = new EntityWrapper<GequEntity>()
            .eq("gequ_uuid_number", gequ.getGequUuidNumber())
            .eq("gequ_name", gequ.getGequName())
            .eq("gequ_types", gequ.getGequTypes())
            .eq("gequ_geshou", gequ.getGequGeshou())
            .eq("gequ_music", gequ.getGequMusic())
            .eq("gequ_shizhang", gequ.getGequShizhang())
            .eq("zan_number", gequ.getZanNumber())
            .eq("cai_number", gequ.getCaiNumber())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        GequEntity gequEntity = gequService.selectOne(queryWrapper);
        if(gequEntity==null){
            gequ.setCreateTime(new Date());
            gequService.insert(gequ);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody GequEntity gequ, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,gequ:{}",this.getClass().getName(),gequ.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
        //根据字段查询是否有相同数据
        Wrapper<GequEntity> queryWrapper = new EntityWrapper<GequEntity>()
            .notIn("id",gequ.getId())
            .andNew()
            .eq("gequ_uuid_number", gequ.getGequUuidNumber())
            .eq("gequ_name", gequ.getGequName())
            .eq("gequ_types", gequ.getGequTypes())
            .eq("gequ_geshou", gequ.getGequGeshou())
            .eq("gequ_music", gequ.getGequMusic())
            .eq("gequ_shizhang", gequ.getGequShizhang())
            .eq("zan_number", gequ.getZanNumber())
            .eq("cai_number", gequ.getCaiNumber())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        GequEntity gequEntity = gequService.selectOne(queryWrapper);
        if("".equals(gequ.getGequPhoto()) || "null".equals(gequ.getGequPhoto())){
                gequ.setGequPhoto(null);
        }
        if(gequEntity==null){
            gequService.updateById(gequ);//根据id更新
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 删除
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Integer[] ids){
        logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
        gequService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<GequEntity> gequList = new ArrayList<>();//上传的东西
            Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
            Date date = new Date();
            int lastIndexOf = fileName.lastIndexOf(".");
            if(lastIndexOf == -1){
                return R.error(511,"该文件没有后缀");
            }else{
                String suffix = fileName.substring(lastIndexOf);
                if(!".xls".equals(suffix)){
                    return R.error(511,"只支持后缀为xls的excel文件");
                }else{
                    URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
                    File file = new File(resource.getFile());
                    if(!file.exists()){
                        return R.error(511,"找不到上传文件，请联系管理员");
                    }else{
                        List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
                        dataList.remove(0);//删除第一行，因为第一行是提示
                        for(List<String> data:dataList){
                            //循环
                            GequEntity gequEntity = new GequEntity();
//                            gequEntity.setGequUuidNumber(data.get(0));                    //歌曲编号 要改的
//                            gequEntity.setGequName(data.get(0));                    //歌曲名称 要改的
//                            gequEntity.setGequTypes(Integer.valueOf(data.get(0)));   //歌曲类型 要改的
//                            gequEntity.setGequPhoto("");//照片
//                            gequEntity.setGequGeshou(data.get(0));                    //歌手 要改的
//                            gequEntity.setGequMusic(data.get(0));                    //歌曲 要改的
//                            gequEntity.setGequShizhang(data.get(0));                    //时长 要改的
//                            gequEntity.setZanNumber(Integer.valueOf(data.get(0)));   //赞 要改的
//                            gequEntity.setCaiNumber(Integer.valueOf(data.get(0)));   //踩 要改的
//                            gequEntity.setGequContent("");//照片
//                            gequEntity.setCreateTime(date);//时间
                            gequList.add(gequEntity);


                            //把要查询是否重复的字段放入map中
                                //歌曲编号
                                if(seachFields.containsKey("gequUuidNumber")){
                                    List<String> gequUuidNumber = seachFields.get("gequUuidNumber");
                                    gequUuidNumber.add(data.get(0));//要改的
                                }else{
                                    List<String> gequUuidNumber = new ArrayList<>();
                                    gequUuidNumber.add(data.get(0));//要改的
                                    seachFields.put("gequUuidNumber",gequUuidNumber);
                                }
                        }

                        //查询是否重复
                         //歌曲编号
                        List<GequEntity> gequEntities_gequUuidNumber = gequService.selectList(new EntityWrapper<GequEntity>().in("gequ_uuid_number", seachFields.get("gequUuidNumber")));
                        if(gequEntities_gequUuidNumber.size() >0 ){
                            ArrayList<String> repeatFields = new ArrayList<>();
                            for(GequEntity s:gequEntities_gequUuidNumber){
                                repeatFields.add(s.getGequUuidNumber());
                            }
                            return R.error(511,"数据库的该表中的 [歌曲编号] 字段已经存在 存在数据为:"+repeatFields.toString());
                        }
                        gequService.insertBatch(gequList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }





    /**
    * 前端列表
    */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));

        // 没有指定排序字段就默认id倒序
        if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
            params.put("orderBy","id");
        }
        PageUtils page = gequService.queryPage(params);

        //字典表数据转换
        List<GequView> list =(List<GequView>)page.getList();
        for(GequView c:list)
            dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
        return R.ok().put("data", page);
    }

    /**
    * 前端详情
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        GequEntity gequ = gequService.selectById(id);
            if(gequ !=null){


                //entity转view
                GequView view = new GequView();
                BeanUtils.copyProperties( gequ , view );//把实体数据重构到view中

                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view, request);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody GequEntity gequ, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,gequ:{}",this.getClass().getName(),gequ.toString());
        Wrapper<GequEntity> queryWrapper = new EntityWrapper<GequEntity>()
            .eq("gequ_uuid_number", gequ.getGequUuidNumber())
            .eq("gequ_name", gequ.getGequName())
            .eq("gequ_types", gequ.getGequTypes())
            .eq("gequ_geshou", gequ.getGequGeshou())
            .eq("gequ_music", gequ.getGequMusic())
            .eq("gequ_shizhang", gequ.getGequShizhang())
            .eq("zan_number", gequ.getZanNumber())
            .eq("cai_number", gequ.getCaiNumber())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        GequEntity gequEntity = gequService.selectOne(queryWrapper);
        if(gequEntity==null){
            gequ.setCreateTime(new Date());
        gequService.insert(gequ);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }


}

表4.1 论坛表

字段	注释	类型	空
id (主键)	主键	int(11)	否
forum_name	帖子标题	varchar(200)	是
yonghu_id	用户	int(11)	是
users_id	管理员	int(11)	是
forum_content	发布内容	text	是
super_ids	父id	int(11)	是
forum_types	帖子类型	int(11)	是
forum_state_types	帖子状态	int(11)	是
insert_time	发帖时间	timestamp	是
update_time	修改时间	timestamp	是
create_time	创建时间	timestamp	是

表4.2 歌曲信息表

字段	注释	类型	空
id (主键)	主键	int(11)	否
gequ_uuid_number	歌曲编号	varchar(200)	是
gequ_name	歌曲名称	varchar(200)	是
gequ_types	歌曲类型	int(11)	是
gequ_photo	歌曲封面	varchar(200)	是
gequ_geshou	歌手	varchar(200)	否
gequ_music	歌曲	varchar(200)	是
gequ_shizhang	时长	varchar(200)	是
zan_number	赞	int(11)	是
cai_number	踩	int(11)	是
gequ_content	歌手详情	text	是
create_time	创建时间	timestamp	是

表4.3 歌曲收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
gequ_id	歌曲	int(11)	是
yonghu_id	用户	int(11)	是
gequ_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4.4 歌曲留言表

字段	注释	类型	空
id (主键)	主键	int(11)	否
gequ_id	歌曲	int(11)	是
yonghu_id	用户	int(11)	是
gequ_liuyan_text	留言内容	text	是
reply_text	回复内容	text	是
insert_time	留言时间	timestamp	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

表4.5 公告信息表

字段	注释	类型	空
id (主键)	主键	int(11)	否
news_name	公告标题	varchar(200)	是
news_types	公告类型	int(11)	是
news_photo	公告图片	varchar(200)	是
insert_time	公告时间	timestamp	是
news_content	公告详情	text	是
create_time	创建时间	timestamp	是

表4.6 管理员表

字段	注释	类型	空
id (主键)	主键	bigint(20)	否
username	用户名	varchar(100)	否
password	密码	varchar(100)	否
role	角色	varchar(100)	是
addtime	新增时间	timestamp	否

表4.7 用户表

字段	注释	类型	空
id (主键)	主键	int(11)	否
username	账户	varchar(200)	是
password	密码	varchar(200)	是
yonghu_name	用户姓名	varchar(200)	是
yonghu_photo	头像	varchar(255)	是
sex_types	性别	int(11)	是
yonghu_phone	联系方式	varchar(200)	是
yonghu_id_number	用户身份证号	varchar(200)	是
yonghu_email	邮箱	varchar(200)	是
yonghu_delete	假删	int(11)	是
create_time	创建时间	timestamp	是

五、ssm606基于vue的音乐播放器的设计与实现+vue-结束语

        当毕业设计完成的那一刻，浑身舒坦，并不是说那种无事一身轻的感觉，而是通过这三四个月夜以继日废寝忘食的钻研，终于出现了自己想要的结果。就像一个农夫辛勤劳作终于丰收的喜悦一样。在这个期间，有很多事情，开阔了自己的眼界，在网络上也遇到了很多前辈，对自己有很大的帮助，最应该感谢的人就是自己的导师，有时候导师一句话就能影响整体的开发进度。

音乐播放器的完成，让我发现在学校里面学的知识很广，在校学习的知识都是基础中的基础，而没有这些基础，可能在网上想要搜索的内容都不理解。在学校学的知识是综合性的，并且每门课程的作用都学到了，当在具体操作过程中发现也只是操作熟练度的问题而已，万变不离其宗，当知道一门技术出现的目的和存在的意义，进而就会发现其中的优点并且能尽快的学习，这就是上大学的好处所在。做完毕业设计更能体会到一句话，那就是实践与理论相结合，在计算机领域，必须先有理论，再有实践，毕竟计算机专业算一门应用性的学科，开发一个项目必须要先有预期，解决什么样的问题，采用什么样的方法，这些都很科学。当项目完成回头一看，就发现自己的学习能力和思维能力提高了很多。

毕业设计按照科学方法进行设计并且完成，在完成后也发现了很多不足，比如毕业设计受限于眼界的限制，对于实际上的分析只是写了大概，具体完成什么样的功能，这些都与商业程序是有很大的区别的，商业程序更复杂更严谨，并且结构也都是最新的架构，与网上的前辈考虑的问题相比，感觉有些问题的确考虑的比较少，也许这就是实际操作中的经验问题。在以后的日子里，将会选择自己喜欢的技术努力的学习，进入一片更广阔的天地。