React使用axios的post方式和后端进行数据交互

一、

以下的例子是通过Antd的Form表单提交数据，和后台进行数据交互。

该方法通过axios的post方法，将value通过定义好的接口传递给后台，并获得响应体。

<Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>


const onFinish = values => {
        console.log("values: ", values);
        axios.post('http://localhost:8089/dormitory/dormsave', values)
            .then(function (response) {
                console.log("response: ", response);
            })
            .catch(err => console.log(err))
    };

此处注意传递的数据默认为String的Map，后台可通过以下方式获得其想要的参数。
@RequestBody Map<String,String> data

	@CrossOrigin(origins = "*",maxAge = 3600)
    @RequestMapping("/dormsave")
    @ResponseBody
    public String dormsave(@RequestBody Map<String,String> data){
        System.out.println("save!!!!!!"+data);
        Dorm dorm = new Dorm();
        dorm.setD_id(Integer.parseInt(data.get("d_id")));
        dorm.setTotal(Integer.parseInt(data.get("total")));
        dorm.setUsed(Integer.parseInt(data.get("used")));
        dorm.setDormadmin(data.get("dormadmin"));
 	}