SpringMVC接收axios异步POST请求提交的数据

1.axios的post请求提交，就像是提交表单数据一样，我们要使用post提交一些数据可以将axios的header设置成为"Content-Type": "application/x-www-form-urlencoded";

 axios
   .post(this.HOME + "/AwesomePos/order/add", data, {
     headers: { "Content-Type": "application/x-www-form-urlencoded" }
   })
   .then(response => {
     if (response.data.code == 1) {
       this.totalMoney = 0;
       this.tableData = [];
       this.totalCount = 0;

       this.$message({
         message: "结账成功，感谢你又为店里出了一份力！",
         type: "success"
       });
     } else {
       this.$message.error("网络异常，结账失败请稍后重试！");
     }
   }).defaults.headers.post["Content-Type"] = "application/json";

这里需要在SpringMVC配置文件中配置文件上传的相关依赖

<!--MultipartResolve，用于文件上传，使用spring的CommmonsMultipartResolver-->
 <bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
     <property name="maxUploadSize" value="5000000"/>
     <property name="defaultEncoding" value="UTF-8"/>
 </bean>

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>

2.需要提交的数据为以上代码段中的data，而data需要是一个formData类型的数据，所以在提交数据之前还需要对需要提交的数据进行封装。

  var order = {
      orderHash: this.uuid,
      totalCount: this.totalCount,
      amount: this.totalMoney,
      orderStatus: 1,
      payStatus: 1
    };

    var orderDetailArr = this.tableData;

    var tableData_ = {
      order: order,
      orderDetailArr: orderDetailArr
    };
		
	//封装需要提交的数据为FormData类型
    let data = new FormData();
    //将tableData转换成JSON的字符串形式 方便后端服务器接收
    data.append("tableData", JSON.stringify(tableData_));

    axios
      .post(this.HOME + "/AwesomePos/order/add", data, {
        headers: { "Content-Type": "application/x-www-form-urlencoded" }
      })
      .then(response => {
        if (response.data.code == 1) {
          this.totalMoney = 0;
          this.tableData = [];
          this.totalCount = 0;

          this.$message({
            message: "结账成功，感谢你又为店里出了一份力！",
            type: "success"
          });
        } else {
          this.$message.error("网络异常，结账失败请稍后重试！");
        }
      }).defaults.headers.post["Content-Type"] = "application/json";

3.后端处理器接收请求参数,因为在前面一步已经将JSON数据转换成了字符串所以在后端处理器方法的参数中使用String类型接收就可以了，在方法内部根据参数传递的类型将参数转换成指定格式，如果是数组则转换为JSONArray,如何是一个JavaBean那么就转换为JSONObject，最后再将JSONObject/JSONArray转换成指定的JavaBean对象。

    @RequestMapping(value = "/add")
    @ResponseBody
    public Object addOrderInfo(@RequestParam(value = "tableData") String JsonObj){

        logger.info(JsonObj);

        JSONObject tableData=JSONObject.parseObject(JsonObj);

        JSONObject orderObj=tableData.getJSONObject("order");

        JSONArray orderDetailObj=tableData.getJSONArray("orderDetailArr");

        Order order= (Order) JSON.parseObject(orderObj.toString(),Order.class);
        OrderDetail[]orderDetailArr=(OrderDetail[]) JSON.parseObject(orderDetailObj.toString(),OrderDetail[].class);

        order.setCreatedBy(1);
        order.setCreationDate(new Date());
        order.setCustomerId(1);

        logger.info("=========================exec addOrderInfo()=====================================");
        logger.info("orderHash====>"+order.getOrderHash());
        logger.info("orderAmount=======>"+order.getAmount());
        logger.info("customerId=========>"+order.getCustomerId());
        logger.info("orderStatus====>"+order.getOrderStatus());
        logger.info("payStatus=====>"+order.getPayStatus());
        logger.info("orderDetailArr=====>"+orderDetailArr.toString());

        //创建订单信息
        boolean flag= orderServiceImpl.addOrderInfo(order, Arrays.asList(orderDetailArr));

        HashMap<String,String> resultMap=new HashMap<>();

        if(flag){
            resultMap.put("msg", "SUCCESS");
            resultMap.put("code", "1");
        }else{
            resultMap.put("msg", "FAILED");
            resultMap.put("code", "0");
        }

        return resultMap;
    }