系列文章：

SpringBoot + Vue前后端分离项目实战 || 一：Vue前端设计

SpringBoot + Vue前后端分离项目实战 || 二：Spring Boot后端与数据库连接

SpringBoot + Vue前后端分离项目实战 || 三：Spring Boot后端与Vue前端连接

SpringBoot + Vue前后端分离项目实战 || 四：用户管理功能实现

SpringBoot + Vue前后端分离项目实战 || 五：用户管理功能后续

文章目录

• • 前后端对接
  • • 前端接口修改对接后端
    • 后端总体配置
    • 后端编写登录登出业务代码
    • 测试
    • 后端所有代码

      前后端对接

      前端接口修改对接后端

      src\api\user.js中修改请求地址，与后端保持一致

      

      记录下前端的src\utils\request.js中的X-Token字段

      

      改变开发环境中的请求地址，更改为后端地址http://localhost:9999

      

      将前端的模拟数据服务注释关闭

      

      后端总体配置

      后端新建一个config包，包中新建两个类

      

      • MyCorsConfig用于配置异步访问，对接前端的访问链接"http://localhost:8888"，此配置可用Nginx代替
      • MyRedisConfig用于配置Redis序列化服务

        MyCorsConfig中配置的代码如下：

        package com.ums.config;
        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;
        @Configuration
        public class MyCorsConfig {
            @Bean
            public CorsFilter corsFilter() {
                CorsConfiguration configuration = new CorsConfiguration();
                // 允许什么网址来异步访问
                configuration.addAllowedOrigin("http://localhost:8888");
                // 获取cookie
                configuration.setAllowCredentials(true);
                // 允许什么方法？ POST、GET，此处为* 意味全部允许
                configuration.addAllowedMethod("*");
                // 允许所有的请求头
                configuration.addAllowedHeader("*");
                // 设置资源过滤器，过滤什么资源
                UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
                urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",configuration);
                return new CorsFilter(urlBasedCorsConfigurationSource);
            }
        }
        

        MyRedisConfig中用于配置的代码如下：

        package com.ums.config;
        import com.fasterxml.jackson.annotation.JsonAutoDetect;
        import com.fasterxml.jackson.annotation.JsonInclude;
        import com.fasterxml.jackson.annotation.JsonTypeInfo;
        import com.fasterxml.jackson.annotation.PropertyAccessor;
        import com.fasterxml.jackson.databind.DeserializationFeature;
        import com.fasterxml.jackson.databind.MapperFeature;
        import com.fasterxml.jackson.databind.ObjectMapper;
        import com.fasterxml.jackson.databind.SerializationFeature;
        import com.fasterxml.jackson.databind.jsontype.impl.LaissezFaireSubTypeValidator;
        import org.springframework.context.annotation.Bean;
        import org.springframework.context.annotation.Configuration;
        import org.springframework.data.redis.connection.RedisConnectionFactory;
        import org.springframework.data.redis.core.RedisTemplate;
        import org.springframework.data.redis.serializer.GenericJackson2JsonRedisSerializer;
        import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
        import org.springframework.data.redis.serializer.StringRedisSerializer;
        import javax.annotation.Resource;
        import java.text.SimpleDateFormat;
        import java.util.TimeZone;
        @Configuration
        public class MyRedisConfig {
            @Resource
            private RedisConnectionFactory factory;
            @Bean
            public RedisTemplate redisTemplate(){
                RedisTemplate redisTemplate = new RedisTemplate<>();
                redisTemplate.setConnectionFactory(factory);
                // 设置键值序列化
                redisTemplate.setKeySerializer(new StringRedisSerializer());
                Jackson2JsonRedisSerializer serializer = new Jackson2JsonRedisSerializer