开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师管理前端-讲师删除】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11339
讲师管理前端-讲师删除
内容简介
一、记录后面添加删除按钮
二、在按钮上绑定事件
三、绑定事件的方法传递删除讲师的 id 值
四、api 文件夹 teacher.js 定义删除接口的地址
五、页面调用方法实现删除
一、在每条记录后面添加删除按钮
现在有很多条记录，做删除，第一步在每条记录后面添加删除按钮，按钮如何安装 根据以下代码。
列表的最后有一部分，button 是按钮的意思，增加的就是删除按钮，在按钮上绑定一个删除事件。
@click="removeDataById
二、在按钮上绑定事件
第二步在按钮上绑定事件，click，在里面写出写上删除方法。
三、在绑定事件的方法传递删除讲师的 id 值
第三步，比如想删除表格中的某一条记录，想把ID为2的记录删除掉，代码结构如下：
DELETE FROM USER WHR id=?
然后做逻辑删除，把 ID 的值改正，在绑定事件的方法传递删除讲师的 id 值。在方法中传个 ID
传递 id 值的方法：
scope 代表整个表格，通过scope能得到每一行中的内容，用 scope.row.id 得到表格中每一行的 ID 值，讲师的第一个值叫 ID，传递每个表格中的id值。
下面稍微测试，现在方法中需要传个 ID，然后需要定义一个方法，在 method 中把方法定义下，方法叫做 removedataByid，叫做删除讲师的方法，先做一个测试，看 ID 是否存在。
在列表一中点删除 触发事件调用方法，把点击的讲师的 ID alert 出来，比如点击第一个李刚，点删除，有 ID。再试一下李四也有 ID。
得到之后下面做删除，按照列表步骤，删除一定要调用接口，在 teacher 里面把方法定义。
//1讲师列表(条件查询分页)
//current 当前页1imit 每页记录数 teacherquery 条件对象
getTeacherListPage(current,limi, teacherQuery){
return request({
url:/eduservice/teacher/pageTeacherCo/'+current+"+1imit
url:/eduservice/teacher/pageTeacherCond/s{current/slimit
method:post'
teacherQuery条 件对象,后端使用 RequestBody 获取数据
data 表示把对象转换 json 进行传递到接口里面
data: teacherQuery
)
四、在 api 文件夹 teacher.js 定义删除接口的地址
第四步，在 api 文件夹 teacher.js 定义删除接口的地址
deleteTeacherId(id){
return request({
/url:/eduservice/teacher/pageTeacherCor/'+current+"/"+limit
url:/eduservice/teacher/pageTeacherCond/scurrent/s{1imit}
method: 'post',
teacherQuery 条件对象,后端使用 RequestBody 获取数据
data 表示把对象转换 json 进行传递到接口里面
data: teacherquery
})
/删除讲师
deleteTeacherId(id){
return request({
url: /eduservice/teacher/${id},
method: 'delete'
})
}
步骤是固定的 在 API 中的 teacher 里，第二个叫删除，删除起个名字，叫做deleteteacherID，把 ID 传过来，结构不变，方法加个注释，删除讲师。
加上接口地址，复制一下地址，就是 edu/service / teacher，后面写上 id。
删除放放 不是 post 提交，而是delete提交，写一个 delete 提交方式，路径要写对，传入ID值 Delete提交，提交方式不能写错。
五、页面调用方法实现删除
第五步，页面调用方法实现删除，引入 Teacher. js，因为之前已经引入过了 不需要再引入，直接调用。在里面写上 teacher .方法，复制方法，方法叫 deleteteacherID，后面传入 ID。
删除过程代码：
//删除讲师的方法
removeDataById(id){
teacher. deleteTeacherId(id)
then(response=>{
})
. catch(error=>{
})
}
如果删除成功，里面也会写上删除成功，来一个提示信息，提示任务成功。点删除，记录可以删掉，删除之后，还要回到页面中，页面重新刷新，删掉数据页面就不存在。
所以第一步需要提示成功，第二步回到列表页面，列表页面需要重新刷新，回到之前的结果。
因为有方法，再次调用方法就可以回来，This .getlist，删除是没有问题的，有一个角度缺陷叫做用户体验，用户体验就是给用户做的任何的功能，让他更友好更符合用户的使用习惯。
比如点击删除，一般情况下点击删除 不是直接删，先来个提示是否删除，点击删除，点击取消就不用删。点击确定再删掉，加上用户提示，从用户体验考虑，让他更符合用户的要求，按照以上方法，功能没有问题，但是用户体验很差。
到 Element-ui 中，在下面有弹框的地方，弹框里面找一下，这个弹框叫做确认消息，点击打开 message box，点击，做如下效果。
加上一个确认框，这么做 用户体验肯定会更加好，直接复制代码 然后修改即可，里面代码非常详细，直接复制修改。
removeDataById(id){
this. Sconfirm(此操作将永久删除讲师记录,是否继续?,提示,
confirmButtonText:‘确定
cancelButtonText:取消,
type: 'warning'
})then(()=>{//点击确定，执行then方法
//调用删除的方法
teacher. deleteTeacherId(id)
then(response=>{/删除成功
//提示信息
this. $message({
type: 'success'
message:删除成功!
})
//回到列表页面
})
This .getList()
})//点击取消，执行catch方法
}
稍微调整一下格式，里面有一个确认框 当点击删除，方法中来一个提示 confirm，下面有两个方法。
点击确定执行 then 方法，点击取消会进行 catch 方法，取消没必要来一个提示。
点击删除，成功之后，做一个提示信息，加了一个友好性提示。点击删除之后，先弹出一个确认框 有确定，有取消。
看一下最终结果，刷新看李刚的记录，现在的值为0，删除之后会变成1，点击删除看到效果，点击确定提示删除成功，并且页面刷新。
Catch 可以写，也可以不写，Catch 不写也是对的。统一不去写，有些浏览器 Catch会执行两次，可能会有错误。
