049-直播间模块-直播带货后台系统1原创

好了，列威啊，写了这么多代码之后啊，相信列威啊对于小程序开发已经渐入佳境啊，那接下来啊，咱们再来看一下我们直播间模块啊还有哪些内容呢？哎，点进来之后呀，列位应该想到了，其实是克隆啊在之前啊就一直说的啊，我们这是一个直播带货的这样一个小程序应用啊，所以他一定要能在直播间中的话呢，诶呃，开始介绍自己的产品啊先说一段对吧，引起大家的注意之后的话呢，啊再打断一下啊，各位直播间的小伙伴啊，大家呢，也支持一下主播啊，主播在这里的话呢，给大家推荐一下我们在这块啊要有这样一些商品，所以等会点击这一个这个小的good的这个商品图标的时候，会弹出来一个界面，在这个界面中的话呢，会有我们这些商品啊，商品的图标啊，我们商品的名字，商品的这个价格啊，包括我们后面的什么购物。

车按钮，其实在这个界面中的话，我们就典型的一个啊，小程序电商的一种体验需求啊，只不过咱们在开发的时候需要想到的问题是，等有人点完了这个按钮之后，咱们应该是把这条消息的话呢，也应该发到群里边，有人让他购买了什么什么商品，这样的话，直播间的其他人都看见了哟，谁购买了商品啊，是不是也能够相当增加我们这个主播的一个人气啊，说你看他们都买了，我也要买啊，所以我们可以呀，把这样一个消息加到消息列表中啊，但问题就来了。我们这些商品难道是写死在这里的吗？啊，就是我们代码写死了，这样的话呢，客程代码一旦写完之后，我们里面放了三个固定的商品啊，我们永远就这三个商品，谁今天直播都这三个商品，是不是这样来说就不太合理了啊，就相当于我们把这个代码的话呢，就已经固化在这里了啊，所以我们啊，这个直播带货小程序，它的对应的有一台什么啊，直播带货的后台系统啊，这套后台系统主要是来自于我们商品的管理的，我要增加商品，我要减少商品，我要修改商品，我要改价格，123上链接哈，我们改价格改完之后我再给你改回来是吧？我们经常在直播间中遇见这样的一个行为，所以列位已经想到了我们接下来要讲的内容的话，就是我们啊，围绕着我们的商品这一个模块啊，这也是咱们整个在直播间可视区之内的哈，这个唯一现在不能点的按钮了啊，就是它了啊，所以客人准备啊，分为这么两大部分来去做。第一部分就是。

我们在做一套带货的后台系统，这套秀台系统的话，咱们也不可能拿出大把时间来去做啊，因为我们也不是来去讲这个后台系统怎么去做的，你要是想学后台系统，你可以关注呀科的react啊后台管理系统，我做了一个全球新闻发布管理系统，略微可以去关注一下，包括后续的话都会出view的相关的后台管理系统列外，都可以持续关注咱们的视频，那在这里的话，可能就做一个简易版的一个小程序的带货的后台系统，这个后台系统列位可以看一下这样的一个界面，但现在的话只是一张截图，我们后面要给他做出来啊，这个带货系统中它重要的功能的话呢，就是我们可以能录入我们商品的名称，商品的价格啊，然后呢，我们可以对于这个东西进行增啊，然后删，然后的话呢，改，然后查对不对啊，上面多了，你还可以进行过滤啊，所以这个就是典型的一套后台系统的增删改查的业务功能。

列位相信这块都会做，那我们做这一切的目的是什么呢？诶就是为了将来，诶我们可以选择我要给杨左直播间，然后让他上货上架新商品对吧？然后大家再看杨左直播间的时候呢，等客户在这里把这个商品列表诶做好之后，我们选中的是杨左这个下列表，一点这个上架商品之后，诶这个时候主播就在那儿大喊一句123上链接对吧？诶这个时候你会发现在咱们这个地方就会收到一条通知，有新商品上架了啊，赶紧点开它，你会发现弹出来这个界面里面就会有我们最新的那个商品显示在这个位置，或者最新的价格就显示在这个位置上，然后等用户真正买了之后的话，又会打在聊天区里面，然后并且通知广播给其他用户，所以这是一套完整的直播带货的流程，列外啊，所以这些东西啊，你别看咱们架子小，但是咱们东西的话都是很全的。所以接下。

那就跟哥们一起啊，来把这套体系咱们给完成了啊，你自己也去回头品一品，你在抖音中，你看直播的时候，你是不是光听主播喊了句123上链接，但是为什么这块就有价格修改了呢？那是不是就是有人他在后台系统中他做了这个价格修改，并且能够推到咱们的看直播间的这些人的这个里面来，对吧，他能够推过来，所以这块一定是涉及到我们跟计时通讯语音的一个交互，我们点击上架新商品，一定是通过即时通讯广播给了我们所有在看杨左直播间用户的这些人，那但是他们就能收到这条通知。

他们打开来看就能看到，哎，自己直播间里面的啊，新的商品包括新的价格，他们就可以选择购买了，好了新的手续啊，做好了铺垫之后，咱们就来看一下我们这个商品的带货后台系统啊，咱们把这块啊客人准备分为四节课给他讲完，在这里的话，客人用的技术的话呢，是基于VIEW3还有我们的element plus来去做的，那如果列位在这里对于view不太熟悉的话呢，好像学起的稍微有点吃力啊，但是作为一个前端呀，你得我也必须掌握view的一个学习啊，你也可以关注课文录制的view的啊全站戏视频啊，你去看一下就行，好吧，这样的话呢，我就直接基于大家已经是会的VIEW3基础之上的话呢，咱们来讲一下VI3，哎，怎么来实现这样一套直播带货后台系统？大家说没想到啊，在这个项目中还藏着一个小项目啊。用三。

实现一个简易的后台系统，好，那接下来的话，咱们在这里现在创建一个基于vuee开发的一个项目，好在这里本来一开始我的计划的话是，哎呀，要不然就别整这种后台系统项目了啊，我们当时想的哈，我我在这里直接啊在我们这个后台中啊，客人准备这不这是一个node嘛，我直接写一个网页版的得了呗，对吧？啊，直接写一个单页面啊，写一个HTM2中去引入vuee啊，但是他跟element plus的话呢，用很大的问题，在显示页面效果的时候有很大的问题，所以客人不得不啊用咱们view的模块化开发方式啊，所以这种开发方式可能成本稍微高一点，对吧，但没有关系，来吧，另外右键打开我们的power shell，摁着shift的键，对吧？客人喜欢这种方式，有人就喜欢在这里敲一个CMD，打开一个终端，切到这个目录下进行安装啊，客户喜欢在这里，那这样的话呢。

列位肯定已经之前安装过view脚手架了，有人说我没安装过，那就n p mi，然后我们啊杠G，就是如果没有安装的话呢，你得这样去安装vuee斜杠CL这样表示安装咱们vuee的脚手架全局安装，安装完之后咱们就可以在这个create啊，我们的这个封巢带货系统，所以在这里课上就写一个蜂巢哎这样一个后台系统，好，我们在这sister目好了，一回车之后，那么这个项目的话呢，就被创建出来了，但在这个创建过程中的话呢，肯定比较慢，对吧，可能在这选择了肯定是首选VI3了，一回车之后，好了，基于最新的VIVO cri5.0开始创建，而在这里呢，如果你列为电脑上有旧版的这个VIVO cri的话呢，而你恰巧你的node的话呢，它也是十期以上的版本，哎，就会发生一个特别有意思的事，告诉你啊，这个项目啊，运行的时候启动不起来了啊。

啊，所以这个时候大家就要注意一下了啊，这样你需要把你的VVCR更新到最新版本，不过没有遇到这个问题的人的话呢，就当我白说了啊，我啥也没说好吧，遇到问题的话呢，就按照这种方案来去解决啊，将VCI升级成最新版你的note版本，不管是17还是16的啊，就没有问题了，好了，这样的话，我们这个项目的话呢，就已经初始化完成了，还是挺快的，对吧，那这样的话可能把这个项目就直接拖到我们的Vs code中啊，我们来在这里的话做vuee开发了，大家说我们要学vuee了啊，来到这里之后，右键咱们在终端中打开，然后正常的执行n PM run serve，咱们把这个项目呀给它运行起来，打开之后列位可以看一下我们的入口在me.GS中，对吧，典型的一个voe的一个开发啊，然后在这里呢，我们要引入我们的element plus，所以在这里客人要去找我们的element plus，来先点开看一眼。

打开没有问题是吧，嗯。咱们去找一下我的这个element element这个文档我已经打开了啊，在这里啊，咱们要用的是这个指南，在指南中的话有一个安装客，要进行模块化的一个安装呗，所以我在这里就可以安装了element-plus啊，要注意哈，Element的话适合的是VIEW2 element plus适合的是VIEW3，好，这里的话，我们在这个地方右键打开一个终端，我们进行一个NP mi啊，我们安装我们的element plus是不是这个模块也好，一回车之后element plus这个模块就被安装好了，而在这里我们将来一定要用到数据请求，所以坑们索性一起给他安装好，行吧，科们在这里再安装一个啊，这样一个包啊，这样的话我们就保证啊，我们在这里基本所使用这些包的话就没有问题了。

好了X，等他安装完，那接下来咱们就在这里的话，让他进行一个什么呀，哎，引用我们这个element，我看咋引的呀，哎，我还真的忘了呢，有人说对吧？好，我们在这看快速开始吧，在这里啊，我知道了引入element plus，然后再就是引入他的CSS，好多人啊，他就给忘了，他忘了引这个CSS文件了啊，所以就会没有样式，那在这的话呢，我们就可以进行点use它就行了，所以在这大家其实没必要说把代码都背过，你只要能照着文档来去用就可以了，因为咱们现在很多都是站在巨人的肩膀上去开发的，你说你你要是用element还好，你背过了，那你下次用那个我们其他的呢啊，我们an TD啊，给vuee实现的这种方式呢，你这这样的话你就没法再去背了，所以咱们就是会看文档啊就可以了，这样的话使用它，OK，接下来咱们在点view中的话，咱们进行一个改造，咱把这个代码就给它删了，是不是啊，咱们在这里要用我们自己的代码。所以我把这。

这东西没有用的都给它删掉了，要在这里我们写一个最基本的，我看一下到底好不好用，我记得啊，我记得这个element UI中有一个按钮小按钮E-八碳啊，然后在这如果这个小按钮它能工作起来的话，就说明我们这个模块咱们已经引入成功了。好了，咱们不要这种写法了，V3最新支持的setup写法，咱们用这种写法，好吧，那这样的话，一保存之后列位来看一下咱们这个APP的跟组件，咱们来看一眼，好，在这里看这个按钮没有问题啊，然后在这儿的话呢，如果写一个type等于个灯，这我得读它是一个红色的，没有问题，对不对啊，是一个红色的，所以我可以认为我的element plus已经成功的引入到我的项目中来了啊啊，咱们用的模糊化开发CDN这种方式是不好用的啊，很尴尬，好吧，来吧，那接下来咱们就照着文档来去使用，那科先把最基本的这个页面结构咱们给它布局一下，我们me.GS引入了APP作为咱们的核心的这个跟组件，然后在这个根组件中的话，我要开始写我的东西了，我得找到我的element UI的这个五文档啊，在这开发了咱们啊。

来到组件这里来跳过来，在组件中的话，咱们有一个布局啊，我看看是不是布局这里啊，这个布局中的是容器吧，容器这一块来咱们按照这种啊，有hier呀，有我们的me主体的啊，咱们在这来看一下代码是什么，其实就两句话啊，一个是ER container，一个是ER hier和me啊，其实加不加两句话都行啊，不影响咱们布局，那在这里咱们既然用了它的，就按照这个规矩来吧，在这个hier中的话呢，就是我们上面那个标题，那可能在这用了一个配置hier啊，在这里用了一个这样一个组件，我想咕噜一下找到我们这个配置hier页头组件，页头组件就是它嘛，好，我们在这给他复制过来。

件代码拿过来啊，拿过来之后，另外你看你运行之后的话，你看一眼你的这个组件效果怎么样呀，来来到这里是吧，页头组件，只不过客能把这个代码的话给他改了改，我把这个data到这个地方，我给他改成了一个什么文字啊，我说直播带货后台系统这几个字啊，所以咱们在这写一个什么直播，直播带货后台系统几个字啊B，咱们也不用点，也不需要有bank返回好一运行再回过头来看看咱们的代码吧，在这里大家说怎么还有这个字，还有这个箭头呢啊，就是咱们配置还有点这个组件的一个使用了icon和title套呀这些东西啊，你不传它有默认值的啊，所以在这里我得传一个哈，Icon咱们就不要了啊，不要那个返回来icon了啊，然后对应的我们这个bank的话呢，诶title的话呢，我写一个什么简易版，好保存之后列表可以看一下是不是就完事了，好其实这东西就是玩呢啊，让你知道我们使用。

Element plus的组件啊，是一点问题啊也没有，那接下来咱们再在这个may这个组件内部开始写咱们的核心逻辑了吧，写什么呢？可不，首先要写的是一个小按钮，这个按钮意义非常重大，这个按钮是将来咱们要添加商品，哎，Button好，咱们在这给这个按钮的话，给它一个叫添加商品这样一个文字添加商品，然后在这里给它type类型列外，Type类型的话，Primary啊，就是咱们的蓝色的那个，看一下添加商品，而在添加商品之下的话呢，就是我们的一个表格啊，有人说哥们你这还有什么下拉列表，不着急啊，先把它还有它这一部分，咱们能实现什么增删改查啊，连上咱们的数据库啊，之后咱们再说怎么推到咱们各个直播间里面啊，让他们进行123上链接，那口号能喊出来啊，所以我们先把这块给做完好吧，添加商品啊，我们的。

添加商品下面有个表格，表格的话呢，数据咱们一开始先复制粘贴过来写死，然后咱们在动态的生成创建啊，能够增删改查啊，所以这块业务的话是典型的一套后台系统的业务逻辑，那在这里的话，我们下面就应该放一个表格，那表格的话我就得去抄一抄了，我来我看表格怎么布局，Table这里哈，咱们找一下我们的这个table表格往上咕噜吧。Table表格是非常重要的一个表格呀，我怎么没找到呢？Table啊，找到了就在这里好了，点开之后我们看一眼最基本的这个使用就够用了，来复制过来吧，看看这个table咋用的，我把这个代码给它复制来，粘贴到我的这里面，来咱们格式化一下啊，格式化完了之后ER table这个组件，因为咱们已经全局啊use的我们的element plus，所以这些组件你都不用再次引入了啊在这里这个宽度设置好了，一个是分为就是两列三列啊，在这里这一列是180，这列是180，这一列的话呢，就是次适应了，对不好，然后在这要上能显示table data必须要有，那table data是怎么定义的呀，另外可以看一下，哎哟，在这里定义的，所以我就把这个table也复制过来，咱们要注意，我们在这里用的是我们的VIEW3的啊，最新的写法，支持setup这种啊，非常方便的这种写法，对吧，这种写法不用像以前的ex defportt啊，太麻烦了，我直接这样写多轻松。

好了。保存之后，另外可以看一下我们这个table data，这个数据咱们定义好了，那这样的话呢，这个呃，Table data啊，赋值给这个data啊，这块是一个动态扶持，保存之后我们来看一下绑定完了效果，哎呀，这个table表格已经成功了，太好了啊，这是咱们的一个table表格的一个效果，打开控制台，随时准备在这里好写代码对不对？一刷新页面应该没有什么问题吧？好了，这样来说，我们已经写好了表格，但表格这块咱们要改造一下啊，咱们在这里也都知道哈，为什么这块能自动的对号入座，哎，他怎么知道把name把date分别显示的这三列呢？啊，其实在这里就是因为我们这一块prop写了这个date prop写了这个name pro写了这个address，所以他知道这一列要把address给放过来，字段这一列要把我们的内幕字段放过来，哎，上一列再把咱们的日期字段放过来，就是这么找到的，好吧，那这样咱们给它改成什么呀，我们将来的数据，期望的数据。

啊是这样的name，哎，这是我们的名字AAA，然我们希望的是我们的价格price，哎，我们的价格嘛，这块的话呢，是100块钱，那客人在这里就留这样一个数据，当然我知道一个完整的电商啊，在这里它不可能就这么几个字段的，咱们在这里是简化呃处理了，因为我们的核心一线物呀，还在于我们小程序端还怎么去进行商品上架通知对吧？好，在这里的话200，然后这一块的话是我们的bbb好保存之后，那接下来就是我们留它两列，暂时哈删的这一列，那对应的就是我们pro这里的话，我们就给它写成这一个什么呀，Name啊，然后对应的这一块的话就是我们的商品名称啊，宽度咱们就不要了，行吗？然在这里我们就写一个price，然后咱们写一个商品价格，然后对应的这个也就不要了，一保存折后列外来看一眼效果，你看商品名称，商品价格，它就。

显示出来了，嗯，在最后一列的话呢，客户要放一个什么呀，因为咱们将来要增删啊，要进行啊更新啊，所以我要放一个自定义的这样一个按钮，那这样的话我就应该拿过来。把这块啊，咱们得给他复制一下啊，在这里的话，这个就是咱们的一个操作对不对啊操作，但上面这块prop它就不用拿了，因为它在这里，它不是我们这个数据的一个属性，这样的话，三列这一块应该使用咱们黑豹的一个自定义内容，黑豹这块它支持这种自定义的，诶你可以看一下，在下面这块有一个什么自定义数据的啊，你可以点进来看一眼，你看这里就是自定义的挺好嘛，那咱们点开看一下，咱们要的就是下面这小块，来看看这里是怎么写的，你看在这里是不是我们在这个，呃，Table column这个组件内部放了一个模板啊，这个模板带插槽的啊，带插槽，那这样的话，我们直接就这个defa的这个插槽，咱们给它复制过来，上面这块是定制的，Header都定制，你看hier这部分也不一样，对不对啊，咱们不需要定制hier，咱们只需要定制这个内容这一块，所以客人把这块复制过来，另外你说说。

我是不是也能行啊，来，我们在这再把它变成这种双标签啊啊。啊，这就是咱们使用啊I的plus的一个流程，可能给大家也简单的说明一下啊，要不然我在这里直接就粘贴复制粘贴复制了啊，我也希望大家知道呀，这东西怎么来的，那这样的话就是我们的操作这都不变，我们的size点击的回调函数我得用啊一会儿啊再留着呀，哎，这块就是咱们的什么呀，编辑吧啊编辑啊更新更新啊更新一下，然后这一块的话是咱们的什么删除，删除好来保存之后，列位可以看一下，这个删除是带红色的啊，红色按钮运行之后来列位看一下是不是咱们自定义的啊，这个第三列它已经好用了啊，所以你看这些数据现在呀，它虽然都是死的，但是至少咱们这个页面的这个结构呢，还挺像模像样的，将来你想一想，咱们点击之后，就能动态的添加商品名称，商品价格，点击更新就能动态的修改，点击删除也能够动态的删除掉啊，这样的话呢，实时的跟后台数据库进行绑定，最后再来一个上架咱们的新。

商品的这个功能的话也算圆满对吧？好了，那接下来咱们就来看一下，从点击商品咱们来开始，因为咱们现在也没有数据库，咱们也没有列表，所以我这个列表这个数据我先放在这里了，所以我从点击商品开始，我的这个业务的列外。

点击添加商品之后，我们应该弹出一个对话框来啊，有人说我们应该跳转页面啊都行，咱们也没有引入什么路由了啊，可们这个view使用的比较简单，没有引入路由，所以我就体验就是一点商品之后，我弹出来一个对话框，对话框里面的话有两个字段，内幕字段啊，还有我们的价格字段，用户可以在这个框框里面自己填啊，填好之后这块有一个取消，这块有一个确定按钮，你看这是最基本的一个模态框啊，咱们叫模态啊，那接下来咱们就来找一下在咱们的element plus中有没有这种东西呀，是不是有的呀，在这里啊，我们用的是一个dira对话框这种方式，对话框这种方式里面的话呢，就可以有很多很多的形式列外可以看一下，你看在这里的话，嵌套一个表格的对话框，喜欢吗？哎，嵌套一个表单的，哎呀就是它了，客们我就要嵌套表单的这种表格了，是吧，那这样的话你就。

可以把代码给他复制一下啊，所以这是咱们的element plus这个使用吗？你可以把这个dialogue应该是下面这个吧，给它复制过来呗，是这个，嗯。我把这一块的话，我给它复制过来，但里面有些代码的话，咱们可用可不用的就给它删掉了，所以我在下面这块就得写了，这一块就是我们啊添加商品的弹出框添加，哎，添加商品的弹出框，弹出框好了，咱们做一个小小的注释，粘过来之后，哎呀，这东西挺多的哈，我格式化一下，然后我再删一删，我看一下哈，啊，这些东西确实比较多啊，另外来看下ER dialog这样一个组件，这块呢，未杆model绑了克隆，我知道了，这个东西它一定就是来控制是不是显示的，对不对啊，这个is and，咱们这个visible对吧，Is and visible啊这这个添加了这一个呢，它是不是显示啊，这一个状态值啊，咱们得它控制住了，我认为如果是触一开始就能出来啊，这个泰套的话呢，咱们就给它改成添加商品啊好了。

啊，那这块里面套了一个呃，我们的form表单，这个form表单中的话呢，咱们就留第一个另用，第一个是一个引铺的框，后面这些什么套select的我我也不需要啊，在这里面，所以给它删掉了啊，那这样的话，咱们这个代码就能简洁一点，这就后面这块的话是咱们的puter部分，打打底下的话是有两个小按钮的，来咱们来看一下现在整个代码中来diallo组件里面套的咱们的一个表单啊，表单里面的话，现在只有一行内容，就是咱们的隐铺的框啊，在下面这块的话，有咱们的一个底部的啊，两个小按钮啊，一个确认啊，一个取消，这样两个小按钮完活，剩下的就是这些数据，咱们是不是在归拢，归拢从哪来的呀？Is and visible这个数据它是绑定了我们的一个状态，所以我在这里可以怎么样新建好一个状态，不cost is，这个等于ref初始值，咱们给他一个false，它是。

的不显示的ref来自于哪里呀？列位来自于咱们的view这个模块里面，来来导入from我们的view，好，咱们从这里面导入一下。那接下来咱们再来看一眼啊，这个phone啊，我们将来不得收集这些输入框的值嘛，是吧？啊，我们在这里view它最大特点就是双向数据绑定，我这边改完了，那边实时跟着我改多好呀，所以咱们得把这个form这个也得做成我们的一个状态，但在这我们可以参考一下我们的网站，他就它是怎么写的，放在这他用的reactive的形式，那我不管，反正你什么形式都行啊，都可以，反正我们的view开发中都支持啊，是咱们另一种来把一个普通的对象也好，普通的数据好给它改成响应式的，所以用当然在这咱们不用那么多，咱们其实就绑两个，我们准备好两个，一个是name，一个是price啊初始值name是空磁串价格，Price的话呢，咱们给他一个100，那给他一个零啊零啊好了，这样的话呢，我这个form就有了，那接下再来看一下我们这个表单中的啊，这一块是咱们的这。

个label，那这块咱们就写的是这个是吧，名称啊，我们的名称商品名称是吧，咱们还是这么写，商品名称这个宽度这一块咱们就不给他设置了呗，好吧，那这样的话，我们这个ER form啊在这里这商品名称里面这块form.name哎，它绑了就是咱们这个内幕这个字段了，另外啊，这是咱们将来的商品名称，诶然后这一块的话自动填充关了好了，接下来我把这个form咱们可以一复制一份，另外你照着它画个瓢嘛，你不会吗？再给它改成一个商品价格，然后再把它给改成绑定成这个什么的不就行了吗？Price的啊，然后接下来的话就可以了，但这块的话咱们要给它设成number类型的，所以type等于一个number啊，ER的跟咱们普通的隐的组件是一样的啊，隐的模态啊，保存之后number么类型的了吧，好了，那接下来这一块就是我们的foot部分了，Foot部分这一块我们的点完之后让。

这个值给它改成false啊，让is and visible改成这个false，让这个值给它改成这个false对不对，一个是咱们的什么取消一个是咱们的这一个什么呀，确认确认。确认好了，这样来说的话呢，完活，另外那一运行之后，它一开始啊，因为这个值它是一个false的，所以它一开始是显示不出来的，对不对，等咱们点完了这个按按钮之后，咱们就可以让它显示的，咱们这个按按钮在前面这里吧，那在这里，所以可在来一个什么and click绑定一个事件hand这一个and啊我们的good好了，在这里咱们把这个方法，然后给它复制一下，然后粘到咱们这里来。

站到这里来，这一个是显示啊，不要叫and哈，这个叫显示啊，显示按到这一个什么受吧，受这一个and当老好让这个东西显示出来，当然有人说我直接显写在一行中，我直接让这个只给他改成这个处行不行啊，是不是也行啊，咱们这样吧啊偷个懒，咱们就在一行上操作，但后期其实咱们还是应该写点逻辑的，对不对，我就写在一行上，因为咱们vuee也支持这样一种写法，直接给他改成这个true，那这样一保存来列位咱们来测试一下看看，此时看看这个功能好不好用来在这里哈，重新咱们来刷新一下页面啊，因为它是热重载的也是啊，所以之前那些错误也会在啊，你要烦就刷一下就行了，一点进这个添加商品，你看就出来了，商品名称对不对，还有我们商品的一个价格就在这里，而这个时候你要是能把那个form你打印在页面中，你就会发现你在这边刚改了那个form，它是实时的跟着你改变的。

对，这就是咱们的双向数据绑定嘛，另外老厉害了是不是在这里你看一看，我得改成这个，好咱们点击这个确认和取消都会消失，看见了吗？你在其改的时候，它是实时的改变的，只不过被挡上咱们看不见而已，对不对，因为它是双向数据绑定的，很方便的，好这是咱们的添加商品这里。那接下来的话呢，另外哎呀，我这个看这代码实在太难受了，哥们这是VI3吗？我怎么觉得你这写了一堆乱七八糟的东西组合在一起了呢？VIEW3是不是应该大量的，咱们把一些啊，就是每一个函数啊合在一起，每个函数做自己的工作啊，咱们是这样去想的，你看你现在的话，乱七八糟的，你看这个状态，这个是我们的diallo的啊，这个form的话是我们的diallo的啊，那前面这个的话就是我们的表格的，虽以我认为咱们这个代码虽然完成了我们最基本的点业务，但是一点不符合我们V3的这种函数式编程的理念啊，所以我们在这里稍稍的哈，把这个代码的话呢，给它改造一下，好吧，我们在这里利用我们的use啊，我们自定义hos的这种写法，我们把开始的名字，函数的名字都是以use开头的啊，我们按照这种hooks钩子这种写法来去写啊，所以这种写法是从我们的中衍生过来的。

这view中也大量的去使用这种写法来，另外要是之前的VIEW3没这么去写的话呢，那可能你只是学了个VIEW3而对吧？来src中咱们新建一个文件夹叫hus。

注意哈，咱们的H斯的话是把咱们的函数逻辑啊进行一个抽出来复用啊，封装复用啊，我们的组件的话，是连带页面，连在逻辑连在样式的一个复用，对吧？啊，所以我们这块只是说我们所有的逻辑页面都放在这个APP里面的，但是我们里面这些代码啊，这些ref这些东西，这些绑定事件，咱们都归类在每一个的互S里面就可以了，好吧，列外，那接下来可能就要在这个里面的话，咱们新建啊一个文件，这个表示咱们的use table.gs就是current自定义的啊，再来一个什么呀，Use我们的and and forms，你看这样的话，一会我给你拆出来，你就会很清晰的，你比如说这个table，咱们先拆的来，Function在这里use table，哎哟，这个代盘补全啊，Table好，在这里咱们写一个函数，然后再就是export呀，Default导出这个。

Use table呀，这个函数，那接下来的话，咱们把APP里面这些来跟table相关的，大家说就它相关课们，那你就把它给导出去就行了，你放在这个table包里面对不对，然后再把这个方法最后给它怎么样，Re return出去啊，咱们放按照对象的方式给它re return出去好了，这样一个自定义的这样一个函数，咱们就写好了，对吧，同样的我们在这里是不是这些他们都属于谁的呀，都属于我们这个啊，添加表单的啊，所以我们在这里可以写一个function and来function use and这个form好，在这里的话，咱把这东西给粘过来，要这句话不能粘在这儿啊，这句话呢，粘在最上面好把格式调一下下，然后咱们在这里再把这个小模块的话呢，给它export default导出去，Use and好，然后这些东西得用啊，当然不能在这里面用，咱们要导出去给外面。

对于这个函数有返回值就可以了，我们可以return，那接下来的话呢，我们form，那另外你来看一下，你看这个我们的函数里面全是跟我们table相关的逻辑，将来我们的添加表格啊，添加一行对吧，都是围绕data来进行展开的，而这里的话，他们围绕的都是我们的是否隐藏呀，表单收集的内容是什么呀，都在这儿，那最终回到app.view中列外，你看一下，那我们现在要需要这些table呀，我们要需要这个is and visible啊，Form啊，这些东西客们你从哪里来呢？我们是不是就把我们外面写好了这几个给它引进来就行了，引入我们的use，我们的table。From，我们点当前文件夹下的文件夹下的use table文件，然后咱们再来一个我们的斜杠use form，斜杠use and form，哎，在这里咱们来一个use and form，把它给写好在这里，那剩下的就是从这面开始导入你想要的东西就行了，你use table里面你有什么，你自己心里没数吗？啊，我在这里面，我好像有一个table data，看看啊，同样的，你在这个use and我们的form中，你要什么你没数吗？哎，我有一个什么呀，Is and visible这样一个值。

对吧，然后在这里面的话，咱们还得需要那个form OK这样一保存，但在这里的话，因为咱们后面还有编辑的，所以可在这儿给它改成这个and form吧，好不好，将来的话咱们变更那个互相影响这个叫and form的内容啊，导出来是and form，好，这样一保存，这里的话呢，咱们也一保存，把这一块改改在我们这个地方来啊，就是猫到绑定是按form，那这样来说的话，就大功告成的列外，你看看这个功能跟刚才的功能啊，还是一模一样的，但现在这种实现起来的方法，你会觉得很优雅对吧，很高级，高级感十足，重新的刷新一下对吧？感受一下啊，点击提加商品，哎呀，我这块居然报错了啊，我这个name幕的话呢，没有，大家看一下这块出什么问题了，在我use and form中这块没改啊，这个没改， andform.name and form.price好吧，成功路上的话总是有些许。

就失败啊，你只有这个先获得失败之后才能获得最新的失败，但这是咱们成功了，你看啊，所以我们在这里的话呢，就可以把我们的商品名称和我们的商品价格，咱们就录入进去了，那接下来我再去说，我们点击确认，点击取消之后的一些业务逻辑，是不是就感觉很好了，因为我们可以单独的在我们的use and form这一个hooks里面自己去写我们的逻辑了啊，该怎么去存数据，该怎么去取数据，咱们再下一小节再来看好这一小节咱们到这儿。