基于SpringBoot+Vue的⾳乐⽹站项⽬-附源码+报告
⽂章⽬录
项⽬简介
本⾳乐⽹站的客户端和管理端使⽤ VUE 框架来实现，服务端使⽤ Spring Boot + MyBatis 来实现，数据库使⽤了 MySQL。
技术栈 后端 SpringBoot + MyBatis
前端 Vue + Vue-Router + Vuex + Axios + ElementUI git
开发环境 JDK： jdk-8u141 mysql：mysql-5.7.21-1-macos10.13-x86_64 node：v12.4.0 IDE：IntelliJ IDEA 2020、VSCode
项⽬功能
项⽬功能 ⾳乐播放 ⽤户登录注册 ⽤户信息编辑、头像修改 歌曲、歌单搜索 歌单打分 歌单、歌曲评论 歌单列表、歌⼿列表分页显⽰ 歌词同步显⽰ ⾳乐收藏、下载、拖动控制、⾳量控制 后台对⽤户、歌曲、歌⼿、歌单信息的管理
前端页⾯使⽤ Vue渐进式框架完成对页⾯的模块化设计，使⽤ JQuery 与 Ajax 进⾏前端数据处理并⽤于传输数据。后端逻辑代码由JavaEE 开发源代码，SpringBoot框架构建项⽬整合框架，Maven管理项⽬以及库⽂件，MySQL 数据库技术进⾏数据持久化处理。
项⽬结构
├── build //webpack相关配置⽂件
├── config //vue基本配置⽂件
├── node_modules //包
├── index.html //⼊⼝页⾯
├── package.json // 管理包的依赖
│ ├── App.vue // 根组件
│ ├── main.js // ⼊⼝js⽂件
│ ├── api // 封装请求的 api
│ ├── assets // 静态资源，图⽚、js、css 等
│ ├── mixins // 公共⽅法
│ ├── components
│ │ ├── Header.vue
│ │ ├── Home.vue
│ │ ├── Sidebar.vue
│ │ └── SongAudio.vue
│ ├── pages // 组件
│ │ ├── CollectPage.vue
│ │ ├── CommentPage.vue
│ │ ├── ConsumerPage.vue
│ │ ├── InfoPage.vue
│ │ ├── ListSongPage.vue
│ │ ├── Login.vue
│ │ ├── SingerPage.vue
│ │ ├── SongListPage.vue
│ │ └── SongPage.vue
│ ├── router // 路由
│ └── store // 管理数据
├── static // 存放静态资源
└── test // 测试⽂件⽬录
数据表设计管理员信息表
⽤户信息表
⽤户评论表
歌曲表
项⽬展⽰
登录界⾯
在主界⾯通过输⼊账号和密码与数据库中已存在的密码和账号进⾏⽐对，如果⼀致则登录成功，如果密码错误或⽤户名错误时，跳出弹框提⽰⽤户。
后台管理
⽤户管理界⾯
主界⾯模块
在主界⾯通过输⼊账号和密码与数据库中已存在的密码和账号进⾏⽐对，如果⼀致则登录成功，如果密码错误或⽤户名错误时，跳出弹框提⽰⽤户。
⽤户注册时需要填写⽤户名、密码、性别、邮箱等信息，注册成功后，再返回登录。
歌单界⾯
部分代码
jquery源码在线
评论控制类
package com.ller;
import com.alibaba.fastjson.JSONObject;
import com.xusheng.music.domain.Comment;
import com.xusheng.music.service.CommentService;
import com.xusheng.music.utils.Consts;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
/
**
* 评论控制类
*/
@RestController
@RequestMapping("/comment")
public class CommentController {
@Autowired
private CommentService commentService;
/**
* 添加评论
*/
@RequestMapping(value ="/add", method = RequestMethod.POST)
public Object addComment(HttpServletRequest request){
JSONObject jsonObject =new JSONObject();
String userId = Parameter("userId");//⽤户id
String type = Parameter("type");//评论类型（0歌曲1歌单）        String songId = Parameter("songId");//歌曲id
String songListId = Parameter("songListId");//歌单id
String content = Parameter("content").trim();//评论内容
//保存到评论的对象中
Comment comment =new Comment();
comment.setUserId(Integer.parseInt(userId));
comment.setType(new Byte(type));
if(new Byte(type)==0){
comment.setSongId(Integer.parseInt(songId));
}else{
comment.setSongListId(Integer.parseInt(songListId));
}
comment.setContent(content);
boolean flag = commentService.insert(comment);
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 updateComment(HttpServletRequest request){
JSONObject jsonObject =new JSONObject();
String id = Parameter("id").trim();//主键
String userId = Parameter("userId").trim();//⽤户id
String type = Parameter("type").trim();//评论类型（0歌曲1歌单）        String songId = Parameter("songId").trim();//歌曲id
String songListId = Parameter("songListId").trim();//歌单id
String content = Parameter("content").trim();//评论内容//保存到评论的对象中
Comment comment =new Comment();
comment.setId(Integer.parseInt(id));
comment.setUserId(Integer.parseInt(userId));
comment.setType(new Byte(type));
if(songId != null && songId.equals("")){
songId = null;
}else{
comment.setSongId(Integer.parseInt(songId));
}
if(songListId != null && songListId.equals("")){
songListId = null;
}else{
comment.setSongListId(Integer.parseInt(songListId));
}
comment.setContent(content);
boolean flag = commentService.update(comment);
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)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。