SpringBoot前后端交互

1.SpringBoot概述:

Spring Boot 是在 spring 框架基础之上开发的框架，其设计目的是用来简化应用的初始搭建以及开发过程。虽然 spring 的组件代码是轻量级的,但它的配置却是重量级的, 即使 spring 引入了注解功能,但是仍然需要编写大量的模板化配置文件. 项目的依赖管理也是一件耗时耗力的事情,在环境搭建时，需要分析要导入大量库的坐标，而且还需要分析导入与之有依赖关，一旦选错依赖的版本，随之而来的不兼容问题就会严重阻碍项目的开发进度, Spirng Boot 本身并不提供 Spring 框架的核心特性以及扩展功能，只是用于快速、敏捷地开发新一代基于 Spring 框架的应用程序。也就是说，它并不是用来替代 Spring 的解决方案，而是和 Spring 框架紧密结合用于提升 Spring 开发者体验的工具.

2.交互

1.前端发送一个登陆请求

 submitForm(form) {
         this.$refs[form].validate((valid) => {
           if (valid) {
			   this.$http.post("admin/loginCtl/login",this.form).then((resp)=>{

2.后端根据前端地址接受请求

@RequestMapping(path = "/admin/loginCtl")
public class LoginController {

 @RequestMapping(path = "/login")
    public CommonResult login(@RequestBody Admin admin2){

(1)跨域的配置

@Configuration

加入@Configuration 注解，表明这就是一个配置类。

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1,允许任何来源
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        //2,允许任何请求头
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
        //3,允许任何方法
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
        //4,允许凭证
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}

(2)验证token(token拦截器)

先进行配置

@Configuration
public class WebConfig implements WebMvcConfigurer{

	public void addInterceptors(InterceptorRegistry registry) {
		InterceptorRegistration inter =  registry.addInterceptor(new TokenInterceptor());
		inter.addPathPatterns("/admin/**"); //管理员需要拦截过滤地址
		inter.excludePathPatterns("/admin/loginCtl/login");//放行地址

再验证token, 登录时前端没有token,所以要对登录请求放行,登录成功后生成token再返回给前端保存在请求头中,再次交互时进行验证

public class TokenInterceptor implements HandlerInterceptor {

    //预处理
    //当请求经过映射处理器检测对应的控制器是存在,判断该请求可以进入拦截器,执行调用
    //返回true,继续向下执行
    //返回false,请求不在向下执行
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("token");
        boolean res = JWTUtil.verify(token);
        if (!res){
            CommonResult commonResult = new CommonResult(202,"token验证失效");
            JsonMapper jsonMapper = new JsonMapper();
            String json = jsonMapper.writeValueAsString(commonResult);
            response.getWriter().print(json);
        }
        return res;
    }
}

(3)application.yml yml 是 YAML（YAML Ain’t Markup Language）语言的文件，以数据为中心,时springboot的配置文件

server:
  port: 8080
#spring相关配置
spring:
  #配置数据库连接信息,生成默认的数据源队形,生成jdbcTemplate,事务管理功能初始化
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/ssmdb?serverTimezone=Asia/Shanghai
    username: root
    password: 12121212
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource #指定数据源类型,还需要创建对象
    initialSize: 5 #配置数据库连接池相关的配置
    maxActive: 20



  main:
    allow-circular-references: true  #开始支持spring循环依赖
#myatis配置  创建sqlsessionFactory
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher
mybatis:
    type-aliases-package: com.ffyc.news.model
    mapper-locations: classpath:mappers/*Mapper.xml
    configuration: #mybatis配置  setting配置
         map-underscore-to-camel-case: true
         cache-enabled: true
         log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

由Druid数据源来进行读取

/*
 @Configuration  配置注解  表示此类是springBoot项目中一个配置类,sprngboot启动时会扫描
*/
@Configuration
public class DruidDataSourceConfig {

	/*
	   @Bean  == <bean  id=""  class="">  作用在方法上,方法中会产生一个对象,最终把此对象交给spring容器
	 */
	@Bean
	@ConfigurationProperties(prefix = "spring.datasource")
	public DataSource druid() {
		//创建对象,从yml配置文件读值,赋值
		DruidDataSource  dataSource = new DruidDataSource();
		//dataSource.setInitialSize();
		return dataSource;//此方法产生的当对象最终返回并交给spring容器去管理
	}
}

3.交互完成后将结果返回给前端

前端将返回的数据接收并进行相应的处理,其中携带的token也被aoixs保存在请求头中

//axios 请求拦截 
axios.interceptors.request.use(config =>{
	//向请求头中添加一个自定义请求头
	config.headers.token = sessionStorage.getItem('token'); 
	   return config; 
})

3.完整的登录前后端交互

1.前端发送登录请求,将用户输入的账号密码发送到后端

  methods: {
       submitForm(form) {
         this.$refs[form].validate((valid) => {
           if (valid) {
			   this.$http.post("admin/loginCtl/login",this.form).then((resp)=>{
				   console.log(resp);
				   if(resp.data.code==200){
					   //sessionStorage.setItem浏览器提供的一个会话级别的存储空间,浏览器关闭后立刻清除
					   sessionStorage.setItem("account",resp.data.data.account);
					   sessionStorage.setItem("token",resp.data.data.token);
					   //localStorage.setItem("key","value");//长久保存
					   this.$router.push("/main");
				   }else if(resp.data.code==201){
					   this.$message({message:resp.data.message,type:'warning'});
				   }else{
					   this.$message.error(resp.data.message);
				   }
			   })
              
           } 
         });
       },
       resetForm(form) {
         this.$refs[form].resetFields();
       }
     }

2.web层(接收.处理,响应)

@RestControllerAdvice
@RestController
@RequestMapping(path = "/admin/loginCtl")
public class LoginController {

    //static Logger logger = LoggerFactory.getLogger(LoginController.class);
    @Autowired
    LoginService loginService;
    @RequestMapping(path = "/login")
    public CommonResult login(@RequestBody Admin admin2){
        //将日志信息写入到一个文件中,长久保存
       // logger.debug("进入到后端登录功能:account={},password={}",admin2.getAccount(),admin2.getPassword());
        admin2.setPassword(DigestUtils.md5DigestAsHex(admin2.getPassword().getBytes()));
        Admin admin = loginService.login(admin2);
       // logger.debug("登录成功:account={},password={}",admin.getAccount(),admin.getPassword());
        if(admin!=null){
            CommonResult commonResult = new CommonResult(admin,200,"保存成功");
            return commonResult;
        }
        CommonResult commonResult1 = new CommonResult(null,201,"保存失败");
        return commonResult1;
    }

3.service层(业务上的一些处理)

@Service(value = "loginService")
@Transactional
public class LoginService {

    @Resource
    LoginDao loginDao;

    public Admin login(Admin admin2){
        Admin admin1 = loginDao.login(admin2);
        String token = new JWTUtil().token(admin1.getId(),admin1.getAccount(),admin1.getType());
        admin1.setToken(token);
        return admin1;
    }

    public List<Menu> findmenus(String token) {
        DecodedJWT decodedJWT = JWTUtil.getTokenInfo(token);
        Integer id = decodedJWT.getClaim("id").asInt();
        Integer type = decodedJWT.getClaim("type").asInt();
        List<Menu> list = loginDao.findmenus(id,type);
        return list;
    }
}

4.model类(封装一些用户的信息或管理员的信息)

@ApiModel(value = "管理员实体类",description = "管理员实体类2")
@Data
public class Admin {
    @ApiModelProperty(value = "管理员主键")
    private Integer id;
    private String account;
    private String password;
    private Integer type;
    private String token;
    private String gender;
    private String phone;
    private Admin admin;//操作人
    private int pageNum;//当前页数
    private int pageSize;//页数大小
    @JsonFormat(pattern = "yyyy-MM-dd  HH:mm:ss", timezone = "GTM+8")
    private Date operTime;
    private List<Role> roles;
    private Integer[] roleIds;
}

5.dao层(与数据库进行交互)

@Repository(value = "loginDao")
   public interface LoginDao {

    public Admin login(Admin admin);