00:00
接下来我们来编写分组的新增功能,当然点击新增按钮,我们可以新增一个分组,比如我们来写屏幕,包括它的排序,我们来给上组图标随便写一个只有这一块所属分类的ID,我们可以手工的填这些分类ID,当然这些呢其实是不符合我们页面要求的,我们希望在这一块显示的是一个分类的选择框,选择框呢可以参照element里边在form表单中有一个叫caca几点选择器,我们可以来选中某一个分类。那我们页面呢,应该做成这样的效果,包括我们刚才是在这个手机分类下,我们点的新增,那这一块默认可以选中的是手机分类,想要数据校验细节呢,还是参照我们以前的写法,我就不多说了,我们现在主要来做这个分类的几点选择,首先来到我们这个开C开,我们想要用这个几点选择器,它的用法就是使用我们的ELCAC开,它里边呢,有一个叫options属性,它是指定一个选项数组,只要指定了这个数组,我们就可以渲染出一个起点选择器,比如我们来看视例代码在下边的options里边,诶,相当于这是一个数组label value children,正这就像我们以前的菜单一样,那么就来复制一下,我们也使用这个EL开C开的。
01:19
CTRLC,我们来到我们的表单里边a tr group的新增或者修改,我们将所属分类,这一块呢,我们把它注掉,原来是这种样子,那现在使用节点选择器,而这个所属分类呢,我们就要获取到所有分类的数据,包括它也是跟data form里边catallo ID进行绑定的,我们选中了哪个,整个表单里边三级分类的ID就会变成这个,那主要就是这个options,它应该是一个数组,而且这一块呢,先绑定了一个change事件,我们暂时先不用它,我们来指定一下这个options的内容,当我们这一块可以叫categories。
02:02
我们所有的三级菜单,这个菜单数据呢,我们准备在这儿,这是一个数组,但是里边真正的内容我们应该是找服务器要过来的,而这个要呢,我们可以参照以前的category,我们直接将它的get meus这个方法我们获取过来,CTRLC我们来到我们的这一块,我们也定义一个方法。我们将这些方法说一下,我们定义一个方法就叫get can,我们可以获取到系统里边所有的菜单,而这个菜单最终返回的数据就跟我们的这个categories进行绑定。复制过来,而这个呢,我们就希望组件一创建的时候就去调用这个方法,我们可以来到生命周期里边,这里没有我们这个生命周期,我们自己来写一个。生命周期函数create,当它在创建的时候呢,我们就来调用这个方法,This,第2GET categories这样组建,一创建呢,发请求要到所有的三级分类渲染出来,我们保存,先来看一下效果。
03:08
来到我们这儿,我们现在来点击新增,我们在这来选择点点,我们发现这儿虽然可以选择,但是这一块并没有展示出真正的一些名字,这由于我们发请求获取来的这些数据啊,默认要显示的字段以及这些VALUE6值是不对的,我们可以看咱们这一块的设置,人家默认这里边都是叫label value和丘疹,我们现在虽然有丘诊了,但是这两个呢,没有,我们可以给这进行一个设置,我们来参照CAC开的设置属性,比如我们这有一个叫prop,复制我们这个开C开的props,我们来绑定一下我们这里边的设置,我们就叫props,我们把它复制过来,Props我们这要给它做一些设定,设定什么呢?我们来打开我们这个文档,我们参照这个props里边的可配置项来找一下。
04:02
在prop里边呢,有这么一些设置,其中有一个叫value,指定我们选项的哪个值作为我们最终选择的值,还有level,指定哪个值是作为标签,我们就来YY6 level以及求证来指定一下VALUE6。我们获取来的这些数据里边来可以看一下页面效果F12,当我来刷新,我们来获取菜单的时候,我们看一下这个菜单里边呢。我们的这个cat ID是最终作为选中以后要提交的值,而name是作为我们要显示的名字,而每一个里边的求阵是作为它的子集合,所以我们就来设置上这么三个属性,它的Y6值是用cat ID字段。它的label值。是用我们返回来的对象里边的name字段。还有他的丘疹,这些我们都是参照文档里边还可以设置一个丘疹。
05:06
它呢,也是按照我们返回的对象里边有一个children,把它复制过来,CTRLC。CTRLV保存,现在来看一下效果,当我来点击新增。我们在这儿呢,就可以来选中手机,通讯手机,但我们现在还发现一个问题,那们手机下并没有子集合,但是他还给我们弹出了这个选择框,原因是什么呢?我们可以看一下F12,我们在获取到这些数据以后,我们拿到这个tree,我们来看我们获取到这些数据以后,比如我们这个手机分类下。它的里边有手机通讯,手机通讯下呢有手机,有对讲机,但手机下边呢有一个丘诊,但它是一个空集合,虽然是空集合,但是它已经返回了这个字段,那我们这个element就认为我们这儿可以渲染出一个空集合,就像这样,所以我们要解决这个问题啊,就让我们后台当这个求证没有数据的时候,就不要给我们返回这个字段,还是一个空集盒了。我们现在先来看现在的效果,现在的效果呢,哪怕是空集合,我们在这儿都会显示一个空数组,如果是空集合,我们现在想做成让它没有这个字段,也非常简单,直接来到我们的controller里边,我们的category controller,我们在这儿是返回我们所有的菜单集合,我们点进来,我们最终会把他们以杰森写出去,在里边呢有一个丘诊这个属性,但是在写的时候我们可以告诉spring MC,如果它为空,就不要带这个字段了,所以我们可以使用。
06:41
一个注解叫杰森include,这是我们Jackson包下的一个注解,这include load里边呢,有一个设置项来点进来,它Y6里边能设置我们包含的类型,有一个叫always,我们总是包含这个字段和nono,然这个字段不为空的时候,我们才响应包含这个字段,包括我们可以使用这个下面直接有一个叫not empty,我们这个字段不是空,这个不是空,也包含判断空集合复制过来,所以我们在这呢,我们来指定一下这个字段要包含的规则,就是not empty,那么这个字段不为空的时候,我们返回才给你带,那我们现在这个设置完了以后呢,重新return。
07:24
我们来测试一下页面效果,以前这个球着呢为空,它还会带上空集合,比如我们这个169号的,我们现在再来查一下回车,现在拿到所有的数据,CTRLF,我们来找169号的,这个169号呢,我们来看最上边这个169,它现在没有子节点了,所以他的这个丘疹直接为空了,而他的父亲这个丘疹是有的。那我们把这一块呢,就改掉了,我们现在再来看效果刷新。我们点击新增,我们在这来选择手机,手机通讯手机,我们现在就可以选中了,包括呢,我们选中的这个值适合category ID进行绑定的,我们EC里边呢是data form category ID。
08:12
我们也可以观察一下,我们选中以后这个ID有没有发生变化。F12,打开控制台。这呢,有一点报错,好,我们先不管它,看you来到我们main content里边来找到我们这个选择框。EL table,接下来是这个table派和EL card at tr group里边的两行,第二列呢,就是我们这个新增或修改。这有一个data form,我们来看选中的这个cat log ID,我们发现它这是一个三个值,这三个值呢,相当于是把它当前分类以及它负分类的这个值都封装在这儿了,但实际上我们给数据库提交的时候,我们只要最后一个值,那为了这一块最终提交正确也显示正确,包括我们看到控制台,它说我们有一个Y6值,我们希望是一个数组get了一个string,得到了一个string。
09:09
那原因就是由于我们这个开C开在这绑定的时候,Cat log ID,我们最终发现它会绑定成一个数组值,所以我们在这必须是一个数组,而它这是一个string,但是实际上我们后来提交的是只要最后一个,所以我在这个data form里边,我们就叫cat log ids,我们跟他进行绑定,绑定但是最终要提交的时候,我们提交成cat log ID。而这个ID呢,默认先给一个零,包括我们最终在这新增保存的时候,我们来看表单提交,我们在这开始要进行新增,那新增的时候呢,Catlo ID,那就应该是catlo ids里边的最后一个,我们只要最后一个好,我们就把它拿过来,我们拿到它的长度点Les。
10:04
减一保存一下,我们现在来看一下效果。我们来刷新页面,还是来点击新增,我们输入一些信息,比如组名里边屏幕,我们就叫屏幕。包括排序,比如我们来给他输个零,然后呢,组图标随便输一个来选一个分类来,现在选的时候呢,这块就不报错了,我们绑定成一个数组以后好选中了,当我们真正要提交的时候,我们要提交的时候呢,我们会拿到它最后一个值进行提交,先来监控一下这里边的内容。Table pen,好,我们来打开yellow card里边的这个第二列,第二列里边。我们封装了end or update form。我们这个数组呢,是三个没问题,但是我们真正要去提交,我来点击确定。操作成功,他提交的是最后一个225,而且呢,表格这一块也动态刷新了,在动态刷新的原因是由于我们代码上按all update,在这一块我们提交完操作成功以后,我们this.it我们提交了一个事件,相当于子组件给父组件发送了一个事件叫refresh data list。那么在父组件。
11:23
在这儿使用子组件的时候往下翻,我们在这儿使用子组件的时候,还监听了这个事件,子组件只要动静操作成功了,发送这个事件,我们监听到以后,我们调用get data list get data list相当于我们呢又去重新发了一遍请求,查了一遍数据,所以我们看到的效果就是。当我们新增完成以后,它会自动刷新表格,请求到新的数据,我们就能看到成功新增,那接下来我们再来测试一下修改的回显,来点击刷新,我将页面刷新以后呢,我们重新来回显一下,我点修改。其他都能回线,但我们发现所属分类的ID是不能回线的,原因也一样,我们在新增的时候,由于它是一个层级关系,我们保存的时候呢,把它处理了一下,让他提交请求的时候,只保存了我们的这个最后一个分类,也就是我们这个三级分类的ID,但如果是修改的情况下,那我们就算是回显,我们也只能查查到当前分类的ID,我们并没有给它回显整个完整的路径,在这一块catalog ids里边,那下一节课呢,我们就来调整一下,让它的整个回显也都正常显示。
我来说两句