项目简介
项目功能
项目技术
项目结构
项目内容
- 1.数据库设计
- 2.项目及idea的配置
- 3.创建entity包（实体包）
- 4.根据功能介绍，确定请求和响应
- 5.封装数据库的相关操作
- 6.实现Servlet
- 7.前端页面设计
- 8.最终实现效果

项目简介

基于Java Servlet 构建的在线音乐服务器。

项目功能

登录、注册
上传音乐
删除某一个音乐信息
删除选中的音乐信息
查询音乐(包含查找指定/模糊匹配的音乐)
添加音乐到“喜欢列表”。
查询喜欢的音乐(包含查找指定/模糊匹配的音乐)

项目技术

前端知识：HTML+CSS+JavaScript
后端：Servlet 的使用
数据库：mysql
tomcat、Maven的使用
json 的使用

项目结构

项目整体基于HTTP协议。
前端使用HTML+CSS+JS构建页面整体布局。
后端采用分层结构，分为Servlet层，Dao层。
采用分层设计，降低了整个代码的耦合度。

MySQL由Dao层操作再返回给Dao层。
Dao层由Servlet操作，再返回。
前端页面和Servlet进行交互。

项目内容

1.数据库设计

当前需要三张表。

• 创建数据库

drop database if exists musicplayer;
create database if not exists musicplayer character set utf8;
--使用数据库
use musicplayer;

• 创建表

user表

drop table if exists user;
create table user (
id int primary key auto_increment,
username varchar(20) not null,
password varchar(30) not null,
age int not null,
sex varchar(2) not null,
email varchar(50) not null
);

music表

drop table if exists music;
create table music (id int primary key auto_increment,title varchar(50) not null,singer varchar(30) not null,time varchar(13) not null,url varchar(100) not null,userid int(11) not null
);

lovemusic表

drop table if exists lovemusic;
create table lovemusic (
id int primary key auto_increment,
user_id int(11) not null,
music_id int(11) not null
);

-- 可插入一条用户信息
insert into user(username,password,age,sex,email)
values("lala","2233","12","女","965543061@qq.com");

2.项目及idea的配置

1）使用maven打包。
在 pom.xml 指定当前打包打成 war 包。

2）创建结构，生成 web.xml。
main文件夹下，NewFile --> webapp/ WEB-INF/ web.xml

3）设置编码格式，防止出现中文乱码。

4）设置自动编译。

5）配置 pom.xml
向 maven 中引入相关依赖。
pom.xml 文件中放Jackson、servlet、 mysql相关的依赖。
再指定当前 war包的名字：

<finalName>OnlineMusic</finalName>
<!-- 注意：指定的war包的名称是之后项目运行时的 根目录 -->

再指定一些插件的版本，以免受到 maven 版本的影响。

3.创建entity包（实体包）

根据数据库创建实体类：User、Music。其中的属性与数据库中的对应。

User类

package entity;
public class User {private int id;private String username;private String password;private int age;private String sex;private String email;
}

Music类

package entity;
public class Music {private int id;private String title;private String singer;private String time;private String url;private int userId;
}

4.根据功能介绍，确定请求和响应

使用Json
Json 是一种键值对风格的数据格式, 把前端输入的对象转换成字符串(序列化)。

Java中我们采用Jackson库中的 ObjectMapper类来完成Json的构造。

向 maven 中引入依赖：

<!-- Jackson相关-->
<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.11.4</version>
</dependency>
<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.11.4</version>
</dependency>
<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.11.4</version>
</dependency>

1)登录：

请求：

POST：/loginServlet
data：{username，password}

响应：{msg：true}

2)注册：

请求：

POST：/register
data：{username，password，age，sex，email}

响应：{msg:true}

3)上传音乐：

请求：

POST：/upload
data：filename

4)删除某一个音乐：

请求：

POST：/deleteServlet
data：{“id”：id}

响应：{msg：true}

5)删除选中：

请求：（id 数组）

POST：/deleteSelMusic
data：{“id”：id}

响应：{msg：true}

6)模糊查询音乐：

请求：

Get：/findMusic
data：{musicName：musicName}

响应：{msg：true}

7)添加喜欢音乐到喜欢列表：

请求：

POST：/loveMusic
data：{“id”：obj}

响应：{msg：true}

8)模糊查询喜欢的音乐：

请求：

Get：/findLoveMusic
data：{musicName：musicName}

响应：{msg：true}

9)移除喜欢的音乐：

请求：

POST：/removeLoveMusic
data：{‘id’：obj}

响应：{msg：true}

5.封装数据库的相关操作

1）创建 util 包（工具相关的），其中再创建 DBUtils 类，和数据库建立连接。


public class DBUtils {                                        // 数据库名字对应private static String url = "jdbc:mysql://127.0.0.1:3306/数据库名称?useSSL=false";private static String password ="2222";//数据库密码private static String username = "root";private static volatile DataSource dataSource;// 获取数据源private static DataSource getDataSource(){// 双重校验锁if(dataSource == null){synchronized (DBUtils.class){if(dataSource == null){dataSource = new MysqlDataSource();((MysqlDataSource) dataSource).setUrl(url);((MysqlDataSource) dataSource).setUser(username);((MysqlDataSource) dataSource).setPassword(password);}}}return dataSource;}// 获取连接public static Connection getConn(){try {Connection connection = getDataSource().getConnection();return connection;} catch (SQLException e) {e.printStackTrace();throw new RuntimeException("获取数据库连接失败");}}// 关闭数据库  存在依赖关系，关闭和连接顺序相反public static void getClose(Connection connection, PreparedStatement statement,ResultSet resultSet) {if(resultSet!=null) {try {resultSet.close();} catch (SQLException e) {e.printStackTrace();}}if(statement!=null) {try {statement.close();} catch (SQLException e) {e.printStackTrace();}}if(connection!=null) {try {connection.close();} catch (SQLException e) {e.printStackTrace();}}}
}

2）创建 dao 包（数据库持久层），主要来操作MySQL，实现各功能。

创建UserDao类：
login；
register
创建MusicDao类：
insert；
findMusic；
findMusicById；
findMusicByKey；
deleteMusicById；
findLoveMusicById；
deleteLoveMusicById
创建LoveMusicDao类：
findLoveMusic；
findLoveMusicByMusicIdAndUserId；
findLoveMusicBykeyAndUID；
removeLoveMusic

注意：
1.查询当前用户喜欢的音乐，数据库中需要两张表联合查询 music、musicLove。

   public List<Music> findLoveMusic(int user_id) {List<Music> musicList = new ArrayList<>();Connection con = null;PreparedStatement prs = null;ResultSet resultSet = null;try {con = DBUtils.getConn();//  String sql ="select * from lovemusic where user_id =?";// 查询 user_id ，数据在 music表里，需要两张表联合查询// music: id title singer time url userid// lovemusic: id user_id music_idString sql = "select m.id as m_id,title,singer,time,url,userid from" +" music m,lovemusic lm where m.id = lm.music_id and lm.user_id =?";prs = con.prepareStatement(sql); // 执行完 不需要插入prs.setInt(1,user_id);  // 给个指定的值resultSet = prs.executeQuery(); // 然后 判断结果集 显示while (resultSet.next()){Music music = new Music();music.setId(resultSet.getInt("m_id"));music.setTitle(resultSet.getString("title"));music.setSinger(resultSet.getString("singer"));music.setTime(resultSet.getString("time"));music.setUrl(resultSet.getString("url"));music.setUserId(resultSet.getInt("userid"));musicList.add(music);}} catch (SQLException e) {e.printStackTrace();}finally {DBUtils.getClose(con,prs,resultSet);}return musicList;}

6.实现Servlet

实现各个Servlet，处理请求。
Servlet与前端页面交互，生成动态Web页面。

例：登录loginServlet：

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");  // 设置编码，设置响应数据格式，拿到数据，通过dao层，操作数据库，最后返回响应的数据，再返回给前端String username = req.getParameter("username");String password = req.getParameter("password");System.out.println("username:"+username);System.out.println("password:"+password);Map<String ,Object> return_map = new HashMap<>();// service层和dao层联系，又需要 dao层操作数据库UserDao userDao = new UserDao();// 登录需要登录用户 loginUserUser loginUser = new User(); //创建一个数据库实体类对象loginUser.setUsername(username);loginUser.setPassword(password);LoginService loginService = new LoginService();User user = loginService.login(loginUser);//  User user = userDao.login(loginUser);  // 接受下登录的返回值if (user == null){// 登录失败return_map.put("msg",false);}else {req.getSession().setAttribute("user", user);//绑定数据return_map.put("msg",true);}ObjectMapper mapper = new ObjectMapper();//利用Jackson将map转化为json对象，// writer 将转换后的json字符串保存到字符输出流中，最后给客户端mapper.writeValue(resp.getWriter(),return_map);  // 写到前端}
}

注意：
上传音乐的流程：
1）将音乐上传到服务器
2）再将音乐信息存入数据库


@WebServlet("/upload")
@MultipartConfig
public class UploadMusicServlet extends HttpServlet {// 定义文件存储位置，上传到 music 文件夹private static final String SAVEPATH = "D:\\IDEA\\IdeaProjects\\OnlineMusic\\src\\main\\webapp\\music\\";private static final String SAVEPATH = "/home/liu/install/apache-tomcat-8.5.69/webapps/OnlineMusic/music/";  // 部署到云服务器 对应路径@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setContentType("application/json;charset=utf-8");User user =(User) req.getSession().getAttribute("user");  // 需要从请求中拿到刚刚登录后的session;// 此处attribute()中取的要和登录时的key--》user对应if (user == null){System.out.println("没有登录，不能上传！");}else {//1、先上传服务器Part part = req.getPart("filename");    // fiddler 抓包获取到的内容 Content-Disposition:// form-data; name="filename"; filename="毛不易 - 若有缘由.mp3";                     //从content-disposition头中获取源文件名称,获取到一个字符串String header = part.getHeader("Content-Disposition");// 字符串处理int start = header.lastIndexOf("=");   // 最后一个 = 的后面 ,就是需要的内容String fileName = header.substring(start + 1) .replace("\"", "");  // 把 " 替换掉// 最后获取到的应该是：毛不易 - 若有缘由.mp3System.out.println("fileName2:" + fileName); // 现在已经拿到音乐文件.mp3  --- 写到服务器指定路径下part.write(SAVEPATH + fileName);  // 调用 write方法，在SAVEPATH路径下，把文件存进去String singer = req.getParameter("singer");System.out.println("歌手："+singer);// 此时可以查看到 music文件夹里包含了 音乐// 2、插入数据库// 看数据库中的信息 title、singer、time、urlString[] titles = fileName.split("\\."); // 毛不易 - 若有缘由.mp3， 用.分割，title=毛不易 - 若有缘由 0下标String title = titles[0];System.out.println("title:" + title);String url = "music\\"+title;System.out.println("url："+url);// 格式化时间SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");String time=sdf.format(new Date());int userId = user.getId();MusicDao musicDao = new MusicDao();int ret = musicDao.insert(title,singer,time,url,userId); // 数据库里存if (ret == 1){// 上传成功resp.sendRedirect("list.html"); // 重定向}else {System.out.println("上传失败！");part.delete();  // 数据库上传失败了，就要把前面服务器上传成功的给删掉}}}
}

7.前端页面设计

采用HTML+CSS+JS设计
不做重点，可寻找模板，稍作改动。

8.最终实现效果

登录：

注册：

列表页：

添加音乐到喜欢列表：

喜欢音乐列表：

音乐播放器在线链接：
http://106.54.183.128:8080/OnlineMusic/login.html

JavaWeb项目--【在线音乐播放器】onlineMusicPlayer相关推荐

Andriod小项目——在线音乐播放器
Andriod小项目--在线音乐播放器转载请注明:http://blog.csdn.net/sunkes/article/details/51189189 Android在线音乐播放器从大一开始就 ...
SSM框架项目 —— 在线音乐播放器（测试）
前言: 之前写过的SSM项目,现在我们通过 selenium 自动化套件 + junit 单元测试框架,来对其功能进行自动化测试回顾项目功能:登录.注册.修改密码.播放音乐.搜索音乐.收藏音乐.上传 ...
【Java项目实战】在线音乐播放器（从需求到产品完整解析）
准备工作必看:[Java项目实战]在线音乐播放器(前期准备) 核心功能登录.注册上传音乐删除某一个音乐信息删除选中的音乐信息查询音乐(包含查找指定/模糊匹配的音乐) 添加音乐到"喜 ...
【Spring Boot项目】个人在线音乐播放器
文章目录 1. 项目简介 2. 数据库表的设计 3. 拦截器及返回数据格式 4. 注册功能 5. 登陆功能 6. 音乐列表相关业务 6.1 查询功能 6.2 上传音乐 6.3 播放音乐 6.4 收藏音 ...
QT小项目-QT在线音乐播放器
QT在线音乐播放器先上几张音乐播放器的图片具体实现及部分代码后面还有好多就不一一例举了先上几张音乐播放器的图片 (主页图片来源网络) 具体实现及部分代码搜索歌曲和获取歌曲具体信息的URL,这 ...
python播放在线音乐_Python实现在线音乐播放器
最近这几天,学习了一下python,对于爬虫比较感兴趣,就做了一个简单的爬虫项目,使用Python的库Tkinsert做了一个界面,感觉这个库使用起来还是挺方便的,音乐的数据来自网易云音乐的一个接口, ...
[MAUI 项目实战] 音乐播放器（一）：概述与架构
系列文章将分步解读音乐播放器核心业务及代码: [MAUI 项目实战] 音乐播放器(一):概述与架构 [MAUI 项目实战] 音乐播放器(二):播放内核 [MAUI 项目实战] 音乐播放器(三):界面交 ...
在线音乐播放器的推荐机制
对于我这样一个音乐控来说,学习工作时没有音乐是万万不行的.在网易云音乐云音乐面世之前,我总是在QQ音乐,百度音乐等播放器之间徘徊,当时也不够文艺,不知道豆瓣FM的存在. 第一次接触云音乐被其吸引的原因 ...
python播放网络音乐_Python实现在线音乐播放器示例
这篇文章主要为大家详细介绍了Python实现在线音乐播放器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下最近这几天,学习了一下python,对于爬虫比较感兴趣,就做了一个简单的爬虫项目 ...
【基于Qt的在线音乐播放器】
基于Qt的在线音乐播放器项目功能: 本在线音乐播放器的功能在于创建一个音乐播放器页面,可以实现搜索功能通过HTTP协议获取网络中数据并解析出来,播放搜索到的歌曲并展示相关信息.效果如图: 相关类及功 ...

JavaWeb项目--【在线音乐播放器】onlineMusicPlayer