Vue从前端获取数据get,将数据提交到后端接口
GET 从后端获取数据到dataFormmethods: {init () {this.visible = truethis.$nextTick(() => {this.$refs['dataForm'].resetFields()Promise.all([this.getTaskList()]).then(() => {if (this.dataForm
·
GET 从后端获取数据到dataForm
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
Promise.all([
this.getTaskList()
]).then(() => {
if (this.dataForm.id) {
this.getInfo()
}
})
})
},
// 获取任务类别列表
getTaskList () {
// return this.$http.get('/sys/role/list').then(({ data: res }) => {
return this.$http.get('/ground/taskClassify/list').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.taskList = res.data
}).catch(() => {})
},
// 获取信息
getInfo () {
this.$http.get('/taskDetails/taskdetails/' + this.dataForm.id).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
},
从后端接口获取数据保存到data地下定义的字段名里面
export default {
data () {
return {
visible: false,
taskList: [],
dataForm: {
id: '',
taskName: '',
contest: '',
classify: '',
creator: '',
createDate: '',
updaterDate: '',
updater: '',
}
}
},
前端将表单获取到的数据提交给后端接口
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/taskDetails/taskdetails/', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}
}
后端接收来之前端vue请求或者数据,通过接口接收
- get请求
@GetMapping("{id}")
public Result<DutyPersonEntity> get(@PathVariable("id") Long id){
DutyPersonEntity data = dutyPersonService.getBy(id);
return new Result<DutyPersonEntity>().ok(data);
}
通过id获取数据,使用@PathVariable接收id作为路径参数
- 提交数组数据
使用@RequestBody 加接收实体类来接收,
1、其中@RequestBody用来接收json字符串,在实体类里面定义一个字段类型为List<>或者List
这里一般是在下拉框多选的情况下,返回的数据,下拉框对应的是数组,实体类对应的字段就可以设置为List<> (个人理解)
2、
更多推荐
已为社区贡献1条内容
所有评论(0)