前后端分离

前端特殊点：

 在前后端未分离时：

 

前端页面：

和jsp写法差不多，需要更改几处。

编写登陆页面：

和jsp一样，此处省略

main文件配置

 

后端

 使用代码生成器生成代码

参见

https://blog.csdn.net/weixin_43766390/article/details/125982048?spm=1001.2014.3001.5501https://blog.csdn.net/weixin_43766390/article/details/125982048?spm=1001.2014.3001.5501

添加一个与前端交互的包vo他和entity包一样，都是实体类，但vo是和前端交互用的，entity是和数据库交互用的

 

 定义一个登录类

@RestController
@RequestMapping(value = "/system")
@Api(tags = "登录接口类")
public class LoginCon {


    @Autowired
    IUserService userService;
    @ApiOperation(value = "登录接口方法")
    @PostMapping(value = "/login")
    public CommonResult login(@RequestBody LoginVo loginVo){
        System.out.println(loginVo);
        QueryWrapper wrapper = new QueryWrapper<>();
        wrapper.eq("username",loginVo.getUid());
        wrapper.eq("password",loginVo.getUpwd());
        wrapper.eq("is_deleted",0);
        User one = userService.getOne(wrapper);
        if(one != null){
            return new CommonResult(2000,"登录成功",null);
        }else {
            return new CommonResult(5000,"登陆失败",null);
        }
    }


}

使用代码生成器生成代码

代码生成器使用参照

https://blog.csdn.net/weixin_43766390/article/details/125982048?spm=1001.2014.3001.5501https://blog.csdn.net/weixin_43766390/article/details/125982048?spm=1001.2014.3001.5501

修改前端代码;

 

登陆测试报错：跨域问题

当使用异步请求从一个网址访问另一个网址时可能会出现跨域问题。
前提:
   1. 必须为异步请求
   2. 当端口号或协议或ip不同时则会出现跨域

 解决问题

1.前端解决
2.后端解决---->这里也有几种方式：
   【1】可以借助nginx.
   【2】在代码中解决 

这里介绍后端解决方案

第一种加注解

在控制层需要的接口上添加@CrossOrigin  

 

@CrossOrigin  

属性：

origins = {"192.168.0.111:8080","192.168.0.120:8081"},allowedHeaders="运行哪些请求头跨域",methods={"GET","POST"})

origins: 允许哪些域可以跨域访问我这个接口
allowedHeaders:允许哪些请求头信息跨域
methods: 允许哪些请求方式跨域

 请求类型

用法

 

 

第二种(推荐)

如果使用注解，拿需要在所有接口上都加，工作量很大。

使用全局跨域配置类  的话只需配置一次

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 CorsConfig {
 
    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("
            forValue.set(token,one,24, TimeUnit.HOURS);
            return new CommonResult(2000,"登录成功",token);
        }else {
            return new CommonResult(5000,"登陆失败",null);
        }
    }
}

修改vue页面

sessionStorage它相当于session

 测试

 

 

连接redis数据库

查看是否有值

 

虽然问题解决，但这种方式有多少个接口就需要传token多少次耗费资源

 使用axios的请求拦截器

上面的方式不完美，这里使用另一种方式。使用axios的请求拦截器，在请求头上添加token。

添加配置类：

axios.interceptors.request.use(config=>{
  
  var token = sessionStorage.getItem("token");
  
  if(token){
    
    config.headers.token=token;
  }
  return config;
});

 

添加测试页面

 

结果获取到了：