[SSM]前后台协议联调②

文章目录

​​前后台协议联调​​

​​修改功能​​​​删除功能​​

​​完整页面​​

前后台协议联调

修改功能

需求:完成图书信息的修改功能

找到页面中的​​编辑​​按钮，该按钮绑定了​​@click="handleUpdate(scope.row)"​​在method的​​handleUpdate​​方法中发送异步请求根据ID查询图书信息根据后台返回的结果，判断是否查询成功，如果查询成功打开修改面板回显数据，如果失败提示错误信息修改完成后找到修改面板的​​确定​​按钮，该按钮绑定了​​@click="handleEdit()"​​在method的​​handleEdit​​方法中发送异步请求提交修改数据根据后台返回的结果，判断是否修改成功。如果成功提示错误信息，关闭修改面板，重新查询数据，如果失败提示错误信息

scope.row代表的是当前行的行数据，也就是说,scope.row就是选中行对应的json数据，如下:

{ "id": 1, "type": "计算机理论", "name": "Spring实战 第五版", "description": "Spring入门经典教程，深入理解Spring原理技术内幕"}

修改​​handleUpdate​​方法

//弹出编辑窗口handleUpdate(row) { // console.log(row); //row.id 查询条件 //查询数据，根据id查询 axios.get("/books/"+row.id).then((res)=>{ if(res.data.code == 20041){ //展示弹层，加载数据 this.formData = res.data.data; this.dialogFormVisible4Edit = true; }else{ this.$message.error(res.data.msg); } });}

修改​​handleEdit​​方法

handleEdit() { //发送ajax请求 axios.put("/books",this.formData).then((res)=>{ //如果操作成功，关闭弹层，显示数据 if(res.data.code == 20031){ this.dialogFormVisible4Edit = false; this.$message.success("修改成功"); }else if(res.data.code == 20030){ this.$message.error("修改失败"); }else{ this.$message.error(res.data.msg); } }).finally(()=>{ this.getAll(); });}

至此修改功能就已经完成。

删除功能

需求:完成页面的删除功能。

如果返回成功，提示成功信息，并重新查询数据如果返回失败，提示错误信息，并重新查询数据

修改​​handleDelete​​方法

handleDelete(row) { //1.弹出提示框 this.$confirm("此操作永久删除当前数据，是否继续？","提示",{ type:'info' }).then(()=>{ //2.做删除业务 axios.delete("/books/"+row.id).then((res)=>{ if(res.data.code == 20021){ this.$message.success("删除成功"); }else{ this.$message.error("删除失败"); } }).finally(()=>{ this.getAll(); }); }).catch(()=>{ //3.取消删除 this.$message.info("取消删除操作"); });}

完整页面

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。