基于SpringBoot Vue的青年音乐网站的设计及实现+文档_基于springboot+vue音乐网站的研究方法

  博主介绍：✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌

项目名称

基于SpringBoot Vue的青年音乐网站的设计及实现+文档

视频演示

基于SpringBoot Vue的青年音乐网站）_哔哩哔哩_bilibili

系统介绍

摘要

随着数字网络技术的发展和智能设备的普及，音乐平台已经成为青年人群的重要娱乐方式。然而，如何利用现代技术手段打造一个既能播放音乐，又能下载并统一管理音乐数据的平台，是目前面临的挑战。

本研究的目标是设计并实现一个基于Spring Boot的青年音乐网站。选择了B/S架构，并结合Vue技术，创建了一个交互性强、用户友好的网站界面。为了保证数据的持久化和安全，采用MySQL数据库来保存和管理音乐数据。在网站的前端设计中，采用了基于Vue2.X的前端技术，提供了音乐播放、下载、歌曲浏览，评论等功能。还针对用户的使用习惯和视觉体验，进行了精心的UI设计，使得网站的界面更加美观易读。在后端设计中，采用了基于Spring Boot的MVC架构，实现了对歌曲和歌手的统一管理。此外，还借鉴了现有音乐平台的优点，结合了浏览器的直接操作系统，使得用户可以直接在网站上进行音乐的播放、下载和管理。

这个项目的设计和实现，不仅丰富了互联网上的音乐资源，还为用户提供了一个更便捷、高效的音乐体验平台。这个网站的设计和实现，充分体现了现代网络技术在音乐服务领域的应用，也为未来音乐平台的设计提供了有价值的参考。

关键词

青年音乐网站，SpringBoot，在线音乐

2.1业务流程分析

今天主要从流程设计这块来讲，针对流程设计离不开流程图，好的流程图可以让快速了解到项目的主要流程走向，同时也可以细化每一步的设计模块内容，可以做为一个系统的大纲来使用，让后续的开发能很好的按照预想去开发[15]。

本网站主要角色分为两大类：普通用户、管理员用户。其中普通用户通过注册会员，再通过登录页面进行登录，在登录成功过后，进入到首页模块，首页中包含MV模块、歌单模块、歌曲模块、评论模块、歌手模块、搜索模块这几大类。管理员通过登录进入后台系统，后台系统中可以针对首页模块、用户模块、歌手模块、歌单模块、MV模块进行数据管理和维护，如图2-1所示。

图2-1 系统业务流程图

在管理员用例图中，描述了管理员在音乐网站中的各种操作和管理功能。首先，管理员需要登录才能进入系统进行管理操作。登录成功后，管理员进入系统首页，可以查看网站的数据统计和图表展示，以便更好地了解网站运营情况。

在用户管理模块，管理员可以对用户进行删除和其他管理操作，确保平台的用户行为合规。歌手管理模块则涉及歌手的新增、修改和删除功能，管理员可以根据实际需求对歌手信息进行调整。歌曲管理模块同样包括歌曲的新增、修改和删除功能，以便维护网站上的音乐资源[20]。

歌单管理模块允许管理员查看歌单内容，同时还可以查看和管理歌曲评论和歌单评论，以确保平台上的评论环境秩序。最后，MV管理模块则涉及MV的新增、修改和删除功能，管理员可以根据需要对MV资源进行更新和维护。

管理员用例图为音乐网站的管理员提供了全面的管理功能，包括用户管理、歌手管理、歌曲管理、歌单管理和MV管理等，以确保音乐平台的正常运营和良好用户体验。管理员用例图如图2-2所示。

图2-2 管理员用例图

在用户用例图中，描述了用户在音乐网站中的各种操作和互动功能。首先，用户可以通过注册和登录功能加入平台，成为音乐网站的会员。

在歌曲收听模块，用户可以在线收听歌曲，根据喜好自由选择音乐。同时，用户还可以将喜欢的歌曲收藏到个人歌单中，方便日后再次收听。若有需求，用户还可以选择将歌曲下载到本地，便于离线收听。

歌手查看模块允许用户浏览歌手信息，了解歌手的基本资料和音乐作品。此外，用户还可以查看歌手的MV作品，进一步丰富音乐体验。在歌手页面，用户可以观看歌手相关的MV和歌手的歌曲列表。

歌单查看模块中，用户可以浏览和收听各种歌单。歌单可能包含了根据不同主题、风格或场景精选的歌曲，为用户提供丰富的音乐选择。用户还可以查看歌单中的歌曲列表，以及参与歌单评论互动，与其他用户分享音乐心得和感受。

综上所述，用户用例图展示了音乐网站为用户提供的一系列功能和服务，包括注册、登录、歌曲收听、歌曲收藏、歌曲下载、歌手查看、MV查看和歌单查看等。这些功能为用户带来丰富的音乐体验，满足了用户在音乐方面的多样化需求。用户用例图如2-3所示。

图2-3 用户用例图

2.4 系统功能需求分析

2.4.1 前端功能需求

用户在前端主要包含首页、专辑、歌手、个人中心四个模块。

首页注册、登录、歌单选择、轮播图查看、歌曲搜索。

个人中心：用户信息编辑、头像修改

歌单：歌单打分、歌单、歌曲评论、歌单列表、歌词同步显示。

歌手：歌手列表分页显示、歌手歌曲展示。

歌曲：歌曲播放、歌曲收藏、下载、拖动控制、音量控制。

MV:MV视频的显示以及视频播放功能。

2.4.2 后台管理功能需求

系统主要分为两类角色：管理员以及用户，管理员主要负责后台的系统数据维护工作，用户则负责前端的业务操作，他们的主要功能如下：

首页：用户统计、歌曲统计、歌手统计、歌单统计，用户、歌手、歌曲等报表统计信息。

用户管理：用户搜索、修改、删除，查看用户收藏。

歌手管理：歌手搜索、修改、删除、添加，评论管理，歌手的歌曲管理，歌曲评论管理，歌曲歌词管理。

专辑管理：专辑搜索、修改、删除、添加，专辑评论管理，专辑的歌曲管理。

环境需要

1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。
2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;
3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可
4.硬件环境：windows 7/8/10 1G内存以上；或者 Mac OS； 
5.数据库：MySql 5.7版本；
6.是否Maven项目：否；

技术栈

1. 后端：Spring+SpringMVC+Mybatis
2. 前端：JSP+CSS+JavaScript+jQuery

使用说明

1. 使用Navicat或者其它工具，在mysql中创建对应名称的数据库，并导入项目的sql文件；
2. 使用IDEA/Eclipse/MyEclipse导入项目，Eclipse/MyEclipse导入时，若为maven项目请选择maven;
若为maven项目，导入成功后请执行maven clean;maven install命令，然后运行；
3. 将项目中springmvc-servlet.xml配置文件中的数据库配置改为自己的配置;
4. 运行项目，在浏览器中输入http://localhost:8080/ 登录

运行截图

 

 用户管理控制层:

package com.houserss.controller;
 
import javax.servlet.http.HttpSession;
 
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.houserss.common.Const;
import com.houserss.common.Const.Role;
import com.houserss.common.ServerResponse;
import com.houserss.pojo.User;
import com.houserss.service.IUserService;
import com.houserss.service.impl.UserServiceImpl;
import com.houserss.util.MD5Util;
import com.houserss.util.TimeUtils;
import com.houserss.vo.DeleteHouseVo;
import com.houserss.vo.PageInfoVo;
 
/**
 * Created by admin
 */
@Controller
@RequestMapping("/user/")
public class UserController {
    @Autowired
    private IUserService iUserService;
 
    /**
     * 用户登录
     * @param username
     * @param password
     * @param session
     * @return
     */
    @RequestMapping(value = "login.do",method = RequestMethod.POST)
    @ResponseBody
    public ServerResponse<User> login(User user,String uvcode, HttpSession session){
        String code = (String)session.getAttribute("validationCode");
        if(StringUtils.isNotBlank(code)) {
            if(!code.equalsIgnoreCase(uvcode)) {
                return ServerResponse.createByErrorMessage("验证码不正确");
            }
        }
        ServerResponse<User> response = iUserService.login(user.getUsername(),user.getPassword());
        if(response.isSuccess()){
            session.setAttribute(Const.CURRENT_USER,response.getData());
        }
        return response;
    }
 
  
    
    
}

 

 

 

 

管理员管理控制层:

 
package com.sxl.controller.admin;
 
import java.util.List;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
 
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
import com.sxl.controller.MyController;
 
@Controller("adminController")
@RequestMapping(value = "/admin")
public class AdminController extends MyController {
	
 
	@RequestMapping(value = "/index")
	public String frame(Model model, HttpServletRequest request)throws Exception {
		return "/admin/index";
	}
	
	@RequestMapping(value = "/main")
	public String main(Model model, HttpServletRequest request)throws Exception {
		return "/admin/main";
	}
	
	@RequestMapping(value = "/tj1")
	public String tj1(Model model, HttpServletRequest request)throws Exception {
		String sql="select DATE_FORMAT(insertDate,'%Y-%m-%d') dates,sum(allPrice) price from t_order order by DATE_FORMAT(insertDate,'%Y-%m-%d')  desc";
		List<Map> list = db.queryForList(sql);
		model.addAttribute("list", list);
		System.out.println(list);
		return "/admin/tj/tj1";
	}
	
	
	@RequestMapping(value = "/password")
	public String password(Model model, HttpServletRequest request)throws Exception {
		return "/admin/password";
	}
	
	
	@RequestMapping(value = "/changePassword")
	public ResponseEntity<String> loginSave(Model model,HttpServletRequest request,String oldPassword,String newPassword) throws Exception {
		Map admin = getAdmin(request);
		if(oldPassword.equals(admin.get("password").toString())){
			String sql="update t_admin set password=? where id=?";
			db.update(sql, new Object[]{newPassword,admin.get("id")});
			return renderData(true,"1",null);
		}else{
			return renderData(false,"1",null);
		}
	}
}

修改密码业务逻辑:

 
package com.sxl.controller.admin;
 
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
 
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
import com.sxl.controller.MyController;
 
@Controller("userController")
@RequestMapping(value = "/user")
public class UserController extends MyController {
	
 
	@RequestMapping(value = "/index")
	public String frame(Model model, HttpServletRequest request)throws Exception {
		return "/user/index";
	}
	
	@RequestMapping(value = "/main")
	public String main(Model model, HttpServletRequest request)throws Exception {
		return "/user/main";
	}
	
	
	@RequestMapping(value = "/password")
	public String password(Model model, HttpServletRequest request)throws Exception {
		return "/user/password";
	}
	
	
	@RequestMapping(value = "/changePassword")
	public ResponseEntity<String> loginSave(Model model,HttpServletRequest request,String oldPassword,String newPassword) throws Exception {
		Map user = getUser(request);
		if(oldPassword.equals(user.get("password").toString())){
			String sql="update t_user set password=? where id=?";
			db.update(sql, new Object[]{newPassword,user.get("id")});
			return renderData(true,"1",null);
		}else{
			return renderData(false,"1",null);
		}
	}
	@RequestMapping(value = "/mine")
	public String mine(Model model, HttpServletRequest request)throws Exception {
Map user =getUser(request);Map map = db.queryForMap("select * from t_user where id=?",new Object[]{user.get("id")});model.addAttribute("map", map);		return "/user/mine";
	}
	
	
 
	@RequestMapping(value = "/mineSave")
	public ResponseEntity<String> mineSave(Model model,HttpServletRequest request,Long id
		,String username,String password,String name,String gh,String mobile) throws Exception{
		int result = 0;
			String sql="update t_user set name=?,gh=?,mobile=? where id=?";
			result = db.update(sql, new Object[]{name,gh,mobile,id});
		if(result==1){
			return renderData(true,"操作成功",null);
		}else{
			return renderData(false,"操作失败",null);
		}
	}
	}

通用管理模块:

package com.sxl.controller;
 
 
import java.nio.charset.Charset;
import java.util.Locale;
import java.util.ResourceBundle;
 
import javax.servlet.http.HttpServletRequest;
 
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
 
import com.sxl.util.JacksonJsonUtil;
import com.sxl.util.StringUtil;
import com.sxl.util.SystemProperties;
 
 
public class BaseController {
	public static final Long EXPIRES_IN = 1000 * 3600 * 24 * 1L;// 1天
 
	@Autowired
	private SystemProperties systemProperties;
 
	/**
	 * 获得配置文件内容
	 */
	public String getConfig(String key) {
		return systemProperties.getProperties(key);
	}
 
	/**
	 * 返回服务器地址 like http://192.168.1.1:8441/UUBean/
	 */
	public String getHostUrl(HttpServletRequest request) {
		String hostName = request.getServerName();
		Integer hostPort = request.getServerPort();
		String path = request.getContextPath();
 
		if (hostPort == 80) {
			return "http://" + hostName + path + "/";
		} else {
			return "http://" + hostName + ":" + hostPort + path + "/";
		}
	}
 
	/***
	 * 获取当前的website路径 String
	 */
	public static String getWebSite(HttpServletRequest request) {
		String returnUrl = request.getScheme() + "://"
				+ request.getServerName();
 
		if (request.getServerPort() != 80) {
			returnUrl += ":" + request.getServerPort();
		}
 
		returnUrl += request.getContextPath();
 
		return returnUrl;
	}
 
 
 
	/**
	 * 初始化HTTP头.
	 * 
	 * @return HttpHeaders
	 */
	public HttpHeaders initHttpHeaders() {
		HttpHeaders headers = new HttpHeaders();
		MediaType mediaType = new MediaType("text", "html",
				Charset.forName("utf-8"));
		headers.setContentType(mediaType);
		return headers;
	}
 
	/**
	 * 返回 信息数据
	 * 
	 * @param status
	 * @param msg
	 * @return
	 */
	public ResponseEntity<String> renderMsg(Boolean status, String msg) {
		if (StringUtils.isEmpty(msg)) {
			msg = "";
		}
		String str = "{\"status\":\"" + status + "\",\"msg\":\"" + msg + "\"}";
		ResponseEntity<String> responseEntity = new ResponseEntity<String>(str,
				initHttpHeaders(), HttpStatus.OK);
		return responseEntity;
	}
 
	/**
	 * 返回obj数据
	 * 
	 * @param status
	 * @param msg
	 * @param obj
	 * @return
	 */
	public ResponseEntity<String> renderData(Boolean status, String msg,
			Object obj) {
		if (StringUtils.isEmpty(msg)) {
			msg = "";
		}
		StringBuffer sb = new StringBuffer();
		sb.append("{");
		sb.append("\"status\":\"" + status + "\",\"msg\":\"" + msg + "\",");
		sb.append("\"data\":" + JacksonJsonUtil.toJson(obj) + "");
		sb.append("}");
 
		ResponseEntity<String> responseEntity = new ResponseEntity<String>(
				sb.toString(), initHttpHeaders(), HttpStatus.OK);
		return responseEntity;
	}
 
 
	/***
	 * 获取IP（如果是多级代理，则得到的是一串IP值）
	 */
	public static String getIpAddr(HttpServletRequest request) {
		String ip = request.getHeader("x-forwarded-for");
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getHeader("Proxy-Client-IP");
		}
 
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getHeader("WL-Proxy-Client-IP");
		}
 
		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
			ip = request.getRemoteAddr();
		}
 
		if (ip != null && ip.length() > 0) {
			String[] ips = ip.split(",");
			for (int i = 0; i < ips.length; i++) {
				if (!"unknown".equalsIgnoreCase(ips[i])) {
					ip = ips[i];
					break;
				}
			}
		}
 
		return ip;
	}
 
	/**
	 * 国际化获得语言内容
	 * 
	 * @param key
	 *            语言key
	 * @param args
	 * @param argsSplit
	 * @param defaultMessage
	 * @param locale
	 * @return
	 */
	public static String getLanguage(String key, String args, String argsSplit,
			String defaultMessage, String locale) {
		String language = "zh";
		String contry = "cn";
		String returnValue = defaultMessage;
 
		if (!StringUtil.isEmpty(locale)) {
			try {
				String[] localeArray = locale.split("_");
				language = localeArray[0];
				contry = localeArray[1];
			} catch (Exception e) {
			}
		}
 
		try {
			ResourceBundle resource = ResourceBundle.getBundle("lang.resource",
					new Locale(language, contry));
			returnValue = resource.getString(key);
			if (!StringUtil.isEmpty(args)) {
				String[] argsArray = args.split(argsSplit);
				for (int i = 0; i < argsArray.length; i++) {
					returnValue = returnValue.replace("{" + i + "}",
							argsArray[i]);
				}
			}
		} catch (Exception e) {
		}
 
		return returnValue;
	}
}