使用jfinal + element-ui搭建前后端分离时，axios实现数据交互，element-ui获取表单对应的data内容值

由于个人在制作一个小项目中涉及到了前后端分离，又需要用到element-ui，所以使用axios来实现数据交互。

但是在实现过程中，出现了一些问题，个人总结在此处。

part1（axios以及jfinal后端使用post请求交互）

首先是请求格式，如果是简单的请求，请按照官方的简单示例如下：

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

如果需要post，直接将get改为post即可。

如果使用上面的方式，默认的content-type如下：

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

由于jfinal的getRawData()可以获取json字符串，结合fastjson来解析，所以我们需要传递的应该是一个整块的json字符串，所以需要将请求头的内容格式变为application/json。

axios({
	method: 'post',
	// 此处url是个人测试代码使用的
	url: 'http://localhost:85/current/createCardSubmit',
	// sendData是个人定义的传输数据的内容，请根据实际需求修改
	data: sendData,
	// 请求头
	headers: {
		'Content-Type': 'application/json'
	}
})
.then((response) => {
	console.log(response.data)
})
.catch((err)=>{console.log(err)});

后端这样做既可。

Current current = FastJson.getJson().parse(getRawData(), Current.class);

代码中的Current是个人使用的model，请换做自己的model。

part2（element-ui如何只获取内部vue的有关表单的data值）

由于element-ui在接受表单数据时，是如下的格式

submitForm(formName) {
	console.log("提交")
	this.$refs[formName].validate((valid) => {
		console.log("提交成功")
		if (valid) {
			console.log("验证成功")
		} else {
			console.log('error submit!!');
			return false;
		}
	});				
}

此时若想在if (valid)成功调用this.$refs[formName]来获取表单数据，就会发现它是一个vue类型的值，如果我们只需要表单数据的话，只需在if (valid)中建立这样一个临时变量既可。let sendData = this[formName];这样就可以只获得data内的数据了，而不是一个vue类型的数据。
注：此处由于箭头函数的this是其外层函数的this，所以，此处可以直接使用this[formName]。