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

IT技术2年前 (2022)更新 IT大王

0 30

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

来看效果，

数据库

（自然是没什么毛病）

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

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

逻辑简洁明了:

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

随后,①拿到当前这条数据的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()方法用于刷新当前文档。

至此,”删”搞定

# IT技术

文章版权归作者所有，未经允许请勿转载。

版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com