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-optionv-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}")@ResponseBodypublic 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传递对象数据，后台解析并使用相关推荐

vue 传递对象路由_vue 04 -vue路由对象（$route）参数简介以及和router的区别
vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...
vue 传递对象路由_javascript – 如何在Vue中提交表单,重定向到新路由并传递参数？...
< form>的默认行为是重新加载页面onsubmit.在实施SPA时,最好避免调用< form>的默认行为. 利用nuxtjs中现成的路由器模块,可以使所有重定向控件在应用程 ...
vue 传递对象路由_vue中路由参数传递可能会遇到的坑
前言 vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习 ...
java 信使服务_Messenger(信使(跨应用传递对象(数据)))的简单使用
首先有2个应用1个服务端(接收数据)1个客户端(发送数据) 服务端步骤: 1.创建一个服务继承Service 代码 public class MyMessengerService extends Se ...
Vue 数组/对象数据更新，但是页面不渲染问题
已经赋值过的对象.数组时,向对象中添加新的属性,如果更新此属性的值,页面不会更新视图.是因为我们用错更新方法由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一 ...
springMVC通过ajax传递参数list对象或传递数组对象到后台
springMVC通过ajax传递参数list对象或传递数组对象到后台环境: 前台传递参数到后台前台使用ajax 后台使用springMVC 传递的参数是N多个对象 JSON对象和JSON字符串 ...
ajax 入参为list_ajax传递参数list对象或传递数组对象到后台
springMVC通过ajax传递参数list对象或传递数组对象到后台环境: 前台传递参数到后台前台使用ajax 后台使用springMVC 传递的参数是N多个对象 JSON对象和JSON字符串 ...
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决)
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) 参考文章: (1)vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) (2)ht ...
vue使用ajax提交数据,vue使用ajax请求后台数据的方法
vue使用ajax请求后台数据的方法发布时间:2020-10-15 16:54:41 来源:亿速云阅读:108 作者:栢白这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值 ...

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

Vue传递对象数据，后台解析并使用相关推荐

最新文章

热门文章