Vue前端向Spring后端传递包含字符串数组的表单的问题

这篇文章是对今天下午做SDA实习三的复盘。

1. 首先是不清楚前端如何向后端传递字符串

前端中的form形式：

Form: {
        domains: [{
          value: ''
        }],
        topic:'',
        content:'',
      }

与之前相同，在后端同样建立一个Form类，但与之前不同的是domains是List形式：

@Data
public class Form {
    private List<domain> domains;
    private String topic;
    private String content;
}

domain也需要建立一个类：

public class domain {
    private String value;
    public domain(String value) {
        this.value = value;
    }
    public String getValue() {
        return value;
    }
    public void setValue(String value) {
        this.value = value;
    }
}

2. 遇到跨域的问题

加上了之前解决跨域用的configuration代码但还是没解决问题，搜索之后在浏览器中下载了插件，一般搜cros就可以。

3. form表单参数传递的问题

在调试vue代码之前，我先用postman做了接口测试。

不知道什么原因，参数传递不能直接放在params里面，而要放在body里面，postman在body里面使用raw+JSON传递。

此外，还需要将axios的get方法改为post方法.

4. 新知：aixos的get与post方法

get请求参数是params，而post请求的参数是data。

get请求的参数在发送请求时会拼接到url后面，而post的参数再请求体中。

由3知，这里的表单是不能直接拼在url后面的，具体原因我也不清楚，难道是因为太复杂？

HTTP中的get方法仅仅获取资源，不作修改，而post方法向服务器提交数据，比如完成表单数据的提交，将数据提交给服务器处理。

5. 新知：@RequestMapping、@GetMapping、@PostMapping的区别和联系

1. 一般情况下都是用@RequestMapping（method=RequestMethod.），因为@RequestMapping可以直接替代其他两个注解。
2. @PostMapping是一个组合注解，用于将HTTP POST请求映射到特定处理程序方法的注释。是@RequestMapping(method = RequestMethod.POST)的缩写。

3. @GetMapping是一个组合注解，用于将HTTP GET请求映射到特定处理程序方法的注释。是@RequestMapping(method = RequestMethod.GET)的缩写。

6. @Requestbody的作用

在spring后端接收表单时，如果form前面不加注解@Requestbody的话，就会报空指针的错。

Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is java.lang.NullPointerException] with root cause

查询结果为:

• 不使用@RequestBody，每个属性对应一个参数，参数在请求的URL中, 即axios的get方法所对应的操作。
• 使用@RequestBody，一个实体对应一个参数，参数不在请求的URL中，因为axios的post方法传递的表单也是放在请求体body里面的嘛。