前后端分离即前端后端代码分开写
前端独立编写客户端代码,后端只需要独立编写服务端代码提供数据接口即可。
前端通过Ajax请求来访问后端的数据接口,将Model展示到View中即可
所以前后端需要提前约定好接口文档(URL,参数,数据类型),独立开发,前端可以造假数据进行测试,完全不需要依赖于后端,最后前后端集成即可,真正实现了前后端应用的解耦合。
单体:前端应用 + 后端应用
前端应用:负责数据展示和用户交互
后端应用:负责提供数据处理接口
前端:HTML —> Ajax —> RESTFUL后端数据接口
实现技术
springboot + vue
跨域问题
在springboot中解决:
代码:
/**
* 跨域设置
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
//.allowedHeaders("Origin", "X-Requested-With", "Content-Type", "Accept", "X-Token", "content-type")
//服务器允许的请求头
.allowedHeaders("*")
//服务器允许的请求方法
.allowedMethods("POST", "PUT", "GET", "OPTIONS", "DELETE")
//允许带 cookie 的跨域请求
.allowCredentials(true)
//服务端允许哪些域请求资源
.allowedOrigins("*")
//预检请求的缓存时间
.maxAge(3600);
}
}