Vue表单数据修改与删除功能实现
更新时间：2023年10月14日 12:52:40 作者：makerjack001
本文通过实例代码介绍了Vue表单数据修改与删除功能实现,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友跟随小编一起看看吧
数据修改功能
将之前的 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 Composition API写出清晰、可扩展的表单实现
这篇文章主要介绍了使用Vue Composition API写出清晰、可扩展的表单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
Vue3 openlayers加载瓦片地图并手动标记坐标点功能
这篇文章主要介绍了 Vue3 openlayers加载瓦片地图并手动标记坐标点功能,我们这里用vue/cli创建,我用的node版本是18.12.1,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下2024-04-04
最近在做一个vue移动端项目，被缓存问题搞得头都大了，积累了一些经验，特此记录总结下，分享到脚本之家平台，对vue移动端项目缓存问题实践记录感兴趣的朋友跟随小编一起看看吧2018-10-10
这篇文章主要为大家详细介绍了vue中非父子组件通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
vue.config.js中configureWebpack与chainWebpack区别及说明
这篇文章主要介绍了vue.config.js中configureWebpack与chainWebpack区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
hooks可以通过特定的函数将逻辑 "钩入" 组件中,使得开发者能够更灵活地构建和管理组件的功能从而提高代码的可读性以及可维护性等,本篇文章将介绍hooks如何在vue3中使用以及它的一些实际使用例子,让大家能更好的了解和使用hooks,需要的朋友可以参考下2023-09-09
Vue是一种流行的JavaScript框架,可以帮助开发者建立高效的Web应用程序,本文将为您介绍如何在Vue中实现登录验证功能,并为您提供具体的代码示例,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了Vue-cli3项目引入Typescript的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue post application/x-www-form-urlencoded如何实现传参
这篇文章主要介绍了vue post application/x-www-form-urlencoded如何实现传参问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了Vue 实现简易多行滚动“弹幕”效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
最新评论