落霞与孤鹜齐飞,秋水共长天一色。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 互联网 > 技术教程 > 正文

基于springboot和vue的在线音乐平台设计,附源码

jellybean 2023-05-26 17 浏览 0 评论

今天给大家介绍一个在线音乐平台,功能丰富、界面优美,实现了音乐平台需要的所有功能。


实现技术

后端

Spring Boot + MyBatis+MySql

前端

Vue + Vue-Router + Vuex + Axios + ElementUI

功能介绍

音乐播放、用户登录注册、用户信息编辑、头像修改、歌曲、歌单搜索、歌单打分、歌单、歌曲评论、歌单列表、歌手列表分页显示、歌词同步显示、音乐收藏、下载、拖动控制、音量控制、后台对用户、歌曲、歌手、歌单信息的管理。



代码展示

/**
 * 歌手控制类
 */
@RestController
@RequestMapping("/singer")
public class SingerController {

    @Autowired
    private SingerService singerService;

    /**
     * 添加歌手
     */
    @RequestMapping(value = "/add", method = RequestMethod.POST)
    public Object addSinger(HttpServletRequest request) {
        JSONObject jsonObject = new JSONObject();
        String name = request.getParameter("name").trim();      //姓名
        String sex = request.getParameter("sex").trim();        //性别
        String pic = request.getParameter("pic").trim();        //头像
        String birth = request.getParameter("birth").trim();    //生日
        String location = request.getParameter("location").trim();//地区
        String introduction = request.getParameter("introduction").trim();//简介
        //把生日转换成Date格式
        DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
        Date birthDate = new Date();
        try {
            birthDate = dateFormat.parse(birth);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        //保存到歌手的对象中
        Singer singer = new Singer();
        singer.setName(name);
        singer.setSex(new Byte(sex));
        singer.setPic(pic);
        singer.setBirth(birthDate);
        singer.setLocation(location);
        singer.setIntroduction(introduction);
        boolean flag = singerService.insert(singer);
        if (flag) {   //保存成功
            jsonObject.put(Consts.CODE, 1);
            jsonObject.put(Consts.MSG, "添加成功");
            return jsonObject;
        }
        jsonObject.put(Consts.CODE, 0);
        jsonObject.put(Consts.MSG, "添加失败");
        return jsonObject;
    }

    /**
     * 修改歌手
     */
    @RequestMapping(value = "/update", method = RequestMethod.POST)
    public Object updateSinger(HttpServletRequest request) {
        JSONObject jsonObject = new JSONObject();
        String id = request.getParameter("id").trim();          //主键
        String name = request.getParameter("name").trim();      //姓名
        String sex = request.getParameter("sex").trim();        //性别
        String birth = request.getParameter("birth").trim();    //生日
        String location = request.getParameter("location").trim();//地区
        String introduction = request.getParameter("introduction").trim();//简介
        //把生日转换成Date格式
        DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
        Date birthDate = new Date();
        try {
            birthDate = dateFormat.parse(birth);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        //保存到歌手的对象中
        Singer singer = new Singer();
        singer.setId(Integer.parseInt(id));
        singer.setName(name);
        singer.setSex(new Byte(sex));
        singer.setBirth(birthDate);
        singer.setLocation(location);
        singer.setIntroduction(introduction);
        boolean flag = singerService.update(singer);
        if (flag) {   //保存成功
            jsonObject.put(Consts.CODE, 1);
            jsonObject.put(Consts.MSG, "修改成功");
            return jsonObject;
        }
        jsonObject.put(Consts.CODE, 0);
        jsonObject.put(Consts.MSG, "修改失败");
        return jsonObject;
    }


    /**
     * 删除歌手
     */
    @RequestMapping(value = "/delete", method = RequestMethod.GET)
    public Object deleteSinger(HttpServletRequest request) {
        String id = request.getParameter("id").trim();          //主键
        boolean flag = singerService.delete(Integer.parseInt(id));
        return flag;
    }

    /**
     * 根据主键查询整个对象
     */
    @RequestMapping(value = "/selectByPrimaryKey", method = RequestMethod.GET)
    public Object selectByPrimaryKey(HttpServletRequest request) {
        String id = request.getParameter("id").trim();          //主键
        return singerService.selectByPrimaryKey(Integer.parseInt(id));
    }

    /**
     * 查询所有歌手
     */
    @RequestMapping(value = "/allSinger", method = RequestMethod.GET)
    public Object allSinger(HttpServletRequest request) {
        return singerService.allSinger();
    }

    /**
     * 根据歌手名字模糊查询列表
     */
    @RequestMapping(value = "/singerOfName", method = RequestMethod.GET)
    public Object singerOfName(HttpServletRequest request) {
        String name = request.getParameter("name").trim();          //歌手名字
        return singerService.singerOfName("%" + name + "%");
    }

    /**
     * 根据性别查询
     */
    @RequestMapping(value = "/singerOfSex", method = RequestMethod.GET)
    public Object singerOfSex(HttpServletRequest request) {
        String sex = request.getParameter("sex").trim();          //性别
        return singerService.singerOfSex(Integer.parseInt(sex));
    }

    /**
     * 更新歌手图片
     */
    @RequestMapping(value = "/updateSingerPic", method = RequestMethod.POST)
    public Object updateSingerPic(@RequestParam("file") MultipartFile avatorFile, @RequestParam("id") int id) {
        JSONObject jsonObject = new JSONObject();
        if (avatorFile.isEmpty()) {
            jsonObject.put(Consts.CODE, 0);
            jsonObject.put(Consts.MSG, "文件上传失败");
            return jsonObject;
        }
        //文件名=当前时间到毫秒+原来的文件名
        String fileName = System.currentTimeMillis() + avatorFile.getOriginalFilename();
        //文件路径
        String filePath = System.getProperty("user.dir") + System.getProperty("file.separator") + "img"
                + System.getProperty("file.separator") + "singerPic";
        //如果文件路径不存在,新增该路径
        File file1 = new File(filePath);
        if (!file1.exists()) {
            file1.mkdir();
        }
        //实际的文件地址
        File dest = new File(filePath + System.getProperty("file.separator") + fileName);
        //存储到数据库里的相对文件地址
        String storeAvatorPath = "/img/singerPic/" + fileName;
        try {
            avatorFile.transferTo(dest);
            Singer singer = new Singer();
            singer.setId(id);
            singer.setPic(storeAvatorPath);
            boolean flag = singerService.update(singer);
            if (flag) {
                jsonObject.put(Consts.CODE, 1);
                jsonObject.put(Consts.MSG, "上传成功");
                jsonObject.put("pic", storeAvatorPath);
                return jsonObject;
            }
            jsonObject.put(Consts.CODE, 0);
            jsonObject.put(Consts.MSG, "上传失败");
            return jsonObject;
        } catch (IOException e) {
            jsonObject.put(Consts.CODE, 0);
            jsonObject.put(Consts.MSG, "上传失败" + e.getMessage());
        } finally {
            return jsonObject;
        }
    }
}

获取源码请关注后私信“在线音乐”

相关推荐

全栈之路:从零搭建docker+jenkins+node.js自动化部署环境

上两篇全栈之路:前端工程师如何从0开始了解Docker全栈之路:vue-cli3项目从搭建优化到docker部署1、docker部分1.1、docker简介Docker是一个开源的应用容器引...

Vue脚手架(基础+Node.js安装)【vue脚手架教程】

关于VueVue.js(读音:/vju?/,类似于:view)是一套构建用户界面的渐进式框Vue.js的官方网址是:https://cn.vuejs.org/index.html传统的前端开发...

开源Vue后端UI开箱即用解决方案——vuestic-admin

引言这是一个Vue的后端开箱即用UI项目框架,和之前的ReactAdmin类似,它是一个框架,也就意味着它帮你完成了很多公用的部分,你只需要在其基础上进行自己的项目扩展即可。大体上这是由Vue和boo...

用css3实现惊艳面试官的背景即背景动画(高级附源码)

我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇...

基于vue-cli4构建vue项目【vue cli搭建】

前提条件:(1)安装node.js(2)安装yarn(3)安装@vue/cliyarnglobaladd@vue/cli通过命令行模式创建一个项目:vuecreatehello-world注...

74、scss 是什么?在 Vue-cli 中的安装使用步骤是?有哪几大特性?

1、基本定义SCSS即是SASS的新语法,是SassyCSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS,SASS是CSS3的一个扩展,...

前端基础学习:Vue2.0实现移动端外卖平台项目,参考旧版饿了么!

主要依赖基于vue@2.0使用vue-cli@2.0搭建项目框架使用vue-router@2.1进行页面路由切换使用vue-resource@1.0.1进行http请求获取数据mock假数据...

手把手教你深刻理解vue实例的生命周期和钩子函数

虽然经常使用mounted、created等几个钩子函数,但是并没有很系统的将它和生命周期关联一起去理解,这导致我在最近项目里踩了坑。所以现在花点时间,整理一下这方面的知识。转载链接:https://...

记一次Vue3.0技术干货分享会【vue3.0入门】

作者:lulu_up转发链接:https://segmentfault.com/a/1190000022719461前言前面小编也整理了关于Vue3.0的设计原则、入门语法、虚拟Dom、Vue3.0...

Vue3 入门教程 两种方式创建Vue项目【创建一个vue3项目】

脚手架创建#全局重新安装最新版本的 @vue/cliyarnglobaladd@vue/cli@next#ORnpminstall-g@vue/cli@next#要...

打造vuecli3+element后台管理系统(三)优化路由和vuex仓库

我们在做后台系统的时候,经常会有比较多的功能页面,每个页面或多或少都会有需要存储在vuex中的数据,一般情况下我们会在state下定义不同的object,但是当功能一多,全部字段和action、mut...

2021年到了,Vue 3准备好了吗?【vue3正式发布了吗】

Vue3.0图/v3.cn.vuejs.org经历了两年多的开发,Vue3.0终于在2020年9月18日发布[1]。2021年年初,我抱着尝鲜的想法用Vue3及其生态编写了一个企业应用的管理后...

vue3学习第一步-创建vue3项目【vue3新建项目】

使用vue-cli创建vue3初始化项目介绍:1.创建一个vue3目录,安装vue-cli,vue-cli的版本4.0以上。cnpminstall@vue/cli(电脑已存在vue2不用cnp...

非常优秀vue开源框架Vuetify最新版本1.5.14【vue开发框架使用实例】

简介VuetifyStar数为19K+,提供了80多个Vue.js组件,这些组件是根据谷歌MaterialDesign指南实现的。开箱即用的项目脚手架,Vuetify已预先制作了8...

基于 vue3.x+vant3.x 搭建示例项目【搭建网站】

今天给大家分享一些如何使用Vue3.0+Vant3搭建demo项目。目前市面上有关vue3的项目并不多,vue3的UI组件库有ant-design-vue和vant-ui。接下来讲解下使用vue3、v...

取消回复欢迎 发表评论: