好傢伙，本篇介紹如何實現"刪"功能

來看效果，

資料庫

（自然是沒什麼毛病）

"增"搞定了,其實"刪"非常簡單

(我不會告訴你我是為了水一篇部落格才把他們兩個分開寫,嘿嘿)

邏輯簡潔明瞭:

首先,看見你要刪除的資料,點"刪除",

隨後,①拿到當前這條資料的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()方法用於重新整理當前檔案。

至此,"刪"搞定

前後端分離專案(十一):實現"刪"功能(前後端)

①拿到當前這條資料的Id,向後臺發請求網路

②後端刪除該欄位對應資訊

③前端更新檢視