关于后端:基于SpringBoot-Vue的青年音乐网站的设计及实现文档

博主介绍：✌退职Java研发工程师、专一于程序设计、源码分享、技术交换、专一于Java技术畛域和毕业设计✌

项目名称

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

下载地址

基于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我的项目：否；

技术栈

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

应用阐明

应用Navicat或者其它工具，在mysql中创立对应名称的数据库，并导入我的项目的sql文件；
应用IDEA/Eclipse/MyEclipse导入我的项目，Eclipse/MyEclipse导入时，若为maven我的项目请抉择maven;
若为maven我的项目，导入胜利后请执行maven clean;maven install命令，而后运行；
将我的项目中springmvc-servlet.xml配置文件中的数据库配置改为本人的配置;
运行我的项目，在浏览器中输出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 {

@Autowiredprivate IUserService iUserService;/** * 用户登录 * @param username * @param password * @param session * @return */@RequestMapping(value = "login.do",method = RequestMethod.POST)@ResponseBodypublic 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天@Autowiredprivate 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;}

}