SpringBoot-Vue前后端分离开发Demo

关于前后端分离的理论描述可以参考一下这篇文章，个人感觉写的还是很不错的前后端分离：web实现前后端分离，前后端解耦
本篇文章主要介绍前后端分离的一个小demo，前端使用vue实现，后端采用SpringBoot实现，数据库采用mysql，demo已上传至GitHub:SpringBoot_Vue

先启动项目给大家看一下效果
启动后端项目

启动前端项目

访问前端网页查看一下能否后从后台读到数据，注意端口号是前端项目的8080

这里在后端项目中也提供的前后端为分离的前端页面，可以访问8088端口查看，但是采用的也是Restful风格请求，大家可以对比查看一下前后端分离区别

接下来说一下前后端分离时前后端各自需要做哪些修改
关于项目的搭建配置、CRUD代码的编写这里就不做赘述了，主要讲解一下前后端分离时后端的需要做出哪些改变。
后端方面主要是需要做一个跨域的配置，新建config包，在config包下新建WebMvcConfigurer.java

package com.thz.vuecrud.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
class WebMvcConfigurer extends WebMvcConfigurerAdapter {
    //跨域配置
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重写父类提供的跨域请求处理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路径
                registry.addMapping("/**")
                        //放行哪些原始域
                        .allowedOrigins("*")
                        //是否发送Cookie信息
                        .allowCredentials(true)
                        //放行哪些原始域(请求方式)
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        //放行哪些原始域(头部信息)
                        .allowedHeaders("*")
                        //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                        .exposedHeaders("Header1", "Header2");
            }
        };
    }
}

然后就是将前端访问地址修改为Restful风格的，其实不修改也是可以的，但是既然都前后端分离了，这里还是提倡使用Restful风格。
什么是Restful风格？看下面这张图

采用Restful风格需要将之前的RequestMapping修改为PutMapping、DeleteMapping等，用以区分请求是CRUD中的哪一种

关于前端部分的页面搭建这里就不多做赘述了，主要使用的是Vue框架。不使用Vue框架使用普通的html页面也行，因为前后端分离时前端部分主要是在请求后端数据时发生了一些变化，至于数据的展示、页面的布局等都是一样的。
所有的请求都交由Ajax进行发送，我这里使用了ajax框架axios
使用npm下载axios后导入vue项目中

看一下如何使用
因为使用了Restful风格，所以上图红框部分使用了不同的请求方式，划红线的url是后端暴露出来的接口，我们可以看到端口号8088正是我们之前启动后端项目时的端口号