2

前后端分离项目(十一):实现"删"功能(前后端) - 养肥胖虎

 1 year ago
source link: https://www.cnblogs.com/FatTiger4399/p/16851368.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

随笔 - 186, 文章 - 2, 评论 - 1, 阅读 -

16101

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

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

来看效果，

2501855-20221102163010288-784763364.gif

 数据库

2501855-20221102163019257-211351268.gif

（自然是没什么毛病）

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

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

2501855-20221102163433955-1640031720.jpg

逻辑简洁明了:

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

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

至此,"删"搞定


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK