前后端分离

前后端分离即前端后端代码分开写

前端独立编写客户端代码,后端只需要独立编写服务端代码提供数据接口即可。
前端通过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);
    }

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值