52、商品服务-API-三级分类-新增-新增效果完成

接下来我们来编写点击end为它添加子分类的功能。首先我们页面要求点击openend的按钮，我们希望弹出一个对话框，在对话框里边输入我们子分类的名字，点击确定以后呢，将这个子分类添加进去，那对话框的页面效果呢，可以参照element UI里边呢有一个组件叫对话框，好来打开。对话框的基本使用呢，也非常简单，比如这有一个例子，咱们来点击这个按钮，这个对话框就打开了，那怎么用呢？我们来看一下它的代码，对话框呢，使用EL dialogue标签，这呢就生明了一个对话框，对话框的标题是什么，我们可以写写在这，包括它的宽高，这都是动态绑定一些属性。而对话框要如何打开这一块说了，我们需要设置visible属性，诶我们发发现这个对话框里边冒号动态绑定了一个visible属性，它呢可以接收一个布尔值true或false，也就是它如果这一块是true了，那就是打开，如果是false了，那就是关闭。而且这一块的写法呢，是加了一个点SYNC的修饰符，这个修饰符是用来实现父子组件中的数据双向绑定功能的，那这个东西呢，大家先不用了解，我们后来用到的时候再说，也就是最简单，我们先把这个对话框呢复制过来，我们来放在我们的页面EL tree里边，好，我们给后边呢放一个对话框out shift f，但这一块呢，有提示报错，报错的原因就是我们必须有一个更元素比后这个time啊，必须有一个根元素，包含我们里边的所有组件。好，我写一个div，我把整个的EL trade dialo们都一包。

来保存一下，看看这个效果和div包了这两个组件以后呢，这就能用了，那我们这一块呢，主要有一个叫dialo visible属性，如果它是处对话框就打开了，所以我们呢，将这个属性绑定到data里边，我们给这个属性的值呢，默认给为false，那这样的话呢，对话框默认就是关闭的，好，这个冒号呢，写成英文冒号out shift f，对话框默认关闭。当我们。

点击end的这个按钮的时候，我们想要打开这个对话框，所以呢，我们end会调用end函数，我们来到end函数里边，我们想要打开对话框，只需要把这个属性置为处，它就打开了，等于处这就行了，包括呢这个对话框啊，它在这还。冒号绑定了一个before close，这是一个事件，比如在对话框关闭之前，会调用我们一个方法，我们把这个呢就先删掉，我们这个对话框呢，简单就写在这了，而且点击取消也相当于是把这个dialogue visible变成false，那对话框就关了，点击确定也是一样啊，变为false，那就关了，我们现在来看一下这个效果保存，然后呢，我们刷新页面。

我来点击openend，发现呢，弹出了一个对话框，我们要在这个对话框里边显示一个表单的输入项，输入我们子分类的名字，那这一块怎么做呢？还是参照我们这个对话框们以前用的是这个基本对话框，在下边呢，有一个自定义内容的，比如有一个打开嵌套表单的，在这一块呢能输入内容，我们就想要这种效果，我们直接可以把打开嵌套表单的这个对话框的内容复制过来，发现这个是EL dialog里边多添了一个叫EL form，这就是表单，你把它复制来。我们把这一块的SPA信息，我们就替换到我们用成我们的表单auto shift f代码整理一下，但这个表单的内容该怎么用，我们当然要参照表单的组件来找一下我们这个表单组件表，表单组件里面呢，就长这样子的，表单的声明就使用EL form表示就行了。表单里边呢有一个冒号model，这个model是一个动态属性，这个属性呢我们来看在我们这一块的规定，这个model呢，就是表单的数据对象，也就是整个表单里边所有内容跟哪个东西进行绑定。

比如我们跟一个三级分类对象绑定，我们就叫category，我想跟一个category绑定，那这个category对象呢，那我们就应该在这一块来声明一下，这是一个空对象，我们写好以后呢，将来表单里边每一个元素使用e form item，这是每一个表单项，表单项的这个名字好我们可以来写上，比如我们现在要输入一个分类的名字，分类名，我们三级分类的名，分类名称，然后呢，这是表单项的宽度，这个宽度我们就不用了，把这些宽度的动态绑定我们都不用了。但接下来我们看到这有一个叫EL input，这是一个input框，Input框呢用了一个叫V-model，那就是双向绑定，双向绑定什么，相当于绑定表单这个对象里边的某一个属性，好，我就绑定category里边的name，那我们这个三级分类里边，三级分类里边呢。

啊，就有一个属性name，这个name的值呢，我们先给一个空串，在这一块呢，相当于绑定了分类的名称，那其他的我们先不用，我就把它删掉，我来看一下最终的效果，我来保存，我们来到我们的页面刷新一下，当我来点击openend来，我们发现呢，弹出了一个分类名称，我们可以在这来输入分类名称，当我点击确定的时候呢，我就想要提交。那正好我们为确定按钮绑定单击函数，我们在这儿呢，是我们dialog对话框的这个确定按钮，这个确定按钮呢，它只是关对话框，我们呢就不要这个功能了，我们现在想要提交整个表单，这个对象的内容，我们就叫and category，比如我们要添加一个菜单。当这个真正要添加菜单的数据是跟我们表单的这个category对象，也就是说我们data里边的它进行绑定的，那好，我想点击确定调这个方法，那我们就希望在这muscles里边声明一个方法，把这个方法呢，我们放在这。

当我们点击end，会弹出这个对话框，对话框里面输入完内容，点击确定，再来调用这个添加。三级分类的方法，那我们这个方法呢，我们先在添加之前，我在控制台打印一下，我们现在整个要给服务器提交的数据，提交的三级分类数据，这个数据是什么？这由于我们整个表单啊，跟这个对象用。冒号model进行了绑定，所以这个对象的数据是什么，那我们就是什么，我们在这呢打印一下保存，那现在来看一下页面效果，我重新刷新，我来点击openend，分类名称，我写一个HHH，当我来点击确定这一块提示category没有定义，那要引用这个category对象必须使用this，诶，那当前view实例里边，我们想要获取它里边的任何数据都要用this来引用，好，我重新保存，那现在呢，再来刷新一下，我点击openend，我输入一个分类名字，我点击确定，我们发现呢，提交的这个三级分类数据，这有一个name叫大大。

但是真正的这个还是不够的，我们要给数据库保存一个分类，相当于要保存这么多的内容，首先分类的名字，以及它的副分类ID，以及它当前是几级分类，包括它是否显示，包括它的排序，以及它的图标、计量单位等等信息。那计量单位呢，我们也可以添加一个表单输入项，但是其他信息呢，有可能是需要计算的，比如我们这个负分类的ID，那就是在哪个人身上。

点的这个end，那我们当前的这个分类的负分类，那就是它，所以呢，我们将这些要提交的所有信息，我们都在这声明好，除了有这个name auto shift f，除了有name外，我们把其他属性都声明上，还有一个叫我们负分类的ID，我们就叫parent cid parent cid，我们用大写parent cid的值是多少，我们先写一个零给它初始化过来，包括呢，我们还要提交一个他当前是几级分位。Can label，好，我们把这个也写在这，我们还给它给一个零，以及我们默认的这个是否显示的状态，我们来给它也声明一个默认是显示的，那就是一包括呢。我们这一块的排序字段，我们想要添加一个新东西，这些都给一个默认值，比如排序字段，那默认是零，Out shift f，我来保存一下，但是呢，这些数据是要真正计算的，什么时候计算？当我来点击aend的时候，除了打开对话框，我们还要给torary里边其他的属性赋一个默认值。怎么赋值呢？比如举一个例子，我们this.parent cid，我怎么知道他附菜单的ID是几？那很简单，我在这个人身上，我点了openend，那我在控制台呢？能获取到我当前我点了openend菜单的ID，那这就是我新菜单的负ID，所以我把它取出来，我们来到这。

Parent cid呢？那就是我们调用end函数data里边传过来的cat ID，这是负分类的ID，接下来还有我们这个菜单的层级在那，层级是几呢？很简单，我们在哪个人身上点了aend，那我们这个子菜单的层级就是它的这个层级加一好，我们接下来再来复制一个属性叫this，这是我们要提交给服务器的新增的菜单，它的这个层级，但我们这块呢，写的不对，这个parent cid它是category对象里边的，以及这个cat level它也是category对象里边的。

它的这个层级呢，就等于我们当前点击的这个元素的这个层级加一，当这个层级呢，我们害怕它是一个字符串，我们给它乘以再加一，把它转化成一个数字再加一，好，这是乘积加一，那其他两个呢，我们就给他用默认值，我来保存一下，现在我们来看一下最终的效果。当我在一级分类里边，我点aend，我输一个哒哒哒，比如我点一个确定，那提交的这个数据，它的层级那就是二名字，也有包括它的parent cid，那就是我们点个这个的，当我们在二级分类里边，我点end，我再来提交一个数据，我点个确定，我们来看一下这个数据，这个数据呢，它的这个层级那就是三名字，就是我们输入的名字，以及它的负分类的ID，那就是在谁谁身上点的，那就有其他都是我们默认值直接提交给数据库的。

那至此呢，我们这一块页面的数据就准备完成了，当我们点击确定按钮以后，我们触发了这个方法，我们把这个数据呢，打印的都对，那我们想要把它提交上去也非常简单，我们逆向生成的这个工程里边早都已经逆向生成好了一个保存方法，我们直接给他发请求就行了，而且呢，它也是利用response body将提交过来的杰森数据直接转成这个对象，那正好我们页面提交的这个对象。跟我们要转换的这个对象里边的属性名都是一一对应的，所以我们页面直接提交这个对象出去，但是呢，我们得发post请求，所以说我们点击确定按钮，我们来看一下，我们在这儿点击确定按钮，触发and category函数以后，然后我们接下来要发post请求才行，Http post好发给谁呢？我们out shift f，我们发给我们当前的这个。

Product category，我们来找一下，我们发给product categor，我们三级分类的这个controller发给他，我们调用save方法们逆向生成的这个save方法，然后呢，我们将我们的数据直接发过去，我们要发哪个数据，我们都已经在这儿构造好了这个category对象，所以我们在这写一个叫this.category好，我们把它发出去。如果在这执行成功了，那我们还应该是一个成功的提示消息，这个提示消息怎么做，我们以前呢，在这做过，好我们给他提提示一个，我们这个菜单保存成功，保存成功我来保存一下，那现在来看一下我们整体效果，我们重新刷新。

我们在这个手机通讯下边，我点一个openend，我添加一个分类，比如我们叫SSS，好就是它了，我点一个确定，那么在这呢，提示菜单保存成功，成不成功，我们要看数据库，我们来找一下刷新一直往后拉，诶我们这个呢，添加成功了，它的附菜单的ID34也已经有了，但是我们想要看到最终的效果，那就是呢，把这个对话框得关掉，然后把这个菜单呢，整个都得刷新一遍，我们才能看到最终给手机通讯里边添上来的这个节点，那我们把这个方法写完呢，就是保存成功了以后，我们关闭对话框，怎么关闭对话框呢？

我们只需要把它的这个dialogue visible属性我们置为false，这样就关闭了对话框，这是第一点，第二点我们对话框关了以后呢，我们还要刷新菜单数据，并且把它之前这个节点继续展开，因为我们是给这个节点里边添加子节点的，那怎么做呢？我们接下来还是一样，像以前删除一样，我们删除成功了以后啊，我们先刷新出新的菜单，好，然后呢，我们要展开哪个，我们再来设置上默认要展开的菜单，那默认要展开的菜单呢，这个属性都是在这儿进行动态绑定的，但是现在默认要展开的菜单是我们相当于刚才要保存的这个三级分类。好，刚才要保存的这个三级分类菜单里边的相当于它的副菜单的ID，我们要展开它，所以我们把它展开，我来保存一下auto shift f，我们重新来看一下我们的效果。

整个效果呢，我们来测试，我们比如在家用电器厨卫大店里边，好，我们点一个openend，我们添加一个好随便输一个，我点击确定好HH呢已经进来了，那整个这个添加效果就做完了。