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

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

    
      
        左对齐
        右对齐
        顶部对齐
      
      

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  "修改成功";
       }
    }

 

 

你可能感兴趣的:(Vue传递对象数据,后台解析并使用)