前言

 

前端使用： 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）;

 

    }