51、商品服务-API-三级分类-删除-删除效果细化

接下来我们完成点击删除，发送请求删除菜单的功能首先来到我们的前端代码里边，我们点击删除呢，会调用remove方法，这是一个箭头函数，绑定了单击事件来调用remove，并且把当前节点的节点信息以及数据信息都传给这个方法，那我们这个方法呢已经写在这儿了，那真正的删除呢，我们需要发送请求，而发送请求呢，我们在我们的后台代码里边。我们找到我们的category controlr了，我们需要发送post类型的删除请求，而且请求体呢必须是Jason数据。怎么发送呢？我们参照以前的发送请求代码，比如以前有一个肉点无U，我们来点开。它里边呢，我们以前调过get data list这一块呢，是发送get请求，带了参数per这些方法，那post请求怎么发，那它肯定有新增的之类的，我们来往下看，诶他这呢也有删除，包括这一块呢，我们来看他发的这个请求方式呢是post，诶它相当于是这么来调用，和get一样，前面呢还是this.dollar hdp来发送HTP请求，在这定义请求的路径地址，使用这个方式对请求路径进行拼创，然后呢请求方式改为post，只不过post请求要传的数据呢，我们使用data，然后利用这个方法传递进来，那其实这些呢，都是我们以前定义的一些工具类，我们直接能用的，这一块的定义呢，就在YouTube里边有一个htttp request GS，我们来点开看一下，我们看到这里边呢，定义了一个HTTP对象，这个HTP对象呢，还定义了请求拦截，在发每一个请求之前，它都会从cookie里边。

获取到后台管理系统登录上来的这个token，并带上token，包括呢，响应拦截，如果没有登录呢，还会提示登录等等，关键我们这一块我们经常要用的请求地址的处理，我们请求地址呢，要调用这个方法把地址拼上来，那这个方法呢，就是在这儿定义的HTP里边有这么一个方法，我们传入我们自己的地址，它会呢，在这拼串，包括呢，非生长环境以及生产环境呢，拼串方式还不一样啊，我们放在这儿以后再说，我们get请求呢，要调用这个方法将get请求的参数传递过来。

就像我们这一块的肉点U，如果发送get请求，会使用以及调用这个方法将参数的KV拼上带上，而我们的这个方法就是在这定义的，它可以传两个参数。第一个是我们要携带的所有参数，诶，就像是以前这一块KVKV，第二个参数呢，是是否开启默认参数来看这个写法，这是一个小括号，小括号里边呢，每一个参数还都给了默认值，这就是我们以前学的ES6的给参数附默认值的新版写法，而且呢，Get请求默认是开启默认参数的，默认参数相当于只加了一个TT呢，是一个当前时间值。

它呢是将我们传过来的这个参数与默认参数呢进行合并，然后呢最终发送出去，这样做的好处是什么呢？因为我们说AJ的这get请求会被缓存，有可能呢，你第一次发出去要到数据，你以后再发请求就不会找服务器要新的数据了，那我们为了让它不缓存，我们随便呢，在发请求的时候，给请求路径后边，比如带一个参数，这个参数呢不一样，我们可以是一个随机数，或者呢是一个当前时间戳，那请求呢就不会被缓存，每次请求呢，都会实时的请求服务器，那这一块呢，就是加了这个时间戳参数。包括如果我们要发POS请求，我们还是需要用这个and o data，用它来添加我们要发送出去的数据，包括这块呢，会传三个参数，第一个参数就是我们发送出据的数据，第二个是否使用默认数据，这个默认数据呢，还是来在这拼上时间戳，第三个呢，是我们发送数据的内容类型，如果我们不指定默认发送的是杰森这个内容类型，当然我们有两种方式，如果我们给成杰森，那就是发application杰森，如果我们写个form，那就是表单的key value形式，而默认呢，这一块都是杰森。所以如果我们要发po请求，我们就应该参照以前这种写法，我把这一块呢复制上来，包括我们这个Z请求成功以后，好，我们把整体全部复制过来，CTRLC。

那么在这呢，来发送请求，Ctrl v auto shift f，代码整理一下，那我们的请求地址呢，就应该拼上我们的这个product。我们把我们之前测试过的这一块直接拼过来，前置这一块我们都已经指定好了，把这一块拼上，我们是破请求，我们这一块呢，要删除的所有ID我们一会要找到。而且呢，这是一个数组，我们把它发出去，那这个数组呢，我们就可以这么得到来挖一个ids，这个数组呢，我们就直接从data里边获取到当前节点的ID值，怎么获取呢？我们看到每一次我们来点击删除的时候呢，当前节点的这个data里边都有一个看ID，把这个值拿来拼成一个数组发送出去即可。

包括我们这一块成功了怎么做，诶我们把这一块呢，都去掉成功了呢，我们就给控制台打印，我们删除成功。删除成功。那其实我们发现后来我们经常要发get请求以及post请求，那这就是一个模板，那为了开发方便，期间呢，我们可以将这段代码呢，抽取成我们快捷键生成代码片段，那我们在这用户。代码片段里边我们来给它填上这两个快捷代码的生成，首先第一个是发get请求的代码。我们呢，打开我们的文档这一块呢，由我们发送get请求的这个代码模板，我们复制过来，包括呢，发送post请求的代码模板我们也复制过来。

直接呢放到这儿。保存。我们out shift f代码整理一下，那以后呢，我们要发送请求，我们就可以这样把这一块删掉，那要发送post请求了，直接写我们的快捷键，这是http post，那要发get了，那就http get，我们来写一下http post，回车al shift f，那我们这一块呢，就是我们请求的路径，我们直接以复制CTRLC。我们给这儿呢一粘贴，包括呢，我们请求的数据，我们已经拼好了所有的参数，这一块呢，是请求成功了以后，我们来打印conso.log。删除成功。保存，我们现在呢，可以来测试一下。我现在刷新这个页面。

比如呢，我们就来删除，那么这个里边的。电子书我点一个delete，我们控制台呢，打印删除成功了，电子书呢，它的ID是165号，我们来数据库看一下，我们165号的这个状态来找一下，那165号的状态呢，我们现在就会改为零，那就代表删除成功，那165来看。他的show status。刷新一下，现在呢，已经变成零了。那为什么我们这一块页面呢还存在，那是因为我们删除了以后呢，相当于要把这一块整个菜单数要重新刷新，那我们就可以这么来做，当我们删除成功以后，我们来让它重新请求所有的菜单并展示，所以我就可以继续调用this.get meus方法，因为这个get manus方法呢，它会重新发送请求，要到所有的菜单数据，然后呢，更新meus这一块的数据，那manus数据呢又跟EL tree绑定起来了，那整个呢就会更新掉，我来保存一下。

我们现在呢，来看一下最终效果。我点一个网络原创，我点一个删除，诶我们发现呢，这个网络原创已经被删除了，我点一个多媒体也被删除了，但是呢，这块我们还应该做上几个细化细节，首先第一个如果我们要删除东西之前，我们先谈一个提示框，我们是否确认删除这个节点，第二个删除成功了以后呢，我们这应该有一个消息提示，包括我们已经删除完以后，比如我们在音响里边我们删除了。影视，那我们之前的这个音响啊，还应该是展开。这样呢，看起来就比较好了，那我们就来一个一个添加功能，首先第一个点击删除之前，我们先弹出确认提示框，确认提示框呢们来参照element UI里边我来往下翻，这有一个message box弹框，我们来把它打开，这个message box弹框里边呢，我们来找一下，这有一个确认消息框，来点击确定以及点击取消，所以呢，我们在这来找一下。

它代码呢就在下边，我们确认弹框呢，只需要调用this confirm这个方法，在这一块呢，那就是我们弹框的提示内容，这是弹框的标题，我们来看一下，这一块呢是内容，那这一块呢提示那是标题，然后呢，大括号里边是对于当前弹框的设置，比如它的确认按钮显示哪两个字，取消按钮显示哪两个字，包括这个弹框的类型是什么，以及如果我们点了确定按钮调哪个函数，它呢，其实是调用Z里边的这个方法，那如果我们点了取消按钮调什么，调catch里边的这个方法，好，我们就把这个弹框呢，我们来复制过来。CTRLC我们写在这，我们在删除之前，发送这个请求之前，我们先要弹框提示，CTRLV我们来粘贴过来，Al shift f我们在这提示。

提示呢，我们是否删除是否。是否删除当前？菜单，当这个当前菜单叫什么名字，我们把它的这个名字展示到这儿，那如何取名字呢？我们传入的这个data数据里边，我们来看一下，Data数据里边呢，有一个name，这是它的名字，我们就把这个name呢放进去。我们就把这个name取出来，好，我们在这呢提示它的名字，那我们可以这么来做，诶我们以前呢，用这个标号。我们可以写入差值表达式，好，这个标号，我呢，Dollar符大括号，我取出我们data里边的name，这就是这个菜单的名字，是否删除这个菜单，然后呢，两个按钮确定与取消，那当我们确定要删除，那就调Z里边的方法，当我们取消了，那就调这里边的，那当然我们现在取消呢，那就是啥活都不干，我可以把这个catch先删掉，那我们确定呢，我们是要干活的，确定删除才是发送这个真正的请求，把这个请求呢粘在这儿，Al shift f，我们代码整理一下，CTRLS保存，我们重新来看一下我们的删除逻辑来展开们在这呢点一个删除，我们在这儿提示是否删除手机菜单，当点了取消，那就没什么动静，但控制台呢，这出了一个报错，我们来看一下。

这个报错呢，就是说我们这个can索没有处理，也也就是我们那个看不要删，我们还是放在这好then then呢是点击了确认的，我们接下来。给它再来一个catch，我们来看一下这个小括号在这结束，好点一个catch catch呢相当于是来点个取消的，那我们这个看值呢，还是来箭头函数放在这儿，当取消以后要干什么活，我们还是留在这重新保存，我们再来看一下。

来点击删除测试，我们删除，我点一个确定，诶这确实是删除了，那我再来点一个删除，我点击取消。那控制台呢，也没有报错，这个报错呢，都是之前的，我们再来点个取消好没问题，但是现在还缺一个，当我们删除成功以后，这就应该有提示消息，那还是来到组件，组件里边呢，我们这个提示框里边还有一个叫消息提示，就像这种消息提示一样。如果删除成功，我们可以给它提示成一个成功消息，我们这有不同状态成功，哎，用绿绿颜色的提示，那这个成功提示消息怎么办呢。我们可以看一下成功，它是调用了OPEN2方法，那open r方法呢？提示消息很简单，直接this Dollar message里边传一个对象，对象的message来是消息内容type success就代表成功。好，我们就把它复制过来，我们放在这，如果删除成功了，别在控制台打印，我们直接给他一个提示消息，Al shift f。

代码整理一下，然后我们在这来写一个我们菜单删除成功，菜单删除成功。保存，那现在来测试一下效果。来，先来刷新一下我们这个页面。我们在家用电器里边，我们来删一个平板电视，我点一个删除确定，诶我们在这儿提示菜单删除成功。那接下来呢，我们就应该在删除成功以后，还要展开之前的这个负节点。这个功能呢，其实也非常简单，因为当我们来点击删除的时候，我们会打印出当前节点的信息，就是这个node，包括它的附节点是哪个，我们在这儿呢，直接有一个叫parent，打印出负节点，负节点的ID呢，我们也知道，相当于我们把它的负节点在第二次刷新数的时候再展开就行了。那怎么展开某一个节点，我们就可以参照官方文档里边来看有没有相关的属性或者设置，或者相关的方法。我们在这个属性里边呢，我们来往下翻，有一个属性设置呢，叫default expanded case，就是我们默认要展开的节点的K的数组，那我们就来加上它，我们复制过来。

我们给EL tree里边，我们来加上这一块设置，但这个K数组到底是什么，我们可以动态绑定，我们呢就来绑定上一个叫expanded k这个数据，那这个数据呢，默认要展开的，我们可以先放在这，在data里边，我们说这个数组呢，默认是空的，那就是这个数呢，一刷新出来，没有什么默认要展开的，那如果我们写了某一个东西，比如我们这儿有一个菜单。比如我们来看一下这个手机菜单，这个手机菜单呢，在我们数据表里边，我们来看一下，它是二号菜单，我想要默认展示这个二号菜单，我们就可以在这儿呢定义一个二，我来保存一下，以后呢，只要我们默认一刷新我们这个菜单数，那这个手机呢，都会被默认展开，而我们现在就想要做删除了哪一个，那我们这个副菜单呢，就算刷新了，还是默认展开的，那如何做这个事情，我们就把这个二不写在这了，那这个真正的值呢？

就是。把当时删除的那个菜单的附菜单ID传给他就行了，好我们就在下边，如果删除成功了，在这一块呢，有删除成功，这是刷新出刷新出新的菜单，刷新出菜单以后呢，我们来给它设置，设置需要默认展开的菜单。那怎么设置需要默认展开的菜单呢？我们只需要this点我们在这里边呢，绑定了一个属性加expanded k。

它呢是一个数组，这数组等于什么呢？我们来给它重新赋值，我们就需要赋当前要删的这个节点的负节点的ID，那要怎么找到当前节点的负节点的ID，我们可以来看一下，我们当没点击这个菜单的时候，比如我们要删除我们这个当前节点呢，有一个属性叫parent，这是它的负节点，负节点里边呢有一个ID，但是注意这个ID呢，有可能不是负节点ID，负节点真正的数据在data塔里边，Data里边呢，我们这个cid才是我们负节点的ID，它呢是35，所以我们这样可以取出负节点，那怎么取呢？这是我们要删的当前节点node点一个，它里边有一个属性叫parent，表示它的负节点，这个负节点里边呢，又有一个属性叫data塔，封装了这个负节点真正的数据内容，而这个负节点的ID呢，就是我们这个cat ID。

我们把它复制上来，那这样我们菜单只要一刷新，把负节点的ID我们绑定到expanded的K里边，这块数据只要一变化，它呢是跟我们EL tree里边的这个属性进行绑定，那我们tree里边就会默认展开我们指定的这个节点，我来保存一下，测试一下我们的效果，我来先来刷新一下这个页面。我们来看一下，比如我要删除手机，手机配件里边来删除蓝牙耳机，我点击删除，我点个确认删除来蓝牙耳机删除完成以后呢，我们手机配件这个菜单也是默认展开的，并没有被合并起来。那这样呢，我们整个删除效果就算是做完了。那回头呢，我们将数据表里边所有被删除的这些节点，我们给它重新让它显示出来，我们update set们update这张表。

Set，我们表里面的所有的这个show status这个字段，我们让它都等于一，哎，我们让所有的都等于一，我们就不删除了，运行一下，我们来刷新一下表里边呢，就全部数据都进行展示了。