4.SpringBoot整合Vue

同步异步

属性	同步（Synchronous）	异步（Asynchronous）
执行方式	阻塞，按顺序执行	非阻塞，可以并发执行
效率	适合短任务或低并发场景	适合长任务或高并发场景
复杂性	逻辑简单，易于实现	逻辑复杂，需要处理回调或任务协调
适用场景	文件读写、简单计算任务等	网络请求、数据库操作、用户界面响应等

• 同步：

  同步是指任务按照严格的时间顺序依次执行，后续任务必须等待当前任务完成之后才能开始。换句话说，调用者在发出请求后必须等待结果返回，才能继续执行后续操作。

  • 现实生活中的同步：排队买票，每个人都需要等前面的人买完票才能轮到自己。
  • 编程中的同步：form表单提交之后，我们必须等到请求给我们结果之后才能进行其他操作
  • 适合简单、短时间完成的任务，比如一些本地计算任务。
  • 适合对顺序执行有严格依赖的场景，比如读取文件后立即处理数据。

• 异步：

  异步是指任务可以独立于其他任务执行，调用者发出请求后，不需要等待任务完成就可以继续执行后续操作。任务的结果通常通过回调函数、事件通知或其他机制获取。

  • 现实生活中的异步：去餐厅点餐后，你可以聊天或玩手机，而厨师在后台准备你的食物，完成后再通知你取餐。
  • 编程中的异步：后端的异步任务（后续会讲），前端的ajax、axios异步提交
  • 适合需要并发的场景，比如处理多个网络请求或数据库查询。
  • 适合需要快速响应用户操作的场景，比如前端用户界面交互。

axios

axios官方网站：https://www.axios-http.cn/

安装

npm install axios --save

在vue中的使用

跨域

跨域访问

JavaScript出于安全方面的考虑,做了一个同源策略的限制，也就是说不允许跨域访问其他资源，更通俗的说就是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

同源策略

所谓的同源/同域是指域名、协议、端口均为相同。

举例来说，http://www.wang.com/dir/syc.html这个网址，协议是http://，域名是www.wang.com，端口是80(默认端口可以省略).

同源策略的作用

同源政策的目的是为了防止恶意网站通过冒充用户来窃取用户的数据信息，同源策略提高了攻击成本。

同源策略限制了以下行为:

• Cookie、LocalStorage 和 IndexDB 无法读取；
• DOM 和 JS 对象无法获取；
• Ajax请求发送不出去。

怎样算是跨域访问

如下相对http://store.company.com/dir/page.html同源检测的示例:

也就是说如果域名、协议、端口三者之间，如果有一个不同，则认为不是一个网站，则会存在跨域问题。

解决跨域限制的方法

• 跨域资源共享 CORS;
• 使用ajax的jsonp;
• 使用jQuery的jsonp插件;
• document.domain + iframe 跨域;
• window.name + iframe 跨域;
• location.hash + iframe 跨域;
• postMessage跨域;
• WebSocket协议跨域;
• node代理跨域;
• nginx代理跨域.

前端解决跨域

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',  // 后端地址
        changeOrigin: true,               // 虚拟托管
        rewrite: (path) => path.replace(/^\/api/, '') // 路径重写（可选）
      }
    }
  }
})

<!--调用-->
axios.get('/api/users')  // 实际代理到 http://localhost:8080/users

后端解决跨域

全局配置

/**
 * @author wang
 * 这是一种全局配置的实现方式，一般都是这种解决方式
 */
@Configuration  // 表示当前类是一个配置类 相当于我们以前写 xml的配置文件 项目启动这个类会像配置文件一样立刻被加载
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

过滤器

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilter(){
        FilterRegistrationBean<CorsFilter> registrationBean = new FilterRegistrationBean<>();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowedHeaders(Arrays.asList("*"));
        corsConfiguration.setAllowedMethods(Arrays.asList("*"));
        corsConfiguration.setAllowedOrigins(Arrays.asList("*"));
        corsConfiguration.setMaxAge(3600L);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        registrationBean.setFilter(new CorsFilter(source));
        registrationBean.setOrder(-1);
        return registrationBean;
    }
}

@CrossOrigin

在需要允许跨域访问的控制器上加@CrossOrigin 注解即可解决跨域

注意：以上三种实现方法都可以解决跨域问题，最常用的是第一种和第二种两种方式。如果三种方式都用了的话，则采用就近原则。

axios封装

请求拦截器

响应拦截器

拦截器和导航守卫的区别