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錯誤