springboot+vue音乐网站实战项目

---

前言

前端使用: vue/cli “^4.5.15”
后端使用: springboot2.6.2, mybatis-plus3.5.9,mybatis-plus-generator3.5.1
部署:nginx,tomcat,webpack
小结.虽然项目花里胡哨,但是难度不大.收获最多的是:
1.技术选型,任务需求.一旦确定,后期变更代价惨重.
2. 注意备份
3.数据库表单设计
4.bug解决方案
5.更深入体会的是MVVM架构开发模式,流水线式创建实体并实现业务逻辑:
domain/pojo/bean → dao/mapper → mapper.xml → service → serviceimpl → controller
6.记得优先对前端进行数据校验.

感谢b站王汉远前辈和开发中帮助我的人.由于版权原因,开源项目不公布任何歌曲
由于当时选型失误,也没有围绕api开发.这就导致歌曲都是自己一首一首上传的…因此技术选型是我踩得最大的坑.

一.成果展示

前台大概总览

后台大概总览

二. 后端流程

2.1数据库表设计

在这一个单用户项目中基本手握一本 java开发手册,遵守其中规约就可以了.(但是这怎么说呢,目前阶段感觉像鸡肋.因此我接着打算看看mysql高级)
单用户项目开发基本通用样例,但仍然应当考虑自己项目的实际需求

2.2. 后端搭建

2.2.1 mybatis-plus逆向工程生成代码简化开发

为了方便开发,我们应当先建立数据库.之后使用mybatis-plus的逆向工程,代码生成器! 这里不建议使用 lombok 省略 实体的构造器和get,set方法.(我曾看到过这样一句话,如果java内部到处充斥着这种像lmobok可以修改源代码的插件,那么就如同无根浮萍,没有自己的核心竞争力,java迟早被取代!)但我们不可否认,它也很方便,我一般用lombok主要是用他的@slf4j日志.

这种方式可以帮助我们自动生成
domain/pojo/bean(完全生成) → dao/mapper (生成模型和一般crud方法)→ mapper.xml (生成模型和一般crud方法)→ service (生成模型和一般crud方法)→ serviceimpl (生成模型和一般crud方法) → controller (生成模型和一般crud方法) 如果不满意它自带的crud方法,我们可以自己写,建议自己写!
该方法要注意的是mybatis-plus-generator3.5.1版本是一个转变 代码生成详见此处

2.2.2 配置数据,跨域和静态资源放行

由于基本配置是可以复用的,因此我将其粘贴下方.
采用 配置类和yaml配置文件相结合的方式
1.druid类配置文件

package com.vector.music.config;

import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.support.http.StatViewServlet;
import com.alibaba.druid.support.http.WebStatFilter;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.boot.web.servlet.ServletRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import javax.annotation.PostConstruct;
import javax.sql.DataSource;
import java.sql.SQLException;
import java.util.Arrays;

/**
 * @author WangYuanJie
 * @description: about jdbcDruidConfig
 * @ClassName MyDataSourceConfig
 * @date 2022/1/21 16:17
 */
@Configuration
public class MyDataSourceConfig {
    @ConfigurationProperties(prefix = "spring.datasource")
    @Bean
    public DataSource dataSource() throws SQLException {
        DruidDataSource druidDataSource = new DruidDataSource();
        //加入监控功能
//        druidDataSource.setFilters("stat,wall");

        return druidDataSource;
    }
    /*
     * 解决druid 日志报错：discard long time none received connection:xxx
     * */
    @PostConstruct
    public void setProperties(){
        System.setProperty("druid.mysql.usePingMethod","false");
    }
    /**
     * 配置druid的监控页
     * @return
     */
    @Bean
    public ServletRegistrationBean statViewServlet(){
        StatViewServlet statViewServlet = new StatViewServlet();
        ServletRegistrationBean<StatViewServlet> registrationBean = new ServletRegistrationBean<>(statViewServlet, "/druid/*");
        registrationBean.addInitParameter("loginUsername","admin");
        registrationBean.addInitParameter("loginPassword","123456");
        return registrationBean;
    }
    /**
     * WebStatFilter用于采集web-jdbc关联监控的数据
     */
    @Bean
    public FilterRegistrationBean webStatFilter(){
        WebStatFilter webStatFilter = new WebStatFilter();
        FilterRegistrationBean<WebStatFilter> filterRegistrationBean = new FilterRegistrationBean<>(webStatFilter);
        filterRegistrationBean.setUrlPatterns(Arrays.asList("/*"));
        filterRegistrationBean.addInitParameter("exclusions","*.js,*.gif,*.jpg,*.ico,/druid/*");
        return filterRegistrationBean;
    }
}

2.后端解决跨域问题

/**
 * 解决跨域问题
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .allowedMethods("*");
    }

3.解决静态资源放行问题

你可以将静态资源放在你想放置的位置,但是尽量不要放在项目工程中,因为项目工程后来只会在内存中运行.不要增加内存负荷,而且你将会出现一个奇怪的问题 springboot图片回显 详见此处

    /**
     * 默认情况下Spring Boot 使用WebMvcAutoConfiguration中配置的各种属性。
     * 默认映射的文件夹有：
     * classpath:/META-INF/resources
     * classpath:/resources
     * classpath:/static
     * classpath:/public
     * 上面这几个都是静态资源的映射路径，优先级顺序为：META-INF/resources > resources > static > public
     * 原理： 静态映射/**。
     * 请求进来，先去找Controller看能不能处理。不能处理的所有请求又都交给静态资源处理器。静态资源也找不到则响应404页面
     * 静态资源访问前缀
     * 默认无前缀
     * spring:
     * mvc:
     * static-path-pattern: /res/**
     * 当前项目 + static-path-pattern + 静态资源名 = 静态资源文件夹下找
     */
    // 以下是自定义静态资源访问
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        /**
         * spring boot中上传图片回显问题
         * 定位歌手头像地址
         * 绝对路径映射,这个不重新部署就可以回显,因为映射你的本地
         */
        registry.addResourceHandler("static/**").addResourceLocations(
                System.getProperty("user.dir") + File.separator + "static" + File.separator);

    }

4.yaml配置文件

# 声明当前的服务端口号是8083
server:
  port: 8083
#spring配置
spring:
# 解决使用swagger高版本更新后路径匹配更新和mvc路径匹配模式不匹配的问题,导致druid报一个错
  mvc:
    pathmatch:
      matching-strategy: ANT_PATH_MATCHER
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/music?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true
    username: music
    password: 123456
    # 配置druid-ui的一些功能
    druid:
      filters: stat,wall,slf4j
      max-active: 12
      stat-view-servlet:
        enabled: true
        login-username: admin
        login-password: 123456
        reset-enable: false
      web-stat-filter:
        enabled: true
        url-pattern: /*
        exclusions: '*.js,*.gif,*.jpg,*.ico,/druid/*'
      aop-patterns: com.vector.admin.*
      filter:
        stat:
          slow-sql-millis: 1000
          log-slow-sql: true
          enabled: true
        wall:
          enabled: true
  # json对象解析处理
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
  # 声明我们后端每次接收的大小和总大小
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 20000MB


# 配置 mybatis 相关内容
mybatis:
  #  config-location: classpath:mybatis/mybatis-config.xml
  mapper-locations: classpath:mapper/*.xml
  configuration: #指定mybatis全局配置文件中的相关配置项
    map-underscore-to-camel-case: true
mybatis-plus:
  type-aliases-package: com.vector.music.pojo

2.3. 流水线式开发模式

domain/pojo/bean → dao/mapper→ mapper.xml → service → serviceimpl → controller
值得一提的是

一般的实体类的时间属性不要使用localdatetime,你驾驭不住!虽然它线程安全,你肯定要使用HttpRequestServlet来获取前端传入的字符串方法,然后通过datetime转化,之后拼接成必须的格式:
yyyy-MM-dd HH:mm:ss 赋值给localdatetime

1.文件上传功能: 详见此处数据库一般存url,之前配置的静态资源路径存上传的实际文件.我们不用害怕uuid或时间戳使我们看不懂,可以通过其他字段确定上传的是什么.
2.注意对前端数据的校验.
controller层:注意@RequestMapping等的请求方式和前端是否一致;注意是否写了@ResponseBody. 不要再使用HttpRequestServlet 获取前端传来的对象.因为他的代码重复度太高,修改时候也很麻烦.建议使用@RequestBody注解实体类获取前端的值.(注意前端传值的名称要与实体类的属性相对应) .`

mapper.xml: 我认为尽量带这个参数

三.前端vue搭建

声明: 前端技术自我感觉很菜

3.1 前端基本环境搭建

3.1.1 脚手架搭建和容易出现的错误

webstorm也和idea差不多了,搭建vue-cli很方便.搭建详见此处
需要注意的是后期npm run build 打包时候如果是空白页.就要看看config/index.js的
build方法中的 assetsPublicPath: ‘./’
router路由导航中是否是 history 模式.

3.1.2 axios与后端交互搭建

由于axios代码也是可复用的,因此将其粘贴如下

import axios from 'axios'
import router from '../router'

axios.defaults.timeout = 5000 // 超市时间是5秒
axios.defaults.withCredentials = true // 允许跨域
// Content-Type 响应头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 基础url
// 对应后端yaml文件的端口号
axios.defaults.baseURL = 'http://127.0.0.1:8083'

// 响应拦截器
axios.interceptors.response.use(
  response => {
    // 如果reponse里面的status是200，说明访问到接口了，否则错误
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401: // 未登录
          router.replace({
            path: '/',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
          break
        case 404: // 没找到
          break
      }
      return Promise.reject(error.response)
    }
  }
)

/**
 * 封装get方法
 */
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {params: params})
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

/**
 * 封装post方法
 */
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

3.2 基本书写流程

基本分为axios请求,assets静态资源存放,router路由导航,vuex即store全局方法,view视图组件,componentsc具体功能组件和可复用组件
components分的比较细是为了解耦合.这些是基本的开发流程.但是一想到css我就头大.太难了,太难了啊.

3.3 前端再次强调注意的

1.注意后期npm run build 打包时候如果是空白页.就要看看config/index.js的
build方法中的 assetsPublicPath: ‘./’
router路由导航中是否是 history 模式.
2.注意对可复用组件的抽离,方便日后其他项目直接使用.
3.注意vue对象中的方法不可乱起名字,都要严格遵守vue官方文档.你可以随意发挥的只有,data(),methods(),computed(),watch()里面的.应该懂我说的什么意思吧.mixins混入
4.注意webpack安装失败的话要删除node_modules文件和package-lock.json文件
要想执行webpack命令必须先下载node

四.项目部署步骤.

1.项目中的访问地址修改成服务器的地址即(127.0.0.1或localhost或0.0.0.0修改至目标服务器),注意防火墙端口放行.可以使用tomcat
2.注意后台 端口, 前台 端口,并且都访问同一个后端 端口.
3.前端npm run build 打包前台和后台 dist
4.后端利用idea maven版本控制功能生成jar

5.注意开发的jdk和linux的jdk版本匹配,之后把jar包随便放一个地方,在该地方执行

nohup java -jar 上传jar包全名 >temp.txt 2>&1 &

6.vue开发的前台和后台可以放在tomcat的webapps里 或 nginx的html里然后

#tomcat 启动 进入tomcat的bin路径下执行 
sh start.sh
#nginx 启动 进入nginx的sbin
nginx

7.假如部署静态资源无法加载,那么可能是跨平台传输工具有问题
默认端口
MySQL 3306
nginx/http 80
https 443
tomcat 8080
堡塔 8888
项目端口 自定义建议1024之后

注意tomcat和nginx以及项目访问路径的端口放行和安全策略组防火墙的放行
还有一个灵光一闪,忘了…

总结

第一次项目分离开发感觉很爽,收获最大的是熟悉了开发流程,了解了很多方便开发的技巧.但诚然很容易遗忘.但这些东西正想我们吃的饭,都不经意间转化成了我们的养分.
下阶段目标: mysql高级的学习:主要内容包括,b+树结构深入,索引优化,数据迁移,容灾备份,阻塞与死锁
之后再写一个boot项目.就开始redis学习.至于之后学习基础jvm,jmm还是cloud,那我认为是jvm,jmm了.

重申由于版权原因不会公布服务器地址,当然也怕被打....
服务端
后台
前台
有时我也会迷茫基础jvm,jmm,算法,编译原理,数据库,计网;高级mq消息队列,kafka,cloud,zookeeper,k8s…感觉都好远,都要学但时间远远不够,考不考研也无法确定,有时候真的觉得会很累…只有学习完了做出成果的喜悦,但过不了多久感觉又有多少是自己独立完成的呢?失落感又弥漫于我…
分享一首歌 但泰勒斯威夫特的歌总能使我重燃信心!

---