前后端分离之Vue（二）前后端结合

前后端的结合

前言：前后端分离趋势越来越明显，分离的好处在于前后端可独立进行开发进行，前端写前端的代码，后端写后端的代码，后端提供相应的数据接口提供给前端。本文采用的是Vue+springboot的结合，做了一个登陆的demo，主要是理解前后端如何结合在一起，这里演示的为前后端在各自的服务器上运行，可参考前后端分离之Vue（一）Vue环境搭建，建立Vue项目 

一、后端服务器的开发

后端采用的是SSM的框架结构进行改造，将前端部分交由Vue看来完成，只负责请求处理。这里只列举变化的部分，不变的部分springboot搭建的SSM结构即可，具体后端代码可参看https://github.com/dgyuanjun/SpringBoot-Vue.git

1.跨域的处理

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @author Administrator
 * @create 2018/3/12-15:17
 * @DESCRIPTION 跨域系统配置
 */
@Configuration
public class CorsConfig {
    /**
     允许任何域名使用
     允许任何头
     允许任何方法（post、get等）
     */
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // // addAllowedOrigin 不能设置为* 因为与 allowCredential 冲突,需要设置为具体前端开发地址
        corsConfiguration.addAllowedOrigin("http://localhost:8000");//前端的开发地址
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        // allowCredential 需设置为true
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedC