基于SpringBoot2+Vue2.X的音乐网站

昨天搭了环境，花了好久。今天终于上手开始建表，让SpringBoot跑起来，建了各种包，完成初始化配置，然后跑通了最基本的登录验证功能。

前端Vue还是直接用现成的代码（群里大佬还说我基础不牢，让我学一下Vue，哭了）。

首先一个是解决跨域问题，按照定义：

一个项目的地址是：http://localhost:8080/music

另一个项目地址是：http://localhost:8081/music

当第一个项目需要访问第二个项目时就可能出现跨域问题。跨域问题主要源自于浏览器的同源策略。

同域即域名、协议、端口……均相同。只要有一个不同，如上两个项目的地址，就是跨域。

在SpringBoot中，解决跨域问题的方法就是在实现了WebMvcConfigurer的配置类中，添加如下方法：

@Override
public void addCorsMappings(CorsRegistry registry) {
  registry.addMapping("/**")
    .allowedOriginPatterns("*")
    .allowedMethods("*")
    .allowCredentials(true);
}

（不过具体原理还不懂，百度搜了好多也只讲了这样去配置，没有讲这个具体是什么含义，待有时间再来研究一下）

另外，文件的目录结构如下：

据群里其他人说，这个是比较标准的文件目录结构，client是前台，manage是后台，这两个文件夹里面都是遵循Vue的目录结构。

而server打开就很熟悉了，标准的IDEA的文件目录结构，这个就是后端的内容啦。

通过简单的完成了登录功能，以及和群里大佬的讨论，大概明白了前后端分离的含义。

就是前端需要哪些接口，例如在本项目中，client或manage文件夹中的src/api/index.js里面写了这些接口

get请求一目了然，post请求的params貌似就是数据库中的各种表，一一对应。

后端去写这些接口，给前端，然后一同运行起来，前端的各种调用接口的操作就能跑通啦。

实现前后端分离，前后端可以同时进行开发，最后通过接口联通，将整个项目成功跑通。

----------------------------------------------------------------------------------------------------------------------------

2021-11-13 22:05:07 更新

关于静态资源访问的问题：

例如，数据库中存放了如下的图片地址

那么如何定位到IDEA项目中的某个静态资源呢？

需要在实现了WebMvcConfigurer的配置类中，添加如下方法：

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
  registry.addResourceHandler("/img/singerPic/**").addResourceLocations(
    "file:" + System.getProperty("user.dir") + System.getProperty("file.separator") + "img"
    + System.getProperty("file.separator") +"singerPic" + System.getProperty("file.separator")
  );
}

当请求路径包含/img/singPic/时，就会去以下的img/singerPic文件夹中寻找相应的图片，如果能找到，就可以在网页中正常显示图片。