好家伙，本篇介绍如何实现"删"功能
来看效果，
数据库
（自然是没什么毛病）
"增"搞定了,其实"删"非常简单
(我不会告诉你我是为了水一篇博客才把他们两个分开写,嘿嘿)
逻辑简洁明了:
首先,看见你要删除的数据,点"删除",
随后,①拿到当前这条数据的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()方法用于刷新当前文档。
至此,"删"搞定