【开发一个简单的音乐播放器+服务端】【一】

简介: 【开发一个简单的音乐播放器+服务端】【一】

实现效果:服务端上传音乐文件并保存音乐信息到数据库,移动端音乐播放器查看所有上传的音乐文件并选择播放

实现一个播放器的基本功能(上一首,播放,暂停,下一首)

首先先来建立个存放音乐的数据库mymusic

建立一张music表来存放音乐,数据表有三个字段

mid:音乐id

musicname:音乐名称

author:创作者

接着就是服务端了,服务端是用SpringMVC+MyBatis写的,很简单的一个服务器,其实什么框架不是重点,重点是实现功能。。。

在配置好Spring和MyBatis的各种配置后,先来写一个控制器用于上传文件

这里我就直接贴代码了:

@Controller
public class UploadServlet {
   
   
    MusicService musicService = new MusicImpl();
    @RequestMapping(value="/showupload",method={
   
   RequestMethod.GET,RequestMethod.POST})
    public String showUpload()
    {
   
   
        return "upload";
    }

    @RequestMapping("/upload")
    public String Upload(@RequestParam("file")CommonsMultipartFile file,String author,
            HttpServletRequest request,Model model)
    {
   
   
        String Syspath = request.getServletContext().getRealPath("/upload");
        File path = new File(Syspath); 
        if(!path.exists())
        {
   
   
            path.mkdirs();
        }
        String fileName = file.getOriginalFilename();
        try {
   
   
            InputStream is = file.getInputStream();
            String destfile = Syspath+"/"+fileName;
            Files.copy(is, Paths.get(destfile));

            //数据库插入数据
            musicService.AddMusic(fileName, author);

            model.addAttribute("rs","上传成功,上传路径:"+destfile+"||数据库添加成功");
        } catch (Exception e) {
   
   
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "result";
    }
}

这里面的MusicService musicService = new MusicImpl();是一个业务类的实现接口,用于上传文件成功后添加音乐信息到数据库

/showupload请求映射用于显示上传文件的界面,新建一个jsp文件显示视图

/upload请求映射用来接收上传的文件

接收到文件后获取项目部署路径与文件名拼接为文件真实路径保存

下面是jsp文件代码:

比较简单,一个type为file的input用于选择提交的音乐文件,一个type为text的input用于提交创作者姓名

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="text" name="author" />
<input type="submit" />
</form>
</body>
</html>

上传文件部分完成了,下面再来写一个接口用来提供已经上传的所有音乐信息

Music实体类:

public class Music {
   
   
    int mid;
    String musicname;
    String author;
    public int getMid() {
   
   
        return mid;
    }
    public void setMid(int mid) {
   
   
        this.mid = mid;
    }
    public String getMusicname() {
   
   
        return musicname;
    }
    public void setMusicname(String musicname) {
   
   
        this.musicname = musicname;
    }
    public String getAuthor() {
   
   
        return author;
    }
    public void setAuthor(String author) {
   
   
        this.author = author;
    }
}

获取所有音乐信息接口:

@Controller
public class MusicServlet {
   
   
    MusicService musicService = new MusicImpl();
    @RequestMapping(value="/getmusic",produces = "text/html;charset=UTF-8")
    @ResponseBody
    public String getmusic(Model model)
    {
   
   
        List<Music> musics = musicService.GetAll();
        Gson gson = new Gson();
        String rs = gson.toJson(musics);
        return rs;
    }
}

json格式数据打印结果:

随便添加了几首歌曲测试一下

image.png

相关文章
|
6月前
使用uniapp实现websocket聊天功能
使用uniapp实现websocket聊天功能
|
Web App开发 安全 网络协议
Qt开发技术:QWebSocket客户端、服务端介绍与开发
Qt开发技术:QWebSocket客户端、服务端介绍与开发
Qt开发技术:QWebSocket客户端、服务端介绍与开发
|
6月前
|
XML JSON Java
Android App开发即时通信中通过SocketIO在客户端与服务端间传输文本和图片的讲解及实战(超详细 附源码)
Android App开发即时通信中通过SocketIO在客户端与服务端间传输文本和图片的讲解及实战(超详细 附源码)
374 0
|
6月前
|
存储 移动开发 JavaScript
uniApp页面通讯
uniApp页面通讯
59 0
|
缓存 Android开发
【开发一个简单的音乐播放器+服务端】【二】
【开发一个简单的音乐播放器+服务端】【二】
99 0
|
JavaScript 前端开发 Linux
客户端开发(Electron)发送通知
客户端开发(Electron)发送通知
413 0
|
Web App开发 监控 前端开发
如果监控摄像头不支持Web Socket,猿大师播放器还能在网页中播放RTSP流吗?
猿大师播放器在前端用web socket是浏览器和中间件及播放程序之间的通讯协议,和实际播放无关,只要浏览器支持web socket就可以播放,现在大部分浏览器都支持web socket,所以就算监控设备不支持Websocket,用猿大师播放器播放RTSP也是是没问题的。
218 0
如果监控摄像头不支持Web Socket,猿大师播放器还能在网页中播放RTSP流吗?
|
Web App开发 API
chrome插件的通讯
chrome插件的通讯
|
小程序 JavaScript
打造自己的音乐小程序(下)——后端设计与开发
打造自己的音乐小程序(下)——后端设计与开发
280 0
|
JavaScript 前端开发
语音聊天程序源码——简单的聊天室搭建
安装好swoole后开始搭建前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊天室</title> </head> <style> #set_name{ mar...
2225 0