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

一、SpringBoot项目搭建在搭建Springboot项目之前，需要的基础环境：JDK(我安装的是8)、Maven，工具Idea。1. 新建项目选择Springboot项目，选择你的JDK。这里主要器是给项目命名，最主要的是Java的版本选择8。2. 依赖介绍放代码，所有依赖注释都在代码中<dependency><groupId>org.

丿盆鱼宴

2808人浏览 · 2021-12-08 17:54:45

丿盆鱼宴 · 2021-12-08 17:54:45 发布

一、基础项目搭建

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.1
    port: 6379
    password: 123456
    jedis:
      pool:
        max-active: 8
        max-wait: -1
        max-idle: 500
        min-idle: 0
    lettuce:
      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;
    }

    @Override
    public 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结构如图

前端框架基本完成

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...