十一前后端分离项目:实现"删"功能(前后端) _生活百科

【十一前后端分离项目:实现"删"功能(前后端)】好家伙，本篇介绍如何实现"删"功能
来看效果，

文章插图
数据库

文章插图
（自然是没什么毛病）
"增"搞定了,其实"删"非常简单
(我不会告诉你我是为了水一篇博客才把他们两个分开写,嘿嘿)

文章插图
逻辑简洁明了:
首先,看见你要删除的数据,点"删除",
随后,①拿到当前这条数据的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></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)})}}