前后端分离项目(十一):实现"删"功能(前后端)

技术分享 3年前 (2022-11-03) 0 999+

关注

好家伙，本篇介绍如何实现"删"功能

来看效果，

数据库

（自然是没什么毛病）

"增"搞定了,其实"删"非常简单

(我不会告诉你我是为了水一篇博客才把他们两个分开写,嘿嘿)

逻辑简洁明了:

首先,看见你要删除的数据,点"删除",

随后,①拿到当前这条数据的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()           }         })       })     },