一、基础项目搭建

1. 新建springboot项目

在搭建Springboot项目之前，需要的基础环境：JDK(8)、Maven，工具Idea。项目就新建一个简单的springboot项目就行了，具体就不介绍了。
依赖介绍：所有依赖注释都在代码中

     <!--基础包--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--Mybatis--><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.0</version></dependency><!--测试--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--日志--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-log4j</artifactId><version>1.3.8.RELEASE</version></dependency><!--Mysql数据库--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.47</version></dependency><!--Swagger2--><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger-ui</artifactId><version>2.9.2</version></dependency><!--redis--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><!--JSON--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.78</version></dependency><!--阿里云的短信验证码--><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId><version>4.5.3</version></dependency>

项目配置：
这里我分别使用properties和yml来配置数据库和Redis，其实一个就可以了，我是为了都试一试。
application.properties

server.port=8080 #端口号#数据源
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useSSL=false&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=root#配置Mybatis
mybatis.mapperLocations=classpath:mybatis/*.xml #mybatis的xml文件的位置
mybatis.type-aliases-package=com.example.musicserver.pojo #别名
#Mybatis的Log配置
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

application.yml

spring:redis:host: 127.0.0.1port: 6379password: 123456jedis:pool:max-active: 8max-wait: -1max-idle: 500min-idle: 0lettuce:shutdown-timeout: 0

因为整合Log4j，还有一个log4j的配置文件
log4j.properties

#控制日志级别，在哪里输出Output pattern : date [thread] priority category - message   FATAL 0  ERROR 3  WARN 4  INFO 6  DEBUG 7
log4j.rootLogger=info,ServerDailyRollingFile,stdout
log4j.logger.weblog=INFO, weblog
log4j.appender.ServerDailyRollingFile=org.apache.log4j.DailyRollingFileAppender
log4j.appender.ServerDailyRollingFile.DatePattern='.'yyyy-MM-dd
log4j.appender.ServerDailyRollingFile.File=/Users/xiaocai/IdeaProjects/wmsMobile.log
log4j.appender.ServerDailyRollingFile.layout=org.apache.log4j.PatternLayout
log4j.appender.ServerDailyRollingFile.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} [%t] %-5p [%c] - %m%n
log4j.appender.ServerDailyRollingFile.Append=true#控制台  显示的的方式为控制台普通方式
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
#日志输出的格式
log4j.appender.stdout.layout.ConversionPattern=%d %-5p [%c{5}] - %m%n#打印sql部分
log4j.logger.java.sql=DEBUG
log4j.logger.java.sql.Connection = DEBUG
log4j.logger.java.sql.Statement = DEBUG
log4j.logger.java.sql.PreparedStatement = DEBUG
log4j.logger.java.sql.ResultSet = DEBUG

至此，最基础的项目就搭建完成了。

2. Vue项目搭建

搭建vue项目前，需要安装的环境：
node.js、npm、vue脚手架。

安装node.js

这个直接百度搜索，下载安装包安装就完事了。
安装完成后，可以通过CMD来验证安装是否成功。

安装vue脚手架

通过此命令 npm install -g @vue/cli可以安装vue3.0的脚手架
安装完成后，通过vue -V来验证是否安装成功。-V一定要大写

安装 webpack

npm install webpack -g

创建vue基础项目

这个不想写了，看看别人的链接https://www.jianshu.com/p/5e13bc2eb97c，也就是创建一个基本的Vue的空项目。

二、后端项目搭建

其实在创建好数据库，已经搭建完基础项目后，第一件事一般都是来创建实体类，搭出后台的整体框架。我截个图讲解下

1. 实体类

其实就是把数据库的每张表建立对应的实体类，除了那种关联表，例如上一章数据库设计里提到的，歌单歌曲表，它是不需要创建对应的实体类的，因为它对应的其实就是歌单和歌曲这两个实体类，而他们之间的一对一、一对多或多对多，都可以用mybatis框架来实现的，后面会详细讲一下mybatis的一对多，多对多的实现方法。
实体类的内容：内容就不用多讲了，应该都会，举一个例子。

@ApiModel("Song歌曲") //这是swagger
public class Song {@ApiModelProperty(value = "歌曲Id",name = "songId",hidden = true)private Integer songId;@ApiModelProperty(value = "歌曲名",name = "songName")private String songName;@ApiModelProperty(value = "歌手Id",name = "songSinger")private Integer songSinger;@ApiModelProperty(value = "歌曲文件路径",name = "songFilePath")private String songFilePath;@ApiModelProperty(value = "专辑Id",name = "songAlbum")private Integer songAlbum;@ApiModelProperty(value = "歌词",name = "songLyc")private String songLyc;@ApiModelProperty(value = "专辑",name = "album",hidden = true)private Album album;@ApiModelProperty(value = "歌手",name = "singer",hidden = true)private Singer singer;public String getSongLyc() {return songLyc;}public void setSongLyc(String songLyc) {this.songLyc = songLyc;}public Album getAlbum() {       return album;    }public void setAlbum(Album album) {        this.album = album;    }public Singer getSinger() {        return singer;    }public void setSinger(Singer singer) {        this.singer = singer;    }public Integer getSongId() {return songId;}public void setSongId(Integer songId) {this.songId = songId;}public String getSongName() {return songName;}public void setSongName(String songName) {this.songName = songName;}public String getSongFilePath() {return songFilePath;}public void setSongFilePath(String songFilePath) {this.songFilePath = songFilePath;}public Integer getSongSinger() {return songSinger;}public void setSongSinger(Integer songSinger) {this.songSinger = songSinger;}public Integer getSongAlbum() {return songAlbum;}public void setSongAlbum(Integer songAlbum) {this.songAlbum = songAlbum;}@Overridepublic String toString() {return "Song{" +"songId=" + songId +", songName='" + songName + '\'' +", songSinger=" + songSinger +", songFilePath='" + songFilePath + '\'' +", songAlbum=" + songAlbum +", album=" + album +", singer=" + singer +'}';}
}

其实就是把数据库表的字段全部写成属性，然后生成get、set方法。
其他实体类忽略。

2. 其他

其他的Mapper、Service、Service实现类、Controller，这些就按照实体类创建出来就行，具体的内容，在后面添加每一个功能时，再具体添加。

三、前端项目搭建

根据上面的教程搭建了基础的vue项目后，我们先来看看src的目录结构（图是我完整的项目）

定义一个UrlConfig.js文件，用来存取IP地址以及接口名称，推荐使用，比较方便维护。

1. 需求分析

看图片，我们需要把页面框架分为三个组件，头部菜单栏，中间页面，以及下方的播放栏位。

2. 主框架搭建

首先我先摆三个文件中的少量代码，对项目的整个框架简单说明一下。
App.vue
它是vue的主组件，页面的入口文件。一般情况这里都只会放一个router-view标签，可以理解为占位的作用。

<template><div id="app"><router-view/></div>
</template>

router目录下的index.js
它就是来定义页面路径的，例如下面代码的意思就是访问’/'，就跳转到components下的menu.vue，

const routes = [{path: '/',name: 'menu',component: () => import('../components/menu.vue')}

components目录下的menu.vue
先不用管内容是什么意思

<template><div><HeaderTop></HeaderTop><div class='centerBox'><router-view></router-view></div><MusicPlay></MusicPlay></div>
</template>

结合以上三点，可以这样理解，app.vue就是程序的主页面，它其中放了一个路由的页面占位符，当我们去访问前端的路径时，它就会把对应的页面替换掉占位符的位置，例如，当我们访问http://localhost:8080/时，页面的结构其实就是这样

  <div id="app"><div><HeaderTop></HeaderTop><div class='centerBox'><router-view></router-view></div><MusicPlay></MusicPlay></div></div>

因为访问的是’/‘，那么在路由index.js中找到’/'对应的页面，去替换掉app.vue中的router-view。

再例如，如果我再配置一个路由

 {path: '/home',name: 'Home',component: () => import('../views/Home.vue')}

那么当我访问http://localhost:8080/home时，就是用home页面的内容替换掉App.vue中router-view的位置。

这就是vue框架的理解。

再说回menu.vue文件，通过上面可以看见，我访问根目录时，页面其实显示的就是menu页面的内容，那么我想要实现不管页面怎么跳转，我的头部和底部都不变，那么就可以在menu文件中来写。

<template><div><HeaderTop></HeaderTop><div class='centerBox'><router-view/></div><MusicPlay></MusicPlay></div>
</template>

从代码看，有两个标签HeaderTop和MusicPlay，他们是组件，也可以理解为占位，我们把一些通用的页面做成单独的页面，然后在需要的页面用组件名的方式引入一下就可以了，后面详细说。

然后我们再增加一个路由占位符‘router-view’。不管怎么点击，我们可以只改变这里的页面。
例如：访问/home时

访问/singer时

所以整个项目的router结构如图

前端框架基本完成

SpringBoot+vue仿网易云音乐网站（三）- Springboot项目以及前端vue基础搭建相关推荐

毕业设计：基于Springboot + Vue仿网易云音乐网站（一）开源
项目背景最近自学了springboot.vue.redis等技术,为了巩固,决定自己做个小网站玩玩,把学到的东西都使用一下,因为自己比较喜欢听音乐,去年一年网易云就听了1800个小时,然后也喜欢周杰 ...
SpringBoot+vue仿网易云音乐网站（二）-数据库设计
一.需求分析仿网易云,那么需求的话就照着网易云音乐来做了. 首先可以听歌,可以查看歌手,歌手又有对应的专辑,有用户,用户可以新建歌单,收藏歌单,歌单可以增删歌曲,用户还可以评论歌曲.专辑.歌单,还有 ...
【HTML+CSS】仿网易云音乐网站
[HTML+CSS]仿网易云音乐网站
基于vue的高仿网易云音乐网站，实现大多数功能
文章目录前言项目演示地址线上地址项目仓库总结前言基于Vue + Vue-Router + Vuex + axios + elementui,ui参考网易云音乐,后端接口使用网易云音乐接口 ...
用HTML+CSS仿网易云音乐网站(6个页面)_实训素材
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星 ...
[Vue仿网易云音乐实战]炎炎夏日——放首自己喜欢的歌
前言基于 Vue + vuex + vue-router + vue-axios +better-scroll + Stylus + px2rem 等开发的移动端音乐App,UI 界面是看着自己手机 ...
Vue仿网易云音乐播放器（一）
项目简介写了很多关于Vue的项目,都是一部分一部分的小模块,这次想把全部学过的关于Vue知识和模块写成一个完整的项目.都是组件化进行mvvm模式开发,实现了view和data的同步更新.仿网易云播放 ...
2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图,歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径,安装界面美化浏览器中启动客户端 Travis ...
仿网易云音乐的小程序项目（粗糙版）
前言通过github拉取下的后台服务器,根据接口文档,调用真实的网易云音乐数据,独立开发而成,收获很多完成了 : 每日推荐的歌曲,歌单,视频页面,账号登陆的展示数据信息功能歌曲和视频的播放切换, ...

SpringBoot+vue仿网易云音乐网站（三）- Springboot项目以及前端vue基础搭建