前后端分离 Spring Booot + Vue 开发单页面应用 个人总结（一）

关于跨域：在实际开发过程中,发现跨域问题并不是那么好解决的 因为Springboot安全控制框架使用了Securtiy,它的身份认证基于 JSESSIonID 而axios框架默认是不发送cookie的,因此需要在axios配置中添加

axios.defaults.withCredentials = true

然而因为跨域策略问题,Springboot后端跨域设置也要修改

@Configuration
public class CorsConfig {
    
    private CorsConfiguration buildConfig() {
 CorsConfiguration corsConfiguration = new CorsConfiguration();
 // addAllowedOrigin 不能设置为* 因为与 allowCredential 冲突
 corsConfiguration.addAllowedOrigin("http://localhost:9528");
 corsConfiguration.addAllowedHeader("*");
 corsConfiguration.addAllowedMethod("*");
 // allowCredential 需设置为true
 corsConfiguration.setAllowCredentials(true);
 return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
 UrlbasedCorsConfigurationSource source = new UrlbasedCorsConfigurationSource();
 source.registerCorsConfiguration("
public interface SysUserRepository extends JpaRepository {
    //...
}

我们在SysUserRepository中只添加一个findFirstByNameAndPassword方法就够了，详细源码参见 repository/SysUserRepository

接着，搭建服务层，服务层遵循服务接口 + 实现 的模式，我们现在还没有创建用户，那么就提供 saveUser 和 checkLogin 两个服务好啦，详细代码参阅 service/SysUserService 和 service/SysUserServiceImpl

服务层实现方式都比较简单粗暴，通过修改实现类可以增加密码加密等更多功能

然后，该搭建控制层了，为控制类添加 @RestController 就可以实现该类下所有方法都会自动以Json格式返回数据啦！

@RestController
@RequestMapping("/user")
@Validated
public class SysUserController {
    //...
}

{
    "code":200,
    "message":"附带的消息",
    "data":{}
}

 
    @RequestMapping("/register")
    public RestResult register(@Valid SysUser user, BindingResult bindingResult) {
 return generator.getSuccessResult("用户注册成功",userService.saveUser(user));
    }

    
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public RestResult login(@NotNull(message = "用户名不能为空") String name,@NotNull(message = "密码不能为空") String password, HttpSession session) {
 SysUser user = userService.checkLogin(name, password);
 if(user != null) {
  //储存到session中
     session.setAttribute("user",user);
     return generator.getSuccessResult("登陆成功",user);
 }
 return generator.getFailResult("用户名/密码错误");
    }

 
    @ExceptionHandler(ConstraintViolationException.class)
    public RestResult handleConstraintViolationException(ConstraintViolationException cve) {
 //这里简化处理了，cve.getConstraintViolations 会得到所有错误信息的迭代，可以酌情处理
 String errorMessage = cve.getConstraintViolations().iterator().next().getMessage();
 return generator.getFailResult(errorMessage);
    }
    //在后面添加了一个主键/唯一约束异常处理器，见源码

    
    


    这是主页

{"code":200,"message":"用户注册成功","data":{"id":1,"name":"myadmin","password":"123456"}}

{"code":400,"message":"密码应设为6至18位","data":null}

@Configuration
public class CorsConfig {
    
    private CorsConfiguration buildConfig() {
 CorsConfiguration corsConfiguration = new CorsConfiguration();
 corsConfiguration.addAllowedOrigin("*"); 
 corsConfiguration.addAllowedHeader("*"); 
 corsConfiguration.addAllowedMethod("*"); 
 return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
 UrlbasedCorsConfigurationSource source = new UrlbasedCorsConfigurationSource();
 source.registerCorsConfiguration("/**", buildConfig()); 
 return new CorsFilter(source);
    }
}