基于Java Springboot + Vue + MyBatis實(shí)現(xiàn)音樂(lè)播放系統(tǒng)
視頻演示:
springboot+vue音樂(lè)網(wǎng)站
摘要
網(wǎng)絡(luò)技術(shù)以及計(jì)算機(jī)的發(fā)展,網(wǎng)友們對(duì)網(wǎng)絡(luò)的要求也日益長(zhǎng)高,平常在網(wǎng)上聽(tīng)話用一大堆下載軟件下載下來(lái)也要管理,又占空間,比如那流行歌曲,下載了聽(tīng)了又要?jiǎng)h很不方便·而網(wǎng)絡(luò)音樂(lè)庫(kù)的實(shí)現(xiàn)改變了這一狀況。它本身就是一個(gè)數(shù)字音樂(lè)交互,用戶通過(guò)它可是方便快捷、安全地實(shí)現(xiàn)國(guó)最大的音樂(lè)搜索查找歌曲,并能實(shí)時(shí)試聽(tīng),將自己喜愛(ài)的歌曲加入收藏,為用戶建立一個(gè)自由、自主、安全的世界局域網(wǎng)。音樂(lè)正是在這樣的需求前提下應(yīng)運(yùn)而生。給人們的日常生活帶來(lái)了極大的樂(lè)趣,讓人們?cè)诜泵ζv的工作之后可以進(jìn)行休閑·基于此種現(xiàn)狀,在充分分析了該行業(yè)的市場(chǎng)前景,調(diào)研了用戶需求之后,設(shè)計(jì)了該音樂(lè)。
流行音樂(lè)之所以被稱為“流行”,原因之一,是她有著傳播的時(shí)效性·絕大部分流行歌曲可以一夜成名·但是從人們腦子里消失得也很快,從前極力搶購(gòu)的唱片可能不久之后就被束之高閣,人們追逐的永遠(yuǎn)是不同于以往的“新”星。但是互聯(lián)網(wǎng)的出現(xiàn),一方而因?yàn)閭鞑ニ俣忍岣叨觿×诉@種時(shí)效性,另一方而卻又利用其無(wú)限的網(wǎng)絡(luò)胸懷使這些流行音樂(lè)具有了一定的持久性。如果這兩方面正是人們所需要的,那么,這些都應(yīng)當(dāng)歸功于音樂(lè)·作為音樂(lè)的網(wǎng)絡(luò)載體,音樂(lè)在創(chuàng)作、傳播、欣賞方式等方而對(duì)流行音樂(lè)的發(fā)展都產(chǎn)生了前所未有的影響:
1)電腦網(wǎng)絡(luò)技術(shù)的發(fā)展使人們通過(guò)音樂(lè)接觸到了更多的流行音樂(lè)。
2)網(wǎng)民數(shù)量的激增使更多的人們通過(guò)音樂(lè)接觸到了流行音樂(lè)。
3)音樂(lè)為流行音樂(lè)創(chuàng)作提供了更多的便利。
4)音樂(lè)刺激了流行音樂(lè)的傳播。
5)音樂(lè)使流行音樂(lè)的欣賞方式發(fā)生了改變。
6)音樂(lè)不但刺激了流行音樂(lè)的傳播,且也刺激了電子數(shù)碼產(chǎn)品的頻繁更新?lián)Q代。
主要設(shè)計(jì)
功能設(shè)計(jì)
用戶端:登錄注冊(cè)功能、首頁(yè)歌曲歌單信息查看、搜索、聽(tīng)歌、歌曲的各項(xiàng)設(shè)置、評(píng)論、以及我的音樂(lè)等。
管理員端: 登錄、圖形樹狀圖數(shù)據(jù)查看、用戶管理、歌單管理、歌手管理、歌曲編輯、評(píng)價(jià)等。
主要技術(shù)
Springboot+SpringMvc+mybatis+lombok+cache+攔截器+Jquery+html+VUE+Node.js等
功能截圖
用戶端首頁(yè)

登錄注冊(cè)

歌單信息
用戶首頁(yè)可以根據(jù)歌單信息進(jìn)行搜索歌曲

歌手信息
用戶首頁(yè)可以根據(jù)歌手信息進(jìn)行搜索歌曲


我的音樂(lè)

評(píng)論點(diǎn)贊

管理員端

首頁(yè)

用戶管理

歌手管理

歌單管理

部分代碼
@RestController
@Controller
public class ConsumerController {
@Autowired
private ConsumerServiceImpl consumerService;
@Configuration
public class MyPicConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
String os = System.getProperty("os.name");
if (os.toLowerCase().startsWith("win")) { // windos系統(tǒng)
registry.addResourceHandler("/img/avatorImages/**")
.addResourceLocations("file:" + Constants.RESOURCE_WIN_PATH + "\\img\\avatorImages\\");
} else { // MAC、Linux系統(tǒng)
registry.addResourceHandler("/img/avatorImages/**")
.addResourceLocations("file:" + Constants.RESOURCE_MAC_PATH + "/img/avatorImages/");
}
}
}
// 添加用戶
@ResponseBody
@RequestMapping(value = "/user/add", method = RequestMethod.POST)
public Object addUser(HttpServletRequest req){
JSONObject jsonObject = new JSONObject();
String username = req.getParameter("username").trim();
String password = req.getParameter("password").trim();
String sex = req.getParameter("sex").trim();
String phone_num = req.getParameter("phone_num").trim();
String email = req.getParameter("email").trim();
String birth = req.getParameter("birth").trim();
String introduction = req.getParameter("introduction").trim();
String location = req.getParameter("location").trim();
String avator = req.getParameter("avator").trim();
if (username.equals("") || username == null){
jsonObject.put("code", 0);
jsonObject.put("msg", "用戶名或密碼錯(cuò)誤");
return jsonObject;
}
Consumer consumer = new Consumer();
DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
Date myBirth = new Date();
try {
myBirth = dateFormat.parse(birth);
} catch (Exception e){
e.printStackTrace();
}
consumer.setUsername(username);
consumer.setPassword(password);
consumer.setSex(new Byte(sex));
if (phone_num == "") {
consumer.setPhoneNum(null);
} else{
consumer.setPhoneNum(phone_num);
}
if (email == "") {
consumer.setEmail(null);
} else{
consumer.setEmail(email);
}
consumer.setBirth(myBirth);
consumer.setIntroduction(introduction);
consumer.setLocation(location);
consumer.setAvator(avator);
consumer.setCreateTime(new Date());
consumer.setUpdateTime(new Date());
boolean res = consumerService.addUser(consumer);
if (res) {
jsonObject.put("code", 1);
jsonObject.put("msg", "注冊(cè)成功");
return jsonObject;
} else {
jsonObject.put("code", 0);
jsonObject.put("msg", "注冊(cè)失敗");
return jsonObject;
}
}
// 判斷是否登錄成功
@ResponseBody
@RequestMapping(value = "/user/login/status", method = RequestMethod.POST)
public Object loginStatus(HttpServletRequest req, HttpSession session){
JSONObject jsonObject = new JSONObject();
String username = req.getParameter("username");
String password = req.getParameter("password");
// System.out.println(username+" "+password);
boolean res = consumerService.veritypasswd(username, password);
if (res){
jsonObject.put("code", 1);
jsonObject.put("msg", "登錄成功");
jsonObject.put("userMsg", consumerService.loginStatus(username));
session.setAttribute("username", username);
return jsonObject;
}else {
jsonObject.put("code", 0);
jsonObject.put("msg", "用戶名或密碼錯(cuò)誤");
return jsonObject;
}
}
// 返回所有用戶
@RequestMapping(value = "/user", method = RequestMethod.GET)
public Object allUser(){
return consumerService.allUser();
}
// 返回指定ID的用戶
@RequestMapping(value = "/user/detail", method = RequestMethod.GET)
public Object userOfId(HttpServletRequest req){
String id = req.getParameter("id");
return consumerService.userOfId(Integer.parseInt(id));
}
// 刪除用戶
@RequestMapping(value = "/user/delete", method = RequestMethod.GET)
public Object deleteUser(HttpServletRequest req){
String id = req.getParameter("id");
return consumerService.deleteUser(Integer.parseInt(id));
}
// 更新用戶信息
@ResponseBody
@RequestMapping(value = "/user/update", method = RequestMethod.POST)
public Object updateUserMsg(HttpServletRequest req){
JSONObject jsonObject = new JSONObject();
String id = req.getParameter("id").trim();
String username = req.getParameter("username").trim();
String password = req.getParameter("password").trim();
String sex = req.getParameter("sex").trim();
String phone_num = req.getParameter("phone_num").trim();
String email = req.getParameter("email").trim();
String birth = req.getParameter("birth").trim();
String introduction = req.getParameter("introduction").trim();
String location = req.getParameter("location").trim();
// String avator = req.getParameter("avator").trim();
// System.out.println(username+" "+password+" "+sex+" "+phone_num+" "+email+" "+birth+" "+introduction+" "+location);
if (username.equals("") || username == null){
jsonObject.put("code", 0);
jsonObject.put("msg", "用戶名或密碼錯(cuò)誤");
return jsonObject;
}
Consumer consumer = new Consumer();
DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
Date myBirth = new Date();
try {
myBirth = dateFormat.parse(birth);
}catch (Exception e){
e.printStackTrace();
}
consumer.setId(Integer.parseInt(id));
consumer.setUsername(username);
consumer.setPassword(password);
consumer.setSex(new Byte(sex));
consumer.setPhoneNum(phone_num);
consumer.setEmail(email);
consumer.setBirth(myBirth);
consumer.setIntroduction(introduction);
consumer.setLocation(location);
// consumer.setAvator(avator);
consumer.setUpdateTime(new Date());
boolean res = consumerService.updateUserMsg(consumer);
if (res){
jsonObject.put("code", 1);
jsonObject.put("msg", "修改成功");
return jsonObject;
}else {
jsonObject.put("code", 0);
jsonObject.put("msg", "修改失敗");
return jsonObject;
}
}
// 更新用戶頭像
@ResponseBody
@RequestMapping(value = "/user/avatar/update", method = RequestMethod.POST)
public Object updateUserPic(@RequestParam("file") MultipartFile avatorFile, @RequestParam("id")int id){
JSONObject jsonObject = new JSONObject();
if (avatorFile.isEmpty()) {
jsonObject.put("code", 0);
jsonObject.put("msg", "文件上傳失??!");
return jsonObject;
}
String fileName = System.currentTimeMillis()+avatorFile.getOriginalFilename();
String filePath = System.getProperty("user.dir") + System.getProperty("file.separator") + "img" + System.getProperty("file.separator") + "avatorImages" ;
File file1 = new File(filePath);
if (!file1.exists()){
file1.mkdir();
}
File dest = new File(filePath + System.getProperty("file.separator") + fileName);
String storeAvatorPath = "/img/avatorImages/"+fileName;
try {
avatorFile.transferTo(dest);
Consumer consumer = new Consumer();
consumer.setId(id);
consumer.setAvator(storeAvatorPath);
boolean res = consumerService.updateUserAvator(consumer);
if (res){
jsonObject.put("code", 1);
jsonObject.put("avator", storeAvatorPath);
jsonObject.put("msg", "上傳成功");
return jsonObject;
}else {
jsonObject.put("code", 0);
jsonObject.put("msg", "上傳失敗");
return jsonObject;
}
}catch (IOException e){
jsonObject.put("code", 0);
jsonObject.put("msg", "上傳失敗"+e.getMessage());
return jsonObject;
}finally {
return jsonObject;
}
}
數(shù)據(jù)庫(kù)設(shè)計(jì)
數(shù)據(jù)庫(kù)采用mysql5版本、滿足數(shù)據(jù)庫(kù)設(shè)計(jì)三范式。編碼采用utf8 -- UTF-8 Unicode、排序規(guī)則采用utf8_general_ci
用戶表
CREATE TABLE `consumer` ( `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT , `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL , `password` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL , `sex` tinyint(4) NULL DEFAULT NULL , `phone_num` char(15) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `email` char(30) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `birth` datetime NULL DEFAULT NULL , `introduction` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `location` varchar(45) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `avator` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `create_time` datetime NOT NULL , `update_time` datetime NOT NULL , PRIMARY KEY (`id`), UNIQUE INDEX `username_UNIQUE` (`username`) USING BTREE , UNIQUE INDEX `phone_num_UNIQUE` (`phone_num`) USING BTREE , UNIQUE INDEX `email_UNIQUE` (`email`) USING BTREE ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=30 ROW_FORMAT=COMPACT ;
評(píng)論表
CREATE TABLE `comment` ( `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT , `user_id` int(10) UNSIGNED NOT NULL , `song_id` int(10) UNSIGNED NULL DEFAULT NULL , `song_list_id` int(10) UNSIGNED NULL DEFAULT NULL , `content` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `create_time` datetime NULL DEFAULT NULL , `type` tinyint(4) NOT NULL , `up` int(10) UNSIGNED NOT NULL DEFAULT 0 , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=59 ROW_FORMAT=COMPACT ;
收藏表
CREATE TABLE `collect` ( `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT , `user_id` int(10) UNSIGNED NOT NULL , `type` tinyint(4) NOT NULL , `song_id` int(10) UNSIGNED NULL DEFAULT NULL , `song_list_id` int(10) UNSIGNED NULL DEFAULT NULL , `create_time` datetime NOT NULL , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=54 ROW_FORMAT=COMPACT ;
歌手歌曲表
CREATE TABLE `singer` ( `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT , `name` varchar(45) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL , `sex` tinyint(4) NULL DEFAULT NULL , `pic` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `birth` datetime NULL DEFAULT NULL , `location` varchar(45) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `introduction` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=46 ROW_FORMAT=COMPACT ;
歌手表
CREATE TABLE `song` ( `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT , `singer_id` int(10) UNSIGNED NOT NULL , `name` varchar(45) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL , `introduction` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `create_time` datetime NOT NULL COMMENT '發(fā)行時(shí)間' , `update_time` datetime NOT NULL , `pic` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `lyric` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL , `url` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=115 ROW_FORMAT=COMPACT ;
項(xiàng)目總結(jié)
總體來(lái)說(shuō)這個(gè)項(xiàng)目功能相對(duì)還是比較簡(jiǎn)單優(yōu)秀的、適合初學(xué)者作為課程設(shè)計(jì)和畢業(yè)設(shè)計(jì)參考
到此這篇關(guān)于完整音樂(lè)播放系統(tǒng)基于Java Springboot + Vue + MyBatis的文章就介紹到這了,更多相關(guān)音樂(lè)播放系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決@Async(“taskExecutor“)異步線程報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了解決@Async(“taskExecutor“)異步線程報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
使用@PropertySource讀取配置文件通過(guò)@Value進(jìn)行參數(shù)注入
這篇文章主要介紹了使用@PropertySource讀取配置文件通過(guò)@Value進(jìn)行參數(shù)注入,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
Spring IOC相關(guān)注解運(yùn)用(上篇)
這篇文章主要介紹了Spring?IOC相關(guān)注解的運(yùn)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
詳解SpringBoot程序啟動(dòng)時(shí)執(zhí)行初始化代碼
這篇文章主要介紹了詳解SpringBoot程序啟動(dòng)時(shí)執(zhí)行初始化代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
java中FileOutputStream中文亂碼問(wèn)題解決辦法
這篇文章主要介紹了java中FileOutputStream中文亂碼問(wèn)題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04
只需兩步實(shí)現(xiàn)Eclipse+Maven快速構(gòu)建第一個(gè)Spring Boot項(xiàng)目
這篇文章主要介紹了只需兩步實(shí)現(xiàn)Eclipse+Maven快速構(gòu)建第一個(gè)Spring Boot項(xiàng)目,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
java中treemap和treeset實(shí)現(xiàn)紅黑樹
這篇文章主要為大家詳細(xì)介紹了java中treemap和treeset實(shí)現(xiàn)紅黑樹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11

