Vue入门（四）——Axios向SpringMVC传数据

在实际业务需求中，经常会出现前台传表单或者对象到后台，后台Handler接受并转换成对应的POJO以供业务代码使用

此时在SpringMVC框架中就要用到@RequestBody注解，该注解用于将请求中的JSON对象转换成对应的POJO类的属性；

后台框架中使用该注解，需要在spring-mvc的配置文件中加入如下配置依赖（jackson-core，jackson-databind，jackson-annotations）：

<mvc:annotation-driven>
        <!--设置全局时间格式化 -->
        <mvc:message-converters>
            <bean
                class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="com.fasterxml.jackson.databind.ObjectMapper">
                        <property name="dateFormat">
                            <bean class="java.text.SimpleDateFormat">
                                <constructor-arg type="java.lang.String" value="yyyy-MM-dd HH:mm:ss" />
                            </bean>
                        </property>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

Controller:

@RequestMapping(value = "/add/blog", method = RequestMethod.POST, produces = {"application/json;charset=utf-8"})
    public void addBlog(@RequestBody Blog blog, HttpServletRequest request, HttpServletResponse response){
        blogServicesImpl.save(blog);
        Result result = new Result();
        result.setSuccess(true);
        this.print(result, response);
    }

Vue页面：

this.$ajax({
          method: 'POST',
          url: '/api/mobile/add/blog',
          data: JSON.stringify(data),
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(response => {
          debugger;
          var result = response.data;
          if (result.success) {
            var list = result.list;
            for(var i=0; i<list.length; i++){
              var blog = {};

              blog.title = list[i].blogTitle;
              blog.bref = list[i].blogSummary;
              that.collect.push(blog);
            }

          } else {
            this.logs = []
            this.$message.error(result.message)
          }
        }).catch(error => {
          this.$message.error(error.message)
        })

注意，这里的前台请求和Controller中获取Request的请求方式要一致，都为

application/json;charset=UTF-8，

否则请求415错误