71、商品服务-API-属性分组-前端组件抽取&父子组件交互

接下来我们来编写平台的属性以及属性分组的维护，我们可以选中一个三级分类，为这个分类下新增一些属性分组，为每一个分组下呢，可以关联一些规格参数，那这个功能呢，来到前端项目，首先我们应该新建一个目录，比如我们就叫属性分组维护，当然后来我们要写非常多的功能，这以前的创建菜单目录我们都演示过了，我现在就不一一创建了，我将我们项目里边的一些基本功能菜单给大家放在了我们这一块的circle里边，我们打开。在分布式基础文档。在我们的circle里边。有一个系统的整个菜单表，我们将这个呢，给我们din里边创建出来，因为我们菜单啊，是后台工程里边的，它是要保存在这里边的，所以呢，我们将这个。推荐大家拖进来，当然最好是打开进行复制粘贴，你拖进来呢，有可能会引起字符编码异常，我们ctrl a运行一下，我们这一块呢就创建完成了，现在来刷新我们后台系统，后来我们所有的菜单，我们商品系统的，优惠系统的，库存系统的，订单系统的，用户系统的，包括内容管理系统的，这菜单呢我们都创建出来，包括我们现在要做的平台属性管理的，有属性分组的，有规格参数，那就是基本属性的，还有销售属性的，各种维护菜单我们在这儿呢也都有，而且呢，接下来我就来编写一个属性分组的功能，并进行前后联调测试。

那以后呢，其他的功能前端代码我就再不编写了，可以留给大家继续探索，而这些剩下我们核心功能的前端代码，我也给大家放到了我们前端里边，我们后来将models里边的common模块，商品模块，整个两个文件夹最终复制到我们前端项目models里边就行了，而我们以后要做的就是对照接口。我们前端项目呢，会发送请求给服务器，服务器返回相应的数据，那想要用我已经做好的这些前端功能，那就必须按照我的接口来编写，那么项目里边的所有接口文档呢，我也给大家公共维护到了一个在线的地址，我把它这个复制过来大家看一下，比如在商品系统里边，我们需要用到的功能呢，我都在这儿编写了各种的接口，比如我们以前写过的获取所有的分类以及子分类，并且以树形结构组织的，这是我们接口的描述，包括呢，我们要发get请求，请求路径是什么，Product category list，包括我们要发，如果请求有参数的话，我这一块会说如果没有参数，我们整个响应的数据是什么？在这呢，我们解释了，我们数据呢有扣的，扣的呢是零是成功，其他错误的业务状态嘛，那就会有其他响应，还有message提示消息，包括data里边我们要响应的数据长什么样，那最终整个响应示例呢，放在这了，我们以前查询所有分类以及子分类的时候。

比如里边有求证，我返回了所有子分类这们第一个接口，包括我们以前写过修改我们分类的父子关系以及顺序的这个接口，发送P请求，这个路径包请求的时候要带什么参数，我这也有示例，带一个数组，数组里边是一个对象，对象里边要携带这几个参数，每一个参数都是什么意思，我们在这儿都有，完了以后响应数据是什么，我们在这儿也有。

大家以后呢，照着我们接口文档来编写我们后台功能。那前端的代码自然就能联调通过了，我们也欢迎大家来一起维护这个接口文档，一起开发我们系统里边更多的功能，我们在这儿呢，就只列出一些主要功能，好，我们现在先来开发我们这个属性维护，那现在的样子呢，已经在这儿了，我先想要做第一个叫属性分组，属性分组的功能呢，是我们在这儿选中一个三级分类，首先会查出这个分类下已经有的分组，如果我们想新增，还可以点击新增，我们再来添加一个分组，所以我们还需要这个三级分类的整个菜单数功能，这个菜单数我们以前做果，我们还做了拖拽效果，新增各种效果，但是我们现在只要一个展示效果，而且这个菜单数啊，在后来我们都要用到，比如我们在属性分组的时候，我们要选中一个三级分类，展示这个分类下的分组，我们在规格参数的时候，我们还得选中一个三级分类，展示这个分类下的所有基本属性。也就是规格参数。包括销。

属性我们也要这么来做，选中一个三级分类，展示这个分类下的所有销售属性，那我们就可以将这个三级分类功能我们抽取出来，所以呢，我来到我们的models里边，我来先写一个文件夹，我们先将所有要抽取的模块，我现在放到这儿，有一个叫common，在common里边呢，我就写一个叫category。第二，V，我们抽取一个三级分类的组件，我来写一个vuee，好来创建出这个模板，Out shift f这个三级分类组件呢，我们希望在其他里边，比如我们在点属性分组的时候能用到它，那么先来给属性分组创建一个它的组件，那现在按照规则，我们发送的请求是product at tr group，那么就应该有一个在product目录下有一个at tr group这个V文件，这是我们的属性分组。

好，我们同样创建出它的整个无用模板out shift f来保存。在这一块呢，它显示的效果就是左边是我们的菜单，右边是一个表格，那在显示之前呢，我们先把这个布局拿过来，我们来到layout布局里边。我们使用这种布局，EL row代表一整行CTRLC，我来复制过来，我们在tempt里边，我们使用EL row out shift f，我们重新CTRLZ一下。我们是EL肉这个，要不然它变成了div，然后现在EL肉这个20，就是每一列中间的这个间距是20，这是我们栅格系统，如果大家用过bootri相关经验，就是这个做法没有用过也没关系，我们现在就想要一个左右布局，左边一个小的菜单，右边一个大的表格，那我们将这个菜单呢在element里边每一行。

它可以拥有24列，所以我把这个去去掉，其中六列呢，当成我们这个菜单，我们的树形菜单我们准备在这显示，而剩下的18列我们都当成我们整个的表格，比如我们这一块的表格保存，那么我们最终的效果就希望是这边是我们的菜单，这边是我们表格，那我们点击某一个分类表格里面的数据叫动态变化，那这个菜单呢，我们想把它抽取出来，抽取成这个组件，当然我们也可以完全自己在这儿来写EL，像以前一样，EL里面的各种数据我们来加载，当然比较麻烦，那我们就直接呢在这儿来抽取我们这个菜单来到category里边，那我们想要用我们的菜单，把我们以前写的菜单，我直接拿过来，菜单在这儿，我们以前呢是一个EL tree，我就将整个EL tree复制一下CTRLC。

我们其他多余的功能都不要。我们把这一块呢，Span也删掉，这是一个添加删除按钮的，多余功能都不要，只要什么呢？包括拖拽功能，默认展开节点，我们把这些都删除，我们也不显示复选框，我们就只保留这三个基本数据，首先data，那就是整个EL tree所有的菜单数据绑定了一个meus，那么将这个数据呢，也复制过来，直接来到data里边。将我们整个data的return声明，我来复制一下CTRLC，但是我们要不了这么多。我把return声明。

在这儿一放。多复制一个大括号，把这个大括号呢，我们就来return，删掉auto shift f拖拽功能，以前我们这些东西的我们全部删除，包括这category节点的全部删除，这一块对话框的全部删除，那么这呢就有一个meus，它来绑定我们这一块的菜单数据，诶我们写错位置了，我们把这个mus啊。来复制一下，我们不写到at tr group里边，我们写到我们抽取的这个组件里边。Auto shift f，那么这个menu呢？在这绑定所有菜单数据，包括菜单的这个默认设置，它的name是展示的，Children是它的子节点。每一个节点呢，用cat ID来区分。包括整个EL tree组件的名字就叫menu tree，好，我来保存一下。而我们这个菜单从哪获取呢？我们把以前的这个方法也复制一下，们以前声明了一个方法叫get meus，直接把它复制过来，来到我们抽取的这个组件里边，在methods里边我们来选上，我们复制上这个get menu方法，他帮我们来发请求，要到所有的菜单数据，把这个菜单数据呢赋值给这个manus，而这个菜单数据是什么时候要呢？我们就是在组件创建完成的时候，我们可以利用它的生命周期，就像以前一样，在created的时候，我们来调一下这个方法就行了，好。

把这个一复制，这是我们抽取的组件，那我们这个抽取的组件只要一创建，会发请求，要来所有的菜单数据，把这个数据呢，绑定给menu这meus的yellow来自动展示。但是我们的这个category它只是一个公共组件，我们是想要在at tr group里边要在菜单的位置要用它，那怎么用它呢？我们说viewvo里边想要用一个组件，先要用import导入这个组件的名字，好，我们先来编写import，组件名称我们先放在这儿。from从哪导呢？我们来写一个点点杠，代表我们这个当前目录的上一层目录，我们从它的整个common里边，好，我们先来写一个叉叉，我来就写一个点点杠，我来找到它的上层的common路径，我要导入它的category，我们这个组件名呢，我们也叫category，我们把这个组件就导入进来了，那所有引入的组件都要使用components属性，注。

注册进来我们才能使用，那么就将这个组件注册进来，我直接写一个category，它的全写法呢，就是categor category意思呢，组件的名叫它组件对象就是这个对象，那简写就为它，那组件名是它了，那我们想要使用，就直接用组件名作为标签来使用就行了。作为我们标签名，我们category直接小写来来使用它就行了，来保存看一下页面效果来，我发现呢，这边的菜单已经是我们公共用的这个组件了，好，没问题，接下来是这边的表格，这表格呢就是属性分组的所有信息，那我先快速的来复制一下我们以前默认逆向生成的这个属性分组，在product慢里边resources。

S RC views models，我们来到商品里边，我们拿到这个属性分组，这个view，好，我来打开它，我们将整个表格呢复制过来，这有个EL table，好，我们将整个div直接复制。CTRLC，我们来到我们这个代码这一块位置。那在这个表格位置就要显示我们整个那个div的内容，我们把这个复制过来。奥shift f。我们前面呢，这是表格，这是表单，表单里面有查询检索，包括新增，批量删除，以及我们表格这一块的数据，包括批量删除，它在这是引入了一个弹窗，叫end or update，当然这一块也绑定了非常多的属性方法，那我们就直接将这个at tr group里边所有的东西我全部复制过来。

把这一块的呢，先复制过来。来到at tr group，诶，我们发现我们这一块呢，基本都是空的，那么就将它全部都复制过来。我们从data这一块开始复制，包括components，它又要导入一个组件，要导入的组件呢，在这我们先把data components先不复制。我们把data先来替换成原来的auto shift f，我们再来替换，我们再把除了components，其他的我们都来以复制muscles。好，我们全部复制过来。我们把这一块呢，剩下的东西我都来删掉。

把我们的复制过来，Auto shift f代码整理好，这块也没啥问题，主要呢，再来多导入一个组件，这个组件呢，我们来看它这一块的语法。多导入了一个叫and or update。而这个end or update。它是使用这个import导的import。我们写在这import呢，就是导入点杠，那就是当前文件夹，在当前文件夹下，它想导入一个at tr group and or update，那么就直接把这个at group and update这个组件我复制来。我们粘贴放到这儿。在资源管理器中打开，直接放到这。这都是逆向生成的，我们先用逆向生成的最基本的增删改查组件，包括其他的这个数据，我们来保存一下。现在我们来看页面效果，诶页面效果呢就出来了，F12看一下控制台也没有什么报错，但是呢，我们这个表格里边的这个数据啊，它有一个最大的特点，就是当我来选中手机这个三级分类的时候，它会查出手机这个类下所有的分组信息，那现在的问题就是我们可以绑定一个单机事件，当然点单击了某个三级分类，让它的表格里面的数据呢重新查询一下，但我们怎么能感知到我们点击了数里边的哪个东西，而且现在最重要的问题就是我们这个树形组件是我们抽取出来的外边的一个。

当点击这里边的某一个三级分类，我们要让at tr group动态的来刷新我们这个table表格里边的内容，查出他自己分类下的这些数据。那这个功能要怎么做？我们来说一个我里边的高级用法叫父子组件，父子组件传递数据，那我希望的就是我们的这个组件三级分类一被点以后，我们能通知引用了它的人，我被点了哪个数据副组件呢，就是我们at tr group，他赢了category，我们希望category一点他能感知到，因为他赢了category以后呢，他是在这儿进行展示的，把这个C1合并，它在这进行展示的，那怎么感知？来说一下父子组件要想传递数据。

我们现在的情况是子组件给父组件传递，我想category里边的东西哪个被点击了，希望at加group他能知道，他一知道以后呢，将下边的table变一下，所以来说子组件给父组件。传递数据，我们是使用事件机制。怎么使用事件机制，就是当子组件，比如某一个东西被点击了以后，它呢，应该给父组件发送一个事件，然后呢，这个事件携带上数据，携带上咱们这个数据副组件感知上这个事件以后，它就可以来触发这个，特别于类似于我们的冒泡，比如我们有一个大div，里边有一个小div。

当我小div点击了以后，如果能将这个事件冒给大div，大div拿到事件，拿到相应的数据，那就能做了，我们只是说类似，但是在我U里边该怎么做，我们这么来做，首先。我们来做第一个，我们在我们的子组件里边，我们的a tr group里边引入了一个category，我们现在就想知道e tree里边哪个节点被点击了，而且要让at tr group知道，那么先要做的就是给EL tree绑定，单击事件来到element里边找到yellow tree，我们有一个呢叫树形菜单。

在里边呢，我们一直翻。Tree里边呢，有一个叫事件，事件呢有一个叫node click，就是E本身，当哪个节点被点击的以后，它有这个事件，事件呢可以触发一个自己的回调，它分别传三个参数，这三个参数呢，第一个是data塔，就是当我们被点击了这个节点以后。这个节点在数组中，真正节点对应的相当于数据库里边的这个数据，还有我们被点击的整个节点的路的信息，还有我们整个节点组件本身。所以我们先要做的第一件事，我给EL tree先绑定单击事件。绑定它的这个叫node click，绑事件的写法叫ant符，我们绑了一个叫node click click事件，这都是照着文档写的，这事件呢，我希望有一个回调，回调叫node click，这个回调呢就会触发我们mans里边的一个方法，那我们这个方法呢，自然就声明为node click，他说有三个参数，这三个参数呢，分别是data和当前的节点，还有当组件本身。

所以我们就来写一个叫data，还有一个node，还有当前组件本身，比如component。当前被点击的这个组件本身，我们在控制台打印一下console.log。我们就说category这个组件，子组件category。的节点被点击，那整个的详细数据我把这三个对象已打印保存。我们先来看一下页面效果，我们先让他自己本身点的时候能感知到，好，那现在来，比如我点手机子组件category的节点被点击，第一个是data，相当于我们数据库里真正封装的这个信息，第二个是node当前节点本身，这个节点有没有子节点，包括它的所处层级以及它的负节点信息，这是路的本身，第三个是我们整个component对象，相当于是我们整个数形组件。那我们这一块呢，子节点相当于知道了我点了哪个can知道，但是得让得让at tr group知道，如果at tr group知道了，那么他就可以去来改变它里边的这个EL table，比如他重新发一个请求，把data list里边的数据一变，那台榜呢就会自动重新变利。

那怎么让at tr group知道我们这么来做，非常简单，我们在这儿使用一个叫向副组件发送事件，那这个语法呢，是这么来写，this.dollar init，哎，相当于呢，提交一个事件，然后呢，这个函数首先传第一个参数叫事件的名字，这事件名呢随便写，比如我有一个事件名叫吹node click，竖节点被点击，但事件名的写法呢，我们推荐也这么来做，比如事件名你长了要大小写区分了，你用杠写这种短横杠写法，比如我们就叫吹node click，我们现在有这么一个事件。

这就是我们第一个参数，我们可以写一个事件名，然后后边可以写任意多的东西，这东西呢，这个事件发生以后都会把它带上传出去，那我就把这三个数据全带上。这样当我们子组件一点击以后，它就会向负发送一个node click事件，并携带上这三个数据。那负如何感知？我们来到at tr group里边看一下，由于at t group引用了这个子组件category，所以呢，他可以这样感知，他说他引用的这个组件可能会散发一个叫这个事件。

叫什么事件呢？叫吹node cli这个事件，所以它就可以来绑定这个事件，子组件能往上散发这个事件，那他就可以绑定这个事件，那绑定这个事件以后触发一个自己的方法。比如我们自己的方法呢，就叫吹node。我们自己的方法呢，我们就写在了at t group的muscles里边，我们来到这，我们自己写一个no的click方法。好，我们在这呢，是感知数节点被点击，那我们这个一触发以后呢，我们比如console log，我们在控制台打印。打印，我们叫at tr group at tr感知到category。

的节点被点击。那被点击，我想知道caty哪个节点被点击了怎么办？你看我们category在网上散发事件的时候，将所有信息都给他带上了data node component，所以我们这个回调函数能感知到此节点的这个事件，以后这个事件会发三个参数过来，我们自然也能接收，比如我们再来写三个变量来接收这三个参数。好，我们写在这儿，那我们感知到被点击以后呢，被点击的详情，我们在这也一打印，那最终我们可以做到的就是。我在at tr group里边，我在控制台打印一下刚才是哪个节点被点击了，看logo，刚才被点击的菜单ID我们就能知道，怎么知道呢？由于我们data里边已经封装了。

我们之前说点击以后，子组件里边的data里边有一个cat ID，并且发给副组件了，副组件就可以拿到。那拿到这个看ID以后，我们自然就可以重新发送请求来获取我们这个三级分类下对应的这些属性分组，而不是获取所有属性分组了。好，我现在先来测试一下这个效果，子组件一点击父组件感知到来看一下。清空掉，我来准备点击子组件的手机点，我们发现呢，Category子组件被点击了，而且at tr group也感知到了，At tr group也获取到刚才被点击的菜单ID225了，所以呢子组件给父组件传递数据也是非常简单，我们只需要呢使用事件机制，子组件给父组件发送一个事件，就是用这个方法，This。Dollarit，好，这块呢就叫事件名，事件名而后边呢就是所有需要携带的数据。

携带的数据，得得得我们三个点，那就是可变数组，你能携带很多。保存，那前端的这个基本效果我们就写好了，下一节课我们先来编写第一个接口，就是呢，获取分类属性分组，如果我们知道点了哪个分类ID，查出这个分类ID下对应的所有属性分组，并且呢，这是一个分页查询，我们会提交一些分页数据，最终响应的数据呢，那就是分页数据，总记录数，每页大小，总页码等等，包括我们真正查出的分组信息。