vue 中使用form表单提交，java后台接收

1、VUE

**HTML部分**
<a-form class="form" ref="moodAdd" :form="form" id="moodAdd">
	<a-form-item>
        <a-input class="input" type="text" v-model="model.showName" placeholder="请输入您的名字"></a-input>
      </a-form-item>
      
      <a-form-item>
        <textarea class="textarea"  v-model="model.todayContent" placeholder="请写下您今天的收获..."></textarea>
      </a-form-item>
      
      <a-form-item>
        <a-button type="primary" html-type="submit" size="large" @click="handleSubmit()" style="width: 100%;margin-top: 24px">
          进行记录
        </a-button>
      </a-form-item>
    </a-form>

**定义数据**
data () {
    return {
      model:{
        showName:'',
        todayContent:'',
      },
    }
  },


**方法**
 methods: {
   handleSubmit(e) {
      /* formData格式提交： */
      let formData = new FormData();
      for(var key in this.model){
        formData.append(key,this.model[key]);
      }
      AddMoodPicture(formData).then(res => {
        if(res.success){
          this.$message.success('提交成功！');
        }
      })
    },
 }

**api.js:**
export function AddMoodPicture (formdata) {
  return request({
    url: api.AddMoodPicture, //自定义添加方法的路径
    method: 'post',
    data: formdata,
    headers: { 'Content-Type': 'multipart/form-data' }
  })
}

2、Java后台

@PostMapping(value = "/addMood")
    @ResponseBody
    public Result<?> add(Mood mood) {
        moodService.save(mood);
        return Result.OK("添加成功！");
    }

• 感觉应该还有类似于form封装获取表单数据的方法，第一次使用先记录一下，以后改进。