项目中前后端对接问题

项目中的前后端对接问题

问题描述

在项目开发过程中，需求人员确定好初步需求之后就轮到前后端开发阶段，在前后端开发的过程中，有一个重要的步骤需要进行：前后端对接。而该如何进行前后端对接呢？我们在开发Vue2+SpringBoot项目时遇到的跨域问题是CORS导致的。

问题解决方案

本博客针对但不局限Vue2+Springboot项目。前后端的交互，最重要前提的是端口能互通，对此我们准备了一个服务器来使前后端可以进行通讯。我们所做的方案是：先将项目部署到服务器中，在通过前端和后端各自的配置，来实现前后端的成功对接。

服务器

当你拥有一个服务器之后，你可以在服务器上安装前后端的运行环境，我们项目使用的jdk8，mysql以及node.js。

jdk8

在配置jdk8时，我们需要先在官网或者其他途径下载到jdk8的资源，在获取到jdk8的版本资源之后将资源放在服务器中，并在服务器的环境变量中配置 JAVA_HOME，CLASSPATH，Path。

• JAVA_HOME：指向jdk的目录
• CLASSPATH：%JAVA_HOME%/jar
• Path:%JAVA_HOME%/bin

mysql

在配置mysql时，我们需要先在官网或者其他途径下载到mysql的资源，将其放在服务器上，并在服务器的环境变量中配置 Path。

• Path：mysql的安装路径/bin

node.js

在配置node.js时，我们需要先在官网或者其他途径下载到node的资源，将其放在服务器上，并在服务器的环境变量中配置Path

• Path：node的安装路径/bin

检查环境

在完成上述环境的配置之后，我们可以在命令行依次输入 java --version，node -v来检查jdk及node.js是否安装成功，通过mysql -u root 检查mysql是否安装成功。

前端

在Vue2+axios的项目中，我们通过在vue.config.js中配置代理来解决前端的跨域问题。vue.config.js配置如下：

module.exports = {
	  devServer: {
	  //前端运行之后占用的端口号
	    port: 3000,
	    proxy: {
  	      '/api': {  	      
  	      //target指向要代理的URL，一般写后端的路径
	        target: `http://localhost:8800/`,
	        changeOrigin: true,
	        pathRewrite: {
	          '^/api': ''
	        }
	      }
	    }
	  }

配置了vue.config.js后再在main.js中给axios配置代理

this.prototype.$axios = axios 
this.prototype.$axios.baseURL= '/api'

后端

在后端处理CORS引发的跨域问题时，我们编写一个配置类来对请求的跨域进行允许，配置类如下：

@Configuration
public class MyCorsConfiguration {
    @Bean 
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 允许所有站点
        config.addAllowedOriginPattern("*");
        //允许跨域发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

当然，也可以不用上面的配置类，直接在服务器接口加上@CrossOrigin注解即可

问题拓展

在前后端的交互过程中，不一定会一帆风顺，交互的过程中多多少少会遇到一些bug，对于bug的处理方案，我们可以通过查看以下几点进行解决：

前端网络层的状态

在前端发送http请求时，我们能在浏览器的网络层进行查看，网络层中可以查看各个请求的信息头，信息头中包括状态码，类型，发起程序，大小，时间等信息

HTTP状态码

当前端每次发起HTTP请求时，都会返回一个状态码，通过状态码我们可以知道本次请求的请求状态，常见状态码有：

• 200：请求成功
• 301：资源（网页等）被永久转移到其他URL
• 404：请求的资源不存在
• 500：服务器内部错误
  状态码的分类由第一位数字决定，一共分为五类：
• 1**：信息，服务器收到请求，需要请求者继续执行操作
• 2**：成功，操作被成功接收并处理
• 3**：重定向，需要进一步的操作以完成请求
• 4**：客户端错误，请求包含语法错误或无法完成请求
• 5**：服务器错误，服务器在处理请求的过程中发生了错误
  更多状态码的信息可在菜鸟教程中查看

前端收到的响应数据

前端使用axios进行的请求中，在响应返回给前端时可以对响应进行处理，我们在开发过程中习惯在初次交互时将响应进行输出，以及失败时将错误原因进行输出，通过查看控制台的输出结果可以查看本次请求中出现的问题，有助于找到问题的根源，并进行处理解决。

后端返回的调用结果

在前端调用接口之后，后端会返回调用之后的结果，在交互中出现问题时可以从查看后端的运行结果中查看接口调用是否有报错，若判断报错为后端问题，则在后端代码中进行处理，若判断为前端请求问题，则通过与前端人员进行沟通来解决问题。