相关推荐recommended
《 新手》web前端(axios)后端(java-springboot)对接简解
作者:mmseoamin日期:2023-12-21

《 新手》web前端(axios)后端(java-springboot)对接简解,在这里插入图片描述,第1张

文章目录

    • 1.何为前后端对接?
    • 2.对接中关于http的关键点
      • 2.1. 请求方法
      • 2.2. 请求参数设置简解:
      • 3.对接中的跨域(CROS)问题
      • **为什么后端处理跨域尽量在业务之前进行?**
      • 3.总结

        1.何为前后端对接?

        “前后端对接”

        是指前端和后端两个不同的软件组件或系统之间的协作和交互过程。在软件开发中,通常将应用程序划分为前端和后端两个主要部分,它们各自负责不同的任务和功能:

        🌴 前端:前端是用户与应用程序直接交互的部分,通常包括用户界面(UI)和用户体验(UX)。前端通常运行在用户的设备上,例如Web浏览器、移动应用程序或桌面应用程序。前端的主要任务包括呈现数据、收集用户输入、处理用户交互以及向用户展示信息。前端通常使用HTML、CSS和JavaScript等技术来创建用户界面。

        🌴 后端:后端是应用程序的服务器端组件,它负责处理前端发送的请求并执行相应的操作。后端通常包括数据库、服务器、业务逻辑和应用程序的核心功能。它处理数据存储、验证、安全性、性能和业务规则等方面的问题。

        “前后端对接”

        涉及将前端和后端协调工作,以实现应用程序的完整功能。这包括通过API(应用程序编程接口)或其他通信方式进行数据交换、数据验证、身份验证和授权,以及确保前端和后端的数据和状态同步。

        通常情况下,前后端之间的交互是通过HTTP协议进行的。HTTP(Hypertext Transfer Protocol)是一种用于在客户端和服务器之间传输数据的协议,广泛用于Web应用程序中。通过HTTP,前端可以向后端发起请求,并接收来自后端的响应。

        《 新手》web前端(axios)后端(java-springboot)对接简解,在这里插入图片描述,第2张

        2.对接中关于http的关键点

        前端需要经常请求的信息就是http请求

        请求消息(HTTP Request Message):

        • 🌴 请求行(Request Line):包括请求方法(GET、POST、PUT,DELETE等)、请求的资源路径(URL)和协议版本(HTTP/1.1等)。

        • 🌴 请求头部(Request Headers):包含关于请求的元信息,如User-Agent(用户代理)、Host(主机)、Content-Type(内容类型)等。

        • 空行(Empty Line):请求头部与消息主体之间需要有一个空行。

        • 🌴 消息主体(Message Body):可选的,包含发送到服务器的数据,通常在POST请求中使用,例如表单数据或JSON数据。

          前端中我们需要经常对请求头,请求体,以及请求方式进行修改处理,最后发送到后端接口处

          2.1. 请求方法

          1. get请求,一般数据参数仅包含query参数
          axios.get('/user', {
              params: {
                ID: 12345
              }
            })
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            })
            .then(function () {
              // 总是会执行
            });  
          
          1. post请求,和get相比可以携带请求体。一般表示提交
          //在axios中默认的请求数据时json
          axios.post('/user', {
              firstName: 'Fred',
              lastName: 'Flintstone'
            })
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
          
          1. put请求,用法和post类似,一般表示修改。
          2. delete请求,用法和post类似,一般表示删除。

          2.2. 请求参数设置简解:

          实际上除了get和query参数几乎算绑定关系之外,其他三种类型请求,可以自定义请求参数。

          1. 🌴 query参数:只在get请求中使用,具体实现拼接到url中,一般不需要额外的请求设置。

          《 新手》web前端(axios)后端(java-springboot)对接简解,在这里插入图片描述,第3张

          在get请求中参数一般通过拼接url时间如果是几个参数的时候可以增加&符号

          localhost:8080/api/test?name=admin&password=admin
          

          而在springboot中可以

              @GetMapping("/test")
              public String test(String name){
                  log.info("测试接口被访问");
                  return name;
              }
          

          《 新手》web前端(axios)后端(java-springboot)对接简解,在这里插入图片描述,第4张

          这要保证变量名和前端传递的变量名一致,这样springboot可以帮你自动映射到你的变量里。

          1. body参数:
          • 🌴 json参数:是axios默认发送的类型,如果使用axios不需要任何额外的设置,直接传递参数即可。

            请求头需要添加'Content-Type: application/json'

            //json的结构
            {
              "name" :"admin",
              "password" :"admin"
            }
            

            由于json实际上是一个字符串,所以只能映射到一个变量里,如果前端结构变量和后端一直,可以通过@RequestBody解析到对象里。

            《 新手》web前端(axios)后端(java-springboot)对接简解,在这里插入图片描述,第5张

            • 🌴 URLSearchParams 参数

              URLSearchParams参数是n对键值对的形式,和query差不多,但是是在body中,可以说是query的post翻版请求头需要application/x-www-form-urlencoded

              export const createFolder = (newPath : string) => {
                const prams = new URLSearchParams();
                prams.append('newPath',newPath);
                return service({ 
                  url: baseURL + '/createFolder',
                  method: 'post',
                  'data': prams,
                  headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                  }
                })
              }
              

              《 新手》web前端(axios)后端(java-springboot)对接简解,在这里插入图片描述,第6张

              @RequestParam("name")可以把前端变量注入到后端变量里,防止变量名冲突

              • 🌴 FormData参数

                有没有发现上面都是传输简单字符串的,那么这个就是传文件的,FormData参数是类似键值对的形式,但是可以传输文件

                //调用接口
                const formData = new FormData();
                  formData.append('file', file); // 这里可以根据需要设置其他表单字段
                  formData.append('path',currentPath);
                  uploadImg(formData).then(
                    (res) => {
                    if(res.statusCode === 200){
                      ElMessage.success('上传成功');
                      flushTableData();
                      refUpload.value.clearFiles();
                    }
                    
                //前端上传api
                export const uploadImg = (formData:FormData) => {
                  return service({ 
                    url: baseURL + '/uploadImg',
                    method: 'post',
                    'data': formData,
                    headers: {
                      'Content-Type': 'multipart/form-data'
                    }
                  })
                }
                

                3.对接中的跨域(CROS)问题

                什么时候会发生跨域问题?

                跨域(Cross-Origin)是指在 Web

                开发中,当一个网页的源(Origin)与另一个网页的源不同,即它们的协议(HTTP/HTTPS)、主机(Domain)或端口号不同时,就会发生跨域问题

                实际上概念大家都知道,不过有时候跨域有时候不跨摸不着头脑。

                《 新手》web前端(axios)后端(java-springboot)对接简解,在这里插入图片描述,第7张

                跨域预请求(Preflight Request)是在跨域请求中的一种特殊情况,它通常发生在满足以下条件的情况下:

                • 🌴 使用非简单请求方法:跨域请求中,如果使用了非简单请求方法,例如PUT、DELETE、OPTIONS、PATCH等,且请求包含了自定义的请求头(非简单请求头),那么浏览器会自动发起一个跨域预请求,以获取服务器是否允许实际请求的权限。
                • 🌴 非简单请求头:跨域请求中,如果请求中包含了自定义的请求头字段,例如"Authorization"、"X-Requested-With"等,而这些请求头字段不在浏览器的预定义白名单内,也会触发跨域预请求。
                • 🌴 跨域请求条件:跨域预请求通常与跨域请求(例如跨域AJAX请求)相关。这意味着请求的源(Origin)、协议(HTTP/HTTPS)、端口号(Port)等与当前页面的源不同。

                跨域预请求的主要目的是确保服务器允许跨域请求,以避免潜在的安全风险。在跨域预请求中,浏览器会自动发起一个OPTIONS请求,这个OPTIONS请求包含了用于验证服务器是否支持跨域请求的信息,例如请求方法和请求头字段。

                那么,如果是简单请求的话,即便跨域,也可能可以正常发送数据。

                为什么后端处理跨域尽量在业务之前进行?

                我有一次在token验证,拦截了正常的跨域请求,我配置了跨域处理,请问为什么,无法正常使用接口?

                《 新手》web前端(axios)后端(java-springboot)对接简解,在这里插入图片描述,第8张

                答:因为我在过滤器处理的token,拦截器处理的跨域。

                那么答案显然易见,跨域的option请求被token过滤器所拦截,拦截器等于无效状态。

                解决方案有两个,

                1. 要么把跨域处理放到过滤器放到token过滤器之前
                2. 把token处理放到拦截器放到跨域处理之后。

                核心逻辑是: 跨域数据属于http逻辑处理,一般情况尽量在业务之前处理完毕。

                3.总结

                这篇文章我主要总结了:前端参数请求头意义,后端接受参数的注解,以及跨域的流程,如何处理跨域。