Vue从前端获取数据get,将数据提交到后端接口

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、

前端传一个数组或者集合后台怎么接受

mybatis遍历集合List和数组Array