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 == 作用在方法上,方法中会产生一个对象,最终把此对象交给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 List4.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 roles;
private Integer[] roleIds;
}
5.dao层(与数据库进行交互)
@Repository(value = "loginDao")
public interface LoginDao {
public Admin login(Admin admin);