Vue传递对象数据,后台解析并使用
1.首先是vue对应的实体操作代码<el-dialog title="标签修改" :visible.sync="FormVisible"><el-radio-group v-model="labelPosition" size="small"><el-radio-button label="left">左对齐<...
·
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 "修改成功";
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)