好家伙，本篇介紹如何實現"刪"功能
來看效果，

文章插圖
 數據庫

文章插圖
（自然是沒什么毛?。?
"增"搞定了,其實"刪"非常簡單
(我不會告訴你我是為了水一篇博客才把他們兩個分開寫,嘿嘿)

文章插圖
邏輯簡潔明了:
【十一 前后端分離項目:實現"刪"功能(前后端)】首先,看見你要刪除的數據,點"刪除",
隨后,①拿到當前這條數據的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="https://www.huyubaike.com/biancheng/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 = thisaxios.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 = https://www.huyubaike.com/biancheng/resp.data.content_this.total = resp.data.totalElementsconsole.log(resp.data)})}},created() {const _this = this;axios.get('http://localhost:8011/book/findAll/1/6').then(function (resp) {_this.tableData = https://www.huyubaike.com/biancheng/resp.data.content_this.total = resp.data.totalElementsconsole.log(resp.data)})}}