051-直播间模块-直播带货后台系统3原创

好了，列位，咱们趁热打铁啊，把我们的更新和删除功能模块咱们给写完，那我们这个直播带货的后台系统最基本的一个雏形就完成了，是不好来到我们的代码中来，咱们这一块啊，还得来到我们的APP中来去想啊，我点击这个更新按钮啊，哎呀，这个方法我还没定义呢，那客们肯定一会儿就要把这个方法呀给定义出来，拿到这个方法之后，我们应该是设置成什么呀，把当前这一项的内容给拿到，然后再弹出来我们的更新的这样一个对话框，嗯，这样的话呢，才可以列位是吧？OK，好了，接下来我们一起来看一下，这里我们就得把我们这个ID的相关的内容也得复制它一份啊，就是我们在前面这块的话，咱们也说了，就咱们添加的弹出框，你要想复用啊，倒也能复用啊，咱们在这儿的话呢，就不再去单单独封装去复用了，我们就在这再来一个，反正就两个diallo。

组件倒不费什么事啊，这个是更新的时候商品的一个弹出框，那将来的话呢，另外咱们其实就是啊，跟之前那个就对着来，你这个我们就给他来一个叫I编辑VI宝，将来我就给他改成这个啊，这个就是什么更新商品。对不对，然后在这里就是一个edit form啊，这些都改成对号的，这就是edit rules，那么都改一下edit rule，然后这块是edit form啊，所以我就认为一会是抄咱们之前那个use and form GS方法拿过来，我认为改吧改吧啊，就差不多啊，这块就是 editform.name仔细点这块哈，Edit form.price啊，看看这里啊，都没有问题啊，接下来在这个地方就是is edit啊，Eible等于false取消这块就是hand edit啊，这个confirm确认好的列外，接下来咱们只需要把我们这个use and form GS给它复制一份，然后在这里咱们新建一个叫use form。

点GS好弄完了之后呢，来再在这里的话，咱们给它粘过来来粘过来之后这块就改改吧拉，列外改吧啦，Use edit form is vis，然后再就是edit form ref edit form啊对应的我们这块是edit rules对不啊，还有我们这块edit form，我就暂时直接改吧，反正我们也自己也都知道咱们改成了什么值对不对，Edit confirm firm这一块将来哈，我们是把我们的哎，这块再说吧，你这个X的这块咱们一会儿再去说，先注释一下好吗？啊，然后接下来的话，这个是打印的，这个出错了好。咱们把这个log先给它放出来，导出，打印一下这个I，这个form值啊，可以了，然在剩下的这块就开始导出来，咱们在这里导出的是什么呀，Is edit visible，然后的话呢，Edit form，然后这里的话呢，是我们的edit rules，然后这里的话也是咱们的edit form hand，我们的edit，哎，Edit confirm，你看整个这个文件的话呢，就没有问题了啊，最后这块use edit吧，嗯，最上面这块这个anxious呀，咱们好像没有去用的，注释掉rere table暂时没有用，也注释掉，那这个文件的话就没有问题了，剩下的就是在我们的APP中啊，我这用这些东西你都没有，可能你得报老多错了吧，好了，那我就把上面这代码咱们复制它一份，对吧，改成这个I，对的，好了，从这个form中咱们给它导入进来呗。

好，把这块给它换成这个什么edit form use，咱们这个edit form，你看看，那剩下就是这里面的这些东西进行替换了呗，那就开始来is edit visible，然后就是edit，然后这块就是edit rules，然后这块就是edit form re，然后就是hand，咱们的edit confirm，你看现在是不是不缺任何东西了呀，就。

好，接下来就是咱们在这里点完之后，咱们点哪个呀，列外咱们应该是点table里面的这每一项的时候，咱们给它弹出来这一个对话框，把这个给显示出来啊，所以我们应该是在我们的table这一个组件中，咱们是不是在写一下，咱们点的时候，咱们再把这个东西给它传过来，另外来看看，呃，在我们table中点的，所以其实点的时候我知道的话呢，应该是在table中知道是到底是点的是哪一项，是不是啊，因为咱们在这里去写的东西啊，来看看你这些事件，我们来到APP中，我们在这个table里面在这个位置去写的吧，Hello，还有hello delete这两个方法都应该是咱们的use table中去定义的，对不对，因为这属于他的嘛，咱们都说了，咱们这种自定义hook的方式的话呢，就是每一个人把自己相关的给宅在一起啊这样。

讲话呢，好处理对吧，我们把handle到edit写在这里，看似的handle到艾写在这里一过对不对，然后我看一下还有什么呀，Handle到delete的一个放在这里啊，看到delete的一个放在这里啊，咱们也在顺便的来说一下哈，其实在这里这个这个是咱们的索引啊，咱们索引不用了，咱们只要的是后面这个肉就可以了啊，肉就是它这一行的那个对象信息传过来就可以了，那这样的话，海到edit还海到delete，他们都是来自于咱们这儿的，所以我们再打印一下啊，咱们就顺带手的把delete一块写好了就啊好放在这里，咱们打印一下都啊，然后啊，你把这两个方法，另外别忘了哈，导出去啊，你得给外面用啊，你你外面拿不到，那不也一样调不过来嘛，所以导出去，那我们就在app.view中的话呢，我们就可以在use table的时候，咱们把这两个方法给它什么导入。

录进来啊，所以这样的话呢，1HANDLE handle delete，你看看，另外你这样，只要你现在点这个table表格的这个更新或者删除按钮，咱们都会在控制台上打印出来当前这一项的所有内容，来咱们测试一下好吧，来重新的刷新一下。看看给你做测试了，点击更新对不对，这一项，点击更新这一项，点击删除这一项，点击删除这一项内容是完全没有问题的，好吧，那这样的话呢，就是我们点完之后，我们是不是在控制我们这一个输入框，呃，我们这个不是输入框，我们应该是这个ID的dialog的话，怎样它显示出来呀，所以我们在这里就是要在app.view中，我看一下能让它显示的只有这一个状态的列外，只有这一个状态叫is at it visible这一个状态，所以咱们应该是把这个状态咱们给它传进来，但是列外你想一想，你说你把这个状态传给我们这个table。

就得表示这个就一定要提前定义，但他在这定义的，而这块他要用，他要用table这个refre，这不就是你用我，我用你的，这不就死锁在这里了吗？所以咱们在这里不能直接把这个传过来，你可以在这里新建一个函数，非常简单，就是受我们这个edit啊，受这个e form啊，我们的。

好，咱们在这里把这个写好之后的话呢，我们就在这里控制这个值的话，给它改成一个什么呀，来出就可以了，我记得这个值是一个Y6值吧，所以在这里改成一个什么点Y6的好，在这里再把它给写成一个head的，基本上将来对应的嘛，一个显示的就得有一个隐藏的，好你把这个的话一样给它改成一个false，你看你这两个方法它不调用啊，没关系，这个东西在前面定义，在后面定义都没有事啊，你到时候把这两个方法给它传过去就行了，你看这样就对了，打说你看科文，如果我们都放在一个文件中，何苦这样呢，是吧啊，你要在一个呃组件里面的话，那就呃沟通顺畅了就啊，就不用像科这种那种回调函数的思想一直在那玩了，那这样的话就是在我们的use table中，我把这个函数名字传过去，等时机成熟，我会调用相应的函数来控制我们的edit form啊进行显示，它是这个隐藏的，所以接下来就是我们在use table这个组件中，我们还到。

的方法调用的时候呢，克隆要怎么办呀，是不是要调用那个show呀，所以我们在这里我看一下。行参啊，在这里传过来了，所以在我的use table中我拿到这一个数和这个headde，这个head我可能暂时用不到啊，我一会去用它，好吧，是在这里，就是我一点击edit的时候，我先拿到这个数，这个函数，那这样的话一运行之后列为咱们可以看一眼，好不好用呢？来点击更新，更新商品出来了吧，点击取消，诶取消这个按钮我当时没有写嘛，我可以看一眼取消怎么不好用，这个好用哈，我这个取消了这个回调这个函数，我看一下，在当时这个cancel的时候，Is edit visible，哦，这个值的话，咱们是小写的啊，我写错了，好了，改成false就好了，那这样咱们测试一下，点击更新它出来，点击取消，取消掉点击更新对不对，点击取消，你看另外那咱们来看一下这块的一个思路，没问题哈，就是我们在APP中定义俩回调函数来控制I viible显示和隐藏的。

咱们给它传到use table中，等use table咱们点的那个ID的方法之后，咱们让它显示出来，并且咱们把这个东西给它传过去，那么为什么要传这个item的列位，咱么传这个的话呢，最终就会在这里来收到这个item，因为我们更新的功能就是应该提前的预填好对不对，提前的预填好这个东西啊，它是谁的，所以可文在这里的话，就会怎么样把我们这个当前的一项I的form，它是跟咱们当前这个更新表达中的内容的话做了一个绑定IID的form啊，就是我们的名字，我们的价格做了绑定的，所以我这个对象要是更新的话呢，它就一定也会在页面中会有更新的，所以我就把这个item传回来之后来控制为edit的form的一个更新，那这样的话，我点哪一个哪一个内容就会显示在我的更新这一个表单上，测试一下更新，诶我这里的话又。

什么问题了吗？啊，快让科瑞来测试看看艾利的form母。咱们已经绑定好了这一个model到了啊，回来之后我们测一下这个form的话，我们已经item已经传回来了，是不是在use table中，咱们点击的时候已经传回来了，来测试一下，我看一眼点击更新传回来了，已经传回来之后，哦，我们在这个组件中I的form，哦，我知道了I form的话，它应该呀，这个I的form咱们查一下下去。Edit form这个值，嗯，在这个use edit中，咱们转到这个定义中，Edit form它是一个reactive的一个行为，所以我在这里好像就直接附上值就可以了哈，我不用它的点value给他，所以我在这里就直接给它附上就行了哈，所以在这里直接就把这个ID的form给它复成值来一保存测试一下，好，这边的话说是一个常量啊，我知道了，我们在这里的话导入进来呢，也是复制成常亮的啊，包括我们在这里的话呢，设置的也是常亮，对不啊，那没关系哈，咱们可以呀，不直接控制它，咱们改成这个什么呀，Ref这里OK，保存之后。

那这样的话，咱们来看一下。啊，看来我之前呀，我还是保留之前那个点Y6的写法就行了，对不对啊，这样的话就没有问题了，好了，一次测试之后列外咱们来看一下这个效果吧，来一运行点击更新是吧，点哪一项，哪一项的信息在这里，来咱们把这个过程的话呢，简单的回顾一下，看看这里啊是怎么实现呢？是不是就是我们每次点这一个啊，表格上的更新按钮的时候，咱们都是走这个hand edit这个方法，Hand到edit的这个方法呀，它是从咱们这个useth table中给导入进来的，这个方法的作用就是能够让你知道到底我们是点了哪一项，咱们再回过头来再回调我们的show edit，那这样的话，我们的show edit中就拿到了，我们点了这一项，并把这一项复制给edit form这个对象，而ID的form是用通过ref的这种绑定啊，你改变了它的value之用后，它是响应式的，所以说在这里页面中跟它相关的就会有变化了。艾利的。

Form在这里，所以这样的话，我们弹出框你也给它弄成出显示出来了，那此时它里面那个啊内幕价格，那我们的名字，还有我们的价格也都会跟着去变化的，对不？而这个时候的话呢，就特别方便哈，因为我现在在改它的内容的时候，其实我将来访问的还是我们的I form这个对象就可以，因为它实时的啊，跟我们这个值进行双向数据绑定就可以，等客人再点击确认的时候，列外到哪里了呀，是不是到了咱们啊，Use I form中，那这个时候我只需要获取来回到这里来，我还是在这里获取到了，就是我这个I form这个值，那这次咱们要点的value这个池对不对？好，我们测试一下，因为我给它改成了这一个ref这一个写法了，好，来到这里之后，点击更新来走一走，我们点击这个确认，是不是给他改成这个了，二二，最终我们就拿到了我们修改后的这一个词，那列位接下来的动作你还不知道吗？是不是我们。

不应该是发出我们的请求anxious post啊，给我们的后端，那这一会儿咱们就把它给放出来吧，放出来了，然后要把这些东西给放出来，嗯，好，接下来这块东西给注释掉安啊，咱们需要引入进来啊，引入进来之后我们斜杠，我们给它来一个我们的update，更新我们的估子啊，然后我们再把这些信息给他点传过去，当然这次别忘了哈，要把这个value啊给它传过去了，好，然后再点赞调用啊，最后成功了，我们还是判断这个词等于OK的时候的话呢，我们控制is edit这个词啊，让它给它改成这个什么呀，来复制一下，把这个词的话，咱们给它改成这个false，那这样的话就会消失，再同时refresh我们的table就可以了，我们的table的话呢，也一样的，在这里面给它传入进来，因为咱们在APP中啊，在写的时候，咱们已经把refresh table当成食餐。

传过来了，所以列位可以想一想，前端的逻辑是不是就这样了呀？只要咱们点击更新按钮啊，我们啊，并且点击了确认了啊，这个值咱们就在edit form中，咱们得到了咱们post给我们的后端啊，我们成功了之后，我们控制edit这个呃，弹出框消失，并且重新刷新表格，你看这个逻辑非常简单，好了，这样的话，咱们把目光聚焦在我们的后端来到我们的good.gs中来了，啊，我们把这个代码的话，咱们一复制吧，咱们应该复制的是这段代码，是不是这段代码，因为客们要走的是咱们这个更新的这个流程了哈，所以我在这里粘过来之后，好了，我们在这来一个update good，然后我们在这里拿到IQ包结构出来也一样的好，剩下的这一块呢，获取创建连接值，这都一样，那唯一的就是在这个地方的一个改变了，另外是吧，我们应该在这个地方的话，我们写这样一个是吧，Update更新这样一个方法，另外update这个语句。

就是什么呀，Update good said是不是update？Good这张表，然后我呢，在这里是set我们这个name，等于来我把这些没有用的给删掉吧，好吧。在这里这些都是没有用的，咱们给它改成这个写法，字符串模板，我们要更新固定这张表，然后set我们的内幕的话呢，是等于这一个Dollar符，咱们这一个name更新成它，然后逗号，我们再把这个price价格的话呢，给它更新成我们的Dollar符啊，我们的Dollar服我们的price，好，然后在这里它的这个查询条件的话是where，我们的ID啊，咱们把这个东西不都传过来了吗？所以说where啊，我们的这个ID等于我们Dollar符ID，咱们这个ID啊也得结构出来，从这里面那外可以看一下啊，因为科在这个新的时候传过来数据足够多了，我们在更新的时候可会把整个item对象啊，点完就传过来，里面包含了ID name price这些信息，哎，到时候你传过来，来到我们的后端接口中update的good里面来，我把name price ID结构出来，然后来了一次更新good，然后把name幕设置成。

传过来那一幕，把price设置成咱们传过来的这个price，要判断它的条件ID的话呢，啊，就等于咱们传过来的这个ID，最终咱们给它返回出去，好再把这个方法的话，咱们也一样的model掉，点XEXP给它导出去，再把这个接口的话呢，我们给它做好，好吧，在我们app.js中列位，咱们再把这个接口也一样的给它做好，这个是咱们的更新故的这一个接口，Update好这块是点更新这个接口，哎，另外我觉得我们可以一试了，来跟科文一起来看一下这个效果。

来到我们的这个页面中，咱们重新的刷新一下，现在数据这么多好友更新一下，把AA这个数据咱们给它更新一下这个呃，AA杠杠AAA了，对吧？好了，接下来咱们点击这一个更新轴，哎呀，我这一块的话呢，啊，是不是一个404呀，列表咱们看一下我怎么给它改成了一个get的请求哈，是一个的这一个请求OK，保存之后咱们再来测试一下啊，我现在重新来一遍哈，点击这个更新这里的话呢，我们现在是这个值，点击这个确认，好，这一次好用了没有啊，好用了吧，点这个B，咱们给它改成杠BBBB，点击这个更新啊，应该是好用的，好不好用咱们刷新页面就知道了，走你。

重新刷一遍数据还对啊，包括这个价格的更新，我把这个给它删回来，把这个给它删回来，把这个价格改成11111对不对，点击确认之后，大家可以看一下是不是没有问题哈，这个是完全没有问题的，所以咱们这个更新功能的话呢，它是好用的，好了，这样来说我们的更新也实现了列略，可以把这个思路的话呢，按照坑啊一样的给它走一遍，对不好了，那接下来的话就是最后我们这个删除的这个功能呢，删除这个功能的话，咱们现在点完之后，至少知道我是第几项，然后接下来的话呢，我们就在我们的u table.gs中，在这个在这个删除里面，咱们是不是，诶这个就简单了，直接朝后端发我们的这个请求，说你帮我删的哪一项就行了，因为这块咱们就不需要让我们其他的组件来帮忙了，咱们自己就来操控了，我们在这里知道要删的是哪个ID，拿到这个ID了吗？然后在这通过点post，我们朝斜杠API斜杠。

Delete good这个接口，咱们把这个内容给它传过去，哎呀，其实只传个ID就行了，是不是啊，最后点赞成功了之后，咱们再调用refresh，你看我这个refresh都在我自己这个里边，那肯定没问题，另外啊，在这里就等咱们点击删除这个按钮的时候，咱们就在这里啊，直接操控啊，我们这个什么呀，朝我们的后端发起一个delete这样一个请求，然后咱们把这个it home的话解构啊传过去啊，其实只需要at home.id就可以了，是吧，成功了之后再refresh table1下下好了，那这样的话我们一保存，然后来我们来看一下我们这个接口又得回到good这个页面来了吧，然后把这段代码的话也一样再给它复制一下，这是咱们的delete good这一个接口，De good这个接口拿到了我们。

我们的这个ID哈，拿到ID的I克body不要了，然后接下来就是我们的一个非常简单的一个是吧，Delete这样一个简呃语句哈，Delete delete delete delete from我们的good子，然后咱们只需要把这个where这个条件给它留下就行了，列位看一眼是不是表示我们删除这个从这个列表中等这个ID啊，是咱们传过来的这个ID匹配到之后就行了啊，最终的话我们也一样的把这个delete good这个接口的话呢，我们也给它猫叫点exp给他导出去，然后在咱们的app.gs中的话，咱们来一个什么是吧，Post，然后我当时是按照post来传的，所以就是一个鞋盖delete good。

De啊de delete good啊，这就是点delete good好了，E保存折后列位，你看我的后端又写好了，那接下来前端你看看你怎么样呀，然后咱们来前端来测试一下吧，刷新页面之后来走一下啊，开口点击删除删除对吧，那最终有没有删除成功呢？刷新一下页面数据还对吗？对了，那接下来就是咱们的增删改查整个流程，在这边可以最后测试一遍，看有没有问题，好，咱们来测一下，点击添加商品，点击AA价格的话，给他一个100吧，点击确认能添加上去，刷新页面获取列表也是没有问题的，点击更新改成a ABB价格，给它改成200，点击确认更新好不好用，好用刷新页面数据存到数据库的嘛，也对啊，最后再点击删除好用，那这样的话呢，我们整个增删改查的这个过程的话呢，就没有问题的啊，当然在这。

这里的话呢，另外也可以哈，把这个体验做的好一点，因为有时候他在跟后端交互呀，他可能会卡那么一下啊，这个时候有的用户就不太好，咱们都喜欢弹出一个什么呀loading框来就行了啊，所以这个思路呀也是一样的啊，就是咱们在请求这块想点办法就行了，咱们没必要说啊，在每一次点按钮的时候，弹出六令框来，然后成功之后再隐藏掉，咱们就在我们的请求中，因为咱们所有的跟这块相关的都是我们的X发出来的请求，那可在这里的话呢，就可以非常简单的的话，咱们调用一下咱们的X啊，咱们通过X的拦截器啊，我们在请求发出之前显示我们的load径框，我们在请求发成功之后的话呢，获取到数据的时候，我们再隐藏掉这一个load顶框就可以了，列位好了，我们来做一下X拦截器，X拦截器这里的话列位也。

可以从文档中啊，直接给拿过来，如果你不熟悉的话呢，你得先通过我们的文档中，哎，找到我们的的这个文档里面的话，你搜一个叫什么呀，Intercept哎，这个东西，这就是咱们的拦截器部分，拦截器部分这里大家可以看一下，这一块就是咱们的request，在请求发出之前的话，Do something啊，这个的话呢，是咱们response，在请求响应的时候，Do something啊，所以你可以在这里利用这两个拦截器，在这里让他受我们的loading，在这里让他隐藏掉，当然万一失败了也让他隐藏掉就可以了，是吧？所以我们可以把这个安拦截器给它拿过来，复制到哪里呢？啊，咱们在哪个地方引用了X克斯呀。咱们可以在我们的魅点GS这里的话呢，做我们的安格的拦截器的一个配置啊，我们可以在这里整体来做就可以了，因为安这个模块导入进来，它就是唯一一个实例，你在这里做好了之后，他就对所有的都会响应掉，当然你也可以再写一个页面啊，把这个安给的这个封装一下，放在外面好像有点丑是不是啊，好了，那这样的话我就直接写在这里了好吗？保存之后我就不管它丑不丑了，我就在这里的话呢，我要让这个loading框的话呢，进行一个啊控制它显示，那这个loading的话，咱们用的就是element这个组件，Element你还别说，还真不能放在这里啊，我这个组件这个时候还没注册呢啊，所以我得往往外面这个地方往里面点放吧，好不好？要不要放在下面，要不放在app.view中吧，行吧，所以我放在APP这里面吧，啊给换个地儿导入X4，然后在这里做了这个拦截器的配置啊，因为这个时候我们的element都已经注册完成了，咱们去找我们的这个loading块来。

咱们找到这个loading框loading啊，我们找一下应该是在交互反馈交互这里，Loading加载这里啊，Loading加载这里的话呢，咱们用的是不能当成一个指令，因为指令需要依赖于组件啊，咱们放在一个service中就行了，其实就是一个对象调用，看一下就是一个对象调用，你看这个代码就行了，直接就是一个方法调用ER loading.service的这样一个调用，通过这个方法调用就可以了。另外。

那这样的话，我们可以复制一下这个方法，就来到我们这里呗，是不是放在这里啊，可在这里的话，新建了一个我们的这个啊方法，这个loading，因为咱们需要这个值，将来好给它关掉嘛，默认这个值是一个空，然后在这里的话呢，我们在开始的时候给它附上去啊，Loading在这里啊，附上值的，然后等我们结束了之后，我们在这里的话给它怎么样点close给它关掉就可以了，来把这个复制一下，咱们把它这些原来的这些注释给它删一删吧，咱怎么这么费劲呢，这块看着呢啊，删了啊，其实我们整个拦截器没这么复杂列外啊，咱们看一下，给大家解释一下，最后再来这个东西是从咱们的element UI中啊，应该给它引入过来的，在这element-plus中引入过来的，好，导入进来就行了，好最后我们来看一下我们这个拦截器的一个使用列外，我们从element plus中导入了一个对象啊，然后并且导入了X对于安进行配置，咱们呀，在这个。

比如发出之前我们会创建一个service，复制给我们这个load顶这个对象啊，等我们这个请求成功了之后呢，另外咱们又会在这个地方啊，就回来，甭管是成功和失败吧，我们都会调用close这个方法，哎，让我们这个loading框的话给它关掉啊，所以这样我们每一次点击的时候啊，都会出现loading啊，我们因为请求发出去就会先显示loading，请求成功回来了或者失败了，都会让这个loading再消失啊，只要在这个地方配置过一次，安设在其他页面中，它都是一样的啊，我们按设的拦截是全局影响的，好了，一保存之后，我们最后来测一下我们的这个功能是不是好用的，能来刷新一下页面之后。

诶转了一下对吧，他先获取里一遍数据AA给他一个一一点击确认是不是loading是好用的哈，更新的时候改成BVBVV的哈，这就是没有问题的，删除的时候也一样的，所以在这里是有交互的啊啊当然在这里我们这个简易的能够增删改查商品的这样一个小系统的话呢，就算做完了，里面有很多小细节咱们没有去追究，比如说有人说你添加一样的名字，一样价格的这种的，你也不去重等等的，也不校验，是不是已经录入了，咱们都没有去细节的去操控它啊，因为这块的话不是咱们的重点哈，因为咱们在这里是为了将来好上架咱们商品所用的，我们要在我们的这个服务端发起请求，我们跟我们的即时通讯的那个接口进行交互，这样的话呢，我们好给这个直播间上货呀，123上链接，这才是我们最终的目的，好了位，这一小节咱们就到这儿。