由于个人在制作一个小项目中涉及到了前后端分离,又需要用到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]
。