使用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'

由于jfinalgetRawData()可以获取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]

你可能感兴趣的:(简单项目制作中的踩坑)