SpringBoot Vue基于微信小程序的云音乐系统的设计与实现_: 基于springboot的在线听歌系统的设计与实现

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

项目名称

SpringBoot Vue基于微信小程序的云音乐系统的设计与实现

视频演示

SpringBoot Vue基于微信小程序的云音乐系统的设计与实_哔哩哔哩_bilibili

系统介绍

3.2 系统需求分析

系统分为两个模块：管理员和用户。通过这两个模块系统可以实现网上音乐收听和管理功能。

3.2.1 管理员功能需求

管理员登录系统后台后可以对系统的所有数据进行管理，主要包括了以下功能模块：登录、首页统计、用户管理（用户列表）、海报管理（海报列表）、音乐管理（音乐列表）、专辑管理（专辑列表、专辑分类列表）、歌手管理（歌手列表）、评论管理（评论列表）、歌单管理（歌单列表）。具体管理用例图如下图3-1所示：

图3-1管理员用例图

3.2.2用户功能需求

用户是使用小程序的主要角色用户，主要包括了以下功能模块：登录、注册、音乐搜索、专辑、歌单、排行榜、歌曲播放、歌曲收藏、歌单、评论、个人信息。具体用户用例图如下图3-2所示：

图3-2用户用例图

第4章 系统设计

4.1 功能模块设计

系统总体分为这两个功能模块：管理员后台功能模块以及用户小程序端功能模块。系统功能模块如图4-1所示：

图4-1系统功能模块图

4.1.1 管理员功能

在基于微信小程序的云音乐系统中，管理员扮演着非常重要的角色。管理员需要负责对系统内的各种数据和内容进行有效管理，以确保系统的正常运行和用户体验。以下是管理员功能的详细描述：

1. 登录：管理员需要通过账号和密码登录系统后台，以获得对各种数据和功能的管理权限。
2. 首页统计：管理员可以在后台首页查看实时统计数据，如用户数量、播放量、收藏量等，以便了解系统运行状况并进行相应的优化调整。
3. 用户管理（用户列表）：管理员可以查看、编辑、删除用户信息，以维护用户数据库的完整性和准确性。
4. 海报管理（海报列表）：管理员可以管理系统内的海报资源，包括上传、编辑、删除海报，以及调整展示顺序等，以提升用户的视觉体验。
5. 音乐管理（音乐列表）：管理员可以对音乐资源进行管理，包括上传、编辑、删除音乐文件，设置音乐标签、封面图片等，确保音乐资源的完整性和高质量。
6. 专辑管理（专辑列表、专辑分类列表）：管理员可以管理专辑资源，包括创建、编辑、删除专辑，以及对专辑进行分类管理。此外，管理员还可以调整专辑的排序和推荐顺序，为用户提供精准的推荐内容。
7. 歌手管理（歌手列表）：管理员可以对歌手信息进行管理，包括添加、编辑、删除歌手信息，以便用户能够更方便地找到和关注自己喜欢的歌手。
8. 评论管理（评论列表）：管理员可以对用户发表的评论进行审核、删除等管理操作，以维护系统内的良好氛围，防止恶意言论和不良信息的传播。
9. 歌单管理（歌单列表）：管理员可以对歌单资源进行管理，包括创建、编辑、删除歌单，为用户提供丰富多样的歌单选择。此外，管理员还可以调整歌单的排序和推荐顺序，为用户提供个性化的推荐内容。

通过以上功能模块，管理员可以有效地对基于微信小程序的云音乐系统进行全面的管理和维护，确保系统的稳定运行，为用户提供优质的音乐服务。

4.1.2 用户功能

在基于微信小程序的云音乐系统中，用户作为使用小程序的主要角色，能够享受到丰富的音乐服务和便捷的操作体验。以下是用户功能的详细描述：

1. 登录/注册：用户可以通过微信授权登录或者注册账号，以便在系统中保存个人信息、收藏记录等。
2. 音乐搜索：用户可以通过关键词搜索歌曲、歌手、专辑等资源，快速找到自己喜欢的音乐。
3. 专辑：用户可以浏览、收听专辑内的歌曲，并查看专辑的详细信息，如专辑封面、发行日期等。
4. 歌单：用户可以查看系统推荐的歌单或自己创建歌单，收听并管理歌单内的歌曲。
5. 排行榜：用户可以查看热门歌曲排行榜，了解当前音乐榜单状况，发现热门歌曲。
6. 歌曲播放：用户可以在线播放歌曲，享受流畅的音乐体验，并查看歌词、歌曲信息等。
7. 歌曲收藏：用户可以将喜欢的歌曲添加到收藏夹，便于日后随时收听。
8. 歌单：用户可以创建、编辑、删除个人歌单，并将喜欢的歌曲添加到相应的歌单中。
9. 评论：用户可以对歌曲、歌单、专辑等进行评论，发表自己的观点，与其他用户互动。
10. 个人信息：用户可以查看和编辑个人信息，包括昵称、头像、性别等，以个性化展示自己的身份。

通过以上功能模块，用户可以充分利用基于微信小程序的云音乐系统，享受便捷、丰富的音乐服务。这些功能让用户能够轻松地发现、收听、分享自己喜欢的音乐，从而提升整体的音乐体验。

环境需要 

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