前后端分离的一点小问题

### 同步请求和异步请求

- 同步: 指单线程依次做几件事
- 异步:指多线程同时做几件事
- 同步请求: 指客户端只有一个主线程, 主线程既要负责页面的渲染和监听用户操作,还需要负责发请求, 发请求时会停止渲染页面(清空页面), 直到服务器响应的数据之后,把响应的内容展示到页面中, 这样的话只能实现页面的整体改变(整体刷新),不能实现页面的局部刷新
- 异步请求:指客户端的主线程只负责页面渲染和监听用户操作,由子线程负责发请求,原来页面中显示的内容可以不清空继续显示,  当服务器响应了数据之后可以把数据显示到原页面当中,这就是页面的局部刷新

### 客户端发出请求的几种方式:

1. 浏览器地址栏中输入请求地址和参数 回车后发出请求       同步请求
2. 通过页面中的超链接发出请求  <a href='/hello' .....        同步请求
3. 通过页面中的form表单发出请求  <form action="/bmi" .......       同步请求
4.  通过JavaScript代码发出异步请求     

### 如何发出异步请求

- 使用Axios框架发出异步请求

  - 停止启动的脚手架工程 命令行中执行 npm i axios -S   

  - 在main.js中导入

    ```javascript
    //引入Axios
    import axios from 'axios'
    //Vue.prototype.xxx  给Vue添加一个全局的变量
    // 添加的全局变量可以在任意的*.vue文件中通过this.xxx访问
    Vue.prototype.axios=axios
    ```

前后端分离

部署在不同服务器存在跨域问题

后端用webmvcconfigruation 解决跨域问题

···

@Configuration
public class WebMVCConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}