Vue传递对象数据，后台解析并使用

 1.首先是vue对应的实体操作代码

    <el-dialog title="标签修改" :visible.sync="FormVisible">
      <el-radio-group v-model="labelPosition" size="small">
        <el-radio-button label="left">左对齐</el-radio-button>
        <el-radio-button label="right">右对齐</el-radio-button>
        <el-radio-button label="top">顶部对齐</el-radio-button>
      </el-radio-group>
      <div style="margin: 20px;"></div>
      <el-form :label-position="labelPosition" label-width="80px" :model="Tab">
        <el-form-item label="标签名称">
          <el-input v-model="Tab.tabName"></el-input>
        </el-form-item>
        <el-form-item label="标签父Id">
          <el-select v-model="Tab.parentId" placeholder="请选择Id">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签描述">
          <el-input v-model="Tab.tabDescribe"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="FormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateTab()">确 定</el-button>
      </div>
    </el-dialog>

2.vue代码对应的数据初始化和对应的updateTab方法

//数据初始化
 Tab: {
        tabName: "",
        parentId: "",
        tabDescribe: ""
      },


//确定按钮对应的方法
    updateTab() {
      this.FormVisible = false;
      let data = qs.stringify({
        tab : JSON.stringify(this.Tab)
      });
       //这里tab的值格式已经变成一个正常的JSON字符串
        //格式为:tab: {"tabName":"学霸","parentId":0,"tabDescribe":"11"}
      axios
        .post(url.updateTabById + this.selectedId, data)
        .then(res => {
            if (res.data == "修改成功") {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.getInfo();
            }
            if (res.data == "修改失败") {
              this.$message({
                type: "error",
                message: "修改失败"
              });
            }         
        })
        .catch(err => {
          console.log(err);
        });
    },

3.对应的后台代码(这里本人用的是SpringBoot)

 //root后台管理通过id修改标签信息
    @RequestMapping(value = "/updateTabByIdRoot/{Tid}")
    @ResponseBody
    public String updateTabByIdRoot(@PathVariable("Tid") int Tid, HttpServletRequest request){
        Tab tab = JSON.parseObject(request.getParameter("tab"),Tab.class);
        System.out.println(tab.toString());
        tab.setId(Tid);
        //这里填修改的属性
       int result =  tabService.updateTab(tab);
       if(result<0){
           return "修改失败";
       }else{
           return  "修改成功";
       }
    }