开发一个springboot+vue的项目【增加铃声制作的功能】

简介: 该版本加入了个人歌曲上传、根据歌曲制作铃声、铃声随机浏览、上传歌曲管理员复核。该版本是用户是可以上传歌曲的,然后可以查看个人上传的歌曲,上传歌曲后,管理员进行审核。

一,系统功能介绍


该版本加入了个人歌曲上传、根据歌曲制作铃声、铃声随机浏览、上传歌曲管理员复核。


该版本是用户是可以上传歌曲的,然后可以查看个人上传的歌曲,上传歌曲后,管理员进行审核。


1.1. 登陆后才可以上传歌曲


微信图片_20221009220430.png

1.2. 已上传歌曲清单


登陆后,点击我的音乐->我的上传浏览已上传的歌曲清单,显示基本信息和审核状态和意见;


微信图片_20221009220437.png

1.3. 上传歌曲


点击添加歌曲,录入歌名、歌手、简介、歌词及选择本地mp3歌曲,点击确定完成上传。


微信图片_20221009220444.png

点击刷新,可看到已经上传成功。


微信图片_20221009220444.png

1.4. 审核列表


登陆管理员后台,点击歌曲审核,可看到已有刚上传的歌曲十年,可变更图片,同时可审核通过和拒绝。


微信图片_20221009220447.png

1.5. 审核通过


点击通过,弹出歌手选择界面,选择对应歌手,点击确定即可完成审核


微信图片_20221009220450.png

1.6. 审核拒绝


点击拒绝,弹出拒绝理由填写界面,录入对应理由,点击确定,完成歌曲审核拒绝。


微信图片_20221009220453.png

1.7. 上传人审核结果查看


审核通过的显示审核通过,审核拒绝的显示审核拒绝并展示审核意见。


微信图片_20221009220457.png

1.8 制作铃声


针对正在播放的歌曲点击制作铃声,可进入铃声制作界面

注:登陆后才可以制作铃声,只有歌曲才可以制作铃声,


微信图片_20221009220500.png

1.9 铃声制作


拖动左右时间定位戳,确定铃声长度,可点击播放按钮反复播放调整,点击生成铃声。


微信图片_20221009220504.png

填写铃声名称,铃声简介,铃声展示图片,点击确定,即可完成铃声制作



微信图片_20221009220507.png

1.10 铃声制作列表


我的音乐->我的铃声中可查看自己制作的铃声。


微信图片_20221009220511.png

1.11 铃声浏览


点击铃声页面,即可左右浏览全网已制作的铃声,切换时会同步播放铃声


微信图片_20221009220515.png


二,视频展示


微信图片_20221009220519.png

微信图片_20221009220522.png

微信图片_20221009220945.png


当然,如果你想看在线的,也可以看:


https://www.bilibili.com/video/BV15541177pE?spm_id_from=333.999.0.0


三,核心代码展示


@RestController
public class AdminController {
    @Autowired
    private AdminService adminService;
    /**
     * 判断是否登录成功
     */
    @RequestMapping(value = "/admin/login/status",method = RequestMethod.POST)
    public Object loginStatus(HttpServletRequest request, HttpSession session){
        JSONObject jsonObject = new JSONObject();
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        boolean flag = adminService.verifyPassword(name,password);
        if(flag){
            jsonObject.put(Consts.CODE,1);
            jsonObject.put(Consts.MSG,"登录成功");
            session.setAttribute(Consts.NAME,name);
            return jsonObject;
        }
        jsonObject.put(Consts.CODE,0);
        jsonObject.put(Consts.MSG,"用户名或密码错误");
        return jsonObject;
    }
}


/**
 * 收藏控制类
 */
@RestController
@RequestMapping("/collect")
public class CollectController {
    @Autowired
    private CollectService CollectService;
    @Autowired
    private SongService songService;
    /**
     * 添加收藏
     */
    @RequestMapping(value = "/add",method = RequestMethod.POST)
    public Object addCollect(HttpServletRequest request){
        JSONObject jsonObject = new JSONObject();
        String userId = request.getParameter("userId");           //用户id
        String type = request.getParameter("type");               //收藏类型(0歌曲1歌单)
        String songId = request.getParameter("songId");           //歌曲id
        if(songId==null||songId.equals("")){
            jsonObject.put(Consts.CODE,0);
            jsonObject.put(Consts.MSG,"收藏歌曲为空");
            return jsonObject;
        }
        if(CollectService.existSongId(Integer.parseInt(userId),Integer.parseInt(songId))){
            boolean status = CollectService.deleteByUserIdSongId(Integer.parseInt(userId), Integer.parseInt(songId));
            if (status) {
                jsonObject.put(Consts.CODE,2);
                jsonObject.put(Consts.MSG,"取消收藏");
            }
            return jsonObject;
        }
        //保存到收藏的对象中
        Collect Collect = new Collect();
        Collect.setUserId(Integer.parseInt(userId));
        Collect.setType(new Byte(type));
        Collect.setSongId(Integer.parseInt(songId));
        boolean flag = CollectService.insert(Collect);
        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 deleteCollect(HttpServletRequest request){
        String userId = request.getParameter("userId");           //用户id
        String songId = request.getParameter("songId");           //歌曲id
        boolean flag = CollectService.deleteByUserIdSongId(Integer.parseInt(userId),Integer.parseInt(songId));
        return flag;
    }
    /**
     * 查询所有收藏
     */
    @RequestMapping(value = "/allCollect",method = RequestMethod.GET)
    public Object allCollect(HttpServletRequest request){
        return CollectService.allCollect();
    }
    /**
     * 查询某个用户的收藏列表
     */
    @RequestMapping(value = "/collectOfUserId",method = RequestMethod.GET)
    public Object collectOfUserId(HttpServletRequest request){
        String userId = request.getParameter("userId");          //用户id
        return CollectService.collectOfUserId(Integer.parseInt(userId));
    }
    /**
     * 获取歌曲的收藏量
     */
    @RequestMapping(value = "/getCollectCount",method = RequestMethod.GET)
    public Object getCollectCount(@RequestParam("userId") Integer userId) {
        List<Collect> collectList = CollectService.getCollectCount(userId);
        for (Collect collect : collectList) {
            List<Song> song = songService.getSongId(collect.getSongId());
            collect.setSongs(song);
        }
        return collectList;
    }


/**
 * 歌曲管理controller
 */
@RestController
@RequestMapping("/song")
public class SongController {
    @Autowired
    private SongService songService;
    /**
     * 添加歌曲
     */
    @RequestMapping(value = "/add",method = RequestMethod.POST)
    public Object addSong(HttpServletRequest request, @RequestParam("file")MultipartFile mpFile, @RequestParam("files")MultipartFile mvFile){
        JSONObject jsonObject = new JSONObject();
        //获取前端传来的参数
        String singerId = request.getParameter("singerId").trim();  //所属歌手id
        String name = request.getParameter("name").trim();          //歌名
        String introduction = request.getParameter("introduction").trim();          //简介
        String pic = "/img/songPic/tubiao.jpg";                     //默认图片
        String lyric = request.getParameter("lyric").trim();     //歌词
        //上传歌曲文件
        if(mpFile.isEmpty()){
            jsonObject.put(Consts.CODE,0);
            jsonObject.put(Consts.MSG,"歌曲上传失败");
            return jsonObject;
        }
        //文件名=当前时间到毫秒+原来的文件名
        String fileName = System.currentTimeMillis()+mpFile.getOriginalFilename();
        //文件路径
        String filePath = System.getProperty("user.dir")+System.getProperty("file.separator")+"song";
        //如果文件路径不存在,新增该路径
        File file1 = new File(filePath);
        if(!file1.exists()){
            file1.mkdir();
        }
        //实际的文件地址
        File dest = new File(filePath+System.getProperty("file.separator")+fileName);
        //存储到数据库里的相对文件地址
        String storeUrlPath = "/song/"+fileName;
        try {
            mpFile.transferTo(dest);
            Song song = new Song();
            song.setSingerId(Integer.parseInt(singerId));
            song.setName(name);
            song.setIntroduction(introduction);
            song.setPic(pic);
            song.setLyric(lyric);
            song.setUrl(storeUrlPath);
            if(!mvFile.isEmpty()){
              //文件名=当前时间到毫秒+原来的文件名
                String fileNames = System.currentTimeMillis()+mvFile.getOriginalFilename();
                //文件路径
                String filePaths = System.getProperty("user.dir")+System.getProperty("file.separator")+"mv";
                //如果文件路径不存在,新增该路径
                File file2 = new File(filePaths);
                if(!file2.exists()){
                    file2.mkdir();
                }
                //实际的文件地址
                File dests = new File(filePaths+System.getProperty("file.separator")+fileNames);
                mvFile.transferTo(dests);
                //存储到数据库里的相对文件地址
                String storeUrlPaths = "/mv/"+fileNames;
                song.setMvurl(storeUrlPaths);
            }
            boolean flag = songService.insert(song);
            if(flag){
                jsonObject.put(Consts.CODE,1);
                jsonObject.put(Consts.MSG,"保存成功");
                jsonObject.put("avator",storeUrlPath);
                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;
        }
    }


**
 * 歌单的歌曲管理controller
 */
@RestController
@RequestMapping("/listSong")
public class ListSongController {
    @Autowired
    private ListSongService listSongService;
    /**
     * 给歌单添加歌曲
     */
    @RequestMapping(value = "/add", method = RequestMethod.POST)
    public Object addListSong(HttpServletRequest request) {
        JSONObject jsonObject = new JSONObject();
        //获取前端传来的参数
        String songId = request.getParameter("songId").trim();  //歌曲id
        Integer songListId = Integer.valueOf(request.getParameter("songListId").trim()); //歌单id
        List<ListSong> listSongs = listSongService.selectBySongId(songId);
        for (ListSong listSong : listSongs) {
            Integer id = listSong.getId();
            ListSong songlist = listSongService.selectByPrimaryKey(id);
            if (songlist.getSongListId().equals(songListId)) {
                jsonObject.put(Consts.CODE, 0);
                jsonObject.put(Consts.MSG, "添加失败,原因是:歌曲重复");
                return jsonObject;
            }
        }
        ListSong listSong1 = new ListSong();
        listSong1.setSongId(Integer.parseInt(songId));
        listSong1.setSongListId(songListId);
        boolean flag = listSongService.insert(listSong1);
        if (flag) {
            jsonObject.put(Consts.CODE, 1);
            jsonObject.put(Consts.MSG, "保存成功");
            return jsonObject;
        } else {
            jsonObject.put(Consts.CODE, 0);
            jsonObject.put(Consts.MSG, "保存失败");
        }
        return jsonObject;
    }
    /**
     * 根据歌单id查询歌曲
     */
    @RequestMapping(value = "/detail", method = RequestMethod.GET)
    public Object detail(HttpServletRequest request) {
        String songListId = request.getParameter("songListId");
        return listSongService.listSongOfSongListId(Integer.parseInt(songListId));
    }
    /**
     * 删除歌单里的歌曲
     */
    @RequestMapping(value = "/delete", method = RequestMethod.GET)
    public Object delete(HttpServletRequest request) {
        String songId = request.getParameter("songId").trim();                 //歌曲id
        String songListId = request.getParameter("songListId").trim();        //歌单id
        boolean flag = listSongService.deleteBySongIdAndSongListId(Integer.parseInt(songId), Integer.parseInt(songListId));
        return flag;
    }
目录
相关文章
|
1月前
|
XML Java 应用服务中间件
【SpringBoot(一)】Spring的认知、容器功能讲解与自动装配原理的入门,带你熟悉Springboot中基本的注解使用
SpringBoot专栏开篇第一章,讲述认识SpringBoot、Bean容器功能的讲解、自动装配原理的入门,还有其他常用的Springboot注解!如果想要了解SpringBoot,那么就进来看看吧!
344 2
|
2月前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
341 4
基于springboot+vue开发的会议预约管理系统
|
7月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
504 7
|
3月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
230 6
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
7月前
|
人工智能 Java 数据库
飞算 JavaAI:革新电商订单系统 Spring Boot 微服务开发
在电商订单系统开发中,传统方式耗时约30天,需应对复杂代码、调试与测试。飞算JavaAI作为一款AI代码生成工具,专注于简化Spring Boot微服务开发。它能根据业务需求自动生成RESTful API、数据库交互及事务管理代码,将开发时间缩短至1小时,效率提升80%。通过减少样板代码编写,提供规范且准确的代码,飞算JavaAI显著降低了开发成本,为软件开发带来革新动力。
|
7月前
|
XML 前端开发 Java
SpringBoot实现文件上传下载功能
本文介绍了如何使用SpringBoot实现文件上传与下载功能,涵盖配置和代码实现。包括Maven依赖配置(如`spring-boot-starter-web`和`spring-boot-starter-thymeleaf`)、前端HTML页面设计、WebConfig路径映射配置、YAML文件路径设置,以及核心的文件上传(通过`MultipartFile`处理)和下载(利用`ResponseEntity`返回文件流)功能的Java代码实现。文章由Colorful_WP撰写,内容详实,适合开发者学习参考。
745 0
|
4月前
|
缓存 前端开发 Java
SpringBoot 实现动态菜单功能完整指南
本文介绍了一个动态菜单系统的实现方案,涵盖数据库设计、SpringBoot后端实现、Vue前端展示及权限控制等内容,适用于中后台系统的权限管理。
416 1
|
5月前
|
监控 数据可视化 JavaScript
springboot + vue的MES系统生产计划管理源码
MES系统(制造执行系统)的生产计划管理功能是其核心模块之一,涵盖生产计划制定与优化、调度排程、进度监控反馈、资源管理调配及可视化报告五大方面。系统基于SpringBoot + Vue-Element-Plus-Admin技术栈开发,支持多端应用(App、小程序、H5、后台)。通过实时数据采集与分析,MES助力企业优化生产流程,适用于现代化智能制造场景。
289 1
|
6月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
608 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发

热门文章

最新文章