学习来源：视频p6
书接上文

数据修改功能

将之前的 BookManage 页面的按钮改为想要的功能

可以注意到修改按钮的标签以及绑定了事件 handleClick

点击之后其可以在控制台打印出当前行对象的内容

观看视频时，关于修改数据，弹幕分为了两派
一派认为因该直接从页面中获取现有的数据信息加以修改，再提交给后端并存储到数据库，此流程业务简单，减轻服务器负荷。
还有一派认为因该依据关键信息或唯一标识，从后台请求这一系列数据，在此基础上进行修改，再提交给后端并存储到数据库，此流程数据安全。

我认为确实应该从后端拿数据，毕竟前端显示的数据不一定是完整信息，最全最新的内容肯定是在数据库当中，所有从后端拿数据重新修订再保存到数据库更加安全严谨。

相较于视频中新增一个页面的方式，我选择以弹出框来展示修改页面，这样我认为更切合实际场景

修改对话框

其核心内容就是 dialogFormVisible 这个属性在点击关键字时改为 true（默认是false）

所以运用到原来的页面上，当点击“修改”时，把这个属性置为 true 即可

弹出的表单用原来的新增页面进行代码结合复用
将一下代码拆分放入对应位置即可

<template><div><el-button type="text" @click="dialogFormVisible = true">修改 Dialog</el-button><el-dialog title="修改" :visible.sync="dialogFormVisible"><el-form style="width: 80%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="书名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="作者" prop="author"><el-input v-model="ruleForm.author"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div></el-dialog></div>
</template><script>export default {data() {return {dialogFormVisible: false,formLabelWidth: '120px',ruleForm: {name: '',author: ''},rules: {name: [{ required: true, message: '书名不能为空', trigger: 'blur' }],author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],}};},methods: {submitForm(formName) {const _this = this;this.$refs[formName].validate((valid) => {if (valid) {axios.post("http://localhost:8181/book/save",this.ruleForm).then(function (resp) {if (resp.data == "success"){_this.$alert("《"+_this.ruleForm.name+"》添加成功", '成功', {confirmButtonText: '确定',callback: action => {_this.$router.push("/BookMange");}});}else{_this.$message.error("添加失败");}})} else {console.log('添加失败');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},}}
</script>

最终效果如下

视频教程的做法

创建额外的页面，当点击修改按钮时，进行页面跳转，并用 query 传递操作的 id 信息

handleClick(row) {this.$router.push({path: '/update',query:{id: row.id}})
},

在新的页面初始化地方进行接收参数，请求后端数据

需要跳转用 $router ，需要接收参数用 $route

拓展阅读
route 和 router的区别
params 和 query 传递参数的区别

后端提供接口

之前 bookRepository 继承的 JPA 接口中，也已经写好了 findById() 函数，对我们来说相当方便，只是这个接口返回的对象是 Optional 的对象，其可以把空的对象也能正常包装并返回，避免出现空指针异常导致程序崩溃，Optional讲解

再调用 get() 方法以获取到对象，结果也是能正确输出的
则下一步写入handler接口供外部调用

@GetMapping("/findById/{id}")
public Book findById(@PathVariable("id") Integer id){return bookRepository.findById(id).get();
}

经测试也是可以使用的，故在前端调用

前端调用接口

当点击修改操作时，对调用函数 handleClick 进行修改

handleClick(row) {const _this = this;this.dialogFormVisible = true;axios.get("http://localhost:8181/book/findById/"+row.id).then(function (resp) {_this.ruleForm = resp.data;})
},

即可实现点击后出现弹窗+载入修改的目录信息

修改完成后提交

将之前的立即创建改成符合业务逻辑的“修改完成”

然后对函数 submitForm 改装一下即可
其实目前实际使用看来，不改装也能满足业务逻辑需求，JPA 的save函数自动帮我们把对象存进去了
JPA是判定了当前参数是否携带主键，如果没有就存入，如果有就修改内容

但为了业务严谨，并且以后可能遇到更复杂的业务逻辑，针对修改功能还是有必要专门开辟接口的
且根据 REST 规范，更新应该使用 PUT 请求
所以直接在 handler 里面新增接口

@PutMapping("/update")
public String update(@RequestBody Book book){Book result = bookRepository.save(book);if (result != null){return "success";}else {return "fail";}
}

将此处的 post 改为 put ，接口网址改成 update

即可实现修改功能

数据删除功能

后端开设接口

@DeleteMapping("/deleteById/{id}")
public void delete(@PathVariable("id") Integer id){bookRepository.deleteById(id);
}

前端调用

按钮组件绑定函数

deleteBook(row){const _this = this;axios.delete("http://localhost:8181/book/deleteById/"+row.id).then(function (resp) {if (resp.status == 200){_this.$alert("《"+row.name+"》删除成功", '成功', {confirmButtonText: '确定并刷新',callback: action => {_this.$router.go(0);}});}else{_this.$message.error("删除失败");}})
},

最终成果展示

主页面js代码

<script>export default {methods: {handleClick(row) {const _this = this;this.dialogFormVisible = true;axios.get("http://localhost:8181/book/findById/"+row.id).then(function (resp) {_this.ruleForm = resp.data;})},deleteBook(row){const _this = this;axios.delete("http://localhost:8181/book/deleteById/"+row.id).then(function (resp) {if (resp.status == 200){_this.$alert("《"+row.name+"》删除成功", '成功', {confirmButtonText: '确定并刷新',callback: action => {_this.$router.go(0);}});}else{_this.$message.error("删除失败");}})},page(currentPage){const _this = this;axios.get("http://localhost:8181/book/findPart/"+currentPage+"/3").then(function (resp) {_this.tableData = resp.data.content;_this.total = resp.data.totalElements;})},submitForm(formName) {const _this = this;this.$refs[formName].validate((valid) => {if (valid) {axios.put("http://localhost:8181/book/update",this.ruleForm).then(function (resp) {if (resp.data == "success"){_this.$alert("《"+_this.ruleForm.name+"》修改成功", '成功', {confirmButtonText: '确定',callback: action => {_this.$router.go(0);}});}else{_this.$message.error("修改失败");}})} else {console.log('添加失败');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},created(){const _this = this;axios.get("http://localhost:8181/book/findPart/1/3").then(function (resp) {_this.tableData = resp.data.content;_this.total = resp.data.totalElements;})},data() {return {total: null,tableData: null,dialogFormVisible: false,dialogFormVisible: false,formLabelWidth: '120px',ruleForm: {name: '',author: ''},rules: {name: [{ required: true, message: '书名不能为空', trigger: 'blur' }],author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],}}}}
</script>

Vue表单数据修改与删除相关推荐

vue自动提交表单_(尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)...
自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了 1.使用v-model对表单数据自动收集 1)text/textare----单行/多行输入框 2)checkbox-- ...
Vue表单数据自动收集---vue工作笔记0012
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 然后我们再看vue去实现表单信息自动收集先看看表单相关的几个组件,可以看到 text,radio ...
vue表单数据交互提交演示
@[TOC] 欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额! 1. 客户端 html <!DOCTYPE html> <html lang=" ...
vue表单数据加载/重置
实际项目中,我们的一些表单经常有默认值,在Vue中,我们可以直接在data中设置默认值. export default data() {return {formData: {name: '',regi ...
数据表的修改、删除与表中记录的录入
实验4 MySQL数据表的修改.删除与表中记录的录入目录实验4 MySQL数据表的修改.删除与表中记录的录入实验目的: 1.掌握MySQL中数据表结构的修改.删除: 2.掌握MySQL表中记录的 ...
【vue系列-04】vue的表单数据收集，基本指令和自定义指令
vue的表单数据收集.指令一,vue的核心属性 1,收集表单数据 1.1,收集数据案例 1.1.1,type类型的输入框 1.1.2,radio类型的单选框 1.1.3,checkbox类型的复选框 ...
【Vue】基础（三）条件渲染 - 列表渲染(key的作用与原理虚拟DOM解析) - 收集表单数据 - 持续更新中
目录 11. 条件渲染 11.1 v-if 11.2 v-show 12. 列表渲染 12.1 v-for(基本列表使用) 12.2 key的作用与原理真实DOM和其解析流程虚拟 DOM 的好处 ...
vue.js的一些事件绑定和表单数据双向绑定
知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件v-model进行表单数据的双向绑定 <template> ...
vue页面回显数据_解决vue表单回显数据无法修改的问题
前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改项目环境:springboot+vue前后端分离问题:修改操作数据回显无法输入值一.问题截图二. ...

Vue表单数据修改与删除

目录