关于后端:基于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 {

@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;
}

}