前后端分离项目(十一):实现"删"功能(前后端)
好家伙，本篇介绍如何实现"删"功能
来看效果，
数据库
（自然是没什么毛病）
"增"搞定了,其实"删"非常简单
(我不会告诉你我是为了水一篇博客才把他们两个分开写,嘿嘿)
逻辑简洁明了:
首先,看见你要删除的数据,点"删除",
随后, ① 拿到 当前这条数据的Id,向后台发请求网络 ,
然后,② 后端删除该字段对应信息 ,
最后,③ 前端更新视图
(重新进入用户管理页面,向后端发起请求,拿到新的数据)
本次前端所以操作都在同一个组件中完成
MyUsers.vue代码如下
<!-- 该组件为表单主要组件 -->
<template>
<div>
<!-- 标题 -->
<h4 class= " text-center " >用户管理</h4>
<!-- 用户添加按钮 -->
<el-col :span= " 4 " >
<el-button type= " primary " @click= " addDialogVisible = true " >添加用户</el-button>
</el-col>
<!-- 用户列表 -->
<el-table :data= " tableData " border style= " width: 100% " >
<el-table-column prop= " id " label= " 序号 " width= " 180 " >
</el-table-column>
<el-table-column prop= " name " label= " 书名 " width= " 180 " >
</el-table-column>
<el-table-column prop= " author " label= " 作者 " width= " 180 " >
</el-table-column>
<el-table-column label= " 操作 " width= " 180 " >
<template slot-scope= " scope " >
<el-button @click= " handleClick(scope.row) " type= " text " size= " small " >修改</el-button>
<el-button @click= " Bookdelete(scope.row) " type= " text " size= " small " >删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination :page-size= " 6 " :pager-count= " 11 " layout= " prev, pager, next " :total= " total " @current-change= " page " >
</el-pagination>
<!-- <el-pagination :page-size= " 20 " :pager -count= " 11 " layout = " prev, pager, next " :total = " 18 " @current -change= " page " >
</el-pagination> -->
</div>
</template>
<script> import axios from ' axios ' export default {
name: ' MyUser ' ,
data() {
return {
total: null , // 用户列表数据
tableData: [
{ id : ' 1 ' , name: ' 三体1 ' , author: ' 大刘 ' },
{ id : ' 2 ' , name: ' 三体2 ' , author: ' 大刘 ' },
],
addDialogVisible: false , // 控制添加用户对话框的显示与隐藏
addUserForm: {}, // 添加表单的验证规则对象
addUserFormRules: { // username: [{required:true,message:'请输入用户名',trigger:'blur'}, // {min:3,max:10,message:'用户名长度在3~10个字符',trigger:'blur'}], // password: [{required:true,message:'请输入密码',trigger:'blur'}, // {min:6,max:15,message:'密码长度在6~15个字符',trigger:'blur'}], // email: [{required:true,message:'请输入邮箱',trigger:'blur'}], // mobile: [{required:true,message:'请输入手机号',trigger:'blur'}]
}
}
},
methods: { // 书本删除方法
Bookdelete(row) {
const _this = this
axios.delete( ' http://localhost:8011/book/deleteById/ ' + row. id ). then (() => {
_this.$alert( ' 《 ' + row.name + ' 》删除成功！ ' , ' 消息 ' , {
confirmButtonText: ' 确定 ' ,
callback: action => {
window.location.reload()
}
})
})
}, // 页面点击修改按钮
handleClick(row) {
console.log(row);
this.$router.push({
path: " goods " ,
query: { id : row. id }
})
}, // 分页方法
page(currentPage) {
const _this = this;
axios.get( ' http://localhost:8011/book/findAll/ ' + currentPage + ' /6 ' ). then ( function (resp) {
_this.tableData = resp.data.content
_this.total = resp.data.totalElements
console.log(resp.data)
})
}
},
created() {
const _this = this;
axios.get( ' http://localhost:8011/book/findAll/1/6 ' ). then ( function (resp) {
_this.tableData = resp.data.content
_this.total = resp.data.totalElements
console.log(resp.data)
})
}
} </script>
<style lang= " less " scoped>
</style>
① 拿到当前这条数据的Id,向后台发请求网络
<el-button @click= " Bookdelete(scope.row) " type= " text " size= " small " >删除</el-button> scope.row指向当前这条数据
然后发请求
axios.delete('http://localhost:8011/book/deleteById/' + row.id) ②后端删除该字段对应信息
(后端的完整代码可以看前后端分离项目(五):数据分页查询（后端接口） - 养肥胖虎 - 博客园 (cnblogs.com)这一篇)
这里主要列出关键代码
@DeleteMapping("/deleteById/{id}" ) public void deleteById(@PathVariable("id" ) Integer id){
bookRepository.deleteById(id);
}
}
③前端更新视图
Bookdelete(row) {
const _this = this
axios.delete( ' http://localhost:8011/book/deleteById/ ' + row. id ). then (() => {
_this.$alert( ' 《 ' + row.name + ' 》删除成功！ ' , ' 消息 ' , {
confirmButtonText: ' 确定 ' ,
callback: action => {
window.location.reload()
}
})
})
}, 刷新有很多种方法,这么我们直接用一个最简单的BOM方法,
location.reload()方法用于刷新当前文档。
至此,"删"搞定